/* =====================================================================
   BIRD RADAR TERMINAL
   Layout follows CoinMarketCap's Agentic Charts; the visual language
   (near-black surfaces, hairline borders, orange accent, Roboto) follows
   birdeye.so. Mascot and voice follow the narrative brief.
   ===================================================================== */

:root{
  /* shared with the home page — one brand, one palette */
  --bg:#0A0A0B;
  --panel:#101013;
  --panel-2:#15151A;
  --panel-3:#1C1C22;
  --line:#23232B;
  --line-soft:#1A1A20;

  --text:#E9E7E4;
  --muted:#8B8884;
  --dim:#5C5A57;

  --up:#3FD98B;
  --down:#F6583C;

  --orange:#FF5A00;
  --orange-2:#FFBA00;
  --blue:#3D5AFF;
  --pink:#FF4D8F;

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --display:'Space Grotesk',var(--sans);

  --topbar:34px;
  --rail:360px;
  --tools:46px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:13px;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer}
.mono{font-family:var(--mono)}
.tiny{font-size:10px}
.up{color:var(--up)}
.down{color:var(--down)}

/* ===================== TOP TICKER BAR ===================== */
.topbar{
  height:var(--topbar);display:flex;align-items:center;gap:18px;
  padding:0 12px;background:var(--panel);
  border-bottom:1px solid var(--line);position:relative;z-index:30;
}
.tb-brand{
  display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--text);
  font-family:var(--display);font-size:13px;letter-spacing:.08em;flex:none;
}
.tb-brand img{width:20px;height:20px;object-fit:contain;image-rendering:pixelated}
.tb-brand span{color:var(--text)}

.tb-stats{display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none;flex:1}
.tb-stats::-webkit-scrollbar{display:none}
.stat{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px}
.stat .k{color:var(--muted)}
.stat b{font-family:var(--mono);font-weight:700;font-size:11px}
.stat i{font-style:normal;font-family:var(--mono);font-size:10px}

.tb-live{
  display:flex;align-items:center;gap:6px;flex:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);
}
.tb-live i{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background .2s}
.tb-live.on i{background:var(--up);box-shadow:0 0 0 0 rgba(63,217,139,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(63,217,139,0)}100%{box-shadow:0 0 0 0 rgba(63,217,139,0)}}
.tb-rail-btn{
  display:none;background:none;border:1px solid var(--line);border-radius:0;
  padding:3px 8px;font-size:13px;color:var(--muted);flex:none;
}
.tb-key{
  background:none;border:1px solid var(--line);border-radius:0;flex:none;
  width:20px;height:20px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;color:var(--muted);
}
.tb-key:hover{color:var(--orange);border-color:var(--orange)}

/* ===================== APP SHELL ===================== */
.app{
  height:calc(100% - var(--topbar));
  display:grid;grid-template-columns:var(--tools) 1fr var(--rail);
}

/* ===================== TOOLBAR ===================== */
.tools{
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;
}
.tool{
  width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;border-radius:0;color:var(--muted);transition:.14s;
}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:var(--panel-3);color:var(--text)}
.tool.is-active{background:rgba(255,90,0,.14);color:var(--orange)}
.tool-sep{width:20px;height:1px;background:var(--line);margin:6px 0}

/* ===================== CHART COLUMN ===================== */
.chartcol{display:flex;flex-direction:column;min-width:0;background:var(--bg)}

