/* ========= Global font scale ========= */
html, body { font-size:15px !important; }

/* ========= Conversation List Styles ========= */
.conversation-list-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 12px;
  border-top: 1px solid var(--border-primary);
  padding-top: 12px;
}

.conversation-list-header {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
  max-height: calc(100vh - 300px);
}

/* Custom scrollbar for conversation list */
.conversation-list::-webkit-scrollbar {
  width: 6px;
}

.conversation-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
}

.conversation-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.conversation-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.conversation-item {
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
}

.conversation-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
}

.conversation-item.active {
  background: rgba(33, 150, 238, 0.15);
  border-color: rgba(33, 150, 238, 0.3);
}

.conversation-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  padding-right: 8px;
}

.conversation-date {
  display: none; /* Date removed */
}

.delete-conversation {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.conversation-item:hover .delete-conversation {
  display: flex;
}

.delete-conversation:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}

/* Sidebar split: conversations top, manual trading bottom */
.sidebar {
  display: flex;
  flex-direction: column;
}
.conversation-list-container {
  max-height: 45%;
}
.sidebar-divider {
  height: 1px;
  background: var(--xt-border);
  margin: 0 12px;
  flex-shrink: 0;
}
.sidebar-trading-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-trading-header {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--xt-text-muted);
  font-weight: 500;
  margin-bottom: 2px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
}
.sidebar-trade-row {
  display: flex;
  gap: 6px;
}
.sidebar-trade-row input {
  flex: 1;
  height: 30px;
  padding: 0 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--xt-text-primary);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-trade-row input:focus {
  border-color: var(--xt-accent);
  background: rgba(255,255,255,0.06);
}
.sidebar-trade-row input::placeholder {
  color: rgba(255,255,255,0.25);
  font-weight: 400;
}
.sidebar-trade-row button {
  height: 30px;
  padding: 0 12px;
  background: var(--xt-accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.15s;
}
.sidebar-trade-row button:hover {
  opacity: 0.85;
}
.sidebar-chart-container {
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
}
.sidebar-chart-price-row {
  padding: 6px 10px 0;
  display: flex;
  align-items: center;
}
.sidebar-trade-price {
  font-weight: 600;
  color: var(--xt-accent);
  font-size: 13px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  letter-spacing: -0.3px;
}
#sidebar-chart-wrapper {
  height: 140px;
  width: 100%;
}
.sidebar-trade-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.sidebar-trade-grid-row2 {
  grid-template-columns: 1fr 1fr 2fr;
}
.sidebar-trade-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-trade-field label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.78);
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-weight: 700;
}
.sidebar-trade-field input,
.sidebar-trade-field select {
  height: 26px;
  padding: 0 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--xt-text-primary);
  font-size: 11px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  text-align: center;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-trade-field input[type="number"] {
  appearance: textfield;
}
.sidebar-trade-field input::-webkit-inner-spin-button,
.sidebar-trade-field input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sidebar-trade-field input:focus,
.sidebar-trade-field select:focus {
  border-color: var(--xt-accent);
  background: rgba(255,255,255,0.06);
}

/* Stepper wrapper for AMOUNT + LEVERAGE — the border moves from the input
   to this container so the −/+ buttons share the same visual frame. */
