/* ============================================================
   Website assistant (chat widget) — uses the tokens in styles.css
   ============================================================ */

.chat-launch{
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  z-index:98; display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px 14px 16px; border:1px solid var(--oak); border-radius:999px;
  background:var(--ink); color:var(--bone); cursor:pointer; box-shadow:var(--shadow-lg);
  font-family:var(--cond); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.chat-launch:hover{transform:translateY(-2px); background:var(--ink-2)}
.chat-launch svg{width:20px; height:20px; color:var(--oak)}
.chat-launch[hidden]{display:none}
.chat-launch .dot{width:8px; height:8px; border-radius:50%; background:var(--oak); margin-left:2px}

.chat{
  position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom));
  z-index:98; width:min(390px, calc(100vw - 40px)); height:min(600px, calc(100dvh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); color:var(--text); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg);
  transform-origin:bottom right; animation:chat-in .28s var(--ease);
}
.chat[hidden]{display:none}
@keyframes chat-in{from{opacity:0; transform:translateY(12px) scale(.98)}}

.chat__head{
  display:flex; align-items:center; gap:12px; padding:16px 16px 14px 18px;
  background:var(--ink); color:var(--bone); border-bottom:1px solid var(--oak-deep);
}
.chat__title{font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.2}
.chat__sub{font-family:var(--cond); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); margin-top:3px}
.chat__close{
  margin-left:auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark);
  background:transparent; color:var(--bone); cursor:pointer; display:grid; place-items:center; font-size:20px; line-height:1;
}
.chat__close:hover{background:var(--ink-3)}

.chat__log{flex:1; overflow-y:auto; padding:18px 16px 8px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain}
.chat__msg{max-width:86%; padding:10px 14px; border-radius:14px; font-size:15px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.chat__msg--bot{align-self:flex-start; background:var(--bone); border-bottom-left-radius:4px}
.chat__msg--user{align-self:flex-end; background:var(--ink); color:var(--bone); border-bottom-right-radius:4px}
.chat__goto{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--cond); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--oak-deep);
}
.chat__goto:hover{text-decoration:underline; text-underline-offset:3px}

.chat__typing{align-self:flex-start; display:inline-flex; gap:4px; padding:14px; background:var(--bone); border-radius:14px; border-bottom-left-radius:4px}
.chat__typing span{width:6px; height:6px; border-radius:50%; background:var(--muted-2); animation:chat-dot 1s infinite ease-in-out}
.chat__typing span:nth-child(2){animation-delay:.15s}
.chat__typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,80%,100%{opacity:.3; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}

.chat__chips{display:flex; flex-wrap:wrap; gap:6px; padding:4px 16px 10px}
.chat__chip{
  border:1px solid var(--line); background:var(--paper); color:var(--text); border-radius:999px;
  padding:7px 12px; font-size:13.5px; line-height:1.2; cursor:pointer; text-align:left;
}
.chat__chip:hover{border-color:var(--oak-deep); background:var(--bone)}

.chat__form{display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line); background:var(--paper)}
.chat__input{
  flex:1; resize:none; max-height:120px; min-height:44px; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; font-size:16px; line-height:1.4; outline:none;
}
.chat__input:focus{border-color:var(--oak-deep)}
.chat__send{
  width:44px; height:44px; flex:none; border-radius:10px; border:0; cursor:pointer;
  background:var(--oak); color:var(--ink); display:grid; place-items:center;
}
.chat__send:disabled{opacity:.45; cursor:default}
.chat__send svg{width:18px; height:18px}
.chat__note{padding:0 16px 10px; font-size:11.5px; color:var(--muted); background:var(--paper)}

/* section the assistant just scrolled to */
.chat-highlight{animation:chat-flash 1.8s var(--ease)}
@keyframes chat-flash{0%,100%{box-shadow:inset 0 0 0 0 transparent} 20%,60%{box-shadow:inset 0 0 0 3px var(--oak)}}

@media (max-width:600px){
  .chat{right:0; bottom:0; width:100vw; height:100dvh; border-radius:0; border:0;
        padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
  .chat-launch{padding:14px}
  .chat-launch .label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chat, .chat-highlight, .chat__typing span{animation:none}
}
@media print{ .chat, .chat-launch{display:none !important} }