/* Ask - layered on app.css, reuses its tokens.
   Ask uses the combined-view accent so it reads as "both girls". */
:root{ --accent:#b45309; --accent-soft:#fef3c7 }
@media (prefers-color-scheme:dark){ :root{ --accent:#fcd34d; --accent-soft:#43300b } }

/* ============================================================
   Chat layout
   Empty: the composer sits in the middle of the page.
   In conversation: answers scroll above, composer pinned below.
   ============================================================ */
body{ padding-bottom:0 }

.wrap{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh; max-width:820px;
}
@media (min-width:1024px){
  .wrap{ display:flex; max-width:880px; padding:1.5rem 2rem 0 }
}

.askui{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0 }
.askui[hidden]{ display:none }

.scroll{ flex:1 1 auto }

.composer{
  position:sticky; bottom:0; z-index:5;
  background:var(--bg); padding-bottom:.75rem;
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
}
/* a short fade so content scrolling under the composer doesn't cut hard */
.composer::before{
  content:""; position:absolute; left:0; right:0; top:-1.25rem; height:1.25rem;
  background:linear-gradient(to bottom, transparent, var(--bg));
  pointer-events:none;
}

/* --- empty state ---------------------------------------------- */
/* Centred, but optically a little above true centre: the padding shrinks
   the box the composer centres in, lifting it by half the value. vh so the
   shift stays proportional on a phone as well as a desktop. */
.askui.is-empty{ justify-content:center; padding-bottom:12vh }
.askui.is-empty .scroll{ display:none }
.askui.is-empty .composer{ position:static; padding-bottom:0 }
.askui.is-empty .composer::before{ display:none }

.lead-in{
  display:none; margin:0 0 .3rem; text-align:center;
  font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--ink)
}
.lead-hint{
  display:none; margin:0 auto 1rem; max-width:34ch; text-align:center;
  font-size:.86rem; line-height:1.45; color:var(--muted)
}
.askui.is-empty .lead-in, .askui.is-empty .lead-hint{ display:block }

/* Slash-command feedback. No display property on purpose: the hidden
   attribute only works while nothing outranks the UA rule for it. */
.cmdhint{
  margin:.6rem .2rem 0; font-size:.78rem; line-height:1.7; color:var(--muted);
}
.cmdhint .cmd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem;
  color:var(--accent); background:var(--accent-soft);
  border-radius:6px; padding:.05rem .35rem; margin-right:.45rem;
}
.cmdhint .cmd:not(:first-child){ margin-left:.9rem }

/* the examples are starters, so they belong to the empty state only */
.examples{
  list-style:none; margin:1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
}
.askui:not(.is-empty) .examples{ display:none }
.examples li{
  font-size:.82rem; font-weight:600; line-height:1.3; cursor:pointer;
  color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:.34rem .7rem;
  transition:color .15s ease, border-color .15s ease;
}
.examples li:hover{ color:var(--accent); border-color:var(--accent) }
/* a phone gets three starters; the rest come back with the room for them */
@media (max-width:599px){ .examples li:nth-child(n+4){ display:none } }

/* --- composer ------------------------------------------------- */
.askform{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.75rem .8rem; margin:0;
}
.askform textarea{
  width:100%; font:inherit; color:var(--ink); background:transparent;
  border:0; padding:.15rem .1rem; resize:none; overflow-y:auto;
  max-height:9rem; line-height:1.5;
}
.askform textarea:focus{ outline:none }
.askform:focus-within{ border-color:var(--accent) }

.askrow{ display:flex; gap:.6rem; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin-top:.5rem }
.askrow .seg{ box-shadow:none; background:var(--bg) }
.askrow .seg button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; color:var(--muted);
  background:transparent; border:0; border-radius:999px; padding:.28rem .7rem
}
.askrow .seg button.on{ background:var(--accent-soft); color:var(--accent) }
.askform button[type=submit]{
  font:inherit; font-weight:700; cursor:pointer; margin:0;
  background:var(--accent); color:var(--bg); border:0;
  border-radius:999px; padding:.45rem 1.15rem
}
.askform button[type=submit]:disabled{ opacity:.5; cursor:default }

/* --- header ---------------------------------------------------
   One quiet row: the round back button (app.css), the wordmark, and
   the actions on the right. The strapline lives with the empty state
   instead, so the bar stays small on a phone; it shrinks further once
   a conversation is running so the thread gets the vertical space. */
.ask-head{ display:flex; align-items:center; gap:.65rem; padding:.35rem 0 1rem }
.ask-head .hello{ margin:0; font-size:1.6rem; transition:font-size .18s ease }
.head-actions{ display:flex; gap:.9rem; align-items:center; margin-left:auto; white-space:nowrap }

