/* ============================================================
   Ladspad — chat box
   Solana palette: violet → cyan → green on a near-black canvas.
   ============================================================ */
:root{
  /* Solana brand ramp */
  --violet:#9945FF;
  --cyan:#00D1FF;
  --green:#14F195;
  --grad:linear-gradient(90deg,var(--violet),var(--cyan),var(--green));
  --grad-soft:linear-gradient(135deg,rgba(153,69,255,.20),rgba(0,209,255,.14),rgba(20,241,149,.12));

  /* surfaces */
  --bg:#08060F;
  --panel:#0E0B18;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.065);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.15);

  /* ink */
  --ink:#F2EFFA;
  --ink-dim:#C6C0DA;
  --muted:#8E88A6;

  --radius:20px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular","Consolas","Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font:15px/1.5 var(--font);
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Ambient violet/cyan glow behind the panel */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 55% at 12% -8%, rgba(153,69,255,.30), transparent 70%),
    radial-gradient(60% 50% at 92% 6%, rgba(0,209,255,.20), transparent 70%),
    radial-gradient(70% 60% at 50% 108%, rgba(20,241,149,.13), transparent 70%);
}
button{font-family:var(--font)}
img{-webkit-user-drag:none}

/* the hidden attribute must win over any display rule */
[hidden]{display:none !important}