.chead{
  height:38px;display:flex;align-items:center;gap:14px;padding:0 12px;
  border-bottom:1px solid var(--line);background:var(--panel);
}
/* --- symbol picker --- */
.sympick{position:relative;flex:none}
.sym-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  padding:4px 9px;font-size:12px;font-weight:700;color:var(--text);transition:.14s;
}
.sym-btn:hover{border-color:var(--orange)}
.sym-btn img{width:17px;height:17px;object-fit:contain}
.sym-btn .caret{color:var(--muted);font-size:9px}
.sym-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:260px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  box-shadow:0 18px 44px rgba(0,0,0,.7);overflow:hidden;
}
.sym-pop input{
  width:100%;background:var(--panel);border:0;border-bottom:1px solid var(--line);
  padding:10px 12px;font-size:12px;
}
.sym-pop input:focus{outline:none;border-bottom-color:var(--orange)}
.sym-pop input::placeholder{color:var(--dim)}
.sym-list{max-height:300px;overflow-y:auto}
.sym-list::-webkit-scrollbar{width:6px}
.sym-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
.sym-item{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:8px 12px;font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.sym-item:hover{background:var(--panel-3);color:var(--text)}
.sym-item.is-active{color:var(--orange);background:rgba(255,90,0,.08)}

.venue{
  font-size:10px;color:var(--muted);border:1px solid var(--line);
  border-radius:0;padding:2px 6px;flex:none;
}

/* --- chart type --- */
.ctypes{display:flex;gap:1px;background:var(--line-soft);border-radius:0;padding:2px;flex:none}
.ctypes button{
  background:none;border:0;border-radius:0;width:26px;height:22px;
  display:grid;place-items:center;color:var(--muted);transition:.14s;
}
.ctypes svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ctypes button:hover{color:var(--text);background:var(--panel-3)}
.ctypes button.is-active{background:var(--orange);color:#000}

.tfs{display:flex;gap:1px;background:var(--line-soft);border-radius:0;padding:2px;flex:none}
.tfs button{
  background:none;border:0;border-radius:0;padding:4px 9px;
  font-family:var(--mono);font-size:11px;color:var(--muted);transition:.14s;
}
.tfs button:hover{color:var(--text);background:var(--panel-3)}
.tfs button.is-active{background:var(--orange);color:#000;font-weight:700}

.chead-right{margin-left:auto;display:flex;align-items:baseline;gap:9px;flex:none}
.last{font-family:var(--mono);font-size:14px;font-weight:700}
.chg{font-family:var(--mono);font-size:11px}

.ohlc{
  display:flex;align-items:center;gap:13px;padding:6px 12px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  border-bottom:1px solid var(--line-soft);background:var(--panel);
  overflow-x:auto;scrollbar-width:none;white-space:nowrap;
}
.ohlc::-webkit-scrollbar{display:none}
.ohlc b{color:var(--text);font-weight:700;letter-spacing:.04em}
.ohlc em{font-style:normal;color:var(--text);margin-left:3px}
.ohlc .vol em{color:var(--muted)}
.ohlc .ind{display:flex;gap:11px;padding-left:4px;border-left:1px solid var(--line);margin-left:2px}
.ohlc .ind:empty{display:none}

.chartwrap{position:relative;flex:1;min-height:0}
#chart{position:absolute;inset:0}
.chart-tag{
  position:absolute;left:12px;bottom:26px;z-index:3;pointer-events:none;
  font-family:var(--display);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.1);
}
.chart-loading{
  position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:12px;
  background:var(--bg);font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;
}
.chart-loading[hidden]{display:none}
.chart-loading i{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--orange);
  animation:spin 1.1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.measure-box{
  position:absolute;z-index:6;pointer-events:none;
  border:1px solid var(--orange);background:rgba(255,90,0,.1);
  font-family:var(--mono);font-size:10px;color:var(--text);
  display:grid;place-items:center;text-align:center;padding:4px;
}

/* ===================== BIRD RAIL ===================== */
.rail{
  background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}

.rail-scene{
  position:relative;height:148px;flex:none;overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
}
/* flat rings plus one sweeping hairline — the old version needed a conic
   gradient and two mask gradients to do the same thing */
.scene-radar{
  position:absolute;left:50%;bottom:-96px;transform:translateX(-50%);
  width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),
             inset 0 0 0 38px rgba(255,255,255,.012),
             inset 0 0 0 39px rgba(255,255,255,.05),
             inset 0 0 0 76px rgba(255,255,255,.012),
             inset 0 0 0 77px rgba(255,255,255,.05);
}
.scene-radar::after{
  content:'';position:absolute;left:50%;top:0;width:1px;height:50%;
  background:var(--up);opacity:.5;transform-origin:bottom center;
  animation:spin 6s linear infinite;
}
/* 72px source shown at exactly 2x so every pixel stays square */
.scene-bird{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:144px;image-rendering:pixelated;
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
.bubble{
  position:absolute;top:10px;left:10px;right:10px;z-index:2;
  background:rgba(10,10,10,.9);border:1px solid var(--line);border-radius:0;
  padding:7px 10px;font-family:var(--mono);font-size:10.5px;line-height:1.45;
  backdrop-filter:blur(6px);
}
.bubble b{color:var(--orange-2)}

.rail-tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.rtab{
  flex:1;background:none;border:0;padding:9px 0;font-size:12px;color:var(--muted);
  border-bottom:2px solid transparent;transition:.14s;
}
.rtab:hover{color:var(--text)}
.rtab.is-active{color:var(--text);border-bottom-color:var(--orange)}
.rtab .badge{
  display:inline-block;margin-left:5px;min-width:15px;padding:1px 4px;
  background:var(--pink);color:#fff;border-radius:0;
  font-family:var(--mono);font-size:9px;line-height:1.4;
}

.pane{display:none;flex-direction:column;min-height:0;flex:1}
.pane.is-active{display:flex}

.chat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);
  font-size:11px;color:var(--muted);flex:none;
}
.chat-head button{
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  padding:3px 9px;font-size:10px;color:var(--muted);
}
.chat-head button:hover{color:var(--text);border-color:var(--dim)}
.chat-head .auto{display:flex;align-items:center;gap:5px;margin-left:auto;margin-right:8px;cursor:pointer;font-size:10px}
.chat-head .auto input{accent-color:var(--orange);width:12px;height:12px}