body.chatting .ask-head{
  position:sticky; top:0; z-index:6;
  background:var(--bg); padding:.5rem 0 .6rem;
  border-bottom:1px solid var(--line);
}
body.chatting .ask-head .hello{ font-size:1.25rem }
/* mid-conversation on a phone only New conversation stays in the bar */
@media (max-width:599px){
  body.chatting .head-actions .docs, body.chatting .head-actions #forget{ display:none }
}

/* --- unlock gate ---------------------------------------------- */
.unlock{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem; margin:auto 0
}
.unlock .lead{ margin:0 0 .75rem; color:var(--muted); font-size:.9rem }
.unlock input{
  width:100%; font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:12px; padding:.6rem .75rem
}
.unlock input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent }
.unlock button{
  margin-top:.6rem; font:inherit; font-weight:700; cursor:pointer;
  background:var(--accent); color:var(--bg); border:0; border-radius:999px; padding:.5rem 1.25rem
}
.unlock .hint{ margin:.6rem 0 0; color:var(--bad); font-size:.85rem }

/* --- conversation thread -------------------------------------- */
.thread{ display:flex; flex-direction:column; gap:.9rem; margin:0 0 1rem }
#out{ display:flex; flex-direction:column; gap:.9rem; margin:0 0 1rem }
/* Both collapse when empty. Otherwise the empty one still contributes its
   bottom margin, and the pending turn shifts by 1rem the moment the answer
   lands and moves from #out into #thread. */
#out:empty, .thread:empty{ display:none; margin:0 }
.turn{ display:flex; flex-direction:column; gap:.5rem }
.qbubble{
  align-self:flex-end; max-width:min(90%, 46ch);
  background:var(--accent-soft); color:var(--accent);
  border-radius:16px 16px 4px 16px; padding:.55rem .85rem;
  font-weight:600; line-height:1.45
}

.answer{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem 1.1rem; margin:0
}
.answer p, .answer li{ max-width:70ch }
.answer p{ margin:.5rem 0; line-height:1.6 }
.answer p:first-of-type{ margin-top:0 }
.answer ul, .answer ol{ margin:.5rem 0; padding-left:1.2rem }
.answer li{ margin:.25rem 0; line-height:1.55 }
.answer h3{ font-size:.95rem; font-weight:800; letter-spacing:-.01em;
  margin:1rem 0 .3rem; color:var(--ink) }
.answer h3:first-child{ margin-top:0 }
.answer .sugg{ font-style:normal; font-size:.85em; opacity:.65 }
.answer .meta{ margin:.5rem 0 0; font-size:.72rem; opacity:.55 }
.answer.err{ border-color:var(--bad) }
.answer.err p{ color:var(--bad) }

/* Thinking: an answer-shaped card holding three dots, per the Ask design.
   Card-shaped on purpose - the real answer replaces it in place, so the
   thread doesn't jump the moment it lands. */
.thinking{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem 1.1rem; margin:0;
  align-self:flex-start; display:inline-flex; gap:6px; align-items:center;
}
.thinking span{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:askDot 1.2s infinite ease-in-out;
}
.thinking span:nth-child(2){ animation-delay:.15s }
.thinking span:nth-child(3){ animation-delay:.3s }
@keyframes askDot{
  0%,80%,100%{ opacity:.25; transform:translateY(0) }
  40%{ opacity:1; transform:translateY(-2px) }
}
@media (prefers-reduced-motion:reduce){
  .thinking span{ animation:none; opacity:.55 }
}

/* --- sources: deduped, quiet ---------------------------------- */
.answer .srcs{
  display:flex; flex-wrap:wrap; gap:.15rem .55rem; align-items:baseline;
  margin:.9rem 0 0; padding-top:.7rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted)
}
.answer .srcs .lbl{ font-weight:700; opacity:.8 }
.answer .srcs a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line) }
.answer .srcs a:hover{ color:var(--ink); border-bottom-color:currentColor }

/* --- follow-up chips ------------------------------------------ */
.followups{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin:.85rem 0 0; padding-top:.8rem; border-top:1px solid var(--line)
}
.followups .fu-label{
  flex:0 0 100%; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); opacity:.7; margin:0 0 .1rem
}
.followups button{
  font:inherit; font-size:.82rem; font-weight:600; line-height:1.3;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid transparent; border-radius:999px;
  padding:.34rem .7rem; cursor:pointer; text-align:left;
  transition:border-color .15s ease, transform .1s ease
}
.followups button:hover{ border-color:currentColor }
.followups button:active{ transform:scale(.97) }

/* secondary actions: quiet text, no underline until hovered */
a.linkish{ text-decoration:none }
.newthread, .linkish{
  background:none; border:0; color:var(--muted); font:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; text-decoration:none; padding:0
}
.newthread:hover, .linkish:hover{ color:var(--accent); text-decoration:underline }

@media (min-width:600px){
  .askform textarea{ font-size:1.02rem }
  .lead-in{ font-size:1.35rem }
}
@media (prefers-reduced-motion:reduce){
  .followups button:active{ transform:none }
}