/* Terminal — depth pass.
 *
 * Purely additive: loaded last, overrides nothing structural. Remove the one
 * <link> in index.html and the terminal returns exactly to its previous look.
 *
 * The problem this fixes: borders were #2B3139 — the same value as the raised
 * surfaces — so every edge dissolved into the panel behind it and the whole
 * UI read flat. Depth here comes from a real edge colour plus elevation
 * shadows, not from gloss. Palette, density and layout are untouched.
 */

:root {
  --edge:      #333B45;                       /* hairline, a step above surface */
  --edge-soft: #2E353E;
  --lit:       rgba(255, 255, 255, .055);     /* top highlight on raised controls */
  --gold:      #E8B341;

  --elev-1: 0 1px 2px rgba(0, 0, 0, .45);
  --elev-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px -8px rgba(0, 0, 0, .55);
  --elev-3: 0 4px 10px rgba(0, 0, 0, .4), 0 18px 40px -12px rgba(0, 0, 0, .7);
  --ring-gold: 0 0 0 1px rgba(232, 179, 65, .35), 0 0 12px -2px rgba(232, 179, 65, .28);
}

/* ── structural edges ─────────────────────────────────────────── */
.topbar {
  border-bottom: 1px solid var(--edge);
  box-shadow: var(--elev-1);
  position: relative;
  z-index: 5;
}
.tabs { border-bottom: 1px solid var(--edge); }
.ps   { border-bottom: 1px solid var(--edge-soft); }
.pi, .hi { border-bottom: 1px solid var(--edge-soft); }

/* the slide-in order panel should feel like it sits above the chart */
.panel {
  border-left: 1px solid var(--edge);
  box-shadow: -12px 0 32px -14px rgba(0, 0, 0, .8);
}

/* ── raised controls get a lit top edge ───────────────────────── */
.trade-btn, .btn, .ot, .sym-picker .sel {
  box-shadow: inset 0 1px 0 var(--lit), var(--elev-1);
}
.trade-btn { border-radius: 4px; transition: box-shadow .15s ease, background .15s ease; }
.btn       { border-radius: 4px; }
.ot        { border-radius: 4px; }

.trade-btn:hover { box-shadow: inset 0 1px 0 var(--lit), var(--elev-2); }
.btn:hover       { filter: brightness(1.06); }

/* active states earn a soft halo instead of a flat fill */
.trade-btn.on, .ot.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--ring-gold); }
.btn-buy  { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 10px -3px rgba(14, 203, 129, .5); }
.btn-sell { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 10px -3px rgba(246, 70, 93, .5); }

/* ── inputs: recessed, with a real focus ring ─────────────────── */
.ord input, .field input {
  border: 1px solid var(--edge-soft);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ord input:focus, .field input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), var(--ring-gold);
}