/* ---------- shell ---------- */
.app{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  width:100%;max-width:880px;height:100%;
  margin:0 auto;
  padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.brand-mark{
  width:32px;height:32px;flex:none;
  border-radius:9px;
  box-shadow:0 0 0 1px var(--line-2), 0 6px 18px rgba(153,69,255,.28);
}
.brand-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-name{
  font:600 17px/1.1 var(--display);
  letter-spacing:-.02em;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.brand-tag{
  font:400 10px/1.2 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.chip{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:6px;
  max-width:42vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font:400 11px/1.3 var(--mono);color:var(--ink-dim);
}
.chip + .chip{margin-left:0}
.chip-model{
  color:var(--ink);
  border-color:rgba(153,69,255,.38);
  background:rgba(153,69,255,.12);
}
/* X / Twitter button — first item in the right-hand chip group */
.chip-x{
  color:var(--ink);text-decoration:none;
  border-color:var(--line-2);background:var(--surface);
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.chip-x:hover{background:var(--surface-2);border-color:rgba(255,255,255,.28);color:#fff}
.chip-x:active{transform:translateY(1px)}
.chip-x .x-ico{width:13px;height:13px;flex:none;fill:currentColor}
.chip .ok{color:var(--green);font-weight:500}
.chip .bad{color:#FF6B6B;font-weight:500}

/* ---------- chat ---------- */
.chat-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:22px 18px;
  display:flex;flex-direction:column;gap:16px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
}
.chat-body::-webkit-scrollbar{width:8px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.chat-body::-webkit-scrollbar-track{background:transparent}

.chat-empty{
  margin:auto;text-align:center;padding:24px;max-width:340px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.chat-empty img{width:76px;height:76px;object-fit:contain;margin-bottom:6px;opacity:.95}
.chat-empty div{
  font:600 20px/1.2 var(--display);letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.chat-empty span{font-size:13px;color:var(--muted)}

.chat-msg{display:flex;flex-direction:column;max-width:86%}
.chat-msg.chat-user{align-self:flex-end;align-items:flex-end}
.chat-msg.chat-bot{align-self:flex-start;align-items:flex-start}

.chat-bubble{
  padding:11px 14px;
  border-radius:16px;
  white-space:pre-wrap;word-break:break-word;
  font:400 14.5px/1.6 var(--font);
  max-width:100%;
  user-select:text;-webkit-user-select:text;
}
.chat-msg.chat-user .chat-bubble{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  color:#0B0714;font-weight:500;
  border-bottom-right-radius:6px;
  box-shadow:0 8px 24px rgba(153,69,255,.26);
}
.chat-msg.chat-bot .chat-bubble{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);
  border-bottom-left-radius:6px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.chat-bubble.chat-pending{color:var(--muted);font-style:italic;min-width:64px}
.chat-bubble.chat-err{
  background:rgba(255,107,107,.10);color:#FFB4B4;
  border:1px solid rgba(255,107,107,.32);
}

/* ---------- pre-rendered opener (baked into the HTML, no API call) ---------- */
.chat-ca{
  display:block;width:100%;text-align:left;appearance:none;-webkit-appearance:none;
  font:400 12.5px/1.5 var(--mono);letter-spacing:.01em;word-break:break-all;
  color:var(--green);background:rgba(20,241,149,.07);
  cursor:pointer;
  border:1px solid rgba(20,241,149,.26);
  border-radius:12px;
  padding:9px 11px;margin:0 0 8px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.chat-ca:hover{
  background:rgba(20,241,149,.12);border-color:rgba(20,241,149,.48);
  box-shadow:0 0 0 3px rgba(20,241,149,.09);
}
.chat-ca:active{transform:translateY(1px)}
.chat-ca.chat-ca-done{
  background:rgba(20,241,149,.18);border-color:var(--green);
  color:var(--green);text-align:center;font-weight:500;letter-spacing:.06em;
}
.chat-ca-chain{
  display:flex;align-items:center;gap:6px;
  font:400 10.5px/1.4 var(--mono);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 9px;
}
.chat-ca-chain::before{
  content:"";width:6px;height:6px;border-radius:99px;flex:none;
  background:var(--grad);
}
.chat-ca-note{font:400 14.5px/1.65 var(--font);white-space:pre-wrap;color:var(--ink)}

.chat-meta{font:400 10.5px/1.4 var(--mono);color:var(--muted);margin-top:5px;padding:0 3px}

.chat-thinking{
  font:400 11.5px/1.4 var(--mono);font-style:italic;color:var(--ink-dim);
  margin-bottom:7px;padding-left:10px;
  border-left:2px solid var(--violet);
  opacity:.8;
}

/* ---------- composer ---------- */
.chat-composer{
  display:flex;align-items:flex-end;gap:8px;flex:none;
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:rgba(8,6,15,.5);
}
.chat-composer textarea{
  flex:1;min-width:0;
  border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface-2);color:var(--ink);
  padding:11px 14px;
  font:400 14.5px/1.45 var(--font);
  outline:none;resize:none;
  height:44px;max-height:110px;overflow-y:auto;
  transition:border-color .15s ease,box-shadow .15s ease;
  user-select:text;-webkit-user-select:text;
}
.chat-composer textarea::placeholder{color:var(--muted)}
.chat-composer textarea:focus{
  border-color:rgba(153,69,255,.6);
  box-shadow:0 0 0 3px rgba(153,69,255,.16);
}

/* ---------- buttons ---------- */
.btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px;
  border-radius:14px;border:1px solid transparent;
  font:600 14px var(--font);letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-send{
  background:var(--grad);color:#0B0714;
  box-shadow:0 8px 24px rgba(153,69,255,.30);
}
.btn-send:hover:not(:disabled){box-shadow:0 10px 30px rgba(153,69,255,.44)}
.btn-ghost{
  width:44px;padding:0;flex:none;
  background:var(--surface);border-color:var(--line-2);color:var(--ink-dim);
  font-weight:400;font-size:15px;
}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:rgba(255,255,255,.26)}

/* ---------- footer ---------- */
.chat-foot{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:8px 18px 12px;
  font:400 11px/1.4 var(--mono);color:var(--muted);
}
.chat-foot .grow{flex:1}
.chat-foot .chat-tokens{white-space:nowrap;color:var(--ink-dim)}
#spinner{color:var(--cyan);letter-spacing:2px}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .app{max-width:none;border-left:0;border-right:0}
  .topbar{padding:12px 14px;gap:10px}
  .brand-tag{display:none}
  .brand-mark{width:28px;height:28px}
  .chip{max-width:34vw;font-size:10px;padding:4px 9px}
  .chip-x span{display:none}
  .chip-x{padding:4px 8px}
  .chat-body{padding:16px 14px}
  .chat-msg{max-width:94%}
  .chat-composer{padding:10px 14px;gap:6px}
  .chat-composer .btn-send{padding:0 15px}
  .chat-foot{padding:6px 14px 10px}
}