/* The assistant panel (chat.js). Uses the app's tokens from index.html, so it
   follows light and dark like everything else. Desktop: a panel on the right.
   Phone: the whole screen. */

.chatfab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:7px;
  padding:11px 17px 11px 14px;border-radius:999px;border:0;cursor:pointer;
  background:var(--fill);color:var(--fill-ink);font:600 14px var(--ui);box-shadow:var(--shadow)}
.chatfab svg{width:19px;height:19px;fill:currentColor;stroke:none}
.chatfab:hover{filter:brightness(1.05)}
.chatfab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.chat{position:fixed;top:0;right:0;bottom:0;z-index:65;width:min(420px,100vw);display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--rule);box-shadow:-8px 0 30px rgba(0,0,0,.08);
  animation:chatin .18s ease-out}
@keyframes chatin{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.chat{animation:none}}
/* room for the panel, so it doesn't sit on top of the week */
@media (min-width:1100px){ body.chatopen .app{margin-right:420px} }
@media (max-width:640px){ .chat{width:100vw;border-left:0} }

.chathead{display:flex;align-items:center;gap:8px;padding:14px 12px 12px 18px;border-bottom:1px solid var(--rule)}
.chattitle{display:flex;align-items:center;gap:7px;flex:1;font-size:15px}
.chattitle svg{width:18px;height:18px;fill:var(--accent);stroke:none}
.clink{background:none;border:0;color:var(--muted);font:500 12.5px var(--ui);cursor:pointer;padding:6px 8px;border-radius:var(--r-sm)}
.clink:hover{color:var(--ink);background:var(--sunken)}
.cicon{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--muted)}
.cicon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cicon:hover{background:var(--sunken);color:var(--ink)}

.chatlog{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.cmsg p{margin:0 0 8px}
.cmsg p:last-child{margin-bottom:0}
.cmsg a{color:var(--accent);word-break:break-all}
.cmsg.me{align-self:flex-end;max-width:85%;background:var(--fill);color:var(--fill-ink);
  padding:9px 13px;border-radius:16px 16px 4px 16px}
.cmsg.them{align-self:stretch;max-width:100%;line-height:1.55}

.cstatus{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;margin-top:6px}
.cdots{display:inline-flex;gap:3px}
.cdots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:cdot 1s infinite ease-in-out}
.cdots i:nth-child(2){animation-delay:.15s}
.cdots i:nth-child(3){animation-delay:.3s}
@keyframes cdot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.cdots i{animation:none;opacity:.6}}
.cerr{margin-top:6px;color:var(--over-t);font-size:13px}

.ccards{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ccard{border:1px solid var(--rule);border-radius:var(--r-md);padding:12px 13px;background:var(--ground)}
.cctop{display:flex;flex-direction:column;gap:1px;margin-bottom:7px}
.cctop b{font-size:14px;line-height:1.3}
.ccsub{color:var(--muted);font-size:12px}
.cmac{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px}
.cmac span{display:inline-flex;align-items:center;gap:5px}
.cmac i{width:7px;height:7px;border-radius:50%}
.ccmeta{color:var(--muted);font-size:12px;margin-top:6px}
.ccnote{font-size:12.5px;margin-top:6px;padding:6px 9px;border-radius:var(--r-sm);background:var(--sunken)}
.ccacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.cbtn{font:500 12.5px var(--ui);padding:6px 13px;border-radius:999px;border:1px solid var(--rule);
  background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.cbtn:hover{border-color:var(--accent)}
.cbtn.primary{background:var(--fill);color:var(--fill-ink);border-color:transparent;font-weight:600}
.cbtn:disabled{opacity:.5;cursor:default}
.ccdone{font-size:12px;color:var(--on-t)}

.cempty{color:var(--muted);font-size:13.5px;margin-top:8px}
.cempty p{margin:0 0 14px}
.csugg{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.cchip{font:500 13px var(--ui);padding:8px 13px;border-radius:999px;border:1px solid var(--rule);
  background:var(--ground);color:var(--ink);cursor:pointer;text-align:left}
.cchip:hover{border-color:var(--accent)}

.chatform{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--rule)}
.chatform textarea{flex:1;resize:none;border:1px solid var(--rule);border-radius:18px;padding:9px 14px;
  font:14px/1.4 var(--ui);background:var(--ground);color:var(--ink);max-height:140px}
.chatform textarea:focus{outline:none;border-color:var(--accent)}
/* iOS zooms into inputs under 16px */
@media (max-width:640px){ .chatform textarea{font-size:16px} }
.csend{background:var(--fill);color:var(--fill-ink)}
.csend:hover{background:var(--fill);color:var(--fill-ink);filter:brightness(1.05)}

/* messages from the app stay readable over the panel */
body.chatopen .toast{z-index:70}