/* 活动助手（agent）页的样式。只有这一页用得上，不往 shell.css 里塞
   （同文档路由按 `link.media` 开关页面专属样式，见 router.js 开头）。

   结构：标题行（头像 + 名字 + 在线状态）→ 对话 → 贴底的输入框。 */

/* **`overflow:clip` 代替 `.page` 的 `hidden`。** `.page` 裁掉外扩的漂移背景用的是
   `overflow:hidden`，而 hidden 会让 `.page` 变成一个滚动容器——里面的
   `position:sticky` 就只在 `.page` 里「贴」，不再贴着屏幕，输入框跟着内容一起滚走了。
   `clip` 裁得一样干净，但不是滚动容器。不认 `clip` 的老浏览器（Safari 15 及以前）
   退回上面那条 hidden：输入框不贴底，照样能用。 */
.ag-page{ overflow:clip; display:flex; flex-direction:column; }
/* 藏起来留排版时（shell.css「同文档路由：藏起来的页留住排版」）display 也得是 flex，和露出来时一样 */
main.ag-page[data-keep][hidden]{ display:flex; }
.page > .ag-wrap{ position:relative; z-index:1; }

.ag-wrap{
  flex:1 1 auto; width:100%; max-width:780px; margin:0 auto;
  padding:22px 20px 0;
  display:flex; flex-direction:column; gap:18px;
}

/* ── 标题行 ─────────────────────────────────────────────── */
.ag-head{ display:flex; align-items:center; gap:14px; }
/* 头像和首页悬浮球是同一个构件（shell.css 的 `.otaku-disc`），这里只是不固定定位 */
.ag-head .otaku-disc{ flex:0 0 auto; }
.ag-title{ flex:1 1 auto; min-width:0; }
.ag-h1{ margin:0; font-size:22px; font-weight:900; color:var(--ink); letter-spacing:.02em; }
.ag-state{
  display:flex; align-items:center; gap:7px; margin:3px 0 0;
  font-size:12.5px; color:var(--ink-3);
}
.ag-state i{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--line-strong);
}
.ag-state[data-s="online"] i{ background:#3cb371; box-shadow:0 0 0 3px rgba(60,179,113,.18); }
.ag-state[data-s="offline"] i, .ag-state[data-s="closed"] i{ background:#c9bdb0; }
.ag-state[data-s="checking"] i{ animation:ag-pulse 1.2s ease-in-out infinite; }
@keyframes ag-pulse{ 50%{ opacity:.3; } }
.ag-clear{
  flex:0 0 auto; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-2); border-radius:9px; padding:6px 11px; font:inherit; font-size:12.5px;
  cursor:pointer; transition:border-color .15s, color .15s;
}
.ag-clear:hover{ border-color:var(--ink-3); color:var(--ink); }
.ag-clear[hidden]{ display:none; }

/* ── 空着的时候：一句说明 + 几个例句 ─────────────────────── */
.ag-intro{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:14px;
  padding:16px 18px; font-size:14px; line-height:1.8; color:var(--ink-2);
}
.ag-intro p{ margin:0; }
.ag-eg{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ag-eg button{
  border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-2);
  border-radius:999px; padding:6px 12px; font:inherit; font-size:13px; line-height:1.4;
  cursor:pointer; text-align:left; transition:border-color .15s, color .15s, background .15s;
}
.ag-eg button:hover:not(:disabled){ border-color:var(--brand); color:var(--brand-text); background:var(--brand-soft); }
.ag-eg button:disabled{ opacity:.55; cursor:default; }

/* ── 对话 ──────────────────────────────────────────────── */
.ag-log{ flex:1 1 auto; display:flex; flex-direction:column; gap:14px; }
.ag-msg{ display:flex; align-items:flex-start; gap:10px; }
.ag-u{ justify-content:flex-end; }
.ag-bub{
  max-width:min(600px, 84%); padding:10px 14px; border-radius:14px;
  font-size:14.5px; line-height:1.8; color:var(--ink); overflow-wrap:anywhere;
}
.ag-u .ag-bub{
  background:var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-top-right-radius:4px; white-space:pre-wrap;
}
.ag-a .ag-bub{
  background:var(--surface); border:1px solid var(--line-strong);
  border-top-left-radius:4px; box-shadow:0 8px 22px -18px rgba(60,40,20,.5);
}
.ag-bub p{ margin:0 0 .55em; }
.ag-bub p:last-child{ margin-bottom:0; }
/* 回答里的出处编号 [1][2]：点得到，但不抢字 */
.ag-ref{ font-size:.72em; line-height:0; vertical-align:super; }
.ag-ref a{
  color:var(--brand-text); text-decoration:none; font-weight:700; padding:0 .12em;
}
.ag-ref a:hover{ text-decoration:underline; }
/* 小头像：圆里只露头，不出框——一句一句的回答旁边，出框的那一撮太吵 */
.ag-av{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; overflow:hidden;
  position:relative; background:linear-gradient(160deg, #ffd9a3, #ffb547);
  box-shadow:0 0 0 2px var(--surface);
}
.ag-av img{ position:absolute; left:-13px; top:-1px; width:52px; height:auto; max-width:none; }

.ag-wait{ margin:0; color:var(--ink-3); }
.ag-wait::after{
  content:''; display:inline-block; width:1.4em; text-align:left;
  animation:ag-dots 1.2s steps(4) infinite;
}
@keyframes ag-dots{
  0%{ content:''; } 25%{ content:'.'; } 50%{ content:'..'; } 75%{ content:'...'; }
}
/* 正在写的那一段末尾跟一个光标 */
.ag-caret{
  display:inline-block; width:.45em; height:1em; margin-left:.1em;
  background:currentColor; opacity:.55; vertical-align:-.15em;
  animation:ag-blink 1s steps(1) infinite;
}
@keyframes ag-blink{ 50%{ opacity:0; } }
.ag-err{ margin:.4em 0 0; color:var(--coral); font-size:13px; }
.ag-stopped{ margin:.4em 0 0; color:var(--ink-3); font-size:12.5px; }
.ag-src{ margin:10px 0 0; padding:9px 0 0; border-top:1px dashed var(--line-strong); }
.ag-src b{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.08em; }
.ag-src ol{ margin:4px 0 0; padding-left:1.4em; font-size:12.5px; line-height:1.7; color:var(--ink-3); }
.ag-src a{ color:var(--ink-2); text-decoration:none; }
.ag-src a:hover{ color:var(--brand-text); text-decoration:underline; }
.ag-src time{ margin-left:.5em; font-variant-numeric:tabular-nums; }

/* ── 贴底的输入框 ─────────────────────────────────────────
   贴底靠 sticky（见文件开头为什么 `.ag-page` 要改成 clip）。
   底下留出安全区：iOS 的横条、横屏的圆角都不该压在输入框上。 */
.ag-dock{
  position:sticky; bottom:0; z-index:2;
  margin:0 -20px; padding:10px 20px calc(14px + var(--safe-b));
  background:linear-gradient(to top, var(--paper) 72%, color-mix(in srgb, var(--paper) 0%, transparent));
}
.ag-form{
  display:flex; align-items:flex-end; gap:8px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:16px;
  padding:7px 7px 7px 14px; box-shadow:0 12px 30px -20px rgba(60,40,20,.55);
  transition:border-color .15s;
}
.ag-form:focus-within{ border-color:color-mix(in srgb, var(--brand) 55%, var(--line-strong)); }
.ag-form textarea{
  flex:1 1 auto; min-width:0; border:0; outline:0; resize:none; background:transparent;
  font:inherit; font-size:15px; line-height:1.6; color:var(--ink);
  padding:6px 0; max-height:9.6em; overflow-y:auto;
}
.ag-form textarea::placeholder{ color:var(--ink-3); }
.ag-form textarea:disabled{ cursor:not-allowed; }
.ag-count{ align-self:center; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ag-count[data-over]{ color:var(--coral); }
.ag-send, .ag-stop{
  flex:0 0 auto; height:38px; min-width:38px; padding:0 14px; border-radius:11px;
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .15s, opacity .15s;
}
.ag-send{ border:0; background:var(--brand); color:#fff; }
.ag-send:hover:not(:disabled){ background:#e08a00; }
.ag-send:disabled{ opacity:.45; cursor:default; }
.ag-stop{ border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-2); }
.ag-stop:hover{ border-color:var(--ink-3); color:var(--ink); }
.ag-stop[hidden], .ag-send[hidden]{ display:none; }

/* 没登录：输入框换成一句话 + 登录键 */
.ag-gate{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:16px;
  padding:12px 12px 12px 16px; font-size:14px; color:var(--ink-2);
}
.ag-gate button{
  border:0; background:var(--brand); color:#fff; border-radius:10px;
  padding:8px 16px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.ag-note{ margin:8px 2px 0; font-size:11.5px; line-height:1.6; color:var(--ink-3); }

/* ── 手机 ─────────────────────────────────────────────── */
@media (max-width: 640px){
  .ag-wrap{ padding:16px 14px 0; gap:14px; }
  .ag-dock{ margin:0 -14px; padding-left:14px; padding-right:14px; }
  .ag-h1{ font-size:20px; }
  .ag-bub{ max-width:88%; font-size:14px; }
  .ag-av{ width:28px; height:28px; }
  .ag-av img{ left:-11.5px; width:46px; }
}

/* ── 横展（手机横屏）：标题让开左上角的汉堡 ─────────────── */
:root[data-land] .ag-head{ padding-left:calc(var(--land-fab, 48px) + 8px); }

@media (prefers-reduced-motion:reduce){
  .ag-state[data-s="checking"] i, .ag-wait::after, .ag-caret{ animation:none; }
}