:root {
  --bg:#0a0a0d;
  --surface:#131316;
  --surface-2:#1b1b21;
  --surface-3:#242429;
  --border:#2a2a31;
  --border-soft:#1f1f25;
  --ink:#ecedf1;
  --ink-dim:#9a9ca6;
  --ink-faint:#5f606a;
  --accent:#3ddbd9;
  --accent-ink:#062322;
  --accent-dim:rgba(61,219,217,.13);
  --accent-border:rgba(61,219,217,.35);
  --good:#5fbf7a;
  --good-bg:rgba(95,191,122,.14);
  --warn:#e8a33d;
  --warn-bg:rgba(232,163,61,.14);
  --bad:#e8654d;
  --bad-bg:rgba(232,101,77,.14);
  --font-display:'Big Shoulders',sans-serif;
  --font-body:'IBM Plex Sans',-apple-system,Segoe UI,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent-dim);color:var(--ink);}

.app{
  display:flex;
  flex-direction:column;
  height:100vh;
  max-width:840px;
  margin:0 auto;
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(61,219,217,.05), transparent 60%),
    var(--bg);
}

.topbar{
  flex:none;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid var(--border-soft);
}
.mark{
  width:34px;height:34px;flex:none;
  border-radius:10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.mark svg{width:19px;height:19px;stroke:var(--accent);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.brand-tag{font-size:.72rem;color:var(--ink-dim);letter-spacing:.01em;}
.status-pill{
  margin-left:auto;
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;
  color:var(--ink-dim);
  border:1px solid var(--border);
  background:var(--surface);
  padding:.32rem .6rem;border-radius:999px;
}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-bg);}

.chat{
  flex:1 1 auto;overflow-y:auto;
  padding:1.25rem 1.1rem 1.5rem;
  display:flex;flex-direction:column;gap:1rem;
  scroll-behavior:smooth;
}
.msg{display:flex;gap:.6rem;max-width:100%;animation:rise .22s ease-out;}
@keyframes rise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.msg.user{flex-direction:row-reverse;}
.avatar{
  flex:none;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  margin-top:2px;
}
.msg.bot .avatar{background:var(--surface-2);border:1px solid var(--border);color:var(--accent);}
.msg.user .avatar{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);}

.bubble{
  max-width:min(560px,82%);
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius);
  padding:.8rem .95rem;
  font-size:.92rem;line-height:1.55;
}
.msg.user .bubble{background:var(--accent-dim);border-color:var(--accent-border);}
.bubble p{margin:0 0 .5rem;}
.bubble p:last-child{margin-bottom:0;}
.bubble .cmd{
  font-family:var(--font-mono);background:var(--surface-3);
  border:1px solid var(--border);padding:.1rem .4rem;border-radius:6px;font-size:.85em;
}

.thumb-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:.35rem .6rem .35rem .35rem;margin-bottom:.5rem;max-width:100%;
}
.thumb-chip img{width:34px;height:34px;border-radius:6px;object-fit:cover;flex:none;}
.thumb-chip .meta{display:flex;flex-direction:column;line-height:1.25;overflow:hidden;}
.thumb-chip .fname{font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.thumb-chip .fsize{font-size:.68rem;color:var(--ink-dim);font-family:var(--font-mono);}

.typing{display:flex;gap:4px;align-items:center;padding:.2rem 0;}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:blink 1.1s infinite ease-in-out;}
.typing span:nth-child(2){animation-delay:.15s;}
.typing span:nth-child(3){animation-delay:.3s;}
@keyframes blink{0%,80%,100%{opacity:.25;transform:scale(.85);}40%{opacity:1;transform:scale(1);}}

.progress-line{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-dim);margin-top:.4rem;}
.progress-track{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:.35rem;}
.progress-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .2s ease;}

.report{max-width:min(560px,82%);}
.report-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;}
.report-head{display:flex;gap:.65rem;align-items:flex-start;padding:.9rem .95rem .8rem;}
.verdict-dot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:.3rem;}
.verdict-dot.good{background:var(--good);box-shadow:0 0 0 4px var(--good-bg);}
.verdict-dot.warn{background:var(--warn);box-shadow:0 0 0 4px var(--warn-bg);}
.verdict-dot.bad{background:var(--bad);box-shadow:0 0 0 4px var(--bad-bg);}
.report-title{font-weight:600;font-size:.92rem;line-height:1.4;}
.report-sub{font-size:.72rem;color:var(--ink-dim);font-family:var(--font-mono);margin-top:.2rem;}

.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:0 .95rem .85rem;}
.metric-label{font-size:.68rem;color:var(--ink-dim);letter-spacing:.02em;margin-bottom:.4rem;}
.metric-value{font-family:var(--font-mono);font-weight:600;font-size:.78rem;margin-top:.35rem;font-variant-numeric:tabular-nums;}
.meter{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
.meter.small{height:5px;}
.meter-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1);}
.meter-fill.good{background:var(--good);}
.meter-fill.warn{background:var(--warn);}
.meter-fill.bad{background:var(--bad);}

