/* ========= 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 */
.sidebar-activity-log {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 10px 8px;
  overflow: hidden;
}
.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;
}
.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;
}
.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;
}

body.xt-panel-open .guest-badge,
body.xt-panel-open .call-btn,
body.xt-panel-open .login-btn {
  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);
}

/* 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;
}
.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);
}

/* ">" 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).
   Round 4: two fixes after the round-3 polish still read as "dark middle" in
   dark theme and "no tint at all" in light theme.

   (1) Opacity bump 0.55 → 0.75 because alpha-blend math at 0.55 over #1a1a1a
       gives rgb(30, 120, 63) — visible green but reads as dark olive at small
       row heights. At 0.75 the wash lands as rgb(32, 154, 77) in dark and
       rgb(89, 212, 134) in light — clearly green in both themes.

   (2) Light-theme override below — 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 }`
       (specificity 0,2,1, !important, loaded AFTER status.css). Adding a
       `body.light-theme.light-theme` variant raises the override specificity to
       (0,4,1), which beats theirs unconditionally. Same trick for the :hover
       state at light-theme.css:184. */
.trending-ticker.trending-row-bullish {
  background: rgba(34, 197, 94, 0.75) !important;
  border-color: rgba(34, 197, 94, 0.90) !important;
  box-shadow: inset -4px 0 0 var(--xt-success) !important;
}
.trending-ticker.trending-row-bullish:hover {
  background: rgba(34, 197, 94, 0.85) !important;
}
.trending-ticker.trending-row-bearish {
  background: rgba(239, 68, 68, 0.75) !important;
  border-color: rgba(239, 68, 68, 0.90) !important;
  box-shadow: inset -4px 0 0 var(--xt-danger) !important;
}
.trending-ticker.trending-row-bearish:hover {
  background: rgba(239, 68, 68, 0.85) !important;
}

/* Light-theme overrides — see fix (2) in the comment above. box-shadow and other
   non-conflicting properties inherit from the dark rule (not overridden in
   light-theme.css), so only `background` and `border-color` need restating. */
body.light-theme.light-theme .trending-ticker.trending-row-bullish {
  background: rgba(34, 197, 94, 0.75) !important;
  border-color: rgba(34, 197, 94, 0.90) !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bullish:hover {
  background: rgba(34, 197, 94, 0.85) !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bearish {
  background: rgba(239, 68, 68, 0.75) !important;
  border-color: rgba(239, 68, 68, 0.90) !important;
}
body.light-theme.light-theme .trending-ticker.trending-row-bearish:hover {
  background: rgba(239, 68, 68, 0.85) !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;
}