/* ===========================================================
   Trading Assistant page styles. Loaded only by assistant.html.
   Builds on shared variables/classes in styles.css.
   =========================================================== */

/* The hidden attribute must win over .btn's display:inline-flex etc. */
[hidden]{display:none !important}

.assistant-main{min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center;padding:40px 24px}

/* View visibility is handled by the [hidden] attribute (toggled in assistant.js) plus the
   global [hidden]{display:none !important} rule — each view keeps its own display (flex). */

.auth-wrap,.authed-wrap{width:100%;display:flex;justify-content:center}

.auth-card{
  width:100%;max-width:440px;
  border:1px solid rgba(34,48,94,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), var(--panel);
  border-radius:20px;padding:30px 28px;
  box-shadow:var(--shadow);
}
.auth-card h1{margin:14px 0 10px;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.auth-card .lead{font-size:15px;margin:0 0 22px}

.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-label{font-size:12px;color:var(--muted);font-weight:600}
.auth-input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(34,48,94,.9);
  background:rgba(255,255,255,.03);color:var(--text);
  font:inherit;font-size:15px;
}
.auth-input::placeholder{color:rgba(234,240,255,.4)}
.auth-input:focus{outline:none;border-color:rgba(43,92,255,.8);box-shadow:0 0 0 3px rgba(43,92,255,.18)}
.auth-submit{width:100%;margin-top:4px;justify-content:center}

.auth-hint{margin:12px 0 0;font-size:12px;color:rgba(234,240,255,.5);text-align:center}

/* (kept for when Google sign-in is re-added later) */
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:rgba(234,240,255,.4);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:rgba(34,48,94,.8)}

.auth-google{width:100%;justify-content:center;gap:10px}

.auth-notice{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:rgba(255,207,122,.1);border:1px solid rgba(255,207,122,.35);
  color:#ffcf7a;font-size:13px;text-align:center;
}

.auth-disclaimer{
  margin:20px 0 0;font-size:11.5px;line-height:1.5;
  color:rgba(234,240,255,.5);text-align:center;
}

@media (max-width:600px){
  .auth-card{padding:24px 20px}
  .auth-card h1{font-size:22px}
}

/* ───────── Chat (authed) ───────── */
body.authed .assistant-main{align-items:stretch;justify-content:flex-start;padding:20px 24px 12px}
body.authed .footer{display:none} /* chat has its own disclaimer; no marketing footer crowding it */
.chat-wrap{
  width:100%;max-width:820px;margin:0 auto;
  display:flex;flex-direction:column;
  height:calc(100vh - 132px);min-height:440px;
}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid rgba(34,48,94,.6);margin-bottom:8px;
}
.chat-title{display:flex;align-items:center;gap:8px;font-weight:700}
.chat-usage{font-size:12px;color:var(--muted)}
.chat-usage .out{color:#ffcf7a}

.chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 2px;display:flex;flex-direction:column;gap:14px}

.chat-empty{margin:auto 0;text-align:center;color:var(--muted);padding:20px}
.chat-empty h2{color:var(--text);font-size:20px;margin:0 0 8px}
.chat-empty p{max-width:520px;margin:0 auto 18px;line-height:1.55;font-size:14px}
.examples{display:flex;flex-direction:column;gap:8px;max-width:460px;margin:0 auto}
.example{
  appearance:none;cursor:pointer;text-align:left;font:inherit;font-size:13px;
  border:1px solid rgba(34,48,94,.85);background:rgba(255,255,255,.02);
  color:var(--text);border-radius:12px;padding:10px 12px;transition:border-color .15s,background .15s;
}
.example:hover{border-color:rgba(43,92,255,.55);background:rgba(43,92,255,.07)}