.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:11px;min-height:0}
.msgs::-webkit-scrollbar{width:6px}
.msgs::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
.msg{font-size:12px;line-height:1.55;animation:slide .22s ease both}
@keyframes slide{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.msg .who{font-family:var(--mono);font-size:10px;letter-spacing:.06em;display:block;margin-bottom:3px}
.msg.bird .who{color:var(--orange-2)}
.msg.you .who{color:var(--blue)}
.msg.bird .body{
  background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--orange);
  border-radius:0;padding:9px 11px;
}
.msg.you .body{
  background:rgba(61,90,255,.09);border:1px solid rgba(61,90,255,.25);
  border-radius:0;padding:8px 11px;
}
.msg .body ul{margin:7px 0 0;padding-left:16px}
.msg .body li{margin-bottom:4px}
.msg .body .n{font-family:var(--mono);color:var(--text)}
.msg .body .lbl{color:var(--muted)}
/* an unprompted sighting from the bird reads differently from an answer */
.msg.spot .body{border-left-color:var(--pink);background:rgba(255,77,143,.07)}
.msg.spot .who::after{content:' RADAR';color:var(--pink)}
.typing span{
  display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;
  background:var(--orange);animation:blink 1.1s infinite;
}
.typing span:nth-child(2){animation-delay:.18s}
.typing span:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 10px;flex:none}
.chips button{
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  padding:5px 10px;font-size:10.5px;color:var(--muted);transition:.14s;
}
.chips button:hover{color:var(--text);border-color:var(--orange);background:rgba(255,90,0,.08)}

.ask{display:flex;gap:7px;padding:10px 12px;border-top:1px solid var(--line);flex:none}
.ask input{
  flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  padding:9px 11px;font-size:12px;
}
.ask input:focus{outline:none;border-color:var(--orange)}
.ask input::placeholder{color:var(--dim)}
.ask button{
  background:var(--orange);color:#0A0A0B;
  border:0;border-radius:0;padding:0 14px;font-size:13px;font-weight:700;
}
.rail-note{
  margin:0;padding:0 12px 10px;font-size:9.5px;line-height:1.5;color:var(--dim);flex:none;
}