.overall{display:flex;align-items:baseline;justify-content:space-between;margin:0 .95rem .9rem;padding:.7rem .8rem;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;}
.overall-label{font-size:.72rem;color:var(--ink-dim);}
.overall-value{font-family:var(--font-display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums;}
.overall-value.good{color:var(--good);}
.overall-value.warn{color:var(--warn);}
.overall-value.bad{color:var(--bad);}

.model-panel{margin:0 .95rem .9rem;padding:.7rem .8rem;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:10px;font-size:.76rem;line-height:1.6;}
.model-panel .mp-title{font-weight:600;color:var(--ink);margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem;}
.model-badge{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.05em;padding:.1rem .45rem;border-radius:999px;border:1px solid var(--accent-border);color:var(--accent);background:var(--accent-dim);}
.disagree-note{margin-top:.4rem;color:var(--warn);font-size:.72rem;}

.confidence-banner{display:flex;gap:.55rem;align-items:flex-start;margin:0 .95rem .9rem;padding:.65rem .8rem;border-radius:10px;font-size:.74rem;line-height:1.55;border:1px solid;}
.confidence-banner .cb-label{font-weight:600;flex:none;white-space:nowrap;}
.confidence-banner.high{background:var(--good-bg);border-color:rgba(95,191,122,.35);color:var(--ink);}
.confidence-banner.high .cb-label{color:var(--good);}
.confidence-banner.medium{background:var(--warn-bg);border-color:rgba(232,163,61,.35);color:var(--ink);}
.confidence-banner.medium .cb-label{color:var(--warn);}
.confidence-banner.low{background:var(--bad-bg);border-color:rgba(232,101,77,.35);color:var(--ink);}
.confidence-banner.low .cb-label{color:var(--bad);}

details.breakdown{border-top:1px solid var(--border-soft);}
details.breakdown summary{cursor:pointer;padding:.7rem .95rem;font-size:.76rem;color:var(--ink-dim);list-style:none;display:flex;align-items:center;gap:.4rem;user-select:none;}
details.breakdown summary::-webkit-details-marker{display:none;}
details.breakdown summary::before{content:"›";font-family:var(--font-mono);transition:transform .18s ease;display:inline-block;}
details.breakdown[open] summary::before{transform:rotate(90deg);}
details.breakdown summary:hover{color:var(--ink);}

.check-list{list-style:none;margin:0;padding:0 .95rem .3rem;display:flex;flex-direction:column;gap:.75rem;}
.check-row{display:flex;justify-content:space-between;font-size:.76rem;margin-bottom:.35rem;}
.check-row .cname{color:var(--ink);}
.check-row .cval{font-family:var(--font-mono);color:var(--ink-dim);font-variant-numeric:tabular-nums;}
.check-note{font-size:.72rem;color:var(--ink-dim);margin:.35rem 0 0;line-height:1.5;}

.ela-wrap{padding:.2rem .95rem .9rem;}
.ela-wrap img{width:100%;border-radius:8px;border:1px solid var(--border-soft);display:block;}
.ela-caption{font-size:.66rem;color:var(--ink-faint);margin:.4rem 0 0;line-height:1.5;}

.disclaimer{font-size:.68rem;color:var(--ink-faint);border-top:1px solid var(--border-soft);padding:.7rem .95rem;line-height:1.55;}

.composer{flex:none;border-top:1px solid var(--border-soft);padding:.85rem 1.1rem 1rem;background:linear-gradient(180deg,transparent,rgba(10,10,13,.6) 20%,var(--bg) 60%);}
.composer.drag .composer-bar{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.chip-row{display:flex;gap:.5rem;margin-bottom:.55rem;}
.pending-chip{display:flex;align-items:center;gap:.55rem;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.4rem .5rem .4rem .4rem;animation:rise .18s ease-out;}
.pending-chip img{width:38px;height:38px;border-radius:7px;object-fit:cover;}
.pending-chip .meta{display:flex;flex-direction:column;line-height:1.3;}
.pending-chip .fname{font-size:.78rem;font-weight:500;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pending-chip .fsize{font-size:.68rem;color:var(--ink-dim);font-family:var(--font-mono);}
.pending-chip button{margin-left:.3rem;background:none;border:none;color:var(--ink-faint);cursor:pointer;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.pending-chip button:hover{background:var(--surface-3);color:var(--ink);}

.composer-bar{display:flex;align-items:flex-end;gap:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:.45rem .5rem .45rem .7rem;}
.icon-btn{flex:none;width:34px;height:34px;border-radius:12px;background:transparent;border:none;color:var(--ink-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.icon-btn:hover{background:var(--surface-3);color:var(--ink);}
.icon-btn svg{width:18px;height:18px;}
#textInput{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--ink);font-family:var(--font-body);font-size:.9rem;line-height:1.5;max-height:120px;padding:.5rem .2rem;}
#textInput::placeholder{color:var(--ink-faint);}
.send-btn{flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;color:var(--accent-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease, opacity .12s ease;}
.send-btn svg{width:16px;height:16px;}
.send-btn:disabled{opacity:.35;cursor:not-allowed;}
.send-btn:not(:disabled):hover{transform:scale(1.06);}
.composer-hint{font-size:.66rem;color:var(--ink-faint);text-align:center;margin:.6rem 0 0;}

@media (max-width:480px){.metric-row{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.msg, .typing span{animation:none;}.meter-fill{transition:none;}}
