/* Unitick · 你和助手的对话（chat.js）：首页那一栏、收件箱阅读区里的「你和小优」。归 M4 触达。样子照 docs/mockups/dashboard-v2.html。
   变量沿用 app.css、shell.css。类名都带前缀：chat-（外框、输入框）、msg-（一句话、系统消息卡片）、ch-（结果卡片）。
   首页这一栏摆在哪由首页定（见 app/web/docs/chat.md）：这里管它自己的样子、窄于 1360px 时的收起和滑出。 */

/* ---------------------------------------------------------------- 首页这一栏：顶上头像、名字、状态；中间对话；底下输入框 */
.chat { --side: var(--chat-bg); display: flex; flex-direction: column; min-height: 0; background: var(--chat-bg); }
.chat-h { flex: none; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); }
.chat-h > [data-sec] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-h .av::after { box-shadow: 0 0 0 2px var(--panel); }
.chat-who { min-width: 0; }
.chat-who b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.chat-who small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.chat-h button.chat-x { display: none; }   /* 收起：只在滑出来的样子里有 */
/* 从待办页点「新建待办」过来（宽屏）：这一栏的边亮一下，告诉学生在这里说 */
.chat.is-ping { animation: chat-ping 1.2s var(--ease-out); }
@keyframes chat-ping { 0%, 40% { box-shadow: inset 0 0 0 2px var(--ink); } }

/* 首页顶上那一条「让小优办件事…」：宽屏藏起来，窄了才有；她在想、在办慢事时写着进度 */
button.chat-composer { display: none; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px 6px 14px; border: 1px solid var(--line-2);
  border-radius: 14px; background: var(--panel); color: var(--faint); font-size: 14px; font-weight: 400; line-height: 20px; text-align: left;
  transition: border-color .2s, box-shadow .2s; }
