/* ===== Ask Skippy — chat panel (sk- namespace) =====
   Warm Bento language: cream sheet, plum identity, Fraunces title, soft radii.
   Additive stylesheet — styles.css untouched. */

/* Floating launcher — a LABELED "Ask Skippy" pill (icon + text), persistent on
   every page (position:fixed, outside the view containers). Reads clearly as
   "ask a question", not a bare chat bubble (Nick, Jul 3 2026). */
.sk-fab{
  position:fixed;
  right:max(16px, calc((100vw - 520px)/2 + 16px));
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px 11px 14px;border-radius:999px;
  border:none;cursor:pointer;
  background:linear-gradient(160deg,#6a3072,var(--plum));
  color:var(--cream-2);
  box-shadow:var(--shadow-float);
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:-.01em;
}
.sk-fab-ic{display:grid;place-items:center;flex:0 0 auto;}
.sk-fab-ic svg{width:22px;height:22px;display:block;}
.sk-fab-txt{white-space:nowrap;}
.sk-fab:active{transform:scale(.96);}
body.sk-open .sk-fab{display:none;}
/* Desktop: the rail shifts content right; nudge the pill in from the far edge */
@media (min-width:1100px){
  .sk-fab{ right:24px; bottom:24px; }
}

/* Subtle contextual nudge — a small lilac pill that opens Ask Skippy, dropped
   next to experiments / lists / question-prone spots (Nick, Jul 3 2026). Kept
   light so it reads as a gentle affordance, not clutter. */
.sk-nudge{
  display:inline-flex;align-items:center;gap:6px;
  margin:9px 0 2px;padding:6px 12px;
  background:var(--tile-lilac,#efe6f0);color:var(--tile-lilac-ink,#5a2660);
  border:none;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.1;
  opacity:.92;transition:opacity .12s ease, transform .12s ease;
}
.sk-nudge:hover{opacity:1;}
.sk-nudge:active{transform:scale(.97);}
.sk-nudge .skn-ic{display:grid;place-items:center;flex:0 0 auto;}
.sk-nudge .skn-ic svg{width:13px;height:13px;display:block;}

/* Overlay + sheet */
.sk-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(36,27,38,.45);
  display:flex;align-items:flex-end;justify-content:center;
}
.sk-overlay[hidden]{display:none;}
.sk-panel{
  width:100%;max-width:520px;
  height:min(680px, calc(100% - env(safe-area-inset-top) - 24px));
  background:var(--cream-2);
  border-radius:24px 24px 0 0;
  box-shadow:0 -8px 32px rgba(36,27,38,.28);
  display:flex;flex-direction:column;
  animation:sk-up .22s ease-out;
}
@keyframes sk-up{from{transform:translateY(24px);opacity:.6;}to{transform:none;opacity:1;}}

.sk-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);
}
.sk-head-ic{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(160deg,#6a3072,var(--plum));color:var(--cream-2);
  display:grid;place-items:center;flex:0 0 auto;
}
.sk-head-ic svg{width:19px;height:19px;}
.sk-title{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);}
.sk-sub{font-size:11.5px;color:var(--muted);margin-top:1px;}
.sk-close{
  margin-left:auto;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:18px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}

/* Messages */
.sk-msgs{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 16px 8px;display:flex;flex-direction:column;gap:9px;
}
.sk-msg{
  max-width:84%;padding:10px 14px;border-radius:18px;
  font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;
}
.sk-msg-skippy{
  align-self:flex-start;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  border-bottom-left-radius:6px;
}
.sk-msg-user{
  align-self:flex-end;
  background:var(--plum);color:var(--cream-2);
  border-bottom-right-radius:6px;
}
.sk-action{
  align-self:flex-start;
  font-size:12px;font-weight:600;color:var(--tile-lilac-ink);
  background:var(--tile-lilac);border-radius:12px;padding:6px 11px;
}
.sk-action a{color:inherit;text-decoration:underline;}

/* Typing dots */
.sk-typing{display:flex;gap:4px;align-items:center;padding:13px 15px;}
.sk-typing span{
  width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:sk-dot 1.1s infinite ease-in-out;
}
.sk-typing span:nth-child(2){animation-delay:.15s;}
.sk-typing span:nth-child(3){animation-delay:.3s;}
@keyframes sk-dot{0%,60%,100%{opacity:.35;transform:none;}30%{opacity:1;transform:translateY(-3px);}}

/* Composer */
.sk-form{
  display:flex;gap:9px;align-items:center;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--cream-2);
  border-radius:0 0 0 0;
}
.sk-input{
  flex:1;min-width:0;
  font-family:var(--sans);font-size:15px;color:var(--text);
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:11px 16px;outline:none;
}
.sk-input:focus{border-color:var(--plum-soft);}
.sk-input:disabled{opacity:.6;}
.sk-send{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;
  background:var(--plum);color:var(--cream-2);
  display:grid;place-items:center;
}
.sk-send svg{width:19px;height:19px;}
.sk-send:disabled{opacity:.5;}

/* Desktop: float the sheet instead of docking it to the bottom edge */
@media (min-width:600px){
  .sk-overlay{align-items:center;padding:24px;}
  .sk-panel{border-radius:24px;height:min(680px, calc(100vh - 48px));}
}