/* watchlist */
.watch{flex:1;overflow-y:auto;min-height:0}
.watch::-webkit-scrollbar{width:6px}
.watch::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
.wrow{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:.14s;
}
.wrow:hover{background:var(--panel-2)}
.wrow.is-active{background:rgba(255,90,0,.07);box-shadow:inset 2px 0 0 var(--orange)}
.wrow .p{font-family:var(--mono);font-size:12px}
.wrow .c{font-family:var(--mono);font-size:11px;min-width:58px;text-align:right}
.wrow .nm{font-size:12px;font-weight:500}
.wrow .nm small{display:block;color:var(--dim);font-size:9.5px;font-weight:400}
.wrow{grid-template-columns:1fr auto auto 18px}
.wrow .x,.arow .x{
  background:none;border:0;color:var(--dim);font-size:14px;line-height:1;
  padding:0;width:18px;opacity:0;transition:.14s;
}
.wrow:hover .x,.arow:hover .x{opacity:1}
.wrow .x:hover,.arow .x:hover{color:var(--down)}

/* alerts */
.alerts{flex:1;overflow-y:auto;min-height:0}
.alerts::-webkit-scrollbar{width:6px}
.alerts::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
.arow{
  display:grid;grid-template-columns:1fr auto 18px;gap:10px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--line-soft);
}
.arow .nm{font-size:12px;font-weight:500}
.arow .nm small{display:block;color:var(--dim);font-size:9.5px;font-weight:400}
.arow .p{font-family:var(--mono);font-size:12px;color:var(--pink)}

/* trade tape */
.tape{flex:1;overflow-y:auto;min-height:0;font-family:var(--mono);font-size:11px}
.tape::-webkit-scrollbar{width:6px}
.tape::-webkit-scrollbar-thumb{background:var(--line);border-radius:0}
.trow{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  padding:4px 12px;border-bottom:1px solid rgba(255,255,255,.03);
  animation:tapein .18s ease both;
}
.trow span:first-child{color:var(--dim);font-size:10px}
.trow span:nth-child(2){color:var(--muted);text-align:right}
.trow.up span:last-child{color:var(--up)}
.trow.down span:last-child{color:var(--down)}
.trow.up{background:rgba(63,217,139,.05)}
.trow.down{background:rgba(246,88,60,.05)}
@keyframes tapein{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* shortcuts card */
.keys{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.keys[hidden]{display:none}
.keys-card{
  background:var(--panel-2);border:1px solid var(--line);border-radius:0;
  padding:24px 28px;width:min(380px,90vw);
}
.keys-card h3{margin:0 0 16px;font-family:var(--display);font-size:16px;letter-spacing:.08em;color:var(--orange)}
.keys-card ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.keys-card li{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.keys-card kbd{
  font-family:var(--mono);font-size:10px;background:var(--panel-3);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:0;
  padding:2px 6px;color:var(--text);min-width:22px;text-align:center;
}
.keys-card button{
  width:100%;background:var(--orange);color:#000;border:0;border-radius:0;
  padding:9px;font-weight:700;font-size:12px;
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:80;
  background:var(--panel-3);border:1px solid var(--orange);border-radius:0;
  padding:8px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  opacity:0;pointer-events:none;transition:.24s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  :root{--rail:320px}
  .stat:nth-child(n+5){display:none}
}
@media (max-width:900px){
  .tb-rail-btn{display:block}
  .app{grid-template-columns:var(--tools) 1fr}
  .rail{
    position:fixed;top:var(--topbar);right:0;bottom:0;width:min(360px,88vw);z-index:40;
    transform:translateX(101%);transition:transform .26s ease;
    box-shadow:-18px 0 44px rgba(0,0,0,.6);
  }
  .rail.open{transform:none}
  .stat:nth-child(n+3){display:none}
}
@media (max-width:620px){
  :root{--tools:40px}
  .venue{display:none}
  .stat:nth-child(n+2){display:none}
  /* the pair picker, timeframes and last price cannot all fit on a phone —
     let the header scroll sideways instead of clipping it */
  .chead{overflow-x:auto;scrollbar-width:none;gap:10px}
  .chead::-webkit-scrollbar{display:none}
  .tfs button{padding:4px 7px}
  .chead-right{margin-left:0;padding-right:4px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}