/* ============================================================
   chat.css — "Ask my AI" launcher + panel (js/chat.js)
   ============================================================ */

/* back-to-top moves up to make room for the launcher */
.to-top{bottom:calc(clamp(18px,3vw,34px) + 64px)}

.chat-fab{
  position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:125;
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 16px;
  border:1px solid var(--accent);border-radius:999px;
  background:var(--accent);color:#fff;cursor:pointer;
  font:500 14px/1 var(--sans);letter-spacing:.01em;
  box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),opacity .25s var(--ease);
}
@media (hover:hover) and (pointer:fine){.chat-fab:hover{transform:translateY(-3px)}}
.chat-fab:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.chat-fab-ic{width:22px;height:22px;flex:none}
body.chat-open .chat-fab{opacity:0;pointer-events:none;transform:scale(.9)}
/* the full-screen mobile menu sits below these (z 99) — keep them out of the way */
body.menu-open .chat-fab,body.menu-open .to-top,body.menu-open .chat-panel{opacity:0;pointer-events:none}

.chat-panel{
  position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:130;
  width:min(390px,calc(100vw - 32px));height:min(580px,calc(100dvh - 110px));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--fg);
  border:1px solid var(--line2);border-radius:18px;
  box-shadow:var(--shadow),0 8px 30px -12px rgba(0,0,0,.25);
  overflow:hidden;
  animation:chat-in .5s var(--ease-spring);transform-origin:bottom right;
}
.chat-panel[hidden]{display:none}
@keyframes chat-in{from{opacity:0;transform:translateY(30px) scale(.85)}}

.chat-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;border-bottom:1px solid var(--line);
}
.chat-head h2{margin:0;font:400 22px/1.15 var(--serif)}
.chat-head p{margin:4px 0 0;font:13px/1.4 var(--sans);color:var(--fg2)}
.chat-x{
  flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);
  background:none;color:var(--fg2);cursor:pointer;font-size:13px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.chat-x:hover{color:var(--fg);border-color:var(--fg2)}

.chat-log{
  flex:1;overflow-y:auto;padding:16px 18px;
  display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
}
.chat-msg{
  margin:0;max-width:86%;padding:10px 14px;border-radius:14px;
  font:14.5px/1.5 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;
}
.chat-msg.assistant{align-self:flex-start;background:var(--bg-alt);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-msg.user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.chat-msg.error{color:var(--fg2);font-style:italic}
.chat-msg.typing::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--fg2);box-shadow:10px 0 var(--fg3),20px 0 var(--line2);
  margin-right:20px;animation:chat-dots 1s infinite;
}
@keyframes chat-dots{50%{opacity:.35}}

.chat-sug{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px}
.chat-sug:empty{display:none}
.chat-chip{
  padding:7px 12px;border-radius:999px;border:1px solid var(--line2);
  background:none;color:var(--fg);cursor:pointer;font:13px/1.2 var(--sans);text-align:left;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.chat-chip:hover{border-color:var(--accent);background:var(--accent-soft)}

.chat-form{display:flex;align-items:flex-end;gap:8px;padding:12px 14px 6px 18px}
.chat-form textarea{
  flex:1;resize:none;min-height:42px;max-height:120px;padding:10px 14px;
  border:1px solid var(--line2);border-radius:14px;background:var(--bg);color:var(--fg);
  font:14.5px/1.4 var(--sans);
}
.chat-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-send{
  flex:none;width:42px;height:42px;border-radius:50%;border:0;
  background:var(--accent);color:#fff;font-size:18px;cursor:pointer;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){.chat-send:hover{transform:translateY(-2px)}}
.chat-send:disabled{opacity:.45;cursor:default;transform:none}
.chat-note{margin:0;padding:4px 18px 12px;font:11.5px/1.4 var(--sans);color:var(--fg3)}


/* phones: icon-only launcher, panel as a bottom sheet */
@media (max-width:600px){
  .chat-fab{width:52px;height:52px;padding:0;justify-content:center}
  .chat-fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .chat-fab-ic{width:24px;height:24px}
  .chat-panel{right:0;left:0;bottom:0;width:100%;height:min(86dvh,640px);border-radius:18px 18px 0 0;border-bottom:0}
}
/* phones in landscape: use the whole height */
@media (max-height:520px){
  .chat-panel{bottom:8px;height:calc(100dvh - 16px)}
  .chat-sug{display:none}
}

@media (prefers-reduced-motion:reduce){
  .chat-panel{animation:none}
  .chat-msg.typing::after{animation:none}
}