/* Message bubbles */
.msg{max-width:86%;padding:11px 14px;border-radius:16px;line-height:1.55;font-size:14.5px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:linear-gradient(135deg, var(--accent), rgba(43,92,255,.7));color:#fff;border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(34,48,94,.8);border-bottom-left-radius:6px;white-space:normal}
/* Rendered markdown inside assistant replies */
.msg.bot p{margin:0 0 9px}
.msg.bot p:last-child{margin-bottom:0}
.msg.bot ul,.msg.bot ol{margin:8px 0;padding-left:20px}
.msg.bot li{margin:4px 0}
.msg.bot li::marker{color:var(--accent2)}
.msg.bot strong{color:#fff;font-weight:700}
.msg.bot code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;font-size:.9em}
.msg.bot.error{border-color:rgba(255,154,165,.5);color:#ff9aa5}
.msg .cursor{display:inline-block;width:7px;height:15px;background:var(--accent2);margin-left:2px;border-radius:1px;animation:blink 1s steps(2) infinite;vertical-align:text-bottom}
@keyframes blink{50%{opacity:0}}

/* Quota-exceeded prompt */
.quota-card{align-self:center;text-align:center;max-width:460px;border:1px solid rgba(255,207,122,.4);
  background:rgba(255,207,122,.08);border-radius:14px;padding:16px}
.quota-card .btn{margin-top:10px}

/* Input */
.chat-input{display:flex;gap:8px;align-items:flex-end;padding-top:10px;border-top:1px solid rgba(34,48,94,.6)}
#chatInput{
  flex:1;resize:none;max-height:160px;
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(34,48,94,.9);background:rgba(255,255,255,.03);
  color:var(--text);font:inherit;font-size:15px;line-height:1.4;
}
#chatInput:focus{outline:none;border-color:rgba(43,92,255,.8);box-shadow:0 0 0 3px rgba(43,92,255,.18)}
#chatSend{align-self:stretch}
#chatSend:disabled{opacity:.5;cursor:default}
.chat-disclaimer{text-align:center;font-size:11px;color:rgba(234,240,255,.45);margin:8px 0 0}
.partial-note{font-size:11.5px;color:rgba(255,207,122,.7);margin-top:10px;font-style:italic}

/* History divider */
.history-divider{
  text-align:center;font-size:11px;color:rgba(234,240,255,.35);
  position:relative;margin:8px 0;
}
.history-divider::before,.history-divider::after{
  content:"";position:absolute;top:50%;width:30%;height:1px;
  background:rgba(34,48,94,.7);
}
.history-divider::before{left:0}
.history-divider::after{right:0}

/* Feedback buttons */
.feedback-wrap{
  display:flex;gap:6px;margin-top:6px;align-self:flex-start;padding-left:4px;
}
.fb-btn{
  appearance:none;cursor:pointer;font-size:13px;line-height:1;
  padding:4px 9px;border-radius:8px;
  border:1px solid rgba(34,48,94,.8);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  transition:border-color .15s,background .15s,color .15s;
}
.fb-btn:hover{border-color:rgba(43,92,255,.5);background:rgba(43,92,255,.08);color:var(--text)}
.fb-btn.fb-selected{border-color:rgba(43,92,255,.7);background:rgba(43,92,255,.15);color:var(--accent2)}
.fb-btn:disabled{cursor:default;opacity:.5}

@media (max-width:600px){
  .chat-wrap{height:calc(100vh - 96px)}
  .msg{max-width:92%}
}

/* ───────── Upgrade modal ───────── */
.upgrade-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(11,16,32,.85);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.upgrade-backdrop[hidden]{display:none}
.upgrade-modal{
  width:100%;max-width:560px;
  background:var(--panel);border:1px solid rgba(34,48,94,.9);
  border-radius:20px;padding:28px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;
}
.upgrade-close{
  position:absolute;top:14px;right:16px;
  background:0;border:0;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;
}
.upgrade-close:hover{color:var(--text)}
.upgrade-head{margin-bottom:20px}
.upgrade-head h2{margin:0 0 6px;font-size:20px}
.upgrade-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.upgrade-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.plan-card{
  border:1px solid rgba(34,48,94,.85);
  background:rgba(255,255,255,.02);
  border-radius:14px;padding:14px 12px;
  display:flex;flex-direction:column;gap:6px;
  position:relative;
}
.plan-card.plan-featured{border-color:rgba(43,92,255,.6);box-shadow:0 8px 30px rgba(43,92,255,.15)}
.plan-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),rgba(43,92,255,.7));
  color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;
}
.plan-name{font-weight:800;font-size:14px}
.plan-price{font-size:22px;font-weight:800}
.plan-price span{font-size:12px;font-weight:500;color:var(--muted)}
.plan-detail{font-size:12px;color:var(--muted);margin-bottom:4px}
.plan-btn{width:100%;justify-content:center;margin-top:auto;font-size:13px;padding:9px 10px}
.plan-btn:disabled{opacity:.6;cursor:default}

.upgrade-note{font-size:11.5px;color:rgba(234,240,255,.5);text-align:center;margin:0}
.link-btn{background:0;border:0;cursor:pointer;color:var(--accent2);font:inherit;font-size:inherit;padding:0;text-decoration:underline}
.tier-badge{color:var(--accent2);font-weight:700}
.upgrade-error{margin-top:10px;color:#ff9aa5;font-size:13px;text-align:center}

@media (max-width:500px){
  .upgrade-plans{grid-template-columns:1fr}
}