/* Chip on Glasses — design system
   8pt grid · one sans stack · luminous monochrome on black (black = see-through) */
:root{
  --ink:#f5f7fa; --ink-2:#c9d0d9; --dim:#8b95a3;
  --line:rgba(225,235,245,.26); --line-strong:rgba(240,246,252,.62);
  --accent:#9fdcff; --accent-soft:rgba(159,220,255,.22);
  --err:#ff8a8a;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--ink);
  font-family:Inter,"SF Pro Text","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{width:600px;height:600px;overflow:hidden;padding:var(--s4) var(--s5);display:flex;flex-direction:column}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;height:var(--s3);font-size:16px}
.brand{display:flex;align-items:center;gap:var(--s1);font-weight:650;letter-spacing:-.01em}
.brand .dot{position:relative;width:14px;height:14px}
.brand .dot::before,.brand .dot::after{content:"";position:absolute;left:6px;top:0;width:2px;height:14px;border-radius:1px;background:linear-gradient(transparent,#fff 50%,transparent)}
.brand .dot::after{transform:rotate(90deg)}
.meta{color:var(--dim);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* stage */
.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  animation:in .32s var(--ease) both}
.caption{margin:0;font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink);text-align:center;line-height:1.25;max-width:440px}




/* reply */
.reply{display:none;flex:1 1 auto;flex-direction:column;animation:in .36s var(--ease) both}
.reply-text{margin:0;font-size:24px;line-height:1.4;font-weight:500;letter-spacing:-.005em;color:var(--ink);max-height:134px;overflow:hidden;margin-block:auto;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.reply-text.short{font-size:28px;line-height:1.36;font-weight:600;letter-spacing:-.012em;max-height:152px;-webkit-line-clamp:4}
.pager{display:flex;gap:var(--s1);height:6px;flex:0 0 auto;justify-content:center}
.pager:empty{display:none}
.pager i{width:6px;height:6px;border-radius:3px;background:rgba(235,242,250,.24);transition:transform .3s var(--ease),background .3s;transform-origin:center}
.pager i.on{background:var(--ink);transform:scaleX(3.2);margin:0 7px}

/* compose */
textarea{display:block;width:100%;resize:none;font:inherit;font-size:22px;font-weight:500;line-height:1.36;color:var(--ink);background:transparent;
  border:1.5px solid var(--line);border-radius:20px;padding:var(--s2) var(--s3);height:88px;overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea::placeholder{color:var(--dim)}

/* actions */
.actions{display:flex;gap:var(--s2);margin-top:var(--s2);flex:0 0 auto}
.btn{flex:1;height:64px;border-radius:32px;font:inherit;font-size:20px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);background:transparent;border:1.5px solid var(--line);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .15s var(--ease),opacity .2s}
.btn.primary{border-color:var(--line-strong)}
.btn:disabled{opacity:.5}
.btn[hidden]{display:none}
.focusable:focus{outline:none;border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 18px var(--accent-soft)}
.btn:active{transform:scale(.97)}

/* ---------- states ---------- */


[data-state=thinking] .caption{color:var(--ink-2)}
[data-state=thinking] .compose{display:none}

/* compact header layout for reply states */
[data-state=speaking] .stage,[data-state=done] .stage,[data-state=error] .stage{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:var(--s2);margin:var(--s3) 0}
[data-state=speaking] .caption,[data-state=done] .caption,[data-state=error] .caption{text-align:left;font-size:20px;font-weight:600;color:var(--ink-2)}
[data-state=speaking] .reply,[data-state=done] .reply,[data-state=error] .reply{display:flex}
[data-state=speaking] .compose,[data-state=done] .compose,[data-state=error] .compose{display:none}



[data-state=error] .caption{color:var(--err)}

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