/* Slate dock — persistent talking assistant, bottom right */
.dock{
  position:fixed; right:20px; bottom:20px; width:360px; z-index:900;
  background:var(--panel,#122232); border:1px solid var(--line,rgba(255,255,255,.1));
  border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
  font-size:13.5px; color:var(--text,#e8f0f6);
  transform:translateY(16px); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
  backdrop-filter:blur(14px);
}
.dock.open{ transform:none; opacity:1; pointer-events:auto; }
.dock.mini .dlog,.dock.mini .drow,.dock.mini .dchips{ display:none; }

.dock .dhead{
  display:flex; align-items:center; gap:11px; padding:12px 13px;
  border-bottom:1px solid var(--line,rgba(255,255,255,.08));
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
}
.dock .dface{ position:relative; flex:0 0 auto; }
.dock .dface .av{ cursor:default; }
.dock .dface .av::after{ display:none; }
/* a soft halo while he's actually speaking */
.dock .dface::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--accent,#5aa9e6); opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.dock .dface.talking::after{ opacity:1; animation:dockpulse 1.1s ease-in-out infinite; }
@keyframes dockpulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#5aa9e6) 50%,transparent); }
  70%{ box-shadow:0 0 0 9px transparent; }
}
.dock .dwho{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.dock .dwho b{ font-size:14px; font-weight:650; }
.dock .dwho span{ font:10.5px var(--mono,monospace); letter-spacing:.09em;
  text-transform:uppercase; color:var(--dim,#8ba3b8); }
.dock .dbtn{ background:none; border:0; color:var(--dim,#8ba3b8);
  font-size:17px; line-height:1; cursor:pointer; padding:3px 6px; border-radius:6px; }
.dock .dbtn:hover{ color:var(--text,#e8f0f6); background:rgba(255,255,255,.07); }

.dock .dlog{
  max-height:300px; overflow-y:auto; padding:12px 13px;
  display:flex; flex-direction:column; gap:9px;
}
.dock .dl{ padding:8px 11px; border-radius:11px; line-height:1.55;
  max-width:88%; white-space:pre-wrap; word-break:break-word; }
.dock .dl.slate{ background:var(--panel2,rgba(255,255,255,.05));
  border:1px solid var(--line,rgba(255,255,255,.07)); align-self:flex-start;
  border-bottom-left-radius:4px; }
.dock .dl.you{ background:color-mix(in srgb,var(--accent,#5aa9e6) 20%,transparent);
  align-self:flex-end; border-bottom-right-radius:4px; }
.dock .dl.thinking{ color:var(--dim,#8ba3b8); animation:dotfade 1.1s infinite; }
@keyframes dotfade{ 0%,100%{opacity:.4} 50%{opacity:1} }

.dock .dchips{ display:flex; gap:6px; flex-wrap:wrap; padding:0 13px 10px; }
.dock .dchip{ background:none; border:1px solid var(--line,rgba(255,255,255,.12));
  color:var(--dim,#8ba3b8); border-radius:20px; padding:5px 11px;
  font-size:11.5px; cursor:pointer; font-family:inherit; }
.dock .dchip:hover{ border-color:var(--accent,#5aa9e6); color:var(--text,#e8f0f6); }

.dock .drow{ display:flex; align-items:center; gap:8px; padding:10px 12px 12px;
  border-top:1px solid var(--line,rgba(255,255,255,.08)); }
.dock .drow input{ flex:1; min-width:0; background:var(--panel2,rgba(255,255,255,.05));
  border:1px solid var(--line,rgba(255,255,255,.1)); border-radius:10px;
  padding:9px 11px; color:inherit; font:inherit; outline:none; }
.dock .drow input:focus{ border-color:var(--accent,#5aa9e6); }
.dock .dmic,.dock .dsend{ flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line,rgba(255,255,255,.14)); background:none;
  color:var(--dim,#8ba3b8); cursor:pointer; font-size:15px; }
.dock .dmic:hover,.dock .dsend:hover{ border-color:var(--accent,#5aa9e6);
  color:var(--text,#e8f0f6); }
.dock .dmic.off{ opacity:.35; cursor:not-allowed; }
.dock.hearing .dmic{ background:var(--warn,#f5a524); color:#04121c;
  border-color:var(--warn,#f5a524); animation:dockpulse 1s infinite; }

/* the launcher, always parked bottom-right when the dock is closed */
.docklaunch{
  position:fixed; right:20px; bottom:20px; z-index:899;
  display:flex; align-items:center; gap:9px; padding:7px 15px 7px 7px;
  background:var(--panel,#122232); border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:40px; cursor:pointer; color:var(--text,#e8f0f6);
  box-shadow:0 10px 30px rgba(0,0,0,.45); font:13px var(--mono,monospace);
  transition:transform .2s ease, border-color .2s ease;
}
.docklaunch:hover{ transform:translateY(-2px); border-color:var(--accent,#5aa9e6); }
.docklaunch .av{ pointer-events:none; }
.docklaunch .av::after{ display:none; }
.docklaunch .lbl{ letter-spacing:.04em; }
.docklaunch .badge{ background:var(--warn,#f5a524); color:#04121c; font-weight:700;
  border-radius:20px; padding:1px 8px; font-size:11.5px; }

@media(max-width:560px){
  .dock{ right:10px; left:10px; width:auto; bottom:10px; }
  .docklaunch{ right:12px; bottom:12px; }
}
@media (prefers-reduced-motion: reduce){
  .dock,.dock .dface::after,.dock.hearing .dmic,.dock .dl.thinking{
    animation:none !important; transition:none !important; }
}

/* hands-free states */
.dock .dhint{ font:10.5px var(--mono,monospace); letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim,#8ba3b8); flex:0 0 auto;
  min-width:66px; }
.dock.hands-free .dmic{ border-color:var(--ok,#3ecf8e); color:var(--ok,#3ecf8e); }
/* armed and listening: a live ring, so you can see he's got the mic */
.dock.hearing .dmic{ background:var(--ok,#3ecf8e); color:#04121c;
  border-color:var(--ok,#3ecf8e); animation:miclive 1.6s ease-in-out infinite; }
.dock.hearing .dhint{ color:var(--ok,#3ecf8e); }
@keyframes miclive{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--ok,#3ecf8e) 55%,transparent); }
  70%{ box-shadow:0 0 0 8px transparent; }
}
/* deaf on purpose while he's speaking */
.dock.muted-while-talking .dmic{ opacity:.4; background:none;
  border-color:var(--line,rgba(255,255,255,.14)); color:var(--dim,#8ba3b8);
  animation:none; }
.dock .dface{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  .dock.hearing .dmic{ animation:none !important; }
}

/* mic wanted but not actually running — visibly different from listening */
.dock.mic-stalled .dmic{ border-color:var(--warn,#f5a524);
  color:var(--warn,#f5a524); background:none; animation:none; }
.dock.mic-stalled .dhint{ color:var(--warn,#f5a524); }
/* live transcript reads back what he's hearing, so a dead mic is obvious */
.dock .dhint{ max-width:120px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-transform:none; letter-spacing:.02em; }