/* Ask Dunce — the full-page AI chat view (#dunce). A three-row column: header · scrolling log ·
   composer pinned to the bottom. Composes design tokens only (tokens.css); mirrors the visual
   language of the in-sim chat (dl-chat-*) but at full-page scale. */

#dunce {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 45% at 15% 0%, rgba(var(--brand-rgb), .10), transparent 60%),
    var(--surface-0);
  padding-top: env(safe-area-inset-top);
}
#dunce[hidden] { display: none; }

.dl-ask { --ask-max: 720px; }

/* ── header ─────────────────────────────────────────────────────────────────── */
.dl-ask-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-glass-strong);
  backdrop-filter: blur(var(--blur-md));
}
.dl-ask-id { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.dl-ask-avatar { flex: 0 0 auto; width: 36px; height: 44px; }
.dl-ask-id-text { min-width: 0; }
.dl-ask-title { font-size: 1rem; font-weight: var(--fw-semibold, 600); color: var(--ink-1); line-height: 1.1; }
.dl-ask-sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.dl-ask-new {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--ink-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: color var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease;
}
.dl-ask-new svg { width: 16px; height: 16px; }
.dl-ask-new:hover { color: var(--ink-1); border-color: var(--border-brand); }

/* ── log ─────────────────────────────────────────────────────────────────────── */
.dl-ask-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5) var(--s-4) var(--s-5);
  scroll-behavior: smooth;
}
.dl-ask-log > * { width: 100%; max-width: var(--ask-max); margin-inline: auto; }

.dl-ask-msg {
  position: relative;
  max-width: var(--ask-max);
  font-size: var(--fs-md, .9375rem); line-height: var(--lh-relaxed, 1.6); color: var(--ink-1);
  overflow-wrap: anywhere;
}
.dl-ask-msg.user {
  align-self: flex-end;
  margin-inline: auto 0;            /* hug the right within the centered column */
  max-width: min(82%, 560px);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  border-bottom-right-radius: 4px;
  background: var(--brand); color: #fff;
}
.dl-ask-msg.ai {
  align-self: flex-start;
  padding-left: 36px;               /* room for the owl glyph */
}
.dl-ask-msg.ai::before {
  /* the Dunce buddy mark (static, self-contained SVG) — survives the streaming innerHTML rewrites */
  content: "";
  position: absolute; left: 2px; top: -2px;
  width: 24px; height: 30px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'28%2010%2084%20130'%3E%3Cpath%20d%3D'M70%2014C85%2044%2099%2088%20107%20120C101%20140%2039%20140%2033%20120C41%2088%2055%2044%2070%2014Z'%20fill%3D'%237C5CFF'%2F%3E%3Cpath%20d%3D'M37%20114C50%20124%2090%20124%20103%20114L101%20122C88%20130%2052%20130%2039%20122Z'%20fill%3D'%23FFC24D'%2F%3E%3Cellipse%20cx%3D'57'%20cy%3D'92'%20rx%3D'11'%20ry%3D'13'%20fill%3D'%23F6F7FB'%2F%3E%3Cellipse%20cx%3D'83'%20cy%3D'92'%20rx%3D'11'%20ry%3D'13'%20fill%3D'%23F6F7FB'%2F%3E%3Ccircle%20cx%3D'57'%20cy%3D'93'%20r%3D'5'%20fill%3D'%23161A2C'%2F%3E%3Ccircle%20cx%3D'83'%20cy%3D'93'%20r%3D'5'%20fill%3D'%23161A2C'%2F%3E%3Ccircle%20cx%3D'54'%20cy%3D'89'%20r%3D'2'%20fill%3D'%23fff'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'89'%20r%3D'2'%20fill%3D'%23fff'%2F%3E%3Cpath%20d%3D'M61%20107Q70%20115%2079%20107'%20fill%3D'none'%20stroke%3D'%23161A2C'%20stroke-width%3D'3.4'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E");
}
.dl-ask-msg.user p { margin: 0; }

/* Markdown bits inside an AI bubble */
.dl-ask-msg.ai > :first-child { margin-top: 0; }
.dl-ask-msg.ai > :last-child { margin-bottom: 0; }
.dl-ask-msg p { margin: 0 0 .65em; }
.dl-ask-msg h3, .dl-ask-msg h4, .dl-ask-msg h5 { margin: 1em 0 .4em; color: var(--ink-1); line-height: 1.25; }
.dl-ask-msg h3 { font-size: 1.05rem; }
.dl-ask-msg h4 { font-size: .98rem; }
.dl-ask-msg ul, .dl-ask-msg ol { margin: 0 0 .65em; padding-left: 1.3em; }
.dl-ask-msg li { margin: .2em 0; }
.dl-ask-msg a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.dl-ask-msg.user a { color: #fff; }
.dl-ask-msg code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  padding: .08em .35em; border-radius: 6px;
}
.dl-ask-msg.user code { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }
.dl-ask-msg pre {
  margin: 0 0 .7em; padding: var(--s-3); overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
}
.dl-ask-msg pre code { background: none; border: 0; padding: 0; font-size: .82rem; line-height: 1.5; }
.dl-ask-err { color: var(--danger, #ef5a6b); margin: 0; }

/* streaming "typing" dots (reused look from dl-chat-dots) */
.dl-ask-dots { display: inline-flex; gap: 5px; padding: 4px 0; }
.dl-ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dl-ask-bounce 1.2s infinite ease-in-out; }
.dl-ask-dots i:nth-child(2) { animation-delay: .15s; }
.dl-ask-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dl-ask-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ── empty state ───────────────────────────────────────────────────────────────── */
.dl-ask-empty { max-width: var(--ask-max); margin: auto; text-align: center; padding: var(--s-5) var(--s-2); }
.dl-ask-empty-mark { display: block; width: 78px; height: 96px; margin: 0 auto var(--s-3); }
.dl-ask-empty h2 { margin: 0 0 var(--s-2); font-size: 1.45rem; color: var(--ink-1); }
.dl-ask-empty p { margin: 0 auto var(--s-4); max-width: 48ch; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-snug, 1.4); }
.dl-ask-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.dl-ask-chip {
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--ink-2);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left;
  transition: color var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
.dl-ask-chip:hover { color: var(--ink-1); border-color: var(--border-brand); transform: translateY(-1px); }

.dl-ask-offline { max-width: var(--ask-max); margin: auto; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

/* ── composer ──────────────────────────────────────────────────────────────────── */
.dl-ask-composer {
  flex: 0 0 auto;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-glass-strong); backdrop-filter: blur(var(--blur-md));
}
.dl-ask-field {
  display: flex; align-items: flex-end; gap: var(--s-2);
  max-width: var(--ask-max); margin-inline: auto;
  padding: 6px 6px 6px var(--s-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  background: var(--surface-1);
  transition: border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
}
.dl-ask-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.dl-ask-input {
  flex: 1 1 auto; min-width: 0; resize: none; max-height: 200px;
  border: 0; background: none; outline: none;
  color: var(--ink-1); font: inherit; font-size: var(--fs-md, .9375rem); line-height: 1.45;
  padding: 7px 0;
}
.dl-ask-input::placeholder { color: var(--ink-3); }
.dl-ask-send {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--brand); color: #fff;
  transition: background var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease, opacity var(--dur-fast, .15s) ease;
}
.dl-ask-send svg { width: 19px; height: 19px; }
.dl-ask-send:hover { background: var(--brand-hover, var(--brand)); }
.dl-ask-send:active { transform: scale(.94); }
.dl-ask-send.stopping { background: var(--surface-3); color: var(--ink-1); }
.dl-ask-fine { max-width: var(--ask-max); margin: var(--s-2) auto 0; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) {
  .dl-ask-log { scroll-behavior: auto; }
  .dl-ask-dots i { animation: none; }
}

/* On the desktop rail layout the view already sits in the #stage grid column; widen the reading
   column a touch and give the log comfortable side gutters. */
@media (min-width: 900px) {
  .dl-ask { --ask-max: 760px; }
  .dl-ask-log { padding-inline: var(--s-5); }
}