.sidebar-trade-stepper {
  display: flex;
  align-items: stretch;
  height: 26px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.sidebar-trade-stepper:focus-within {
  border-color: var(--xt-accent);
  background: rgba(255,255,255,0.06);
}
.sidebar-trade-stepper input[type="number"] {
  flex: 1 1 0;
  min-width: 0;
  height: 100% !important;
  padding: 0 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--xt-text-primary);
  font-size: 11px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  text-align: center;
  outline: none !important;
  width: auto !important;
}
.sidebar-stepper-btn {
  flex-shrink: 0;
  width: 22px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--xt-master-grey, #d4d4d4);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.sidebar-stepper-btn:hover {
  background: var(--xt-master-grey-dim, rgba(212,212,212,0.15));
  color: var(--xt-master-grey-hover, #ffffff);
}
.sidebar-stepper-btn:active {
  background: var(--xt-master-grey, #d4d4d4);
  color: #1e1e1e;
}
.sidebar-stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.sidebar-trade-field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sidebar-trade-buttons {
  display: flex;
  gap: 4px;
  width: 100%;
}
.sidebar-trade-long,
.sidebar-trade-short {
  flex: 1;
  height: 26px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: filter 0.15s;
}
.sidebar-trade-long {
  background: var(--xt-success, #22c55e);
}
.sidebar-trade-long:hover {
  filter: brightness(1.1);
}
.sidebar-trade-short {
  background: var(--xt-danger, #ef4444);
}
.sidebar-trade-short:hover {
  filter: brightness(1.1);
}

/* Sidebar Activity Log — collapsed by default. The container still spans the
   remaining sidebar space (flex: 1 1 0); when collapsed, justify-content
   pushes the header button to the VERY BOTTOM and the body is hidden.
   Clicking the header toggles .open (toggleSidebarActivityLog in app-ui.js):
   header returns to the top and the body fills the space. Click-driven only —
   no listeners, no observers. */
.sidebar-activity-log {
  flex: 1 1 0;
  min-height: 34px;            /* the toggle button always stays visible even when
                                  the sections above (trending / strategy / watchlist)
                                  consume the rest of the sidebar */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* collapsed: button hugs the sidebar bottom */
  padding: 0 10px 8px;
  overflow: hidden;
}
.sidebar-activity-log.open {
  justify-content: flex-start; /* open: header on top, body fills below */
}
.sidebar-activity-log:not(.open) .sidebar-activity-body {
  display: none;
}
.sidebar-activity-header {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--xt-text-muted);
  font-weight: 500;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  padding: 6px 0;
  flex-shrink: 0;
  /* Button reset — the header is a <button> now; keep it looking like the label */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.sidebar-activity-chevron {
  flex-shrink: 0;
  transform: rotate(180deg);   /* collapsed: points up = "opens" */
  transition: transform 0.15s;
}
.sidebar-activity-log.open .sidebar-activity-chevron {
  transform: rotate(0deg);     /* open: little arrow down = "closes" */
}
.sidebar-activity-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  font-size: 10px;
  line-height: 1.5;
}
.sidebar-activity-body::-webkit-scrollbar { width: 4px; }
.sidebar-activity-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-activity-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.sidebar-log-line {
  color: rgba(255,255,255,0.55);
  padding: 2px 0;
  word-break: break-word;
}
.sidebar-log-line strong {
  color: var(--xt-success, #22c55e);
  font-weight: 600;
}
.sidebar-log-line.log-sell strong {
  color: var(--xt-danger, #ef4444);
}
.sidebar-log-line.log-info strong {
  color: var(--xt-accent, #2196ee);
}
.sidebar-log-ts {
  color: rgba(255,255,255,0.3);
  font-size: 9px;
}
.sidebar-log-empty {
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 20px 0;
}

/* Right Panel — Panel Title */
.xt-panel-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--xt-accent, #2196ee);
  font-weight: 700;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  margin: 0;
  padding: 0;
}

/* Right Panel — Active Trading View */
.rp-section {
  margin-bottom: 16px;
}
.rp-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  margin-bottom: 8px;
}

/* Section-title with a trailing control (the trade-sound toggle on the
   MANUAL TRADING header). Flex row so the title stays left, control right. */
.rp-section-title.rp-section-title-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Trade-sound mute/unmute toggle — single tone plays on every position
   open/close/flip. master-grey + currentColor keep it correct in both themes. */
.trade-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--xt-master-grey);
  cursor: pointer;
  flex: 0 0 auto;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
.trade-sound-toggle:hover {
  color: var(--xt-master-grey-hover, var(--xt-master-grey));
  background: var(--xt-master-grey-dim, rgba(127, 127, 127, 0.14));
}
.trade-sound-toggle.sound-off { opacity: 0.5; }
.rp-positions-scroll {
  flex: 1;
  min-height: 0;
  max-height: 450px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rp-positions-scroll::-webkit-scrollbar { width: 5px; }
.rp-positions-scroll::-webkit-scrollbar-track { background: transparent; }
.rp-positions-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
/* Position Cards */
.rp-pos-card {
  background: var(--xt-bg-card, #1f1f1f);
  border: 1px solid var(--xt-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.rp-pos-card:hover {
  border-color: rgba(255,255,255,0.2);
}
.rp-pos-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rp-pos-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.rp-pos-symbol {
  font-weight: 700;
  font-size: 14px;
  color: var(--xt-accent, #2196ee);
  cursor: pointer;
  letter-spacing: 0.3px;
}
.rp-pos-symbol:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rp-pos-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.3px;
}
.rp-pos-pnl {
  margin-left: auto;
  font-weight: 700;
  font-size: 13px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  letter-spacing: -0.3px;
}
.rp-pos-pnl.positive { color: var(--xt-success, #22c55e); }
.rp-pos-pnl.negative { color: var(--xt-danger, #ef4444); }
.rp-pos-pnl small { font-weight: 400; opacity: 0.6; font-size: 11px; }
.rp-pos-detail {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.2px;
}
.rp-pos-detail .xt-inline-tpsl {
  width: 52px;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
}
.rp-pos-card .xt-atb-close-position {
  margin-left: auto;
  font-size: 9px;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.rp-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
  border-top: 1px solid var(--xt-border);
}

/* Graph Panel (expandable, reusable for charts) */
.xt-graph-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  bottom: 0;
  background: var(--xt-bg-secondary, #1a1a1a);
  border-left: 1px solid var(--xt-border);
  z-index: 102;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.2);
}
.xt-graph-panel:not(.hidden) {
  transform: translateX(0);
}
.xt-graph-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xt-border);
  flex-shrink: 0;
}
.xt-graph-panel-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--xt-text-muted);
  font-weight: 500;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
}
.xt-graph-panel-close {
  background: transparent;
  border: none;
  color: var(--xt-text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.xt-graph-panel-close:hover {
  color: var(--xt-text-primary);
}
.xt-graph-panel-price {
  padding: 8px 16px 0;
  font-weight: 600;
  color: var(--xt-accent, #2196ee);
  font-size: 15px;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}
.xt-graph-panel-body {
  flex: 1;
  min-height: 200px;
  padding: 0 8px 8px;
}

/* Mobile adjustments for conversation list */
@media (max-width: 920px) {
  .conversation-list-container {
    display: none; /* Hide on mobile since sidebar is hidden */
  }
  .sidebar-trading-panel {
    display: none;
  }
  .sidebar-divider {
    display: none;
  }
}

/* Sidebar collapse button (desktop) — lives outside sidebar */
.sidebar-collapse-btn {
  position: fixed;
  top: 12px;
  left: calc(var(--sidebar-w) - 36px);
  width: 28px;
  height: 28px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: 50%;
  color: var(--xt-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  transition: left 0.3s, background 0.2s;
  padding: 0;
}
.sidebar-collapse-btn:hover {
  background: var(--xt-bg-card);
  color: var(--xt-text-primary);
}
.sidebar-collapse-btn svg {
  transition: transform 0.3s;
}
body.sidebar-collapsed .sidebar-collapse-btn {
  left: 8px;
}
body.sidebar-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Sidebar collapsed state */
body.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  overflow: hidden;
}
body.sidebar-collapsed .sidebar > * {
  opacity: 0;
  pointer-events: none;
}

/* Add toggle button for mobile sidebar */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10002;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

@media (max-width: 920px) {
  .sidebar-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 280px;
    z-index: 10001;
    transition: left 0.3s ease;
  }

  .sidebar.open {
    left: 0;
  }

  .conversation-list-container {
    display: flex; /* Show when sidebar is open */
  }

  /* Overlay when sidebar is open */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
  }

  .sidebar-overlay.show {
    display: block;
  }
}

/* ========= Sector Dropdown ========= */
.sector-dropdown {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #e5e7eb;
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  min-width: 130px;
  width: 130px;
  text-align: left;
  position: relative;
  /* Custom styling to control dropdown */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(229, 231, 235, 0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 16px !important;
}

.sector-dropdown:hover {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.3);
}

.sector-dropdown:focus {
  background: none !important;
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.4);
}

.sector-dropdown:active {
  background: none !important;
  background-color: transparent !important;
}

.sector-dropdown option {
  background: transparent !important;
  background-color: transparent !important;
  color: #e5e7eb;
}

.sector-dropdown option:checked {
  background: transparent !important;
  background-color: transparent !important;
}

.sector-dropdown option:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========= Prompt Category Buttons ========= */
.prompt-buttons-wrapper {
  display: flex;
  gap: 4px;
  margin-right: 8px;
  position: relative;
}

.prompt-category-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(145, 146, 148, 0.3);
  background: transparent;
  color: rgba(145, 146, 148, 0.8);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 0;
  position: relative;
}

/* Tooltip for prompt buttons - only show on hover BELOW the button */
.prompt-category-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(145, 146, 148, 0.5);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: normal;
  letter-spacing: 0.3px;
  z-index: 1000;
}

.prompt-category-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

.prompt-category-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(145, 146, 148, 0.5);
  transform: translateY(-1px);
}

.prompt-category-btn:active {
  transform: translateY(0);
}

.prompt-category-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.prompt-category-btn.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(145, 146, 148, 0.6);
  color: #ffffff;
}

/* ========= Centered, narrower column ========= */
.main .wrap, .wrap{
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.chat, .messages, .composer{
  width: min(720px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ========= Performance optimizations ========= */
.messages { 
  background:transparent !important; 
  border:0 !important; 
  box-shadow:none !important;
  /* Add performance hints */
  will-change: scroll-position;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}

.bubble{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  max-width:100% !important;
  line-height:1.55 !important;
  white-space:normal !important;
  word-wrap:break-word !important;
  word-break:break-word !important;
  /* Prevent layout thrashing */
  contain: layout style;
}

/* ========= SPACING BETWEEN MESSAGES ========= */
.row{
  gap:.6rem !important;
  margin: 12px 0 !important;
}

/* Add spacing after user messages */
.row.user {
  margin-bottom: 16px !important;
}

/* Add spacing after bot messages */
.row.bot {
  margin-bottom: 16px !important;
}

/* Avatar: show for bot, hide for user */
.avatar.user{ display:none !important; }
.row.user .avatar{ display:none !important; }

/* User messages: right, very light bg, tighter vertical padding.
   Squared 6px corners (Phase G — Claude-style minimalist, not pillows). */
.row.user{ justify-content:flex-end !important; }
.row.user .bubble{
  background: rgba(255,255,255,0.06) !important;
  color: #e5e7eb !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  line-height: 1.45 !important;
  max-width: 72% !important;
}

/* Assistant stays plain (no bubble) by default */
.row.bot .bubble{
  background: transparent !important;
  padding: 2px 12px !important;
  border-radius: 6px !important;
}

/* Proper paragraph spacing in bot messages */
.row.bot .bubble p {
  display: block !important;
  margin: 0 0 12px 0 !important;
}
.row.bot .bubble p:last-child {
  margin-bottom: 0 !important;
}

/* ========= FINANCIAL BUBBLE STYLE (for [3] responses) ========= */
.row.bot .bubble.financial-bubble {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e5e5e5 !important;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease !important;
}

/* Remove ALL list spacing in financial bubbles */
.financial-bubble ul, .financial-bubble ol { margin: 0 !important; padding-left: 1em !important; }
.financial-bubble li { margin: 0 !important; padding: 0 !important; }
.financial-bubble ul ul, .financial-bubble ol ol { margin: 0 !important; }
.financial-bubble p { margin: 0 !important; }

/* Hover effect for financial bubbles */
.row.bot .bubble.financial-bubble:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Add a subtle white glow effect to financial bubbles */
.row.bot .bubble.financial-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.8), 
    transparent
  );
  animation: shimmer 3s 1;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Confidence Score Section Styling */
.confidence-score-section {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #383838 !important;
}

.confidence-score-section::after {
  content: '';
  display: block;
  height: 1px;
  background: #383838;
  margin-top: 16px;
}

/* Position Title Colors */
.position-title {
  font-weight: 600 !important;
  font-size: 16px !important;
  margin-bottom: 12px !important;
  color: #e5e7eb !important;
}

.position-title .position-long {
  color: #2196ee !important;
}

.position-title .position-short {
  color: #ff5459 !important;
}

.position-title .position-hold {
  color: #ffffff !important;
}

/* Alternative professional bubble style (comment out the gradient one and use this if preferred) */
/*
.row.bot .bubble.financial-bubble {
  background: #0f172a !important;
  border: 2px solid #1e293b !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  margin: 16px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e2e8f0 !important;
  font-family: 'IBM Plex Mono', ui-monospace, 'Monaco', 'Menlo', monospace !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
*/

/* ========= GPT-style composer (pill, no border line) ========= */
.inputbar{
  display:flex; align-items:center; gap:10px;
  background: #1F1F1F !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}
.inputbar:focus-within{
  background: #252525 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Textarea inside the composer — shorter / less tall per user request. */
textarea{
  flex:1;
  background: transparent !important;
  color: #e5e7eb !important;
  border: 0 !important; outline: 0 !important;
  resize: none !important;
  min-height: 28px !important;
  max-height: 240px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  padding: 6px 10px !important;
}
textarea::placeholder{ color: rgba(229,231,235,0.55) !important; }

/* Hint/status line */
.composer .meta{
  margin-left: -8px !important;
  margin-top: 6px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  color: rgba(229,231,235,0.75) !important;
}

/* Send button */
.sendbtn{
  flex: 0 0 28px !important;
  height: 28px !important; width: 28px !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background: rgba(255,255,255,0.12) !important;
  color: #e5e7eb !important;
  display: grid !important; place-items: center !important;
  cursor: pointer;
}
.sendbtn:hover{ background: rgba(255,255,255,0.18) !important; }
.sendbtn:active{ background: rgba(255,255,255,0.22) !important; }
.sendbtn svg{ width:14px; height:14px; }

/* Wrapper for toggle button and arrow */
.toggle-btn-wrapper {
  position: relative;
  flex: 0 0 24px !important;
  height: 24px !important;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toggle prompts button in textbox center right */
.toggle-prompts-btn-widget {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(145, 146, 148, 0.3) !important;
  background: transparent !important;
  color: rgba(145, 146, 148, 0.8) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.toggle-prompts-btn-widget:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgb(145, 146, 148) !important;
  border-color: rgba(145, 146, 148, 0.5) !important;
}

/* Arrow hint animation */
.toggle-hint-arrow {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  color: rgb(145, 146, 148);
  font-size: 16px;
  pointer-events: none;
  animation: bounce-up-down 1.5s ease-in-out infinite;
}

@keyframes bounce-up-down {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* ========= Spinner (progress) ========= */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.20); position:relative; visibility:hidden;
}
.spinner.show{ visibility:visible; }
.meta .spinner{ animation: spin .9s linear infinite !important; border-color: rgba(255,255,255,.25); }
.meta .spinner::after{
  content:""; position:absolute; top:-1px; left:50%;
  width:4px; height:4px; margin-left:-2px; background:rgba(255,255,255,.95); border-radius:50%;
}
/* fallback spinner if used inside messages */
.bubble .spinner{ border-top-color: rgba(255,255,255,.9); animation: spin .8s linear infinite !important; }

/* ========= Widget System ========= */
/* Widget container */
.widget-container {
  position: fixed;
  right: 20px;
  top: 100px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.widget-container::-webkit-scrollbar { display: none; }

/* Individual widget */
.widget {
  background: #1a1a1a;
  border: 1px solid rgba(60, 60, 60, 0.4);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  animation: slideInRight 0.3s ease-out;
  min-height: auto;
  max-height: none;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Widget status bar (top color indicator) */
.widget-status-bar {
  height: 1.5px;
  background: #ffffff;
  transition: background-color 0.3s ease;
}
.widget-status-bar.positive { background: #2196ee; }
.widget-status-bar.negative { background: #ff5459; }
.widget-status-bar.neutral { background: #ffffff; }
.widget-status-bar.profit { background: #2196ee; }
.widget-status-bar.loss { background: #ff5459; }

/* Widget header */
.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 4px 8px;
  border-bottom: 1px solid rgba(60, 60, 60, 0.2);
}

.widget-title {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.widget-symbol {
  font-size: 11px;
  color: #ffffff;
  font-weight: 600;
}

/* Widget close button */
.widget-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.widget-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* Widget body */
.widget-body {
  padding: 8px;
  max-height: none;
  overflow: visible;
}

.widget-value {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 2px;
}

.widget-value.positive { color: #2196ee; }
.widget-value.negative { color: #ff5459; }
.widget-value.loading {
  color: #94a3b8;
  font-style: italic;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Smaller font for specvix dual percentage display */
.widget[data-tool="specvix"] .widget-value {
  font-size: 14px;
}

/* Position widget specific */
.widget-position {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.widget-position-type {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 9px;
}

.widget-pnl {
  font-size: 14px;
  font-weight: bold;
  margin-top: 6px;
}

.widget-pnl.profit { color: #2196ee; }
.widget-pnl.loss { color: #ff5459; }

/* Pagination button for indicators/technicals widgets */
.widget-pagination-btn {
  position: relative;
  display: block;
  margin: 8px 0 4px auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.widget-pagination-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.widget-pagination-btn:active {
  transform: scale(0.95);
}

/* Font size for paginated prompts (indicators/technicals) */
.paginated-prompt .prompt-text {
  font-size: 12px !important;
  line-height: 1.3;
}

/* Prompt button alignment */
.widget-prompt-btn {
  text-align: left;
  display: block;
  width: 100%;
}

/* Ensure widget body has relative positioning for absolute pagination button */
.widget-body {
  position: relative;
}

/* Last update time */
.widget-update-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
  text-align: right;
}

/* Widget border for data responses - NOW CLICKABLE WITH DARK BACKGROUND */
.row.bot .bubble.widget-capable {
  background: #1a1f2e !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  margin: 8px 0 !important;
  width: 100% !important;
  max-width: none !important;
  color: #e5e5e5 !important;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease !important;
}

/* Remove ALL list spacing in widget-capable bubbles */
.widget-capable ul, .widget-capable ol { margin: 0 !important; padding-left: 1em !important; }
.widget-capable li { margin: 0 !important; padding: 0 !important; }
.widget-capable ul ul, .widget-capable ol ol { margin: 0 !important; }
.widget-capable p { margin: 0 !important; }

/* Hover effect for widget-capable bubbles */
.row.bot .bubble.widget-capable:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Widget add button - MINIMAL ARROW */
.widget-add-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 300 !important;
  z-index: 10000 !important;
  box-shadow: none !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  line-height: 1 !important;
  min-width: auto !important;
  height: auto !important;
}

.widget-add-btn svg {
  display: none !important; /* Hide the SVG icon */
}

.widget-add-btn span {
  display: none !important; /* Hide the TRACK text */
}

/* Hide arrow for widget-capable bubbles (technical indicators) and financial bubbles (position advice) */
.bubble.widget-capable .widget-add-btn,
.bubble.financial-bubble .widget-add-btn {
  display: none !important;
}

/* Make HOLD position bubbles non-clickable */
.bubble.position-hold {
  cursor: default !important;
  pointer-events: none !important;
}

.widget-add-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.widget-add-btn:active {
  transform: translateY(0) scale(1.02) !important;
}

/* Widget add button for Mixtral bubbles */
.bubble.financial-bubble .widget-add-btn {
  top: 16px;
  right: 16px;
}

/* ========= PRICE CHART STYLING ========= */
.price-chart-container {
  max-width: 100%;
  margin: 24px 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 20px;
  box-shadow: none;
  overflow: hidden;
}

/* Indicator charts - with border restored */
.price-chart-container.indicator-chart {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 0 16px 0;
  margin-bottom: 16px;
}

.chart-symbol-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-symbol {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chart-price-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chart-current-price {
  font-size: 26px;
  font-weight: 700;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #ffffff !important;
}

.chart-percent-change {
  font-size: 13px;
  font-weight: 600;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.chart-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.chart-type-toggle {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 2px;
}

.chart-type-btn {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 12px;
  background: transparent;
  border-radius: 5px;
  border: none;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-type-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.chart-type-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.chart-timeframe-controls {
  display: flex;
  gap: 4px;
}

.chart-timeframe-btn {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 10px;
  background: transparent;
  border-radius: 3px;
  border: none;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chart-timeframe-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.chart-timeframe-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.chart-canvas-wrapper {
  position: relative;
  height: 320px;
  width: 100%;
  background: transparent;
}

.chart-canvas-wrapper canvas {
  max-width: 100%;
  height: 100% !important;
  /* Add subtle shadow effect to the chart line */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.chart-error {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  margin: 16px 0;
  font-size: 13px;
}

/* ========= EXAMPLE PROMPTS FLIP CARD ========= */
.example-prompts-card {
  position: fixed;
  bottom: calc(var(--composer-h) + var(--composer-bottom) + var(--composer-gap) + 4px);
  left: var(--sidebar-w);
  right: 0;
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
  z-index: 5;
  perspective: 1000px;
  height: 110px;
  pointer-events: none;
}

.example-prompts-card * {
  pointer-events: auto;
}

@media (max-width: 920px) {
  .example-prompts-card {
    left: 0;
    right: 0;
  }
}

.example-prompts-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.example-prompts-card.flipped .example-prompts-card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: rgb(28, 28, 28);
  border: none;
  border-radius: 8px;
  padding: 12px 40px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-face::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.card-front {
  transform: rotateY(0deg);
}

.card-back {
  transform: rotateY(180deg);
}

/* Flip card button (mirror) - HIDDEN until pro mode ready */
.flip-card-btn {
  display: none;
}

/* Refresh button for prompts - moved to top right */
.refresh-prompts-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1000;
  background: transparent;
  border: none;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  transition: all 0.2s ease;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.refresh-prompts-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(90deg);
}

.refresh-prompts-btn:active {
  transform: rotate(180deg);
}

.card-section {
  margin-bottom: 20px;
}

.card-section:last-child {
  margin-bottom: 0;
}

.card-section-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.prompt-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  color: rgb(145, 146, 148);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.3;
}

.prompt-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Fade animation for prompt grid */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Split-flap animation - EXACT from your provided code */
@keyframes flip {
  from { transform: rotateX(-0deg); }
  to { transform: rotateX(-90deg); }
}

@keyframes bflip {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}

.prompt-btn .flap {
  display: inline-flex;
  flex-direction: column;
  perspective: 700px;
  overflow: hidden;
  position: relative;
  width: 8px;
  height: 15px;
  margin: 0;
  flex-shrink: 0;
}

/* Space characters should be completely invisible */
.prompt-btn .flap.space-char {
  width: 4px; /* Smaller width for spaces */
}

.prompt-btn .flap.space-char .top,
.prompt-btn .flap.space-char .bottom {
  background-color: transparent !important;
}

.prompt-btn .flap.space-char .top-flap-visible,
.prompt-btn .flap.space-char .top-flap-queued,
.prompt-btn .flap.space-char .bottom-flap-visible,
.prompt-btn .flap.space-char .bottom-flap-queued {
  background-color: transparent !important;
  color: transparent !important;
  opacity: 0;
}

.prompt-btn .flap.space-char .top {
  border-bottom: none !important;
}

.prompt-btn .top {
  border-bottom: none;
}

.prompt-btn .top,
.prompt-btn .bottom {
  width: 100%;
  height: 50%;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.prompt-btn .top-flap-visible,
.prompt-btn .top-flap-queued {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(20, 20, 20, 0.6);
  z-index: 2;
  color: rgb(255, 255, 255);
  font-size: 12px;
  overflow: hidden;
}

.prompt-btn .top-flap-queued {
  z-index: 1;
}

.prompt-btn .bottom-flap-visible,
.prompt-btn .bottom-flap-queued {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(10, 10, 10, 0.6);
  z-index: 1;
  overflow: hidden;
  color: rgb(255, 255, 255);
  font-size: 12px;
}

.prompt-btn .top span {
  display: block;
  line-height: 15px;
  height: 15px;
  margin-top: 0;
}

.prompt-btn .bottom span {
  display: block;
  line-height: 15px;
  height: 15px;
  margin-top: -7.5px;
}

.prompt-btn .bottom-flap-queued {
  z-index: 2;
  transform: rotateX(90deg);
  overflow: hidden;
}

.prompt-btn .top-flap-animation {
  animation: flip 0.02s ease-in;
  transform-origin: bottom;
}

.prompt-btn .bottom-flap-animation {
  animation: bflip 0.02s ease-in;
  transform-origin: top;
  animation-delay: 0.02s;
}

/* ========= SCROLL TO BOTTOM BUTTON =========
   Centered horizontally above the composer. Matches the composer's exact
   left/right coordinate range so it always lines up with the input box's
   center — both when the right panel is closed AND when it's open. */
.scroll-to-bottom-btn {
  position: fixed;
  /* Sit above the composer (above the visible input box, not on it).
     composer-h is the composer container, composer-bottom is its offset
     from the viewport bottom — extra 56px clearance puts the button in the
     chat area cleanly above the input. */
  bottom: calc(var(--composer-h) + var(--composer-bottom) + 56px);
  /* Same horizontal range as .composer (index.html:2253-2257). */
  left: calc(var(--sidebar-w) + var(--page-pad));
  right: var(--page-pad);
  margin-left: auto;
  margin-right: auto;
  width: 32px;
  height: 32px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: right 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* When the right panel is open the composer's right shifts to
   `calc(40% + var(--page-pad))` (status.css:2381). Match that here so the
   button stays centered above the now-narrower composer. */
body.xt-panel-open .scroll-to-bottom-btn {
  right: calc(40% + var(--page-pad));
}

.scroll-to-bottom-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.scroll-to-bottom-btn svg {
  width: 20px;
  height: 20px;
}

/* ========= PREMIUM BLUR FOR KEY FACTORS ========= */
.premium-blur-section {
  position: relative;
  display: inline-block;
}

.premium-blur-content {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

.premium-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 600;
  font-style: italic;
  margin-left: 6px;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.premium-info-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.premium-info-icon .premium-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 26, 0.95);
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
  pointer-events: none;
}

.premium-info-icon:hover .premium-tooltip {
  visibility: visible;
  opacity: 1;
}

/* ========= MOBILE RESPONSIVE ========= */
@media (max-width: 920px) {
  /* Prompt category buttons tooltips - hide on mobile */
  .prompt-category-btn::after {
    display: none;
  }

  /* Scroll to bottom button mobile — keep centered above composer.
     Mobile composer is `left/right: var(--page-pad)` (no sidebar inset). */
  .scroll-to-bottom-btn {
    width: 28px;
    height: 28px;
    bottom: calc(var(--composer-h) + var(--composer-bottom) + 44px);
    left: var(--page-pad);
    right: var(--page-pad);
  }
  /* On mobile the right panel goes full-screen overlay, so when it's open
     the button should hide rather than try to slide left into nothing. */
  body.xt-panel-open .scroll-to-bottom-btn {
    display: none !important;
  }

  .scroll-to-bottom-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Widget add button mobile */
  .widget-add-btn {
    font-size: 16px !important;
    padding: 2px 8px !important;
  }

  /* Chart mobile adjustments */
  .chart-symbol {
    font-size: 13px;
  }

  .chart-current-price {
    font-size: 20px;
  }

  .chart-percent-change {
    font-size: 12px;
  }

  .chart-type-btn,
  .chart-timeframe-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
}

@media (max-width: 375px) {
  /* Extra small mobile adjustments */
  .widget-container {
    top: 50px;
  }

  .scroll-to-bottom-btn {
    width: 26px;
    height: 26px;
  }
}
/* =============================================
   V2 Panel System CSS (moved from index.html)
   ============================================= */
/* ========= PROGRESS STEPPER (Mockup Design) ========= */
.xt-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
}

.xt-stepper-back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--xt-border);
  border-radius: 50%;
  color: var(--xt-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.xt-stepper-back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--xt-text-primary);
}

.xt-stepper-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.xt-stepper-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.xt-step {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--xt-text-muted);
  background: transparent;
  transition: all 0.2s;
}

.xt-step-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}

/* Active step */
.xt-step.active .xt-step-dot {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
}

.xt-step.active .xt-step-label {
  color: var(--xt-text-primary);
}

/* Disabled (future) steps */
.xt-step:not(.active):not(.completed) {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Completed step */
.xt-step.completed .xt-step-dot {
  background: var(--xt-success);
  border-color: var(--xt-success);
  position: relative;
}

.xt-step.completed .xt-step-dot::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
  color: white;
  font-weight: bold;
}

.xt-step.completed .xt-step-label {
  color: var(--xt-success);
}

/* Clickable completed steps */
.xt-step.completed:hover .xt-step-label {
  color: var(--xt-accent);
}

/* Upcoming/locked step */
.xt-step.locked {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Step connector */
.xt-step-connector {
  width: 16px;
  height: 2px;
  background: var(--xt-border);
  transition: background 0.2s;
}

.xt-step-connector.completed {
  background: var(--xt-success);
}

/* Mobile Stepper */
@media (max-width: 768px) {
  .xt-stepper {
    padding: 6px 12px 8px;
  }

  .xt-stepper-steps {
    justify-content: center;
    gap: 8px;
  }

  .xt-step {
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .xt-step-dot {
    width: 14px;
    height: 14px;
  }

  .xt-step-connector {
    display: none;
  }

  .xt-step-label {
    display: none;
  }

  .xt-step.active .xt-step-label {
    display: inline;
    font-size: 10px;
  }

  .xt-stepper-back {
    display: none !important;
  }

  .xt-stepper-close {
    min-width: 44px;
    min-height: 44px;
    width: 36px;
    height: 36px;
  }
}

/* ========= WELCOME SCREEN & EXPERIENCE BUTTONS ========= */
.xt-experience-buttons {
  display: flex;
  gap: 8px;
  padding: 8px 20px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.xt-experience-btn {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--xt-master-grey);
  border-radius: 20px;
  color: var(--xt-master-grey);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
}

.xt-experience-btn:hover {
  background: var(--xt-master-grey-dim);
  transform: translateY(-1px);
}

.xt-experience-btn.selected {
  background: var(--xt-master-grey);
  color: #1e1e1e;
}

/* Goal buttons (Q2) */
.xt-goal-buttons {
  display: flex;
  gap: 8px;
  padding: 8px 20px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.xt-goal-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--xt-master-grey);
  border-radius: 20px;
  color: var(--xt-master-grey);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
}

.xt-goal-btn:hover {
  background: var(--xt-master-grey-dim);
  transform: translateY(-1px);
}

.xt-goal-btn.selected {
  background: var(--xt-master-grey);
  color: #1e1e1e;
}

/* ========= RIGHT PANEL RESIZE HANDLE ========= */
.xt-panel-resize-handle {
  display: none;
  position: fixed;
  top: 0;
  width: 6px;
  height: 100vh;
  cursor: col-resize;
  z-index: 101;
  background: transparent;
  transition: background 0.15s;
}
.xt-panel-resize-handle:hover,
.xt-panel-resize-handle.dragging {
  background: var(--xt-accent);
  opacity: 0.5;
}
body.xt-panel-open .xt-panel-resize-handle {
  display: block;
}
@media (max-width: 768px) {
  .xt-panel-resize-handle { display: none !important; }
}

/* ========= RIGHT PANEL CONTAINER ========= */
.xt-right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  min-width: 380px;
  max-width: 600px;
  height: 100vh;
  background: var(--xt-bg-secondary);
  border-left: 1px solid var(--xt-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.xt-right-panel.visible {
  transform: translateX(0);
}

.right-panel-collapse-btn {
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--xt-bg-secondary, #1a1a1a);
  border: 1.5px solid rgba(33,150,238,0.4);
  color: var(--xt-accent, #2196ee);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s, border-color 0.15s;
  padding: 0;
  box-shadow: -2px 0 10px rgba(0,0,0,0.25);
}
.right-panel-collapse-btn:hover {
  color: var(--xt-text-primary);
  background: var(--xt-bg-card);
  box-shadow: -2px 0 12px rgba(0,0,0,0.35);
}
.right-panel-collapse-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}
.xt-right-panel.visible .right-panel-collapse-btn svg {
  transform: rotate(180deg);
}

.xt-right-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--xt-border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.xt-right-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
  overscroll-behavior: contain; /* Prevent background scroll when scrolling panel */
}

.xt-right-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--xt-text-primary);
  margin-bottom: 4px;
}

.xt-right-panel-subtitle {
  font-size: 13px;
  color: var(--xt-text-secondary);
}

/* Adjust main content when right panel is visible */
body.xt-panel-open .main {
  width: calc(100% - 40vw) !important;
  max-width: calc(100% - 40vw) !important;
  margin-right: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

body.xt-panel-open .wrap {
  width: 100% !important;
  max-width: 100% !important;
}

body.xt-panel-open .chat,
body.xt-panel-open .messages {
  width: 100% !important;
  max-width: 100% !important;
}

body.xt-panel-open .composer {
  width: auto !important;
  right: calc(40% + var(--page-pad));
  transition: right 0.3s ease;
}

body.xt-panel-open header {
  overflow: hidden;
  min-width: 0;
}

body.xt-panel-open .auth-buttons {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* NOTE: this rule used to also hide .call-btn and .login-btn when the right
   panel is open. Since the AAPL default view keeps the panel open ON LOAD for
   every desktop visitor, hiding those meant guests never saw Sign In or
   Get a Call at all. Pills are compact (26px) — they fit; only the guest
   badge stays hidden. */
body.xt-panel-open .guest-badge {
  display: none;
}

body.xt-panel-open .messages {
  overflow-x: hidden;
}

@media (max-width: 1200px) {
  .xt-right-panel {
    width: 100%;
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  /* ========= MOBILE BOTTOM SHEET PANEL ========= */
  .xt-right-panel {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    background: var(--bg-dark-primary, #1e1e1e) !important;
    z-index: 10002;
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }

  .xt-right-panel.visible {
    transform: translateY(0);
  }

  /* Drag handle */
  .xt-right-panel::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    z-index: 1;
  }

  /* Collapse button — inline in header flex row on mobile */
  .right-panel-collapse-btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 28px;
    height: 28px;
    min-height: auto;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
    border: 1px solid var(--xt-border);
  }

  /* Arrow points DOWN when panel is open (close = slide down) */
  .xt-right-panel.visible .right-panel-collapse-btn svg {
    transform: rotate(-90deg) !important;
  }

  .xt-right-panel-header {
    padding: 2px 16px 4px;
  }

  .xt-right-panel-content {
    padding: 4px 16px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Reserve space for mobile trading bar (z-index 10003, always on top) */
  .xt-right-panel {
    padding-bottom: calc(var(--mobile-trading-bar-h, 48px) + env(safe-area-inset-bottom, 0px));
  }


  /* Landscape blocked by overlay — no special panel sizing needed */

  /* ========= MOBILE EXPERIENCE BUTTONS ========= */
  .xt-experience-buttons {
    flex-direction: column;
    gap: 10px;
    padding: 0 16px;
    align-items: stretch;
  }

  .xt-experience-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
  }

  /* ========= MOBILE PORTFOLIO CARDS — CSS grid layout ========= */
  .xt-portfolio-item {
    display: grid !important;
    grid-template-columns: 10px auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    flex-direction: unset;
    flex-wrap: unset;
  }
  .xt-portfolio-color {
    width: 10px;
    height: 10px;
  }
  .xt-portfolio-info {
    min-width: 0;
    max-width: none;
  }
  .xt-portfolio-symbol {
    font-size: 12px;
  }
  .xt-portfolio-name {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xt-portfolio-allocation {
    min-width: auto;
    gap: 2px;
    justify-self: end;
  }
  .xt-allocation-input {
    width: 38px;
    padding: 3px 4px;
    font-size: 12px;
  }
  .xt-allocation-percent {
    font-size: 11px;
  }
  .xt-portfolio-strategy {
    padding: 3px 6px;
    font-size: 10px;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xt-portfolio-remove {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
  .xt-cash-rate {
    font-size: 10px;
  }
  .xt-cash-rate input {
    width: 32px;
    font-size: 10px;
  }

  /* ========= MOBILE AI BADGE — bigger touch target ========= */
  .ai-validated-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: -10px -6px;
    cursor: pointer;
  }
  .ai-validated-badge svg {
    width: 24px;
    height: 17px;
  }

  /* ========= MOBILE "NEEDS STRATEGY" — show as "Strategy" only ========= */
  .xt-portfolio-strategy.needs-strategy {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-style: solid;
    background: rgba(239, 68, 68, 0.2);
    -webkit-tap-highlight-color: rgba(239, 68, 68, 0.3);
    font-size: 0; /* Hide original text */
  }
  .xt-portfolio-strategy.needs-strategy::after {
    content: 'Strategy';
    font-size: 10px;
  }
  .xt-portfolio-strategy.needs-strategy:active {
    background: rgba(239, 68, 68, 0.35);
    transform: scale(0.95);
  }

  /* Push allocation input right to prevent overlap with ticker name */
  .xt-portfolio-allocation {
    margin-left: auto;
  }

  /* ========= MOBILE GRAPH PANEL — fullscreen ========= */
  .xt-graph-panel.hidden {
    display: none !important;
  }
  .xt-graph-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 10005;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  .xt-graph-panel:not(.hidden) {
    transform: translateY(0);
  }
  .xt-graph-panel-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }
  .xt-graph-panel-back {
    background: transparent;
    border: none;
    color: var(--xt-text-muted);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* ========= SECTOR CARDS ========= */
.xt-panel-section {
  margin-bottom: 20px;
}

.xt-sector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.xt-sector-card {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-sector-card:hover {
  background: var(--xt-bg-card-hover);
  border-color: var(--xt-border-accent);
  transform: translateY(-2px);
}

.xt-sector-card.selected {
  border-color: var(--xt-accent);
  background: var(--xt-accent-dim);
}


.xt-sector-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.xt-sector-icon svg {
  width: 26px;
  height: 26px;
}
.xt-sector-icon.icon-technology { color: #5baaef; border-color: rgba(91, 170, 239, 0.35); }
.xt-sector-icon.icon-energy { color: #f0b840; border-color: rgba(240, 184, 64, 0.35); }
.xt-sector-icon.icon-crypto { color: #e86060; border-color: rgba(232, 96, 96, 0.35); }
.xt-sector-icon.icon-commodities { color: #4dc878; border-color: rgba(77, 200, 120, 0.35); }
.xt-sector-icon.icon-healthcare { color: #e870a8; border-color: rgba(232, 112, 168, 0.35); }
.xt-sector-icon.icon-financial { color: #8080e8; border-color: rgba(128, 128, 232, 0.35); }

.xt-sector-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-text-primary);
  margin: 0 0 4px 0;
}

.xt-sector-tickers {
  font-size: 11px;
  color: var(--xt-text-secondary);
  margin: 0 0 4px 0;
}

.xt-sector-desc {
  font-size: 10px;
  color: var(--xt-text-muted);
  margin: 0;
}

/* Select sector button */
.xt-sector-cta {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--xt-border);
}

.xt-btn-primary {
  width: 100%;
  padding: 14px 20px;
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
  border: none;
  border-radius: var(--xt-radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-btn-primary:hover {
  background: var(--xt-accent-hover);
}

.xt-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stock Selection */
.xt-stock-selection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--xt-border);
}

.xt-stock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.xt-stock-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-text-primary);
  margin: 0;
}

#xt-selected-count {
  font-size: 12px;
  color: var(--xt-accent);
  font-weight: 500;
}

.xt-stock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 35vh;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.xt-stock-list::-webkit-scrollbar { width: 5px; }
.xt-stock-list::-webkit-scrollbar-track { background: transparent; }
.xt-stock-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.xt-stock-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

.xt-stock-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.xt-stock-item:hover {
  border-color: var(--xt-border-accent);
  background: var(--xt-bg-card-hover);
}

.xt-stock-item.selected {
  border-color: var(--xt-accent);
  background: var(--xt-accent-dim);
}

.xt-stock-symbol {
  font-weight: 600;
  color: var(--xt-text-primary);
  flex: 1;
}

.xt-stock-sector {
  font-size: 11px;
  color: var(--xt-text-muted);
  margin-right: 12px;
}

.xt-stock-check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--xt-border);
  color: var(--xt-text-secondary);
  font-size: 12px;
}

.xt-stock-item.selected .xt-stock-check {
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Custom ticker input */
.xt-custom-ticker {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.xt-custom-ticker input {
  flex: 1;
  padding: 10px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 13px;
}

.xt-custom-ticker input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

.xt-custom-ticker button {
  padding: 10px 16px;
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
  border: none;
  border-radius: var(--xt-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.xt-custom-ticker button:hover {
  background: var(--xt-accent-hover);
}

/* Mobile Sector Cards & Stock Selection */
@media (max-width: 768px) {
  .xt-sector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .xt-sector-card {
    padding: 12px;
  }

  .xt-sector-icon {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .xt-sector-name {
    font-size: 13px;
  }

  .xt-sector-tickers {
    font-size: 10px;
  }

  .xt-sector-desc {
    font-size: 9px;
  }

  .xt-stock-list {
    max-height: 180px;
  }

  .xt-stock-item {
    padding: 10px 12px;
  }

  /* Custom ticker input — keep inline (row) on mobile */
  .xt-custom-ticker {
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }

  .xt-custom-ticker input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 40px;
    font-size: 16px; /* Prevent iOS zoom */
  }

  .xt-custom-ticker button {
    width: auto;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Strategy list — flatten into parent scroll on mobile (no nested scroll trap) */
  .xt-preset-list {
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
  }
}

@media (max-width: 375px) {
  .xt-sector-grid {
    grid-template-columns: 1fr;
  }
}

/* ========= PORTFOLIO BUILDER ========= */
.xt-portfolio-builder {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Visual allocation bar at top */
.xt-allocation-bar {
  background: var(--xt-bg-card);
  border-radius: var(--xt-radius-md);
  height: 32px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--xt-border);
}

.xt-allocation-segment {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  min-width: 0;
  transition: flex 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
}

.xt-allocation-segment span {
  padding: 0 4px;
}

/* Segment colors */
.xt-allocation-segment.color-0 { background: #2196ee; }
.xt-allocation-segment.color-1 { background: #8b5cf6; }
.xt-allocation-segment.color-2 { background: #f59e0b; }
.xt-allocation-segment.color-3 { background: #22c55e; }
.xt-allocation-segment.color-4 { background: #ef4444; }
.xt-allocation-segment.color-5 { background: #3b82f6; }
.xt-allocation-segment.color-6 { background: #ec4899; }
.xt-allocation-segment.color-7 { background: #14b8a6; }
.xt-allocation-segment.cash { background: #64748b; }
.xt-allocation-segment.unallocated { background: rgba(100, 116, 139, 0.3); border-left: 1px dashed var(--xt-border); }

/* Portfolio ticker list */
.xt-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xt-portfolio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  transition: all 0.2s;
}

.xt-portfolio-item:hover {
  border-color: var(--xt-border-accent);
}

.xt-portfolio-item.cash-item {
  background: rgba(100, 116, 139, 0.1);
}

/* Color indicator dot */
.xt-portfolio-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.xt-portfolio-color.color-0 { background: #2196ee; }
.xt-portfolio-color.color-1 { background: #8b5cf6; }
.xt-portfolio-color.color-2 { background: #f59e0b; }
.xt-portfolio-color.color-3 { background: #22c55e; }
.xt-portfolio-color.color-4 { background: #ef4444; }
.xt-portfolio-color.color-5 { background: #3b82f6; }
.xt-portfolio-color.color-6 { background: #ec4899; }
.xt-portfolio-color.color-7 { background: #14b8a6; }
.xt-portfolio-color.cash { background: #64748b; }

/* Ticker symbol and info */
.xt-portfolio-info {
  flex: 1;
  min-width: 0;
}

.xt-portfolio-symbol {
  font-weight: 600;
  font-size: 14px;
  color: var(--xt-text-primary);
}

.xt-portfolio-name {
  font-size: 11px;
  color: var(--xt-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allocation slider and input */
.xt-portfolio-allocation {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.xt-allocation-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--xt-border);
  border-radius: 3px;
  outline: none;
}

.xt-allocation-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--xt-accent);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}

.xt-allocation-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.xt-allocation-input {
  width: 50px;
  padding: 4px 6px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 13px;
  text-align: center;
}

.xt-allocation-input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

.xt-allocation-percent {
  color: var(--xt-text-muted);
  font-size: 13px;
}

/* Cash rate input */
.xt-cash-rate {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--xt-text-muted);
}

.xt-cash-rate input {
  width: 40px;
  padding: 2px 4px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 12px;
  text-align: center;
}

/* Strategy badge */
.xt-portfolio-strategy {
  padding: 4px 10px;
  border-radius: var(--xt-radius-sm);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-portfolio-strategy.needs-strategy {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px dashed #ef4444;
}

.xt-portfolio-strategy.has-strategy {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.xt-portfolio-strategy:hover {
  opacity: 0.8;
}

/* Remove button */
.xt-portfolio-remove {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--xt-text-muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s;
}

.xt-portfolio-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Portfolio summary footer */
.xt-portfolio-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--xt-border);
}

.xt-portfolio-total {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xt-total-badge {
  padding: 6px 12px;
  border-radius: var(--xt-radius-sm);
  font-size: 14px;
  font-weight: 600;
}

.xt-total-badge.valid {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.xt-total-badge.invalid {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.xt-allocation-hint {
  font-size: 12px;
  color: var(--xt-text-muted);
}

/* Add custom ticker */
.xt-portfolio-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.xt-portfolio-add input {
  flex: 1;
  padding: 10px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 13px;
}

.xt-portfolio-add input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

.xt-portfolio-add button {
  padding: 10px 16px;
  background: var(--xt-bg-card);
  color: var(--xt-accent);
  border: 1px solid var(--xt-accent);
  border-radius: var(--xt-radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-portfolio-add button:hover {
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Mobile Portfolio Builder */
@media (max-width: 768px) {
  .xt-portfolio-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .xt-portfolio-header h3 {
    font-size: 18px;
  }

  .xt-allocation-bar {
    height: 24px;
  }

  .xt-portfolio-list {
    gap: 10px;
  }

  /* Portfolio cards — grid layout (matches rule at line ~2514) */
  .xt-portfolio-item {
    display: grid !important;
    grid-template-columns: 10px auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .xt-portfolio-item-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .xt-portfolio-allocation {
    width: 100%;
    min-width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .xt-portfolio-allocation-slider {
    flex: 1;
    height: 8px;
  }

  .xt-portfolio-allocation-input {
    width: 50px;
    min-height: 40px;
    text-align: center;
    font-size: 16px;
  }

  .xt-portfolio-strategy {
    width: 100%;
    margin-top: 4px;
  }

  .xt-portfolio-strategy-badge {
    font-size: 11px;
    padding: 6px 10px;
  }

  .xt-portfolio-remove {
    min-width: 36px;
    min-height: 36px;
  }

  .xt-portfolio-add {
    flex-direction: row;
    gap: 6px;
    align-items: center;
  }

  .xt-portfolio-add input {
    flex: 1;
    min-width: 0;
    width: auto;
    min-height: 40px;
    font-size: 16px;
  }

  .xt-portfolio-add button {
    width: auto;
    flex-shrink: 0;
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* ========= STRATEGY BUILDER ========= */
.xt-strategy-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ticker tabs */
.xt-strategy-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--xt-border);
}

.xt-strategy-tab {
  padding: 6px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.xt-strategy-tab:hover {
  border-color: var(--xt-border-accent);
}

.xt-strategy-tab.active {
  border-color: var(--xt-accent);
  color: var(--xt-accent);
  background: var(--xt-accent-dim);
}

.xt-strategy-tab.assigned::after {
  content: '✓';
  color: var(--xt-success);
  font-size: 10px;
}

.xt-strategy-counter {
  margin-left: auto;
  font-size: 11px;
  color: var(--xt-text-muted);
}

/* Current ticker info */
.xt-strategy-current {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 12px 16px;
}

.xt-strategy-current-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.xt-strategy-current-badge {
  width: 28px;
  height: 28px;
  background: var(--xt-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--xt-bg-primary);
}

.xt-strategy-current-symbol {
  font-size: 16px;
  font-weight: 600;
  color: var(--xt-text-primary);
}

.xt-strategy-current-alloc {
  font-size: 13px;
  color: var(--xt-text-muted);
}

.xt-strategy-current-status {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--xt-radius-sm);
  margin-left: auto;
}

.xt-strategy-current-status.needs {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.xt-strategy-current-status.assigned {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.xt-strategy-current-hint {
  font-size: 12px;
  color: var(--xt-text-muted);
}

/* Strategy / Create tabs */
.xt-strategy-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--xt-border);
  margin-bottom: 16px;
}
.xt-strategy-tab-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--xt-text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.xt-strategy-tab-btn.active {
  color: var(--xt-accent);
  border-bottom-color: var(--xt-accent);
}
.xt-strategy-tab-btn:hover {
  color: var(--xt-text-primary);
}

.xt-strategy-tab-content {
  margin-bottom: 16px;
}

/* Two column layout (legacy, kept for compat) */
.xt-strategy-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Quick Pick column */
.xt-quick-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xt-quick-pick-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
}

.xt-quick-pick-header .icon {
  font-size: 14px;
}

.xt-quick-pick-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xt-quick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.xt-quick-card:hover {
  border-color: var(--xt-border-accent);
  background: var(--xt-bg-card-hover);
}

.xt-quick-card.selected {
  border-color: var(--xt-accent);
  background: var(--xt-accent-dim);
}

.xt-quick-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--xt-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.xt-quick-card-icon.aggressive { color: #e86060; border-color: rgba(232, 96, 96, 0.35); }
.xt-quick-card-icon.balanced { color: #5baaef; border-color: rgba(91, 170, 239, 0.35); }
.xt-quick-card-icon.conservative { color: #4dc878; border-color: rgba(77, 200, 120, 0.35); }

.xt-quick-card-info {
  flex: 1;
}

.xt-quick-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--xt-text-primary);
}

.xt-quick-card-desc {
  font-size: 11px;
  color: var(--xt-text-muted);
}

.xt-quick-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.xt-quick-actions button {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--xt-radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.xt-btn-improve {
  background: transparent;
  border: 1px solid rgba(184, 160, 240, 0.4);
  color: #b8a0f0;
}

.xt-btn-improve:hover {
  background: rgba(139, 92, 246, 0.25);
}

.xt-btn-reset {
  background: transparent;
  border: 1px solid var(--xt-border);
  color: var(--xt-text-secondary);
}

.xt-btn-reset:hover {
  border-color: var(--xt-border-accent);
}

.xt-btn-undo {
  background: transparent;
  border: 1px solid var(--xt-border);
  color: var(--xt-text-secondary);
}
.xt-btn-undo:hover {
  border-color: var(--xt-border-accent);
  box-shadow: 0 0 10px rgba(33, 150, 238, 0.2);
}

/* Preset strategies column */
.xt-preset-strategies {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xt-preset-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
}

.xt-strategy-timeframes { display: flex; gap: 4px; margin-bottom: 12px; }
.xt-timeframe-btn {
  padding: 6px 14px; border-radius: var(--xt-radius-sm);
  background: transparent; border: 1px solid var(--xt-border);
  color: var(--xt-text-secondary); font-size: 12px; cursor: pointer;
  transition: all 0.2s;
}
.xt-timeframe-btn:hover { border-color: var(--xt-accent); color: var(--xt-accent); }
.xt-timeframe-btn.active { background: var(--xt-accent); border-color: var(--xt-accent); color: var(--xt-bg-primary); }

.xt-preset-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.xt-preset-list::-webkit-scrollbar { width: 6px; }
.xt-preset-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 3px; }
.xt-preset-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.xt-preset-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.xt-preset-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.xt-preset-item:hover {
  border-color: var(--xt-border-accent);
  background: var(--xt-bg-card-hover);
}

.xt-preset-item.selected {
  border-color: var(--xt-accent);
  background: var(--xt-accent-dim);
}

.xt-preset-icon {
  width: 24px;
  height: 24px;
  background: rgba(33, 150, 238, 0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--xt-accent);
}

.xt-preset-name {
  flex: 1;
  font-size: 13px;
  color: var(--xt-text-primary);
}

.xt-preset-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--xt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
}

.xt-preset-item.selected .xt-preset-check {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Advanced section (collapsible) */
.xt-advanced-section {
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  overflow: hidden;
}

.xt-advanced-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--xt-bg-card);
  cursor: pointer;
  transition: background 0.2s;
}

.xt-advanced-header:hover {
  background: var(--xt-bg-card-hover);
}

.xt-advanced-toggle {
  font-size: 10px;
  color: var(--xt-text-muted);
  transition: transform 0.2s;
}

.xt-advanced-section.expanded .xt-advanced-toggle {
  transform: rotate(180deg);
}

.xt-advanced-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--xt-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.xt-advanced-title .icon {
  color: var(--xt-accent);
}

.xt-advanced-content {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--xt-border);
}

.xt-advanced-section.expanded .xt-advanced-content {
  display: block;
}

/* Code editor in advanced */
.xt-code-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xt-code-tabs {
  display: flex;
  gap: 8px;
}

.xt-code-tab {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-code-tab.active {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

.xt-code-area {
  background: #0d1117;
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  padding: 12px;
  min-height: 150px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'IBM Plex Mono', ui-monospace, 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #c9d1d9;
  overscroll-behavior: contain;
}
.xt-code-area::-webkit-scrollbar { width: 6px; }
.xt-code-area::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 3px; }
.xt-code-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.xt-code-area::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.xt-code-chat {
  display: flex;
  gap: 8px;
}

.xt-code-chat input {
  flex: 1;
  padding: 10px 12px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 13px;
}

.xt-code-chat input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

.xt-code-chat button {
  padding: 10px 16px;
  background: var(--xt-accent);
  border: none;
  border-radius: var(--xt-radius-sm);
  color: var(--xt-bg-primary);
  font-weight: 600;
  cursor: pointer;
}

.xt-code-actions {
  display: flex;
  gap: 8px;
}

.xt-code-actions button {
  flex: 1;
  padding: 8px 12px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-code-actions button:hover {
  border-color: var(--xt-border-accent);
  color: var(--xt-text-primary);
}

/* Backtest results */
.xt-backtest-results {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-backtest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.xt-backtest-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--xt-text-primary);
}

.xt-backtest-signal {
  padding: 4px 10px;
  border-radius: var(--xt-radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.xt-backtest-signal.long { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.xt-backtest-signal.short { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.xt-backtest-signal.flat { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }

.xt-backtest-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.xt-backtest-metric {
  text-align: center;
}

.xt-backtest-metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--xt-text-primary);
}

.xt-backtest-metric-value.positive { color: #22c55e; }
.xt-backtest-metric-value.negative { color: #ef4444; }

.xt-backtest-metric-label {
  font-size: 10px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.xt-backtest-loading {
  text-align: center;
  padding: 20px;
  color: var(--xt-text-muted);
}

/* Assign button */
.xt-strategy-assign {
  margin-top: 8px;
}

/* ========= SIMULATION PANEL ========= */
.xt-simulation {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Metrics cards */
.xt-sim-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.xt-sim-metric-card {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 10px 8px;
  text-align: center;
}

.xt-sim-metric-icon {
  display: none;
}

.xt-sim-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--xt-text-primary);
}

.xt-sim-metric-value.positive { color: #22c55e; }
.xt-sim-metric-value.negative { color: #ef4444; }

.xt-sim-metric-label {
  font-size: 10px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Performance chart section */
.xt-sim-chart-section {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-sim-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.xt-sim-chart {
  height: 200px;
  background: var(--xt-bg-secondary);
  border-radius: var(--xt-radius-sm);
}

/* Investment calculator */
.xt-sim-calculator {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-sim-calc-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.xt-sim-calc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.xt-sim-calc-label {
  font-size: 13px;
  color: var(--xt-text-secondary);
  white-space: nowrap;
}

.xt-sim-calc-input {
  flex: 1;
  padding: 10px 12px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.xt-sim-calc-input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

/* Leverage slider */
.xt-sim-leverage {
  margin-bottom: 16px;
}

.xt-sim-leverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.xt-sim-leverage-label {
  font-size: 13px;
  color: var(--xt-text-secondary);
}

.xt-sim-leverage-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--xt-accent);
}

.xt-sim-leverage-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--xt-border);
  border-radius: 4px;
  outline: none;
}

.xt-sim-leverage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--xt-accent);
  border-radius: 50%;
  cursor: pointer;
}

.xt-sim-leverage-presets {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.xt-sim-leverage-preset {
  flex: 1;
  padding: 6px 8px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-sim-leverage-preset:hover {
  border-color: var(--xt-border-accent);
}

.xt-sim-leverage-preset.active {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Results */
.xt-sim-calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--xt-border);
}

.xt-sim-calc-result {
  text-align: center;
}

.xt-sim-calc-result-value {
  font-size: 20px;
  font-weight: 700;
}

.xt-sim-calc-result-value.profit { color: #22c55e; }
.xt-sim-calc-result-value.total { color: var(--xt-text-primary); }
/* Losing simulation: negative profit / negative total. Same red the
   Max Drawdown card uses (.xt-sim-metric-value.negative) so the
   calculator's color language matches the rest of the panel. */
.xt-sim-calc-result-value.loss { color: #ef4444; }
.xt-sim-calc-result-value.total.loss { color: #ef4444; }

.xt-sim-calc-result-label {
  font-size: 10px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Positions table */
.xt-sim-positions {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  overflow: hidden;
}

.xt-sim-positions-header {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 8px;
  padding: 10px 16px;
  background: var(--xt-bg-secondary);
  border-bottom: 1px solid var(--xt-border);
}

.xt-sim-positions-header span {
  font-size: 10px;
  font-weight: 600;
  color: var(--xt-text-muted);
  text-transform: uppercase;
}

.xt-sim-position-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--xt-border);
}

.xt-sim-position-row:last-child {
  border-bottom: none;
}

.xt-sim-position-symbol {
  font-weight: 600;
  color: var(--xt-text-primary);
}

.xt-sim-position-strategy {
  font-size: 12px;
  color: var(--xt-text-secondary);
}

.xt-sim-position-action {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.xt-sim-position-action.buy { color: #22c55e; }
.xt-sim-position-action.sell { color: #ef4444; }
.xt-sim-position-action.flat { color: var(--xt-text-muted); }

.xt-sim-position-pnl {
  font-weight: 600;
  text-align: right;
}

.xt-sim-position-pnl.positive { color: #22c55e; }
.xt-sim-position-pnl.negative { color: #ef4444; }

/* Loading state */
.xt-sim-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--xt-text-muted);
}

.xt-sim-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--xt-border);
  border-top-color: var(--xt-accent);
  border-radius: 50%;
  animation: xt-spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes xt-spin {
  to { transform: rotate(360deg); }
}

/* Mobile Simulation Results */
@media (max-width: 768px) {
  .xt-sim-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .xt-sim-metric-card {
    padding: 12px 10px;
  }

  .xt-sim-metric-value {
    font-size: 18px;
  }

  .xt-sim-metric-label {
    font-size: 9px;
  }

  .xt-sim-chart {
    height: 180px;
    margin: 12px 0;
    overflow: visible;
  }

  .xt-sim-chart-section {
    padding-bottom: 24px;
    overflow: visible;
  }

  .chart-canvas-wrapper {
    overflow: visible;
  }

  .xt-sim-calculator {
    padding: 12px;
  }

  .xt-sim-calculator-input {
    flex-direction: column;
    gap: 8px;
  }

  .xt-sim-calculator-input input {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .xt-sim-leverage {
    flex-direction: column;
    gap: 8px;
  }

  .xt-sim-leverage-slider {
    width: 100%;
  }

  .xt-sim-results {
    gap: 8px;
  }

  .xt-sim-result-card {
    padding: 12px;
  }

  .xt-sim-result-value {
    font-size: 18px;
  }

  .xt-sim-positions {
    overflow-x: auto;
  }

  .xt-sim-positions-table {
    font-size: 12px;
    min-width: 320px;
  }

  .xt-sim-positions-table th,
  .xt-sim-positions-table td {
    padding: 8px 6px;
  }

  .xt-sim-position-symbol {
    font-size: 13px;
  }

  .xt-sim-position-strategy {
    font-size: 11px;
  }
}

/* ========= TRADING SETUP ========= */
.xt-trading-setup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Mode selection cards */
.xt-trading-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.xt-trading-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--xt-bg-card);
  border: 2px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.xt-trading-mode:hover {
  border-color: var(--xt-border-accent);
}

.xt-trading-mode.active {
  border-color: var(--xt-accent);
  background: var(--xt-accent-dim);
}

.xt-trading-mode-icon {
  width: 48px;
  height: 48px;
  background: var(--xt-bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.xt-trading-mode.active .xt-trading-mode-icon {
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
}

.xt-trading-mode-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-text-primary);
}

.xt-trading-mode-desc {
  font-size: 11px;
  color: var(--xt-text-muted);
  text-align: center;
}

/* Budget section */
.xt-trading-budget {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-trading-budget-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.xt-trading-budget-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
}

.xt-trading-budget-input:focus {
  outline: none;
  border-color: var(--xt-accent);
}

.xt-trading-budget-presets {
  display: flex;
  gap: 8px;
}

.xt-trading-budget-preset {
  flex: 1;
  padding: 8px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-trading-budget-preset:hover {
  border-color: var(--xt-border-accent);
}

.xt-trading-budget-preset.active {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Leverage section */
.xt-trading-leverage {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-trading-leverage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.xt-trading-leverage-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-text-secondary);
  text-transform: uppercase;
}

.xt-trading-leverage-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--xt-accent);
}

.xt-trading-leverage-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: var(--xt-border);
  border-radius: 4px;
  outline: none;
  margin-bottom: 12px;
}

.xt-trading-leverage-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--xt-accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.xt-trading-leverage-presets {
  display: flex;
  gap: 6px;
}

.xt-trading-leverage-preset {
  flex: 1;
  padding: 8px 6px;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-trading-leverage-preset:hover {
  border-color: var(--xt-border-accent);
}

.xt-trading-leverage-preset.active {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

/* Summary section */
.xt-trading-summary {
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md);
  padding: 16px;
}

.xt-trading-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--xt-border);
}

.xt-trading-summary-row:last-child {
  border-bottom: none;
}

.xt-trading-summary-label {
  font-size: 13px;
  color: var(--xt-text-secondary);
}

.xt-trading-summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-text-primary);
}

/* Start button */
.xt-trading-start {
  padding: 16px;
  background: var(--xt-accent);
  border: none;
  border-radius: var(--xt-radius-md);
  color: var(--xt-bg-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.xt-trading-start:hover {
  background: var(--xt-accent-hover);
  transform: translateY(-1px);
}

.xt-trading-start:disabled {
  background: var(--xt-border);
  color: var(--xt-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Mobile Trading Setup */
@media (max-width: 768px) {
  .xt-trading-setup {
    gap: 16px;
  }

  .xt-trading-modes {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .xt-trading-mode {
    padding: 14px 10px;
  }

  .xt-trading-mode-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .xt-trading-mode-name {
    font-size: 13px;
  }

  .xt-trading-mode-desc {
    font-size: 10px;
  }

  .xt-trading-section-title {
    font-size: 11px;
  }

  .xt-trading-budget-input {
    min-height: 50px;
    font-size: 20px;
  }

  .xt-trading-budget-presets {
    flex-wrap: wrap;
    gap: 6px;
  }

  .xt-trading-budget-preset {
    flex: 1 1 calc(25% - 5px);
    min-width: 55px;
    min-height: 40px;
    font-size: 12px;
  }

  .xt-trading-leverage-value {
    font-size: 24px;
  }

  .xt-trading-leverage-presets {
    flex-wrap: wrap;
    gap: 6px;
  }

  .xt-trading-leverage-preset {
    flex: 1 1 calc(33% - 4px);
    min-width: 45px;
    min-height: 40px;
    font-size: 12px;
  }

  .xt-trading-start {
    min-height: 50px;
    font-size: 15px;
  }

  .xt-trading-summary-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ========= ACTIVE TRADING BAR ========= */
.xt-active-trading-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  height: 56px;
  background: var(--xt-bg-secondary);
  border-top: 1px solid var(--xt-border);
  display: flex;
  align-items: center;
  padding: 0;
  z-index: 1000;
}

.xt-active-trading-bar.hidden {
  transform: translateY(100%);
}

/* Left section: Status */
.xt-atb-status {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.xt-atb-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--xt-text-muted);
}

.xt-atb-indicator.active {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  animation: xt-pulse 2s ease-in-out infinite;
}

@keyframes xt-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.xt-atb-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--xt-text-muted);
}

.xt-atb-label.active {
  color: var(--xt-text-primary);
}

.xt-atb-badge {
  padding: 4px 10px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--xt-text-secondary);
}

/* Center section: P&L — see expanded features block below */

.xt-atb-pnl-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--xt-text-muted);
}

.xt-atb-pnl-value.positive {
  color: #22c55e;
}

.xt-atb-pnl-value.negative {
  color: #ef4444;
}

/* Metrics section: pushed right before separator */
.xt-atb-metrics {
  display: flex;
  align-items: center;
  gap: 16px;
}

.xt-atb-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.xt-atb-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--xt-text-primary);
}

.xt-atb-metric-label {
  font-size: 9px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
}

/* Inactive state */
.xt-active-trading-bar.inactive .xt-atb-pnl-value {
  color: var(--xt-text-muted);
}

.xt-active-trading-bar.inactive .xt-atb-metric-value {
  color: var(--xt-text-muted);
}

/* Stop button */
.xt-atb-stop {
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--xt-radius-sm);
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 16px;
}

.xt-atb-stop:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* ========= ACTIVE TRADING BAR - EXPANDED FEATURES ========= */

/* Header wrapper for bar — CSS Grid for TRUE centering */
.xt-atb-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  height: 100%;
  width: 100%;
  gap: 12px;
}

/* P&L with label — truly centered in grid middle column */
.xt-atb-pnl {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Right section wrapper — metrics + buttons + close all */
.xt-atb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.xt-atb-pnl-label {
  font-size: 9px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 1px 0;
  line-height: 1;
}

/* Bar is always compact — expand states removed (positions are in right panel) */
.xt-active-trading-bar.expanded {
  height: 56px;
}

/* Expand button */
.xt-atb-expand {
  background: transparent;
  border: none;
  color: var(--xt-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xt-atb-expand:hover {
  background: rgba(255,255,255,0.1);
  color: var(--xt-text-primary);
}

.xt-active-trading-bar.expanded .xt-atb-expand svg {
  transform: rotate(180deg);
}

/* Close All button */
.xt-atb-close-all {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--xt-radius-sm);
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-atb-close-all:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* DD metric orange color */
.xt-atb-dd {
  color: #f59e0b !important;
}

/* Action Buttons Row */
.xt-atb-actions {
  display: none;
  padding: 12px 24px;
  gap: 12px;
  border-top: 1px solid var(--xt-border);
  justify-content: center;
  width: 100%;
}

.xt-active-trading-bar.expanded .xt-atb-actions {
  display: flex;
}

.xt-atb-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-atb-action-btn:hover {
  border-color: var(--xt-accent);
  color: var(--xt-accent);
}

.xt-atb-action-btn.primary {
  background: var(--xt-accent);
  border-color: var(--xt-accent);
  color: var(--xt-bg-primary);
}

.xt-atb-action-btn.primary:hover {
  background: var(--xt-accent-hover);
}

/* Manual Trading Section — labeled single line */
.xt-manual-trade-section {
  display: none;
  padding: 8px 24px;
  border-bottom: 1px solid var(--xt-border);
  width: 100%;
  box-sizing: border-box;
}
/* Manual trade section moved to sidebar — hidden from bottom bar */
.xt-active-trading-bar.expanded .xt-manual-trade-section {
  display: none;
}

.xt-manual-trade-line {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
}

.xt-mt-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.xt-mt-col label {
  font-size: 9px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  white-space: nowrap;
  padding-left: 3px;
}

.xt-mt-search {
  flex: 2 1 300px;
}
.xt-mt-grow {
  flex: 1;
  min-width: 60px;
}
.xt-mt-fixed {
  flex: 0 0 100px;
}

.xt-mt-search input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.xt-mt-search input:focus {
  border-color: var(--xt-accent);
}

.xt-manual-compact-input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  color: var(--xt-text-primary);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  text-align: center;
}
.xt-manual-compact-input:focus {
  border-color: var(--xt-accent);
}

#xt-manual-trade-search-btn {
  height: 32px;
  padding: 0 12px;
  background: var(--xt-accent);
  color: var(--xt-bg-primary);
  border: none;
  border-radius: var(--xt-radius-sm);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(33, 150, 238, 0.3);
  transition: all 0.2s;
  white-space: nowrap;
}
#xt-manual-trade-search-btn:hover {
  background: var(--xt-accent-hover);
  box-shadow: 0 0 16px rgba(33, 150, 238, 0.5);
}

/* AI Validated Badge */
.ai-validated-badge {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 1;
  transition: filter 0.2s;
  filter: drop-shadow(0 0 0 transparent);
}
.ai-validated-badge:hover {
  filter: drop-shadow(0 0 4px rgba(33,150,238,0.6)) drop-shadow(0 0 8px rgba(33,150,238,0.3));
}

/* AI Quick Check Popover */
.ai-check-popover {
  position: fixed;
  z-index: 10000;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius);
  padding: 16px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.15s ease-out;
}
.ai-check-popover .ai-check-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ai-check-popover .ai-check-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.ai-check-popover .ai-check-score.bullish { background: var(--xt-success); }
.ai-check-popover .ai-check-score.bearish { background: var(--xt-danger); }
.ai-check-popover .ai-check-score.neutral { background: rgba(255,255,255,0.2); }
.ai-check-popover .ai-check-direction {
  font-weight: 600;
  font-size: 13px;
  color: var(--xt-text-primary);
}
.ai-check-popover .ai-check-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--xt-text-secondary);
  margin-bottom: 10px;
}
.ai-check-popover .ai-check-deeper {
  font-size: 12px;
  color: var(--xt-accent);
  cursor: pointer;
  text-decoration: underline;
}
.ai-check-popover .ai-check-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--xt-text-muted);
  cursor: pointer;
  font-size: 16px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.xt-manual-trade-price {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--xt-accent);
  white-space: nowrap;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm);
  box-sizing: border-box;
  width: 100%;
}

.xt-manual-trade-buy {
  height: 32px;
  padding: 0 14px;
  background: var(--xt-success);
  color: #fff;
  border: none;
  border-radius: var(--xt-radius-sm);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
  transition: all 0.2s;
  white-space: nowrap;
}
.xt-manual-trade-buy:hover {
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
}

.xt-manual-trade-sell {
  height: 32px;
  padding: 0 14px;
  background: var(--xt-danger);
  color: #fff;
  border: none;
  border-radius: var(--xt-radius-sm);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
  transition: all 0.2s;
  white-space: nowrap;
}
.xt-manual-trade-sell:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

/* Positions Table */
.xt-atb-positions {
  display: none;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
}

.xt-active-trading-bar.expanded .xt-atb-positions {
  display: block;
}

.xt-atb-positions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.xt-atb-positions-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--xt-border);
  white-space: nowrap;
}

.xt-atb-positions-table th:first-child,
.xt-atb-positions-table td:first-child {
  padding-left: 24px;
}

.xt-atb-positions-table th:last-child,
.xt-atb-positions-table td:last-child {
  padding-right: 24px;
  text-align: right;
}

.xt-atb-positions-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--xt-border);
  color: var(--xt-text-primary);
  white-space: nowrap;
}

.xt-atb-positions-table td.positive {
  color: #22c55e;
}

.xt-atb-positions-table td.negative {
  color: #ef4444;
}

.xt-atb-position-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.xt-atb-position-badge.long {
  background: rgba(33, 150, 238, 0.15);
  color: var(--xt-accent);
}

.xt-atb-position-badge.short {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.xt-inline-tpsl {
  width: 60px;
  background: transparent;
  border: 1px solid var(--xt-border);
  color: var(--xt-text-primary);
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}
.xt-inline-tpsl:focus {
  border-color: var(--xt-accent);
}

.xt-atb-close-position {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--xt-border);
  border-radius: 4px;
  color: var(--xt-text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.xt-atb-close-position:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* Adjust main content when bar is visible (collapsed = 56px) */
body.xt-trading-active .composer {
  bottom: calc(56px + 16px); /* bar height + fixed gap */
  transition: bottom 0.3s ease;
}
body.xt-trading-active #messages {
  padding-bottom: calc(56px + 80px + 32px); /* bar + composer + gap */
  transition: padding-bottom 0.3s ease;
}
body.xt-trading-active .xt-right-panel {
  padding-bottom: calc(56px + 16px);
}
body.xt-trading-active .xt-graph-panel {
  bottom: 56px;
}

/* When trading bar is expanded — use dynamic height from JS */
body.xt-bar-expanded .composer {
  bottom: calc(var(--trading-bar-h, 56px) + 16px);
  transition: bottom 0.3s ease;
}
body.xt-bar-expanded #messages {
  padding-bottom: calc(var(--trading-bar-h, 56px) + 80px + 32px);
  transition: padding-bottom 0.3s ease;
}
body.xt-bar-expanded .xt-right-panel {
  padding-bottom: calc(var(--trading-bar-h, 56px) + 16px);
  transition: padding-bottom 0.3s ease;
}

/* Mobile Active Trading Bar — ONE SINGLE LINE */
@media (max-width: 920px) {
  .xt-active-trading-bar {
    left: 0;
    height: 48px;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 10003 !important; /* Always on top of bottom sheet panels (10002) */
  }

  /* Always show trading bar on mobile — never hide it */
  .xt-active-trading-bar.hidden {
    transform: translateY(0) !important;
  }

  .xt-active-trading-bar.collapsed {
    height: 48px;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Single row header — grid for true center alignment */
  .xt-atb-header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 8px;
    height: 48px;
    width: 100%;
    align-items: center;
  }

  /* Hide indicator dot on mobile — saves space */
  .xt-atb-indicator {
    display: none;
  }

  /* Status: stacked — label on top, badge below */
  .xt-atb-status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
    width: auto;
  }
  .xt-atb-label { font-size: 8px; letter-spacing: 0.5px; line-height: 1.2; }
  .xt-atb-badge { font-size: 7px; padding: 1px 4px; line-height: 1.2; }

  /* P&L/Balance: stacked and centered — grid centers it on screen */
  .xt-atb-pnl {
    justify-self: center;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0px;
  }
  .xt-atb-pnl-label { font-size: 7px !important; line-height: 1.2; }
  .xt-atb-pnl-value { font-size: 13px !important; line-height: 1.2; }
  .xt-atb-balance-label { font-size: 7px; line-height: 1.2; }
  .xt-atb-balance-value { font-size: 13px; line-height: 1.2; }

  /* Right section: metrics + buttons */
  .xt-atb-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
  }

  /* Metrics: hidden on mobile — Win/Sharpe/DD irrelevant on small screen */
  .xt-atb-metrics {
    display: none !important;
  }

  /* Buttons: compact icons */
  .xt-atb-header-buttons {
    display: flex !important;
    gap: 2px;
    padding-left: 4px;
    border-left: 1px solid var(--xt-border);
    margin-left: 0;
  }
  .xt-atb-header-buttons .xt-atb-header-btn span:not(.xt-atb-header-btn-icon) {
    display: none;
  }
  .xt-atb-header-btn {
    padding: 6px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    -webkit-tap-highlight-color: rgba(33, 150, 238, 0.3);
  }

  /* Close All: compact */
  .xt-atb-close-all {
    min-width: auto;
    padding: 4px 8px;
    font-size: 9px;
    min-height: auto;
  }
  .xt-atb-expand {
    min-width: 32px;
    min-height: 32px;
  }

  .xt-atb-stop {
    margin-left: 0;
    margin-top: 0;
    width: auto;
    min-height: auto;
    padding: 4px 8px;
    font-size: 9px;
  }

  /* Expanded state — full height with position cards */
  .xt-active-trading-bar.expanded {
    height: auto;
  }

  /* Mobile Position Cards (when expanded) */
  .xt-atb-positions {
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .xt-active-trading-bar.collapsed .xt-atb-positions {
    display: none;
  }
  .xt-atb-position-card {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .xt-atb-position-header { display: flex; justify-content: space-between; align-items: center; }
  .xt-atb-position-symbol { font-weight: 600; font-size: 14px; }
  .xt-atb-position-direction { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
  .xt-atb-position-direction.long { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
  .xt-atb-position-direction.short { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
  .xt-atb-position-pnl { font-size: 16px; font-weight: 600; }
  .xt-atb-position-close {
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 11px;
    cursor: pointer;
  }
  .xt-atb-positions-table { font-size: 11px; min-width: 600px; }
  .xt-atb-positions-table th,
  .xt-atb-positions-table td { padding: 6px 8px; white-space: nowrap; }

  /* Manual trade search bar */
  .xt-manual-trade-line { flex-wrap: wrap; gap: 8px; }
  .xt-mt-search { flex: 1 1 calc(100% - 80px) !important; min-width: 0; }
  .xt-mt-btn-col { flex: 0 0 auto; }
  .xt-mt-grow { flex: 1 1 28% !important; min-width: 60px; }
  .xt-manual-trade-buy,
  .xt-manual-trade-sell {
    flex: 1;
    min-width: 60px;
    min-height: auto;
    max-height: 40px;
    padding: 8px 16px;
  }
  .xt-mt-col label { font-size: 8px; }
}

/* ========= MOBILE TRADING BAR + COMPOSER COORDINATION ========= */
body.is-mobile.xt-trading-active .xt-active-trading-bar {
  left: 0;
}
body.is-mobile.xt-trading-active .composer {
  bottom: calc(var(--mobile-trading-bar-h, 48px) + env(safe-area-inset-bottom, 0px)) !important;
  transition: bottom 0.25s ease;
}
body.is-mobile.xt-trading-active #messages {
  padding-bottom: calc(var(--mobile-trading-bar-h, 48px) + 80px + env(safe-area-inset-bottom, 0px)) !important;
  transition: padding-bottom 0.25s ease;
}
body.is-mobile.xt-bar-expanded .composer {
  bottom: calc(var(--mobile-trading-bar-h, 200px) + env(safe-area-inset-bottom, 0px)) !important;
  transition: bottom 0.25s ease;
}
body.is-mobile.xt-bar-expanded #messages {
  padding-bottom: calc(var(--mobile-trading-bar-h, 200px) + 80px + env(safe-area-inset-bottom, 0px)) !important;
  transition: padding-bottom 0.25s ease;
}
body.is-mobile.xt-trading-active .meta {
  display: none; /* Hide hint text when trading bar active — prevents overlap */
}

/* ========= BALANCE DISPLAY (inactive state) ========= */
.xt-atb-balance-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--xt-text-secondary);
  display: none;
  margin: 0;
  line-height: 1.1;
}

.xt-atb-balance-label {
  font-size: 9px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 1px 0;
  line-height: 1;
  display: none;
}

/* Inactive: show balance, hide P&L */
.xt-active-trading-bar.inactive .xt-atb-balance-value,
.xt-active-trading-bar.inactive .xt-atb-balance-label {
  display: block;
}

.xt-active-trading-bar.inactive .xt-atb-pnl-value,
.xt-active-trading-bar.inactive .xt-atb-pnl-label {
  display: none;
}

/* Hide metrics when inactive (show -- values is useless) */
.xt-active-trading-bar.inactive .xt-atb-metrics {
  display: none;
}

/* Hide Close All when inactive */
.xt-active-trading-bar.inactive .xt-atb-close-all {
  display: none;
}

/* ========= HEADER BUTTONS (Dashboard + Activity Log) ========= */
.xt-atb-header-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--xt-border);
}

.xt-atb-header-btn {
  background: transparent;
  border: 1px solid var(--xt-border);
  color: var(--xt-text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--xt-radius-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xt-atb-header-btn:hover {
  border-color: var(--xt-accent);
  color: var(--xt-accent);
  background: rgba(33, 150, 238, 0.1);
}

.xt-atb-header-btn.active {
  border-color: var(--xt-accent);
  color: var(--xt-accent);
  background: rgba(33, 150, 238, 0.15);
}

/* ========= ACTIVITY LOG FLOATING PANEL ========= */
.xt-activity-log-panel {
  position: fixed;
  top: 56px;
  bottom: 56px;
  right: 0;
  width: 480px;
  background: #141414;
  border-left: 1px solid #1a3a2a;
  border-radius: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.xt-activity-log-panel.hidden {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.xt-activity-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #1a3a2a;
}

.xt-activity-log-title {
  color: #22c55e;
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  font-weight: bold;
  font-size: 13px;
}

.xt-activity-log-close {
  background: transparent;
  border: none;
  color: var(--xt-text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.xt-activity-log-close:hover {
  color: var(--xt-text-primary);
  background: rgba(255,255,255,0.1);
}

.xt-activity-log-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  font-size: 12px;
}

.xt-activity-log-line {
  color: #a0a0a0;
  padding: 3px 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.xt-log-action { color: #22c55e; font-weight: bold; }
.xt-log-sell { color: #ef4444; font-weight: bold; }
.xt-log-info { color: #2196ee; font-weight: bold; }
.xt-log-time { color: #666; }

/* Mobile: hide header buttons, full-width log panel */
@media (max-width: 768px) {
  .xt-atb-header-buttons {
    display: none;
  }

  .xt-activity-log-panel {
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
  }
}

/* ========= AUTH BUTTONS ========= */
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.guest-badge {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* =========================================================================
   HEADER PILL CLUSTER — single unified box for every header element.
   Every pill (Get a Call / Register Free / Sign In / Admin / firstname /
   Logout) shares the EXACT SAME box: 34px tall, 14px horizontal padding,
   12px font, 20px border-radius, 1px visible border. Only the colour
   palette differentiates them. This rule is the source of truth.
   ========================================================================= */
.auth-buttons .btn,
.auth-buttons .user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border-radius: 10px;
  white-space: nowrap;
  gap: 6px;
  border: 1px solid transparent;
  transition: all 0.2s;
  text-decoration: none;     /* the .admin-btn is an <a> */
  box-sizing: border-box;
}

/* Outlined-grey variants — Get a Call, Register Free, Logout */
.auth-buttons .call-btn,
.auth-buttons .register-btn,
.auth-buttons .logout-btn {
  background: transparent;
  border-color: var(--xt-master-grey, #d4d4d4);
  color: var(--xt-master-grey, #d4d4d4);
}
.auth-buttons .call-btn:hover,
.auth-buttons .register-btn:hover,
.auth-buttons .logout-btn:hover {
  background: var(--xt-master-grey-dim, rgba(212, 212, 212, 0.15));
  border-color: var(--xt-master-grey-hover, #e8e8e8);
  color: var(--xt-master-grey-hover, #e8e8e8);
}

/* Sign In — solid accent blue, with a slightly darker blue border so
   the pill outline is still visible against any header background. */
.auth-buttons .login-btn {
  background: var(--xt-accent, #2196ee);
  border-color: var(--xt-accent-hover, #42a5f5);
  color: #fff;
  font-weight: 600;
}
.auth-buttons .login-btn:hover {
  background: var(--xt-accent-hover, #42a5f5);
  border-color: var(--xt-accent, #2196ee);
}

/* Deposit — solid success green with a lighter-green border edge (pill
   invariant: every variant keeps a visible border in both themes). Always
   present, guest + registered — the money action gets the strongest pill. */
.auth-buttons .deposit-btn {
  background: var(--xt-success, #22c55e);
  border-color: #4ade80;
  color: #fff;
  font-weight: 600;
}
.auth-buttons .deposit-btn:hover {
  background: #4ade80;
  border-color: var(--xt-success, #22c55e);
}

/* User badge (firstname) — green outlined pill so it visually pairs with
   "Logged in" affordance. Same 34px box as every other pill. */
.auth-buttons .user-badge,
.user-badge {
  background: rgba(76, 175, 80, 0.18);
  border-color: rgba(76, 175, 80, 0.55);
  color: #4caf50;
}

/* Hide call-button SVG on desktop — text-only (mobile re-shows it). */
.auth-buttons .call-btn svg { display: none; }

/* Hide call-button SVG on desktop — text-only (mobile re-shows it). */
.auth-buttons .call-btn svg { display: none; }

/* =========================================================================
   ACTION CONFIRMATION ROW (LLM trade confirmation)
   No boxed bubble background — summary text renders inline like a bot row,
   buttons sit underneath as auth-header-style pills. Confirm = solid green,
   Cancel = master-grey outline. Light theme picks up master-grey-2 via
   light-theme.css overrides.
   ========================================================================= */
.action-confirm-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0;
}
.action-confirm-content {
  flex: 1;
  min-width: 0;
}
.action-confirm-summary {
  color: var(--xt-text-primary, #fff);
  font-size: 15px;
  line-height: 1.55;
  padding: 4px 0;
}
.action-confirm-summary p { margin: 0; }
.action-confirm-summary strong { font-weight: 600; }
.action-confirm-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.action-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.action-confirm-btn.confirm {
  background: var(--xt-success, #22c55e);
  border-color: var(--xt-success, #22c55e);
  color: #fff;
}
.action-confirm-btn.confirm:hover {
  background: #16a34a;
  border-color: #16a34a;
}
.action-confirm-btn.cancel {
  background: transparent;
  border: 1px solid var(--xt-master-grey, #d4d4d4);
  color: var(--xt-master-grey, #d4d4d4);
}
.action-confirm-btn.cancel:hover {
  background: var(--xt-master-grey-dim, rgba(212, 212, 212, 0.15));
  border-color: var(--xt-master-grey-hover, #e8e8e8);
  color: var(--xt-master-grey-hover, #e8e8e8);
}
.action-confirm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.action-confirm-status {
  margin-top: 10px;
  font-size: 13px;
  color: var(--xt-text-muted, #9ca3af);
}

/* =========================================================================
   ACTIVE-TRADING IN-PANEL CHART (yfinance 10m × 3d)
   Layout: flex-column [header bar] / [chart canvas]. NO black anywhere —
   theme-neutral master-grey palette. Header sits in normal flow above the
   canvas; canvas fills the remaining height. Mobile keeps the fullscreen
   overlay (#xt-graph-panel-body) unchanged.
   ========================================================================= */
#xt-right-panel.xt-has-chart .rp-section-title { display: none; }
#xt-right-panel.xt-has-chart #rp-positions-body {
  padding: 0;
  height: 100%;
  min-height: 420px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--xt-master-grey-dim, rgba(212, 212, 212, 0.18));
}

/* Chart host = flex column: header (auto height) / canvas (flex grow). */
.xt-chart-host {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
}
.xt-chart-canvas {
  flex: 1 1 auto;
  width: 100%;
  min-height: 280px;
  position: relative;
}

/* Header bar — transparent background, only a master-grey-dim border line
   separating it from the canvas. No black, no overlay. */
.xt-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--xt-master-grey-dim, rgba(212, 212, 212, 0.18));
  background: transparent;
  flex: 0 0 auto;
}
.xt-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.xt-chart-tg {
  display: flex;
  align-items: center;
  gap: 2px;
}
.xt-chart-tg + .xt-chart-tg {
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--xt-master-grey-dim, rgba(212, 212, 212, 0.18));
}

/* Buttons — square rounded, BORDERLESS, hover/active fill. */
.xt-cbtn,
.xt-chart-close {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--xt-master-grey, #d4d4d4);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.xt-cbtn:hover,
.xt-chart-close:hover {
  background: var(--xt-master-grey-dim, rgba(212, 212, 212, 0.18));
  color: var(--xt-master-grey-hover, #e8e8e8);
}
.xt-cbtn.active {
  background: var(--xt-master-grey-hover, #e8e8e8);
  color: #1e1e1e;
}
.xt-chart-close { margin-left: 8px; flex-shrink: 0; }

/* AI badge sits at the very start of the toolbar (matches the AI badge used
   throughout the app — same blue accent, same hover-popover behavior). */
.xt-chart-ai {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}
.xt-chart-ai .ai-validated-badge {
  cursor: pointer;
}

/* Mobile: hide drawing buttons (touch UX); keep AI badge, line/candle,
   indicators, close X. */
@media (max-width: 600px) {
  .xt-chart-toolbar .xt-chart-drawings { display: none; }
}

/* Hide auth buttons on small screens */
@media (max-width: 600px) {
  .auth-buttons .guest-badge,
  .auth-buttons .user-badge,
  .auth-buttons .login-btn {
    display: none;
  }
}


/* ========= MOBILE HAMBURGER + NAVIGATION DRAWER ========= */
.mobile-hamburger-btn {
  display: none; /* Hidden on desktop */
}
.mobile-drawer-overlay,
.mobile-drawer {
  display: none; /* Hidden on desktop */
}

@media (max-width: 920px) {
  .mobile-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--xt-text-primary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mobile-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--xt-bg-secondary, #1F1F1F);
    border-right: 1px solid var(--xt-border);
    z-index: 10004;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-drawer.open {
    transform: translateX(0);
  }

  .mobile-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--xt-border);
  }
  .mobile-drawer-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--xt-text-muted);
    cursor: pointer;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .mobile-drawer-close:active {
    background: rgba(255, 255, 255, 0.1);
  }
  .mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
  }
  .mobile-drawer-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--xt-text-muted);
    margin-bottom: 8px;
  }
  .mobile-drawer-divider {
    height: 1px;
    background: var(--xt-border);
    margin: 12px 0;
  }
}

/* ========= THEME TOGGLE ========= */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  transition: all 0.2s ease;
  margin-left: 8px;
}

.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.theme-toggle-btn .theme-icon {
  width: 18px;
  height: 18px;
}

/* ========= MOBILE TOUCH OPTIMIZATION ========= */
@media (max-width: 768px) {
  /* Global min-height removed — individual components define their own touch targets */

  /* Prevent iOS zoom on input focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Panel open body state */
  body.xt-panel-open {
    overflow: hidden;
  }

  body.xt-panel-open .composer {
    z-index: 10001;
  }

  /* Hide sidebar on mobile when panel open */
  body.xt-panel-open .sidebar {
    z-index: 9999;
  }
}

/* ========= SAFE AREA SUPPORT (Notch/Dynamic Island) ========= */
@supports (padding: env(safe-area-inset-bottom)) {
  /* Right panel safe area — desktop only, mobile handled by content padding */
  @media (min-width: 769px) {
    .xt-right-panel {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  .xt-active-trading-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .composer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 920px) {
    body.xt-trading-active .composer {
      bottom: calc(var(--mobile-trading-bar-h, 96px) + env(safe-area-inset-bottom));
    }

    /* Safe area top for notched devices (landscape mode / status bar) */
    .xt-right-panel-header {
      padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .xt-right-panel-content {
      max-height: none;
    }
  }
}

/* ========= MOBILE REGISTER MODAL ========= */
@media (max-width: 768px) {
  .modal-content.register-modal {
    padding: 20px 16px;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 12px;
  }
  .modal-content .modal-header {
    margin-bottom: 12px;
  }
  .modal-content .modal-header h2 {
    font-size: 20px;
  }
  .modal-content .modal-header p {
    font-size: 12px;
  }
  .modal-content .modal-icon {
    font-size: 36px;
  }
  .auth-form .form-group {
    gap: 4px;
    margin-bottom: 8px;
  }
  .auth-form input {
    padding: 10px 12px;
    font-size: 14px;
  }
  .auth-form .submit-btn.primary {
    padding: 12px 20px;
    font-size: 14px;
    margin-top: 8px;
  }
}

/* ========= MOBILE PANEL TOGGLE BUTTON (visible when panel closed) ========= */
.mobile-panel-toggle {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  .mobile-panel-toggle {
    display: flex;
    position: fixed;
    bottom: calc(var(--mobile-trading-bar-h, 48px) + env(safe-area-inset-bottom, 0px) + 4px);
    left: 12px;
    z-index: 10001;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--xt-bg-secondary, #1a1a1a);
    border: 1.5px solid rgba(33, 150, 238, 0.4);
    color: var(--xt-accent, #2196ee);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
  }
  /* Arrow points UP — tap to open panel from bottom */
  .mobile-panel-toggle svg {
    transform: rotate(90deg);
  }
  /* Hide when panel is open */
  body.xt-panel-open .mobile-panel-toggle {
    display: none;
  }
}

/* ========= MOBILE LANDSCAPE OVERLAY ========= */
.mobile-landscape-overlay {
  display: none; /* Hidden by default (desktop + portrait) */
}

@media (max-width: 920px) and (orientation: landscape) {
  body.is-mobile .mobile-landscape-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--bg-dark-primary, #1e1e1e);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .landscape-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--xt-text-secondary, rgba(255,255,255,0.6));
  }
  .landscape-message svg {
    opacity: 0.4;
    animation: rotate-hint 2s ease-in-out infinite;
  }
  .landscape-message p {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin: 0;
  }
  @keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    50% { transform: rotate(-90deg); }
    75% { transform: rotate(0deg); }
  }
}

/* ========= BUTTON GLOW EFFECTS ========= */

/* Primary / blue action buttons */
.xt-btn-primary,
.xt-trading-start,
.xt-atb-action-btn.primary,
.xt-custom-ticker button {
  box-shadow: 0 0 12px rgba(33, 150, 238, 0.35);
}
.xt-btn-primary:hover,
.xt-trading-start:hover,
.xt-atb-action-btn.primary:hover,
.xt-custom-ticker button:hover {
  box-shadow: 0 0 20px rgba(33, 150, 238, 0.55);
}
.xt-btn-primary:disabled,
.xt-trading-start:disabled {
  box-shadow: none;
}

/* Send button glow — hover only, no idle glow */
.sendbtn:hover {
  box-shadow: 0 0 12px rgba(33, 150, 238, 0.3) !important;
}

/* Danger / close buttons */
.xt-atb-close-all,
.at-sell-portfolio-btn,
.xt-atb-stop {
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
.xt-atb-close-all:hover,
.at-sell-portfolio-btn:hover,
.xt-atb-stop:hover {
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.5);
}

/* Improve button (purple) */
.xt-btn-improve:hover {
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
}

/* Secondary buttons - hover glow only */
.xt-atb-action-btn:hover,
.xt-btn-reset:hover,
.xt-code-actions button:hover {
  box-shadow: 0 0 10px rgba(33, 150, 238, 0.2);
}

/* Quick pick cards */
.xt-quick-card:hover {
  box-shadow: 0 0 14px rgba(33, 150, 238, 0.25);
}
.xt-quick-card.selected {
  box-shadow: 0 0 16px rgba(33, 150, 238, 0.4);
}

/* Preset strategy items */
.xt-preset-item:hover {
  box-shadow: 0 0 10px rgba(33, 150, 238, 0.15);
}
.xt-preset-item.selected {
  box-shadow: 0 0 12px rgba(33, 150, 238, 0.3);
}

/* Portfolio add button */
.xt-portfolio-add button:hover {
  box-shadow: 0 0 12px rgba(33, 150, 238, 0.3);
}

/* Light theme rules moved to light-theme.css */

/* ========= MODAL STYLES ========= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.modal-content {
  position: relative;
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: 16px;
  padding: 32px;
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--xt-text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
}

.modal-close:hover {
  background: var(--xt-bg-card);
  color: var(--xt-text-primary);
}

.modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.modal-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: var(--xt-text-primary);
  margin: 0 0 8px 0;
}

.modal-header p {
  color: var(--xt-text-muted);
  font-size: 14px;
  margin: 0;
}

/* ========= AUTH FORM STYLES ========= */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-form label {
  color: var(--xt-text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.auth-form input,
.auth-form select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: 8px;
  color: var(--xt-text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: var(--xt-accent);
  background: var(--xt-bg-card);
}

.auth-form input::placeholder {
  color: var(--xt-text-muted);
}

.auth-form .form-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.auth-form .form-disclaimer input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-primary, #2196ee);
}

.auth-form .form-disclaimer label {
  font-size: 12px;
  color: var(--xt-text-muted);
  line-height: 1.4;
}

.auth-form .form-disclaimer a {
  color: var(--accent-primary, #2196ee);
  text-decoration: none;
}

.auth-form .submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.auth-form .submit-btn.primary {
  background: var(--accent-primary, #2196ee);
  color: #ffffff;
}

.auth-form .submit-btn.primary:hover {
  background: #1e88e5;
  transform: translateY(-1px);
}

.auth-form .btn-arrow {
  font-size: 18px;
  transition: transform 0.2s;
}

.auth-form .submit-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.modal-footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--xt-border);
}

.modal-footer p {
  color: var(--xt-text-muted);
  font-size: 13px;
  margin: 0;
}

/* Forgot-password link inside login modal */
.forgot-password-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--xt-text-muted);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.forgot-password-link:hover {
  color: var(--xt-accent);
  text-decoration: underline;
}

.modal-footer a {
  color: var(--accent-primary, #2196ee);
  text-decoration: none;
  font-weight: 500;
}

.modal-footer a:hover {
  text-decoration: underline;
}

/* ========= QUICK REPLIES ========= */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
}

.quick-reply-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--accent-primary, #2196ee);
  background: transparent;
  color: var(--accent-primary, #2196ee);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.quick-reply-btn:hover {
  background: rgba(33, 150, 238, 0.15);
  transform: translateY(-1px);
}

.quick-reply-btn:active {
  transform: translateY(0);
}

/* Admin Panel Styles */
.admin-panel-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.admin-panel-modal.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.admin-panel-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 85vh;
  max-height: 85vh;
  background: var(--bg-dark-primary, #1e1e1e);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  background: var(--bg-dark-secondary, #1F1F1F);
}

.admin-panel-header h2 {
  margin: 0;
  font-size: 18px;
  color: #f1f1f1;
}

.admin-panel-close {
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-panel-close:hover {
  color: #f1f1f1;
}

.admin-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  background: var(--bg-dark-secondary, #1F1F1F);
}

.admin-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.admin-tab:hover {
  color: #ccc;
  background: var(--bg-dark-tertiary, #252525);
}

.admin-tab.active {
  color: var(--accent-primary, #2196ee);
  border-bottom-color: var(--accent-primary, #2196ee);
}

.admin-panel-controls {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg-dark-secondary, #1F1F1F);
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}

.admin-search {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-dark-tertiary, #252525);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: #f1f1f1;
  font-size: 14px;
}

.admin-filter {
  padding: 8px 12px;
  background: var(--bg-dark-tertiary, #252525);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: #f1f1f1;
  font-size: 14px;
}

.admin-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.admin-table-wrapper {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}

.admin-table th {
  background: var(--bg-dark-secondary, #1F1F1F);
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 11px;
}

.admin-table tr:hover {
  background: var(--bg-dark-tertiary, #252525);
}

.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  color: #888;
  border-top: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--bg-dark-secondary, #1F1F1F);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: #f1f1f1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.stat-card.positive .stat-value {
  color: var(--color-positive, #22c55e);
}

.stat-card.negative .stat-value {
  color: var(--color-negative, #ef4444);
}

.stat-card.highlight {
  background: var(--bg-dark-tertiary, #252525);
  border-color: var(--accent-primary, #2196ee);
}

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.badge-success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-positive, #22c55e);
}

.badge-gray {
  background: rgba(128, 128, 128, 0.15);
  color: #888;
}

/* Admin link — same pill box as every other header pill (size comes from
   .auth-buttons .btn). Solid accent blue with a slightly lighter blue
   border so the pill outline is visibly defined against the header bg. */
.admin-btn {
  background: var(--xt-accent, #2196ee) !important;
  color: #fff !important;
  border: 1px solid var(--xt-accent-hover, #42a5f5) !important;
  text-decoration: none;
}

.admin-btn:hover {
  background: var(--xt-accent-hover, #42a5f5) !important;
  border-color: var(--xt-accent, #2196ee) !important;
}

.admin-loading,
.admin-error {
  text-align: center;
  padding: 40px;
  color: #888;
}

.admin-error {
  color: var(--color-negative, #ef4444);
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

.positive { color: #22c55e; }
.negative { color: #ef4444; }

.admin-sub-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 0 8px;
}

.admin-sub-tab {
  padding: 6px 16px;
  background: var(--bg-dark-tertiary, #252525);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-sub-tab:hover {
  color: #ccc;
}

.admin-sub-tab.active {
  background: var(--accent-primary, #2196ee);
  color: #fff;
  border-color: var(--accent-primary, #2196ee);
}

/* Admin User Detail View */
.admin-user-detail {
  padding: 0 4px;
}

.admin-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}

.admin-detail-header h3 {
  margin: 0;
  color: #f1f1f1;
  font-size: 16px;
}

.admin-detail-section {
  margin-bottom: 20px;
}

.admin-detail-section h4 {
  color: #f1f1f1;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-primary, rgba(255,255,255,0.08));
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  gap: 6px 12px;
  background: var(--bg-dark-secondary, #1F1F1F);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 12px 16px;
}

.admin-detail-label {
  color: #888;
  font-size: 12px;
  padding: 4px 0;
}

.admin-detail-value {
  color: #f1f1f1;
  font-size: 13px;
  padding: 4px 0;
}

.admin-stat-card {
  background: var(--bg-dark-secondary, #1F1F1F);
  border: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.admin-detail-actions {
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-primary, rgba(255,255,255,0.08));
  margin-top: 8px;
}

/* Suggestion buttons */

/* =============================================
   Broker & Signals Modal CSS (moved from index.html)
   ============================================= */
/* ========= BROKER REGISTRATION MODAL ========= */
.broker-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.broker-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.8);
}
.broker-modal-content{
  position:relative;
  background:var(--bg-dark-secondary);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:32px;
  max-width:420px;
  width:100%;
  box-shadow:0 24px 48px rgba(0,0,0,0.4);
}
.broker-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:none;
  background:rgba(255,255,255,0.06);
  border-radius:8px;
  color:rgba(255,255,255,0.6);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s;
}
.broker-modal-close:hover{
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.broker-modal-header{
  text-align:center;
  margin-bottom:24px;
}
.broker-modal-icon{
  font-size:48px;
  margin-bottom:12px;
}
.broker-modal-header h2{
  font-size:22px;
  font-weight:600;
  color:#fff;
  margin:0 0 8px;
}
.broker-modal-header p{
  font-size:14px;
  color:rgba(255,255,255,0.5);
  margin:0;
}
.broker-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-group label{
  font-size:13px;
  font-weight:500;
  color:rgba(255,255,255,0.7);
}
.form-group input{
  padding:12px 14px;
  background:var(--bg-dark-primary);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:#fff;
  font-size:15px;
  outline:none;
  transition:border-color 0.2s;
}
.form-group input:focus{
  border-color:var(--accent-primary-dim);
}
.form-group input::placeholder{
  color:rgba(255,255,255,0.3);
}
.form-disclaimer{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  color:rgba(255,255,255,0.5);
}
.form-disclaimer input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--accent-primary);
}
.form-disclaimer a{
  color:var(--accent-primary);
  text-decoration:none;
}
.form-disclaimer a:hover{
  text-decoration:underline;
}
.broker-submit-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  background:linear-gradient(135deg, var(--accent-primary) 0%, #1565c0 100%);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
  margin-top:8px;
}
.broker-submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(59, 130, 246, 0.4);
}
.broker-submit-btn:active{
  transform:translateY(0);
}
.btn-arrow{
  font-size:18px;
}
.broker-footer{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,0.4);
  margin:16px 0 0;
}

/* Signals Modal */
.signals-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.signals-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.8);
}
.signals-modal-content{
  position:relative;
  background:var(--bg-dark-secondary);
  border-radius:16px;
  padding:28px;
  max-width:440px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 24px 48px rgba(0,0,0,0.5);
}
.signals-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.5);
  cursor:pointer;
  padding:4px;
  transition:color 0.2s;
}
.signals-modal-close:hover{
  color:#fff;
}
.signals-modal-header{
  text-align:center;
  margin-bottom:20px;
}
.signals-modal-icon{
  font-size:36px;
  margin-bottom:8px;
}
.signals-modal-header h2{
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin:0 0 6px;
}
.signals-modal-header p{
  font-size:14px;
  color:rgba(255,255,255,0.5);
  margin:0;
}
.signals-credits-display{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(245,158,11,0.1);
  border:1px solid rgba(245,158,11,0.3);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:16px;
}
.credits-label{
  color:rgba(255,255,255,0.7);
  font-size:13px;
}
.credits-amount{
  font-size:20px;
  font-weight:700;
  color:#f59e0b;
}
.add-credits-btn{
  background:rgba(245,158,11,0.2);
  border:1px solid rgba(245,158,11,0.4);
  color:#f59e0b;
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.add-credits-btn:hover{
  background:rgba(245,158,11,0.3);
}
.signals-subscription-status{
  text-align:center;
  margin-bottom:16px;
  padding:10px;
  background:rgba(255,255,255,0.05);
  border-radius:8px;
}
.subscription-current{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
}
.sub-label{
  color:rgba(255,255,255,0.5);
}
.sub-plan{
  color:#fff;
  font-weight:600;
}
.sub-rate{
  color:rgba(255,255,255,0.4);
  font-size:11px;
}
.signals-tiers{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}
.tier-card{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:2px solid transparent;
  border-radius:10px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
  position:relative;
}
.tier-card:hover{
  background:rgba(255,255,255,0.08);
}
.tier-card.active{
  border-color:var(--accent-primary);
  background:rgba(59,130,246,0.1);
}
.tier-badge{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color:#fff;
  font-size:9px;
  font-weight:700;
  padding:3px 8px;
  border-radius:10px;
  white-space:nowrap;
}
.tier-name{
  font-size:14px;
  font-weight:600;
  color:#fff;
  margin-bottom:4px;
  margin-top:6px;
}
.tier-price{
  font-size:22px;
  font-weight:700;
  color:var(--accent-primary);
}
.tier-price span{
  font-size:12px;
  font-weight:400;
  color:rgba(255,255,255,0.5);
}
.tier-rate{
  font-size:11px;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
}
.signals-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.signals-submit-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 24px;
  background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
  margin-top:6px;
}
.signals-submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(245,158,11,0.4);
}
.signals-footer{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,0.4);
  margin:16px 0 0;
}

/* =============================================
   Override CSS (moved from index.html)
   ============================================= */
/* FINAL OVERRIDE — Claude-style soft rounded rectangle (14px).
   The composer + auth header pills share this exact radius so the chat input
   bar and the buttons above it read as one consistent visual family. */
.inputbar,
.inputbar:focus,
.inputbar:focus-within {
  border-radius: 14px !important;
  overflow: hidden !important;
}
textarea,
textarea:focus,
textarea:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Send button - blue with white arrow */
.sendbtn {
  background: var(--accent-primary, #2196ee) !important;
  border: none !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(33, 150, 238, 0.3);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sendbtn svg {
  transform: translate(-1px, 1px);
}

.sendbtn::before {
  display: none;
}

.sendbtn:hover {
  background: #1e88e5 !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 238, 0.4);
}

.sendbtn:hover::before {
  display: none;
}

.sendbtn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(33, 150, 238, 0.3);
}

/* Markdown styles - ZERO EXTRA SPACING */
.bubble h1, .bubble h2, .bubble h3 { font-weight: 600; margin: 0; line-height: 1.3; }
.bubble h1 { font-size: 1.25em; }
.bubble h2 { font-size: 1.15em; }
.bubble h3 { font-size: 1.1em; }
.bubble strong { font-weight: 600; }
.bubble p { margin: 0; display: inline; }
.bubble ul, .bubble ol { margin: 0; padding-left: 1.2em; }
.bubble li { margin: 0; }
.bubble code { background: rgba(0,0,0,0.1); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
.bubble pre { margin: 0.3em 0; padding: 0.5em; background: rgba(0,0,0,0.05); border-radius: 4px; overflow-x: auto; }
.bubble table { border-collapse: collapse; margin: 0.3em 0; }
.bubble th, .bubble td { border: 1px solid rgba(0,0,0,0.2); padding: 0.3em 0.5em; }
/* Math styles */
.math-block { display: block; text-align: center; margin: 0.3em 0; overflow-x: auto; }
.math-inline { display: inline; }

/* Utility classes for theme-aware inline text */
.xt-text-dim { color: rgba(255, 255, 255, 0.5); }
.xt-text-muted-inline { color: rgba(255, 255, 255, 0.4); }
.xt-text-light { color: rgba(255, 255, 255, 0.7); }
.xt-bg-dim { background: rgba(255, 255, 255, 0.05); }

/* ========= STRATEGY LOADING OVERLAY ========= */
.xt-strategy-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  min-height: 120px;
}
.xt-strategy-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--xt-border, rgba(255,255,255,0.1));
  border-top-color: var(--xt-accent, #2196ee);
  border-radius: 50%;
  animation: xt-spin 0.8s linear infinite;
}
@keyframes xt-spin {
  to { transform: rotate(360deg); }
}
.xt-loading-cancel {
  margin-top: 16px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm, 6px);
  color: var(--xt-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.xt-loading-cancel:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* Copy code button — in the tab bar, shown only for Python view */
.xt-copy-code-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--xt-text-muted);
  cursor: pointer;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s;
}
.xt-copy-code-btn:hover {
  border-color: var(--xt-accent);
  color: var(--xt-accent);
  background: rgba(33, 150, 238, 0.08);
}

/* =====================================================================
   Reasoning panel — collapsible category-level breakdown rendered under
   recommendation bubbles. Theme-neutral via the master-grey palette.
   ===================================================================== */
.bubble .xt-reasoning-panel {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--xt-master-grey-dim, rgba(212,212,212,0.15));
  font-size: 13px;
}
.bubble .xt-reasoning-panel > summary {
  cursor: pointer;
  list-style: none;
  color: var(--xt-master-grey, #d4d4d4);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 0;
  user-select: none;
}
.bubble .xt-reasoning-panel > summary::-webkit-details-marker { display: none; }
.bubble .xt-reasoning-panel > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 12px;
  transition: transform 0.15s ease;
}
.bubble .xt-reasoning-panel[open] > summary::before {
  content: "▾ ";
}
.bubble .xt-reasoning-panel > summary:hover {
  color: var(--xt-master-grey-hover, #e8e8e8);
}
.bubble .xt-reasoning-body {
  padding: 10px 0 4px;
}
.bubble .xt-reasoning-categories {
  display: grid;
  grid-template-columns: minmax(90px, max-content) auto 1fr;
  gap: 4px 14px;
  align-items: center;
  margin-bottom: 12px;
}
.bubble .xt-cat-row {
  display: contents;
}
.bubble .xt-cat-label {
  font-weight: 500;
  color: var(--xt-master-grey, #d4d4d4);
}
.bubble .xt-cat-bars {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.bubble .xt-cat-bar {
  display: inline-block;
  width: 8px;
  height: 10px;
  border-radius: 1px;
  background: var(--xt-master-grey, #d4d4d4);
}
.bubble .xt-cat-bar.muted {
  background: var(--xt-master-grey-dim, rgba(212,212,212,0.15));
}
.bubble .xt-cat-row[data-direction="bullish"] .xt-cat-bar:not(.muted) {
  background: var(--xt-success, #22c55e);
}
.bubble .xt-cat-row[data-direction="bearish"] .xt-cat-bar:not(.muted) {
  background: var(--xt-danger, #ef4444);
}
.bubble .xt-cat-dir {
  color: var(--xt-master-grey, #d4d4d4);
  font-size: 12px;
  text-transform: lowercase;
}
.bubble .xt-reasoning-section-label {
  font-weight: 500;
  color: var(--xt-master-grey, #d4d4d4);
  font-size: 12px;
  margin-bottom: 4px;
}
.bubble .xt-reasoning-flip ul {
  margin: 0 0 10px;
  padding-left: 18px;
  color: var(--xt-master-grey, #d4d4d4);
}
.bubble .xt-reasoning-flip li {
  margin: 2px 0;
  font-size: 12px;
}
.bubble .xt-reasoning-validator {
  font-size: 12px;
  color: var(--xt-master-grey, #d4d4d4);
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--xt-master-grey-dim, rgba(212,212,212,0.15));
}
.bubble .xt-reasoning-validator.agrees::before {
  content: "✓  ";
  color: var(--xt-success, #22c55e);
  font-weight: 600;
}
.bubble .xt-reasoning-validator.disagrees::before {
  content: "!  ";
  color: var(--xt-danger, #ef4444);
  font-weight: 600;
}

/* "Review this trade" link on closed-trade EXIT rows in the activity log.
   Rendered only when the row has metadata.has_snapshot — clicking dispatches
   to window.requestPostTradeReview which fills the chat input + submits. */
.sidebar-log-review,
.xt-log-review {
  color: var(--xt-accent, #2196ee);
  text-decoration: none;
  font-weight: 500;
  margin-left: 6px;
  cursor: pointer;
}
.sidebar-log-review:hover,
.xt-log-review:hover {
  text-decoration: underline;
  color: var(--xt-accent-hover, #42a5f5);
}

/* =====================================================================
   Deposit panel shared header — back arrow + title + USD balance card.
   Used at the top of every deposit sub-panel (4-tile menu, placeholders,
   crypto panel) so the user always sees their current balance and has a
   one-click path back to the main 4-tile selector.
   ===================================================================== */
.xt-deposit-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xt-deposit-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.xt-deposit-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm, 4px);
  color: var(--xt-master-grey);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.xt-deposit-back:hover {
  background: var(--xt-master-grey-dim);
  border-color: var(--xt-master-grey);
  color: var(--xt-master-grey-hover);
}
.xt-deposit-title-text {
  flex: 1;
  min-width: 0;
}
.xt-deposit-balance-card {
  background: rgba(33, 150, 238, 0.1);
  border: 1px solid rgba(33, 150, 238, 0.2);
  border-radius: var(--xt-radius-md, 6px);
  padding: 14px 16px;
  text-align: center;
}
.xt-deposit-balance-label {
  font-size: 11px;
  color: var(--xt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.xt-deposit-balance-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--xt-accent);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Deposit type selector tiles (Item #2)
   Menu of 4 deposit types — user clicks a tile to open that type's panel.
   ===================================================================== */
.xt-deposit-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.xt-deposit-type-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md, 6px);
  color: var(--xt-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.xt-deposit-type-tile:hover {
  background: var(--xt-bg-card-hover);
  border-color: var(--xt-accent);
}
.xt-deposit-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--xt-radius-sm, 4px);
  background: var(--xt-master-grey-dim);
  color: var(--xt-text-primary);
}
.xt-deposit-type-name {
  font-size: 14px;
  font-weight: 600;
}
.xt-deposit-type-desc {
  font-size: 12px;
  color: var(--xt-text-muted);
}

/* "Coming soon" placeholder card (Bank Wire / Credit Card / E-Transfer) */
.xt-deposit-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md, 6px);
  text-align: center;
}

/* Request-a-call deposit form (Bank Wire / Credit Card / E-Transfer) —
   theme-neutral via design tokens; inputs match the panel input family. */
.xt-deposit-call-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-md, 6px);
}
.xt-deposit-call-copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--xt-text-muted);
  margin: 0 0 4px;
}
.xt-deposit-call-form input,
.xt-deposit-call-form select {
  background: var(--xt-bg-secondary);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm, 4px);
  color: var(--xt-text-primary, #fff);
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}
.xt-deposit-call-form input:focus,
.xt-deposit-call-form select:focus {
  border-color: var(--xt-accent, #2196ee);
}
.xt-deposit-call-submit {
  margin-top: 4px;
  background: var(--xt-success, #22c55e);
  border: 1px solid #4ade80;
  border-radius: var(--xt-radius-sm, 4px);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.xt-deposit-call-submit:hover {
  background: #4ade80;
}
.xt-deposit-placeholder-icon {
  color: var(--xt-text-muted);
}
.xt-deposit-placeholder p {
  color: var(--xt-text-secondary);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* =====================================================================
   Fireblocks panel — Deposit/Withdraw + History tabs (Item #3)
   ===================================================================== */
.xt-fb-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--xt-border);
  padding-bottom: 0;
}
.xt-fb-tab {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--xt-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.xt-fb-tab:hover {
  color: var(--xt-text-primary);
}
.xt-fb-tab.active {
  color: var(--xt-accent);
  border-bottom-color: var(--xt-accent);
}

/* Deposit history rows */
.xt-fb-history-row {
  padding: 12px 14px;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-sm, 4px);
  margin-bottom: 8px;
}
.xt-fb-history-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.xt-fb-history-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--xt-text-primary);
}
.xt-fb-history-usd {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.xt-fb-history-row-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--xt-text-muted);
}
.xt-fb-history-amount {
  font-variant-numeric: tabular-nums;
}
.xt-fb-history-date {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.xt-fb-history-hash,
.xt-fb-history-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--xt-text-muted);
  word-break: break-all;
}

/* ===== SECRET AGENDA / PROACTIVE BUBBLES =====
   Green-highlighted bubbles for content driven by the Secret Agenda layer
   (lifecycle greetings + proactive engager messages). Visually distinct
   from normal LLM replies so the user reads them as "the platform talking"
   not "the model answering my question". Wired via
   typewriteBotMessage(text, cb, 'agenda-bubble') — see app-ui.js. */
.row.bot.agenda-bubble .bubble.bot,
.bubble.bot.agenda-bubble {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-left: 3px solid #22c55e;
}
/* Inline links inside agenda bubbles get the matching green accent so
   the "Run deeper analysis →" / cited-URL anchors don't fight the highlight. */
.bubble.bot.agenda-bubble a {
  color: #16a34a;
}

/* =====================================================================
   Trending sidebar + proactive button polish (§10n)
   Wired by renderProactiveButtons / renderTrendingTickers in app-ui.js.
   Base trending styles live inline in index.html (~lines 2898-2942);
   status.css loads after at index.html:2952, so these rules cascade-win.
   ===================================================================== */

/* Proactive engager buttons — orange Explore + green Trade now.
   Base layout/sizing comes from .xt-experience-btn (status.css:2270). */
.xt-experience-btn--explore {
  color: var(--xt-warning);
  border-color: var(--xt-warning);
}
.xt-experience-btn--explore:hover {
  background: rgba(245, 158, 11, 0.12);
}
.xt-experience-btn--trade {
  color: var(--xt-success);
  border-color: var(--xt-success);
}
.xt-experience-btn--trade:hover {
  background: rgba(34, 197, 94, 0.12);
}
/* Wrapper for the "Trade now" pill appended inside recommendation bubbles
   (renderTradeNowButton). Theme-neutral — the pill itself carries the colors. */
.xt-trade-now-wrap {
  display: flex;
  margin-top: 10px;
}

/* ">" action buttons (round 5) — chromeless: no circle, no background, no border.
   White arrow with strong blue multi-layer glow. The green-gradient (round 3-4)
   blended into the bullish row tint (invisible) and clashed on the bearish red
   tint (ugly). White stays high-contrast against both green/red/neutral tinted
   rows in dark theme. Light theme override swaps to solid accent-blue so a white
   arrow doesn't fade against the white sidebar background.
   Implementation notes from round 3-4 still apply: the arrow shape is painted
   via CSS `mask` (the inline <svg> inside the button is hidden); `background:
   transparent` MUST precede `background-image:` so the light-theme.css base
   rule for `.trending-launch-arrow:hover` doesn't leak through the shorthand. */
.trending-launch-arrow,
.strat-trending-launch-arrow {
  background: transparent !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #dbeafe 100%) !important;
  border: 0 !important;
  padding: 0 !important;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 80%;
          mask-size: 80%;
  filter:
    drop-shadow(0 0 2px rgba(33, 150, 238, 1))
    drop-shadow(0 0 6px rgba(33, 150, 238, 0.75))
    drop-shadow(0 0 14px rgba(33, 150, 238, 0.40));
  transition: filter .2s ease, transform .15s ease, background-image .2s ease;
}
.trending-launch-arrow svg,
.strat-trending-launch-arrow svg {
  display: none;
}
.trending-launch-arrow:hover,
.strat-trending-launch-arrow:hover {
  background: transparent !important;
  background-image: linear-gradient(135deg, #ffffff 0%, #ffffff 100%) !important;
  filter:
    drop-shadow(0 0 3px rgba(33, 150, 238, 1))
    drop-shadow(0 0 10px rgba(33, 150, 238, 0.95))
    drop-shadow(0 0 22px rgba(33, 150, 238, 0.55));
  transform: translateX(2px) scale(1.08);
}

/* Light-theme override — solid accent-blue arrow because white would disappear
   against the white sidebar background. Same blue glow halo. */
body.light-theme.light-theme .trending-launch-arrow,
body.light-theme.light-theme .strat-trending-launch-arrow {
  background: transparent !important;
  background-image: linear-gradient(135deg, #1e88e5 0%, #2196ee 50%, #42a5f5 100%) !important;
}
body.light-theme.light-theme .trending-launch-arrow:hover,
body.light-theme.light-theme .strat-trending-launch-arrow:hover {
  background: transparent !important;
  background-image: linear-gradient(135deg, #1976d2 0%, #1e88e5 50%, #2196ee 100%) !important;
}

/* AI-score row tinting — Intraday Trending only (Strategy Ready stays neutral).

   Fills are FULLY OPAQUE by design. Any alpha here re-creates the "grey bar
   over the green" artifact: a translucent fill blends with the dark sidebar
   into a muted interior while the brighter border/rail frame it — reading as
   a translucent object sitting on top of the row. Do NOT reintroduce rgba
   alpha, a separate border tone, or the inset rail on these rows — fill and
   border stay the SAME solid color so the row is one uniform block.

   Light-theme note: the plain `.trending-ticker.trending-row-bullish` rule
   (specificity 0,2,0) LOSES in light theme because light-theme.css:183 has
   `body.light-theme .trending-ticker { background: ... !important }`
   (0,2,1, !important, loaded AFTER status.css). The `body.light-theme.light-theme`
   variants below raise the override to (0,4,1), which beats it unconditionally. */
.trending-ticker.trending-row-bullish {
  background: #22c55e !important;
  border-color: #22c55e !important;
  box-shadow: none !important;
}
.trending-ticker.trending-row-bullish:hover {
  background: #31d36c !important;
}
.trending-ticker.trending-row-bearish {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: none !important;
}
.trending-ticker.trending-row-bearish:hover {
  background: #f25858 !important;
}

/* Text contrast on the solid fills — dark theme. The base colors in
   index.html (~2903/2910) are faint white (rank 0.2, ATR 0.35) tuned for the
   dark rows; on vivid green/red they wash out. 0,3,0 specificity beats the
   0,1,0 base rules without !important. */
.trending-ticker.trending-row-bullish .trending-rank,
.trending-ticker.trending-row-bearish .trending-rank {
  color: rgba(255, 255, 255, 0.55);
}
.trending-ticker.trending-row-bullish .trending-atr,
.trending-ticker.trending-row-bearish .trending-atr {
  color: rgba(255, 255, 255, 0.9);
}

/* Light-theme overrides — same solid values (opaque colors render identically
   over any page background). Text forced white with !important because
   light-theme.css (lines ~185-191) forces dark text on trending rows with
   0,2,1 !important rules; the double-class prefix + !important wins. */
body.light-theme.light-theme .trending-ticker.trending-row-bullish {
  background: #22c55e !important;
  border-color: #22c55e !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bullish:hover {
  background: #31d36c !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bearish {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bearish:hover {
  background: #f25858 !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bullish .trending-rank,
body.light-theme.light-theme .trending-ticker.trending-row-bearish .trending-rank {
  color: rgba(255, 255, 255, 0.55) !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bullish .trending-atr,
body.light-theme.light-theme .trending-ticker.trending-row-bearish .trending-atr {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bullish .trending-symbol,
body.light-theme.light-theme .trending-ticker.trending-row-bearish .trending-symbol,
body.light-theme.light-theme .trending-ticker.trending-row-bullish .trending-score,
body.light-theme.light-theme .trending-ticker.trending-row-bearish .trending-score {
  color: #ffffff !important;
}

/* Drop the click affordance on Intraday Trending tickers — the inline
   onclick was removed from renderTrendingTickers; these rules kill the
   pointer cursor + blue hover-color so nothing visually suggests the row
   or symbol is still clickable. Action moves to the right-arrow only.
   `!important` on the symbol :hover is needed because light-theme.css
   sets `.trending-symbol:hover { color: #2196ee !important }`. */
.trending-ticker {
  cursor: default;
}
.trending-symbol {
  cursor: default;
}
.trending-symbol:hover {
  color: inherit !important;
}

/* ============================================================
   Tutorial menu — startup modal
   Master-grey tokens + radius tokens: adapts to both themes.
   ============================================================ */
/* ---- startup ask card (index2 only — markup exists only there).
   Small corner prompt replacing the auto-opening tutorial window. ---- */
.xt-tutorial-ask {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10049;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 264px;
  padding: 16px 18px;
  background: var(--v2-bg1, var(--xt-bg-card, #1a1a1e));
  border: 1px solid var(--v2-line-strong, var(--xt-border, rgba(255,255,255,.14)));
  border-radius: 12px;
  box-shadow: var(--v2-shadow, 0 18px 50px rgba(0,0,0,.45));
}
.xt-tutorial-ask-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--v2-text, var(--xt-text-primary, #e9e7e2));
}
.xt-tutorial-ask-row { display: flex; gap: 8px; }
.xt-tutorial-ask-yes,
.xt-tutorial-ask-no {
  flex: 1;
  padding: 8px 0;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.xt-tutorial-ask-yes {
  border: none;
  background: var(--v2-blue, #2f9df2);
  color: #fff;
}
.xt-tutorial-ask-no {
  background: transparent;
  border: 1px solid var(--v2-line-strong, rgba(255,255,255,.14));
  color: var(--v2-muted, #8e8c86);
}
.xt-tutorial-ask-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--v2-faint, #5c5a55);
  cursor: pointer;
  user-select: none;
}
.xt-tutorial-ask-check input { accent-color: var(--v2-blue, #2f9df2); }

.xt-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.xt-tutorial-modal {
  display: flex;
  width: min(920px, 94vw);
  max-height: 88vh;
  background: var(--xt-bg-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius-lg);
  overflow: hidden;
  box-shadow: var(--xt-shadow);
}
.xt-tutorial-side {
  width: 210px;
  flex: 0 0 210px;
  border-right: 1px solid var(--xt-border);
  padding: 14px 10px;
  background: var(--xt-bg-secondary);
}
.xt-tutorial-side-title {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--xt-master-grey);
  opacity: 0.7;
  margin: 2px 8px 10px;
}
.xt-tutorial-item {
  padding: 8px 10px;
  border-radius: var(--xt-radius-sm);
  font-size: 13px;
  color: var(--xt-master-grey);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xt-tutorial-item:hover { background: var(--xt-master-grey-dim); }
.xt-tutorial-item.active {
  background: var(--xt-master-grey-dim);
  color: var(--xt-master-grey-hover);
  font-weight: 600;
}
.xt-tutorial-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.xt-tutorial-player {
  position: relative;
  background: #000;
  line-height: 0;
  /* Final size BEFORE video metadata loads (videos are 16:9, lazy-loaded):
     without this the panel opened collapsed then jumped to full height
     once metadata arrived (Michael 2026-08-11). Capped like the old
     video max-height so tall viewports don't overgrow the modal. */
  aspect-ratio: 16 / 9;
  max-height: min(62vh, 520px);
}
.xt-tutorial-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: min(62vh, 520px);
  object-fit: contain;
  cursor: pointer;
}
.xt-tutorial-player:fullscreen video { max-height: 100vh; height: 100vh; }

/* Big white play button — hidden while playing via the .playing class */
.xt-tutorial-bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, background 0.12s ease;
}
.xt-tutorial-bigplay:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.07);
}
.xt-tutorial-bigplay svg { width: 34px; height: 34px; margin-left: 3px; }
.xt-tutorial-player.playing .xt-tutorial-bigplay { display: none; }

/* Bottom overlay bar: progress + time + sound/fullscreen on a dark scrim */
.xt-tutorial-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: normal;
}
.xt-tutorial-progress {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  touch-action: none;   /* pointer-drag seeking on touch screens */
  overflow: hidden;
}
.xt-tutorial-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--xt-accent, #2196ee);
  pointer-events: none;
}
.xt-tutorial-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.xt-tutorial-bar-spacer { flex: 1; }
.xt-tutorial-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.xt-tutorial-ctrl {
  width: 30px;
  height: 30px;
  border-radius: var(--xt-radius-sm);
  border: none;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.xt-tutorial-ctrl:hover { background: rgba(255, 255, 255, 0.18); }
.xt-tutorial-ctrl svg { width: 18px; height: 18px; }
.xt-tutorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--xt-border);
}
.xt-tutorial-footer-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.xt-tutorial-hint {
  font-size: 11px;
  color: var(--xt-master-grey);
  opacity: 0.6;
  padding-left: 23px;   /* aligns under the checkbox label text */
}
.xt-tutorial-hint code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  background: var(--xt-master-grey-dim);
  padding: 1px 5px;
  border-radius: 3px;
}
.xt-tutorial-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--xt-master-grey);
  cursor: pointer;
  user-select: none;
}
.xt-tutorial-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--xt-accent);
  cursor: pointer;
  margin: 0;
}
.xt-tutorial-close {
  height: 28px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--xt-master-grey);
  background: transparent;
  color: var(--xt-master-grey);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.xt-tutorial-close:hover { background: var(--xt-master-grey-dim); }

/* Small screens: sidebar collapses to a top bar; modal goes vertical */
@media (max-width: 640px) {
  .xt-tutorial-overlay { padding: 10px; }
  .xt-tutorial-modal { flex-direction: column; width: 96vw; max-height: 92vh; }
  .xt-tutorial-side {
    width: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--xt-border);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
  }
  .xt-tutorial-side-title { margin: 0 4px 0 0; }
  .xt-tutorial-player video { max-height: 48vh; }
  .xt-tutorial-footer { flex-wrap: wrap; }
  .xt-tutorial-bigplay { width: 56px; height: 56px; }
  .xt-tutorial-bigplay svg { width: 26px; height: 26px; }
}

/* ============================================================
   Contact-support links + deposit-panel User ID (index2 surfaces)
   ============================================================ */
.callback-support-line,
.xt-deposit-support-line {
  font-size: 11.5px;
  color: var(--xt-text-muted, #8e8c86);
  text-align: center;
  margin: 10px 0 0;
}
.callback-support-line a,
.xt-deposit-support-line a {
  color: var(--xt-accent, #2196ee);
  text-decoration: none;
}
.callback-support-line a:hover,
.xt-deposit-support-line a:hover { text-decoration: underline; }
.xt-deposit-uid {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--xt-text-muted, #8e8c86);
}
.xt-deposit-uid b {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--xt-master-grey, #d4d4d4);
}
body.light-theme .xt-deposit-uid b { color: #4b5563; }

/* ============================================================
   Past positions (user portfolio/floor, 2026-08-22)
   ============================================================ */
.rp-past-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid var(--xt-border, rgba(255,255,255,0.08));
}
.rp-past-row:last-child { border-bottom: none; }
.rp-past-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rp-past-sym { font-weight: 700; font-size: 13px; }
.rp-past-side {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  border-radius: 4px; padding: 1px 5px;
}
.rp-past-side.l { color: #4caf50; border: 1px solid rgba(76,175,80,0.5); }
.rp-past-side.s { color: #ef5350; border: 1px solid rgba(239,83,80,0.5); }
.rp-past-when { font-size: 10.5px; color: var(--xt-text-muted, #8e8c86); white-space: nowrap; }
.rp-past-pnl { display: flex; align-items: baseline; gap: 7px; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.rp-past-pnl .usd { font-size: 12.5px; font-weight: 600; }
.rp-past-pnl .pct { font-size: 10.5px; opacity: 0.85; }
.rp-past-pnl.up { color: #4caf50; }
.rp-past-pnl.down { color: #ef5350; }
/* Positions / Closed positions tabs — section-title standard (10px
   letter-spaced caps), NOT the bigger deposit-panel tabs. */
.rp-pos-tabs {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--xt-border, rgba(255,255,255,0.08));
}
.rp-pos-tab {
  background: none;
  border: none;
  padding: 0 1px 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--xt-text-muted, #8e8c86);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rp-pos-tab:hover { color: var(--xt-text-primary, #fff); }
.rp-pos-tab.active {
  color: var(--xt-text-primary, #fff);
  border-bottom-color: var(--xt-accent, #2196ee);
}