button.chat-composer:hover { border-color: #c7c7cc; background: var(--panel); box-shadow: var(--shadow-1); }
button.chat-composer:active { background: var(--panel); }
.chat-composer > .ic { width: 18px; height: 18px; }
.chat-composer-x { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-composer-t, .chat-composer-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-p { font-size: 12px; line-height: 17px; }   /* 在想的时候慢事也在办：进度在下一行 */
.chat-composer.chat-composer-busy { color: var(--tint); }
.chat-composer-s { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--soft-2); color: var(--muted); }
.chat-composer-s svg { width: 15px; height: 15px; }

/* 窄于 1360px：这一栏收起，点开从右边滑出，后面一层遮罩；手机从底部升起 */
.chat-scrim { display: none; }
@media (max-width: 1359.98px) {
  .chat { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(400px, 100%); border-left: 1px solid var(--line); box-shadow: var(--shadow-3);
    transform: translateX(104%); visibility: hidden; transition: transform .48s var(--ease-out), visibility 0s linear .48s; }
  .chat.is-open { transform: none; visibility: visible; transition: transform .48s var(--ease-out); }
  .chat-h button.chat-x { display: grid; margin-left: auto; }
  button.chat-composer { display: flex; }
  .chat-scrim { display: block; position: fixed; inset: 0; z-index: 54; background: var(--scrim-strong); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .chat-scrim.is-open { opacity: 1; pointer-events: auto; }
  html.chat-lock, html.chat-lock body { overflow: hidden; }
}
@media (max-width: 759.98px) {
  .chat { top: auto; left: 0; width: auto; height: 86%; height: 86dvh; border-left: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(104%); transition-timing-function: var(--ease-sheet); }
  .chat.is-open { transition-timing-function: var(--ease-sheet); }
  .chat .chat-in { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1359.98px) {   /* 不滑，原地淡入 */
  .chat, .chat.is-open { transform: none; }
  .chat { opacity: 0; transition: opacity .2s, visibility 0s linear .2s; }
  .chat.is-open { opacity: 1; transition: opacity .2s; }
}

/* 首页照样式稿改版后的摆法（样式稿的 .home-wrap）：页登记成 bare，外面套 .chat-host，里面先是 .chat-host-main（放 .page），
   再是 chatPanel() 的 panel 和 scrim。1360px 以上这一栏贴着右边、整屏高、粘在屏幕里；以下自己收起（见上一节） */
.chat-host { display: flex; align-items: flex-start; min-width: 0; }
.chat-host > .chat-host-main { flex: 1; min-width: 0; background: var(--main-bg); }
/* 2026-10-18 Cris：这一栏加宽（1360 宽 420、1440 宽 440、1600 以上 480），能收起成右边缘一个「对话」小按钮（chat.js 的 is-folded，记在这台设备上）。
   收起、展开是宽度的过渡，里面的内容按展开时的宽度排好、被裁掉，不跟着挤；系统设了减少动态效果直接切换 */
.chat-h button.chat-fold, button.chat-tab, .chat > .u-rsz { display: none; }
@media (min-width: 1360px) {
  .chat-host { --chatw: var(--chatw-user, clamp(440px, calc(25vw + 120px), 520px)); }   /* 默认：1360 宽 460、1440 宽 480、1600 以上 520（2026-10-18 晚 Cris：再大一点） */   /* --chatw-user：拖过的宽度（chat.js） */
  .chat-host > .chat { position: sticky; top: 0; flex: none; width: var(--chatw); height: 100vh; height: 100dvh; border-left: 1px solid var(--line);
    overflow: hidden; transition: width .3s var(--ease-out), border-color .3s; }
  .chat-host > .chat > :not(.chat-tab):not(.u-rsz) { min-width: var(--chatw); box-sizing: border-box; }
  .chat-host > .chat.is-folded > .u-rsz { display: none; }
  .chat-h button.chat-fold { display: grid; margin-left: auto; }
  .chat-host > .chat > .u-rsz { display: block; }
  /* 对话淡青底，不描边、不投影；顶上一行、输入框不画分隔线；普通气泡、结果卡片保持白底 */
  .chat-host > .chat { --soft: #ebebef; --soft-2: #e2e2e7; background: var(--side); border-left-color: transparent; }
  .chat-host > .chat .chat-h { height: 78px; padding-top: 16px; border-bottom-color: transparent; }   /* 头像和左边一栏的头像、中间的问好在同一高度 */
  .chat-host > .chat .chat-h .av::after { box-shadow: 0 0 0 2px var(--side); }
  .chat-host > .chat .chat-in { padding-block: 8px; border-top-color: transparent; background: none; }   /* 输入框和左下角收起按钮在同一高度 */
  .chat-host > .chat .chat-box { background: var(--panel); }
  .chat-host > .chat .msg.ta { background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
  .chat-host > .chat .msg-sys, .chat-host > .chat .ch-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
  .chat-host > .chat button.chat-ex-b { border-color: var(--line); background: var(--panel); }
  .chat-host > .chat button.chat-ex-b:hover { border-color: var(--line-2); background: var(--panel); }
  .chat-host > .chat.is-folded { border-left-color: transparent; }
  .chat-host > .chat.is-folded { width: 0; border-left-color: transparent; }
  .chat-host > .chat.is-folded > :not(.chat-tab):not(.u-rsz) { visibility: hidden; transition: visibility 0s linear .3s; }
  .chat.is-folded button.chat-tab { display: flex; }
  /* 收起后的入口：右边缘中间竖着的一条「与小优对话」（2026-10-18 晚 Cris：位置照原来，只是放大；右下角的胶囊不要）。
     宽 52、字 15、图标 22，浅灰底细边、带一点阴影，有新消息时左上角红点 */
  button.chat-tab { position: fixed; right: 0; top: 50%; z-index: 30; flex-direction: column; align-items: center; gap: 10px; width: 52px; padding: 18px 0;
    border: 1px solid var(--line-2); border-right: 0; border-radius: 16px 0 0 16px; background: var(--panel); color: var(--ink);
    box-shadow: -4px 0 16px -4px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06); font-size: 15px; font-weight: 600; line-height: 1.2;
    transform: translateY(-50%); animation: chat-tab-in .3s var(--ease-out); transition: background-color .2s, width .2s var(--ease-out); }
  button.chat-tab > span { writing-mode: vertical-rl; letter-spacing: .12em; }
  button.chat-tab:hover { width: 56px; background: var(--soft); }
  button.chat-tab .ic { width: 22px; height: 22px; color: var(--tint); }
  .chat-tab-dot { position: absolute; top: 8px; left: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
  .chat-tab-dot[hidden] { display: none; }
}
@keyframes chat-tab-in { from { opacity: 0; transform: translate(12px, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .chat-host > .chat, .chat-host > .chat.is-folded > :not(.chat-tab) { transition: none; }
  button.chat-tab { animation: none; }
}

/* ---------------------------------------------------------------- 收件箱阅读区里的「你和小优」：标题、按渠道只看一类、对话、输入框 */
.chat-th { display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; background: var(--panel); }
.chat-th-h { flex: none; display: grid; gap: 10px; padding: 20px 28px 14px; border-bottom: 1px solid var(--line); }
.chat-th-h h2 { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.4; }
.chat-th-ch { display: flex; flex-wrap: wrap; gap: 6px; }
button.chat-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1;
  transition: background-color .15s, color .15s, border-color .15s; }
button.chat-chip:hover { border-color: var(--line-2); background: var(--panel); color: var(--ink); }
button.chat-chip.on { border-color: transparent; background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.chat-chip .chat-dot { width: 7px; height: 7px; }
.chat-th .chat-b { padding: 18px 28px; }
@media (max-width: 759.98px) {
  .chat-th-h { padding: 12px 16px; }
  .chat-th .chat-b { padding: 14px 16px; }
}

/* ---------------------------------------------------------------- 对话：按天分开，他的话靠右（近黑），她的话靠左（浅灰），每句下面一行小字：哪儿说的、几点 */
.chat-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 16px; }
.chat-b > [data-sec] { display: flex; flex-direction: column; gap: 10px; }
.chat-day { align-self: center; padding-top: 4px; color: var(--faint); font-size: 11.5px; }
.chat-day:first-child { padding-top: 0; }
.msg-w { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.msg-w.me { align-self: flex-end; align-items: flex-end; transform-origin: 100% 100%; }
.msg-w.ta { align-self: flex-start; align-items: flex-start; transform-origin: 0 100%; }
.msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { background: var(--ink); color: var(--on-dark); border-bottom-right-radius: 6px; }
.msg.ta { background: var(--soft); color: var(--text); border-bottom-left-radius: 6px; }
.msg.is-thinking { flex-direction: row; align-items: center; gap: 10px; color: var(--muted); }
.msg-paste { display: block; padding: 6px 9px; border-radius: 8px; background: var(--on-dark-2); font-size: 12px; line-height: 1.5; white-space: normal; }
.msg-paste-l { display: block; opacity: .7; }
.msg-paste-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.msg-img { max-width: 180px; max-height: 180px; border-radius: 8px; object-fit: cover; }
.msg-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 11px; font-weight: 400; line-height: 1.4;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-meta.is-warn { color: var(--red); }   /* 助手动态：她在微信的回复没发出去 */
/* 助手动态（pages/inbox.js）阅读区里一件事的经过（eventThread）：不自己滚，跟着阅读区滚；小字可以折行（后面跟着改发到哪的说明） */
.chat-b.chat-ev { flex: none; overflow: visible; padding: 4px 0; }
.chat-ev > div { display: flex; flex-direction: column; gap: 10px; }
.chat-ev .msg-meta { white-space: normal; }
/* 渠道的小圆点：微信绿、网页蓝、邮件橙；别的渠道（滴答、本机通知）灰 */
.chat-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.chat-dot.is-wx { background: var(--green); }
.chat-dot.is-web { background: var(--tint); }
.chat-dot.is-mail { background: var(--orange); }

/* 提醒、每日摘要、早报：系统消息卡片，占满一行。关于某件事的能点开那件事 */
.msg-sys { align-self: stretch; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--summary-line); border-radius: 12px; background: var(--summary-bg);
  font-size: 13.5px; font-weight: 400; line-height: 1.6; text-align: left; }
button.msg-sys { width: 100%; color: inherit; transition: box-shadow .2s, border-color .2s; }
button.msg-sys:hover { border-color: var(--summary-line); background: var(--summary-bg); box-shadow: var(--shadow); }
button.msg-sys:active { background: var(--summary-bg); }
.msg-sys-h { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; }
.msg-sys-h .ic { width: 14px; height: 14px; }
.msg-sys-h .msg-meta { margin-left: auto; }
.msg-sys-t { display: block; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-sys small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-sys small.msg-sys-more { color: var(--faint); }   /* 后来又补发到哪个渠道 */

/* 新来的一句：从说话那一侧的角上弹出来（chat.js 只给第一次出现的加 is-new，刷新时不重放） */
.msg-w.is-new, .msg-sys.is-new, .chat-acts > .is-new { animation: msg-in var(--dur-4) var(--ease-spring) backwards; }
@keyframes msg-in { from { opacity: 0; transform: translateY(calc(var(--rise) * .5)) scale(calc(var(--pop) - .04)); } }

/* 在想：三个跳动的点 */
.dots { display: inline-flex; flex: none; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }

/* 还没在网页上说过话：三个点一下就能发的例子；按渠道只看一类、那一类没有的时候 */
.chat-empty { padding: 12px 2px; color: var(--muted); }
.chat-ex { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button.chat-ex-b { padding: 6px 12px; border: 1px solid var(--soft); border-radius: 999px; background: var(--soft); color: var(--text); font-size: 13px;
  font-weight: 400; text-align: left; animation: u-rise var(--dur-4) var(--ease-out) backwards; }
button.chat-ex-b:hover { border-color: var(--soft-2); background: var(--soft-2); }
.chat-ex-b:nth-child(2) { animation-delay: 50ms; } .chat-ex-b:nth-child(3) { animation-delay: 100ms; }
.chat-none { margin: 0; padding: 40px 12px; color: var(--muted); font-size: 13.5px; text-align: center; }

/* ---------------------------------------------------------------- 她办成的事：结果卡片、步骤条，在那一句的回复下面 */
.chat-acts { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 92%; }
.chat-acts > * { max-width: 100%; }
.chat-acts > .prog { align-self: stretch; padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.ch-card { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow-1); font-size: 13px; transition: opacity .3s ease; }
.ch-ic { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--soft-2); color: var(--muted); }
.ch-ic svg { width: 13px; height: 13px; stroke-width: 2; }
.ch-alarm .ch-ic, .ch-dida .ch-ic { background: var(--t-chg-bg); color: var(--orange); }
.ch-cal .ch-ic { background: rgba(122, 76, 194, .12); color: #7a4cc2; }   /* 和日历上「我记的」同一个紫色 */
.ch-item .ch-ic, .ch-sync .ch-ic, .ch-course .ch-ic { background: var(--green-soft); color: var(--green); }
.ch-todo .ch-ic { background: var(--t-mine-bg); color: var(--t-mine); }
.ch-link .ch-ic, .ch-mail .ch-ic { background: var(--tint-soft); color: var(--tint); }
.ch-card-b { min-width: 0; }
.ch-card-h { display: flex; align-items: center; gap: 6px; min-height: 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.ch-card-h b { font-weight: 600; }
.ch-card-t { color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ch-card-s { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.ch-card-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-card.is-undone { opacity: .6; }
.ch-card.is-undone .ch-card-t { text-decoration: line-through; }
.ch-q { margin-top: 6px; color: var(--ink); }

/* ---------------------------------------------------------------- 输入框：左边「＋」（截图、贴一段文字），右边发送；贴进来的内容、截图在框上面 */
.chat-in { position: relative; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line);
  background: var(--panel); }
.chat-in > :empty { display: none; }
.chat-box { position: relative; display: flex; align-items: flex-end; gap: 6px; padding: 6px; border: 1px solid var(--line-2); border-radius: 14px;
  transition: border-color .2s, box-shadow .2s; }
.chat-box:focus-within { border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-soft); }
.chat-box textarea.chat-ta { flex: 1; display: block; width: auto; min-width: 0; min-height: 22px; max-height: 120px; margin: 0; padding: 5px 0; border: 0; outline: 0;
  border-radius: 0; resize: none; background: none; box-shadow: none; font: inherit; font-size: 14px; line-height: 22px; color: var(--ink); }
.chat-box textarea.chat-ta::placeholder { color: var(--faint); }
.chat-box textarea.chat-ta:disabled { background: none; }
@media (max-width: 640px) { .chat-box textarea.chat-ta { font-size: 16px; } }   /* 手机上不小于 16px，不然 iPhone 一点就放大页面 */
button.chat-plus, button.chat-send { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; }
button.chat-plus { background: none; color: var(--muted); }
button.chat-plus:hover:not(:disabled) { background: var(--soft-2); color: var(--ink); }
button.chat-plus[aria-expanded="true"] { background: var(--soft-2); color: var(--ink); }
button.chat-send { background: var(--ink); color: var(--on-dark); }
button.chat-send:hover:not(:disabled) { background: var(--accent-hover); }
.chat-plus svg, .chat-send svg { width: 16px; height: 16px; }
.chat-menu { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; display: flex; flex-direction: column; padding: 6px; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transform-origin: 16px 100%; animation: u-pop var(--dur-3) var(--ease-spring); }
.chat-menu button { padding: 7px 12px; border: 0; border-radius: var(--radius-xs); background: none; font-size: 13.5px; font-weight: 400; text-align: left; white-space: nowrap; }
.chat-menu button:hover { background: var(--soft-2); }
.chat-menu button:active:not(:disabled) { transform: none; }
.chat-paste:not([hidden]), .chat-atts > .chat-att { animation: u-rise var(--dur-3) var(--ease-out) backwards; }
textarea.chat-pastebox { min-height: 80px; }
.chat-paste .row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.chat-atts { display: flex; flex-direction: column; gap: 6px; }
.chat-att { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--soft); font-size: 12px; }
.chat-att-l { flex: none; color: var(--ink); font-weight: 600; }
.chat-att-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.chat-att-img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; }
button.chat-att-x { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); }
button.chat-att-x:hover:not(:disabled) { background: var(--soft-2); color: var(--ink); }
.chat-att-x .ic { width: 14px; height: 14px; }
.chat-off { margin: 0; font-size: 13px; color: var(--red); }

/* 拟稿正文直接显示网站保存的纯文本，保留换行与长地址。 */
.ch-mail-body { color: var(--ink); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }