/* proto/chat.css -- t9-chat. Uses the sidebar tokens so the panel reads as the sidebar turned into a conversation (light and dark). */
.chatbar,.chatfab,.chatpanel{display:none}
html.t9-chat .side>.searchall{display:none}
html.t9-chat .chatbar{display:flex;align-items:center;gap:2px;width:calc(100% - 20px);margin:2px 10px 6px;min-height:44px;border:1px solid var(--side-line);background:var(--side-2);border-radius:10px;color:var(--side-ink)}
html.t9-chat .chatbar:focus-within{border-color:#7D95FF;box-shadow:0 0 0 3px rgba(125,149,255,.22)}
.cb-icon{display:inline-grid;place-items:center;flex:none;width:40px;height:42px;border:0;background:none;color:#9DB0FF;cursor:pointer;border-radius:10px}
.cb-input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--side-ink);font:inherit;font-size:14px;line-height:1.3;padding:8px 8px 8px 0;min-height:44px;resize:none;overflow:hidden;cursor:text}
.cb-input::placeholder{color:var(--side-ink-2);opacity:1}
html.rail.t9-chat .chatbar{width:44px;margin:2px auto 6px;justify-content:center}
html.rail.t9-chat .chatbar .cb-input{display:none}
html.rail.t9-chat .cb-icon{width:42px}

/* the panel: covers the sidebar, full height */
html.t9-chat .chatpanel{position:fixed;left:0;top:0;bottom:0;width:392px;max-width:100vw;z-index:48;background:var(--side);color:var(--side-ink);border-right:1px solid var(--side-line);box-shadow:var(--shadow);flex-direction:column;height:100vh;height:100dvh}
html.t9-chat .chatpanel:not([hidden]){display:flex}
.cp-head{display:flex;align-items:center;gap:2px;padding:12px 8px 8px 18px;border-bottom:1px solid var(--side-line)}
.cp-title{flex:1;min-width:0}.cp-title b{display:block;font:600 18px/1.1 var(--cond)}.cp-title small{display:block;color:var(--side-ink-2);font-size:13px}
.cp-ib{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid transparent;background:none;color:var(--side-ink-2);border-radius:8px;cursor:pointer}
.cp-ib:hover{background:var(--side-2);color:var(--side-ink)}
.cp-ib[aria-pressed="true"]{color:#9DB0FF;background:var(--side-2);border-color:var(--side-line)}
.cp-ib.rec{color:#fff;background:#B42318;border-color:#B42318;animation:cppulse 1.2s infinite}
@keyframes cppulse{50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.cp-ib.rec{animation:none}}
.cp-needs{display:flex;align-items:center;gap:11px;min-height:44px;margin:8px 10px 6px;padding:0 10px;border-radius:8px;color:var(--side-ink);text-decoration:none;background:var(--side-2);border:1px solid var(--side-line);font-size:15px}
.cp-needs:hover{border-color:#7D95FF}.cp-needs svg{color:var(--side-ink-2)}
.cp-needs-l{flex:1}.cp-needs-n{font:500 14px var(--mono);min-width:26px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--side-line);color:var(--side-ink)}
.cp-needs-n:empty{display:none}.cp-needs-n.hot{background:#2447D6;color:#fff}
.cp-log{flex:1;min-height:0;overflow:auto;padding:12px 12px 8px;display:flex;flex-direction:column;gap:10px}
.cp-m{max-width:92%;border-radius:12px;padding:8px 11px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.cp-m.me{align-self:flex-end;background:#2447D6;color:#fff;border-bottom-right-radius:4px}
.cp-m.sandy{align-self:flex-start;background:var(--side-2);border:1px solid var(--side-line);border-bottom-left-radius:4px}
.cp-t{margin:0}.cp-t+.cp-t,.cp-t+.cp-ul,.cp-ul+.cp-t{margin-top:6px}
.cp-ul{margin:6px 0 0;padding:0 0 0 18px}.cp-ul li{margin:3px 0}
.cp-a{color:#9DB0FF;text-decoration:underline;text-underline-offset:2px}.cp-a:hover{color:#C4D0FF}
.cp-voice{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.85;margin-bottom:4px}.cp-voice svg{width:14px;height:14px}
.cp-m audio{display:block;width:100%;max-width:240px;height:36px;margin-bottom:6px}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cp-chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #4a5d9a;background:none;color:#C4D0FF;font-size:14px;cursor:pointer}
.cp-chip:hover{background:rgba(125,149,255,.16)}
.cp-chip.primary{background:#2447D6;border-color:#2447D6;color:#fff}.cp-chip.primary:hover{filter:brightness(1.1)}
.cp-chip.done,.cp-chip:disabled{opacity:.55;cursor:default}
.cp-cmds{border-top:1px solid var(--side-line);max-height:40%;overflow:auto;padding:6px 10px;background:var(--side-2);display:flex;flex-direction:column;gap:2px}
.cp-cmds[hidden]{display:none}
.cp-cmds-h{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--side-ink-2);padding:4px 6px}
.cp-cmd{min-height:40px;text-align:left;padding:0 10px;border:0;background:none;color:var(--side-ink);border-radius:8px;font-size:15px;cursor:pointer}
.cp-cmd:hover,.cp-cmd:focus-visible{background:var(--side-line)}
.cp-note{margin:0;padding:0 14px;min-height:20px;font-size:13px;color:#E3A450}
.cp-form{display:flex;align-items:center;gap:2px;padding:6px 8px calc(10px + env(safe-area-inset-bottom)) 8px;border-top:1px solid var(--side-line)}
.cp-input{flex:1;min-width:0;min-height:44px;border:1px solid var(--side-line);background:var(--side-2);color:var(--side-ink);border-radius:10px;padding:0 12px;font:inherit;font-size:16px}
.cp-input::placeholder{color:var(--side-ink-2)}
.cp-input:focus{outline:0;border-color:#7D95FF;box-shadow:0 0 0 3px rgba(125,149,255,.22)}
.cp-send{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:10px;background:#2447D6;color:#fff;cursor:pointer}
.cp-send:hover{filter:brightness(1.1)}
.chatpanel :focus-visible{outline:2px solid #9DB0FF;outline-offset:2px}

/* small screens: full-screen sheet, floating "Ask Sandy" button (the sidebar bar sits in the Menu sheet) */
@media (max-width:760px){
  html.t9-chat .chatpanel{width:100vw}
  html.t9-chat .chatfab{display:inline-flex;position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:0;border-radius:999px;background:#2447D6;color:#fff;font-size:15px;font-weight:500;box-shadow:var(--shadow);cursor:pointer}
  html.t9-chat.chat-open .chatfab{display:none}
  html.t9-chat.drawer-open:not(.chat-open) .chatfab{display:inline-flex;z-index:46;bottom:calc(88px + env(safe-area-inset-bottom))}
  html.t9-chat .side.navopen .chatbar{width:calc(100% - 20px)}
  html.t9-chat .side:not(.navopen)>.chatbar{display:none}
  .cp-m{max-width:96%}
}
@media (min-width:761px){html.t9-chat .chatfab{display:none}}
@media (max-width:760px){.cp-head{padding-top:32px}}

/* T9 fix: the bar stays clickable while a request drawer is open; the open chat pushes the drawer aside instead of covering its tabs; toasts sit above the chat input */
@media (min-width:761px){
  html.t9-chat.chat-open #drawer-host:not(:empty){padding-left:404px}
  html.t9-chat.chat-open #drawer-host .drawer{width:min(1040px,calc(100vw - 428px))}
}
html.t9-chat.chat-open .toast{bottom:84px;z-index:60}