/* AETHER — Slate interface: the quiet one */
:root{
  --accent:#cfd4e6; --accent-2:#8d93ab; --accent-rgb:207,212,230; --accent-2-rgb:141,147,171;
  --bg:#08080a; --line:rgba(255,255,255,.085); --panel:rgba(255,255,255,.025);
  --ink:#f0f1f5; --ink-2:#a0a2b0; --ink-3:#858795;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.top{
  display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(8,8,10,.86);backdrop-filter:blur(14px);z-index:20;
}
.back{color:var(--ink-3);font-size:12.5px;text-decoration:none}
.back:hover{color:var(--ink)}
.brand{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.spacer{margin-left:auto}
.swatches{display:flex;gap:6px}
.swatches button{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);padding:0;transition:.2s}
.swatches button:hover{transform:scale(1.15)}
.swatches button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.iconbtn{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font-size:13px;
  text-decoration:none;transition:.2s;
}
.iconbtn:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.45)}
.iconbtn[aria-current=page]{color:var(--accent);border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.1)}
.layouts{display:flex;gap:5px;padding-left:10px;border-left:1px solid var(--line)}

.shell{flex:1;width:100%;max-width:700px;margin:0 auto;padding:0 24px 60px;display:flex;flex-direction:column}

/* ring */
.ringwrap{padding:56px 0 30px;display:flex;flex-direction:column;align-items:center;gap:22px}
#ring{width:224px;height:224px;display:block}
.status{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  display:flex;align-items:center;gap:9px;
}
.status .led{width:6px;height:6px;border-radius:50%;background:var(--ink-3);transition:.3s}
.status[data-state=listening] .led{background:#6ee7a8;box-shadow:0 0 9px #6ee7a8}
.status[data-state=thinking] .led{background:var(--accent);box-shadow:0 0 9px var(--accent);animation:bl .5s infinite}
.status[data-state=speaking] .led{background:var(--accent-2);box-shadow:0 0 9px var(--accent-2);animation:bl .9s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}

/* transcript */
.log{display:flex;flex-direction:column;gap:20px;min-height:90px;margin-bottom:28px}
.line .who{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;font-weight:600}
.line.ai .who{color:var(--accent)}
.line p{margin:0;line-height:1.62;color:var(--ink-2);font-size:15.5px}
.line.ai p{color:var(--ink)}
.line.interim p{color:var(--ink-3);font-style:italic}

/* command */
.cmd{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--bg) 24%);padding:18px 0 22px}
.cmd-in{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:10px;transition:.25s}
.cmd-in:focus-within{border-color:rgba(var(--accent-rgb),.6)}
.cmd-in input{flex:1;background:none;border:0;outline:none;color:var(--ink);font-size:16px;font-family:inherit;padding:6px 0}
.cmd-in input::placeholder{color:var(--ink-3)}
.mic,.send{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-2);display:grid;place-items:center;transition:.2s;font-size:14px;flex:0 0 auto;
}
.mic:hover,.send:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.5)}
.mic[aria-pressed=true]{background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.65);color:#fff}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.chip{
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:none;
  color:var(--ink-3);font-size:12px;transition:.18s;
}
.chip:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.5)}

/* panels */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-top:40px;border-top:1px solid var(--line)}
.panel h2{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:600}
.pcard{display:flex;gap:10px;padding:9px 0;border:0;border-bottom:1px solid rgba(255,255,255,.045);align-items:flex-start;
  width:100%;background:none;font:inherit;color:inherit;text-align:left}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcard:last-child{border-bottom:0}
.pcard .st{width:6px;height:6px;border-radius:50%;margin-top:7px;flex:0 0 auto;background:var(--ink-3)}
.pcard .st.ok{background:#6ee7a8}.pcard .st.warn{background:#ffc46b}.pcard .st.run{background:var(--accent);animation:bl 1.3s infinite}
.pcard b{display:block;font-weight:450;font-size:14px}
.pcard small{display:block;color:var(--ink-3);font-size:11.5px;font-family:var(--mono);margin-top:2px}
.conns{display:flex;flex-wrap:wrap;gap:7px}
.cpill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);
}
.cpill i{width:6px;height:6px;border-radius:50%;background:var(--accent);font-style:normal}
.cpill.off{color:var(--ink-3)}.cpill.off i{background:var(--ink-3)}
.note{margin-top:34px;font-size:12px;color:var(--ink-3);line-height:1.65;border-top:1px solid var(--line);padding-top:18px}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);z-index:50;
  padding:10px 17px;border-radius:10px;background:rgba(22,22,28,.95);border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);opacity:0;pointer-events:none;transition:.3s;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:620px){
  .top{flex-wrap:wrap;row-gap:10px;padding:12px 18px}
  .panels{grid-template-columns:1fr;gap:30px}
  .shell{padding-inline:18px}
  #ring{width:180px;height:180px}
  .ringwrap{padding-top:36px}
}

/* people who ask their device for less motion: no CSS animation, no smooth scrolling */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}