/* ── the active tab gets a lit underline, not just a bar ──────── */
.tab { transition: color .15s ease; }
.tab:hover { color: #C7CDD6; }
.tab.on {
  border-bottom-color: var(--gold);
  box-shadow: 0 2px 10px -4px rgba(232, 179, 65, .8);
}

/* ── floating menus: modern, elevated, rounded rows ───────────── */
.sym-picker .sel { border-radius: 5px; }
.sym-picker .list {
  border: 1px solid var(--edge);
  border-radius: 7px;
  padding: 4px;
  box-shadow: var(--elev-3);
  background: #1B2027;
}
.sym-picker .sym-item {
  border-bottom: none;                 /* row rules are dated; hover does the work */
  border-radius: 5px;
  padding: 6px 9px;
  transition: background .12s ease, color .12s ease;
}
.sym-picker .sym-item:hover { background: #262E37; color: var(--gold); }

/* ── the chart library's own menus ────────────────────────────── */
.aichart-pro-modal {
  border-radius: 9px !important;
  border: 1px solid var(--edge) !important;
  box-shadow: var(--elev-3) !important;
}
.aichart-pro-list.aichart-pro-indicator-modal-list { padding: 4px; }
.aichart-pro-indicator-modal-list li.row {
  border-radius: 5px;
  padding-left: 6px;
  padding-right: 6px;
  transition: background .12s ease;
}
.aichart-pro-indicator-modal-list li.row:hover { background: rgba(255, 255, 255, .045); }
.aichart-pro-indicator-modal-list li.title {
  color: #7C8794;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: 10px;
}

/* toolbar + drawing rail: give the icons a hairline separation and lift */
.aichart-pro-period-bar { border-bottom: 1px solid var(--edge) !important; }
.aichart-pro-drawing-bar { border-right: 1px solid var(--edge) !important; }
.aichart-pro-drawing-bar .item {
  border-radius: 5px;
  transition: background .12s ease;
}
.aichart-pro-drawing-bar .item:hover { background: rgba(255, 255, 255, .05); }
.aichart-pro-period-bar .item {
  border-radius: 5px;
  transition: background .12s ease, color .12s ease;
}
.aichart-pro-period-bar .item:hover { background: rgba(255, 255, 255, .05); }

/* ── keyboard focus stays visible everywhere ──────────────────── */
button:focus-visible,
[class*="aichart-pro"] [tabindex]:focus-visible,
.sym-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── stacking: trade panel above the floating AI button ──────────
   The button (z-index 25) used to cover the trade panel (10) including its
   own close control. The button also steps aside while the panel is open,
   but this is the structural guarantee — belt as well as braces. NOTE: this
   MUST live here, not in ai.css: index.html's inline <style> is parsed after
   the <link> block, so a rule up there loses on equal specificity. */
.panel { z-index: 30; }

/* ── account actions: top up / start over ────────────────────────
   A stop-out is the lesson; a dead account with no way back is a wall. */
.acct-acts { display: flex; gap: 6px; margin-top: 8px; }
.acct-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C7CDD6;
  background: #2B3139;
  border: 1px solid var(--edge);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--lit);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.acct-btn:hover { background: #333B45; color: #EAECEF; box-shadow: inset 0 1px 0 var(--lit), var(--elev-1); }
.acct-btn.danger:hover { color: #F6465D; border-color: rgba(246,70,93,.5); }
.acct-btn.confirming { color: #F6465D; border-color: #F6465D; }
.acct-msg { font-size: 9px; color: var(--gold); min-height: 12px; margin-top: 5px; }

/* ── economic calendar (trade panel) ─────────────────────────────
   Dense by design: a trader scans this, they do not read it. */
.cal-note { font-size: 8px; color: #5D6873; text-transform: uppercase; letter-spacing: .07em; padding: 2px 0 6px; }
.cal-day {
  font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); padding: 8px 0 4px; border-bottom: 1px solid var(--edge-soft); margin-bottom: 4px;
}
.cal-row {
  display: grid;
  grid-template-columns: 34px 26px 8px 1fr auto;
  align-items: center; gap: 6px;
  padding: 4px 0; font-size: 10px;
  border-bottom: 1px solid var(--edge-soft);
}
.cal-row.past { opacity: .45; }
.cal-time { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: #C7CDD6; }
.cal-cur { font-weight: 700; font-size: 9px; color: #848E9C; }
.cal-imp { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-imp.high { background: #F6465D; }
.cal-imp.medium { background: #E8B341; }
.cal-imp.low { background: #474D57; }
.cal-title { color: #EAECEF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-nums { display: flex; gap: 5px; font-family: ui-monospace, monospace; font-size: 9px; }
.cal-nums b { color: #0ECB81; font-weight: 700; }
.cal-nums i { color: #848E9C; font-style: normal; }
.ni .t { display: block; color: #EAECEF; font-weight: 600; margin-bottom: 2px; text-decoration: none; }
.ni a.t:hover { color: var(--gold); }

/* ── per-drawing delete X (rides on the selected drawing) ──────── */
#drawDelX {
  position: absolute;
  z-index: 8;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #F6465D;
  background: #1E2329;
  border: 1px solid rgba(246, 70, 93, .6);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--elev-2);
  touch-action: manipulation;
  padding: 0;
}
#drawDelX:active { background: #2A1518; transform: scale(1.15); }
@media (max-width: 768px) {
  #drawDelX { width: 32px; height: 32px; font-size: 18px; } /* thumb-sized */
}