/* 实时终端那一版（site/live.js）的皮。
 *
 * 外壳（.tl / .tl-bar / .tl-form / .tl-token / .tl-help / .tl-chip …）
 * 全部来自 terminal.css —— 那一份是**两版共用**的：它们是「一个终端长什么样」
 * 这件事，和底下跑的是队列还是常驻进程没关系。所以这个文件只写两类东西：
 *
 *   1. 队列那版没有的行（.lv-* 那些）：思考块、工具调用、工具结果、
 *      一轮小结、贴的图；
 *   2. 队列那版没有的几块面板：技能/MCP 抽屉、被占用的遮罩、待发图片条。
 *
 * 色值一律走 terminal.css 定在 .tl 上的 --tl-*，这里**不写任何字面量**。
 * 深浅两套跟着 .tl 走，所以这个文件里连一条 media/[data-theme] 都不需要 ——
 * 想要新颜色就去 terminal.css 里加一条变量，别在这儿另开一套。
 *
 * ── 行距是怎么定的 ──────────────────────────────────────────────
 * 一屏密密麻麻几十行，全靠**左边那一条竖线**（.lv-line::before）分层次：
 * 用户的输入、模型的回答、工具调用，缩进各不相同，扫一眼就知道这是谁说的。
 * 这是终端的读法，不是聊天软件的读法 —— 不做气泡、不做头像。
 */

/* ── 日志区 ──────────────────────────────────────────────────────── */

.lv-log {
  padding: 12px 16px 10px;
  /* 打字机每来一片字就动一次 DOM，整块重排会让滚动条抖。让浏览器
     把这一块单独提一层，抖动只发生在这一层里。 */
  contain: paint;
}

/* 一行。左边那条竖线是层级标记：它比缩进更省地方，而且能一直连下去 ——
   一段多行的回答看起来是一整块，而不是几行零散的字。 */
.lv-line {
  position: relative;
  padding: 1px 0 1px 14px;
}
.lv-line::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .35em;
  bottom: .35em;
  width: 2px;
  border-radius: 2px;
  background: transparent;
}
.lv-body { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere }

/* 行与行之间：只有**轮到下一轮**才拉开距离。同一轮里的思考/工具/正文
   挨在一起，读起来才是一件事。 */
.lv-user { margin-top: 12px }
.lv-user:first-child { margin-top: 0 }
.lv-turn { margin-top: 6px }
.lv-say + .lv-tool,
.lv-say + .lv-think { margin-top: 5px }

/* 左边那条线按「谁说的」上色 —— 这是整块里唯一的颜色编码，
   再多一种就会互相抢。 */
.lv-user::before { background: var(--tl-caret) }
.lv-say::before  { background: var(--tl-line) }
.lv-think::before{ background: var(--tl-line) }
.lv-tool::before { background: color-mix(in oklab, var(--tl-brand) 55%, transparent) }
.lv-res::before  { background: color-mix(in oklab, var(--tl-line) 70%, transparent) }

/* ── 各行的样子 ──────────────────────────────────────────────────── */

/* 用户说的那句。比正文重一档 —— 一屏里最先要能一眼找到的是「我问了什么」。 */
.lv-user { color: var(--tl-ink); font-weight: 500 }

/* 模型的回答。不折行是危险的：一行 base64 能把整块撑成横向滚动条
   （overflow-wrap 已经兜住了），但没有一处会横向滚动 —— 这是刻意的，
   终端里横向滚一次就找不回原来的位置了。 */
.lv-say { color: var(--tl-ink) }

/* 思考。压暗 + 斜一点，默认折起来 —— 它是过程，一屏里大半的篇幅都是它，
   全摊开就把答案埋了。 */
.lv-think { color: var(--tl-dim); font-style: italic }

/* 工具调用那一行。名字实心、参数压暗 —— 「它在用什么」比「用的什么参数」
   重要一档，而参数往往很长。 */
.lv-tool { color: var(--tl-dim) }
.lv-tname { color: var(--tl-ink-2) }
.lv-tbrief {
  margin-left: 8px;
  color: var(--tl-dim);
  overflow-wrap: anywhere;
}

/* 工具结果的折叠块 */
.lv-res { color: var(--tl-dim) }

/* 一轮收尾。比正文小一档、淡一档：它是脚注，不该和答案抢。 */
.lv-turn {
  font-size: 11.5px;
  color: var(--tl-dim);
  font-variant-numeric: tabular-nums;   /* 数字每轮都在变，不锁宽会左右抖 */
}
.lv-turn .lv-err { color: var(--tl-bad) }

/* 系统说的（会话开始/结束/被打断） */
.lv-sys { color: var(--tl-dim); font-size: 12px }
.lv-err { color: var(--tl-bad) }

/* 光标。打字机跑到哪儿了 —— 没有它，一段停了半秒的字看起来就是「卡住了」。
   画在 .lv-body 上（不是文字末尾）：patchLine 每次都换 innerHTML，
   画在文字里的话每来一片字就要重新算一次位置。 */
.lv-line.is-live .lv-body::after {
  content: "▌";
  margin-left: 1px;
  color: var(--tl-brand);
}
@media (prefers-reduced-motion: no-preference) {
  .lv-line.is-live .lv-body::after { animation: lvblink 1.1s steps(1, end) infinite }
  @keyframes lvblink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: .2 } }
}

/* ── 折叠块（思考 / 工具结果） ──────────────────────────────────── */

.lv-foldbar { margin: 1px 0 }
.lv-fold {
  font: inherit;
  font-size: 11.5px;
  color: var(--tl-dim);
  background: transparent;
  border: 0;
  border-radius: 5px;
  padding: 0 6px 0 0;
  cursor: pointer;
}
/* ▸ / ▾ 让「这里能点」这件事不用靠颜色说 —— 压暗过的字不显眼，
   靠颜色的话人根本注意不到它是个开关。 */
.lv-fold::before { content: "▸ "; color: var(--tl-brand) }
.lv-fold.is-open::before { content: "▾ " }
.lv-fold:hover { color: var(--tl-ink) }

.lv-folded {
  margin: 4px 0 6px;
  padding: 7px 10px;
  border-left: 2px solid var(--tl-line);
  background: var(--tl-raise);
  border-radius: 0 7px 7px 0;
  max-height: 22rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.lv-folded[hidden] { display: none }
.lv-folded pre {
  margin: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tl-ink-2);
}
.lv-think .lv-folded pre { font-style: italic; color: var(--tl-dim) }
/* 被截断的那句尾巴。说了「上面只是开头一段」比让人自己怀疑
   「是不是就这些」要好。 */
.lv-cut { margin-top: 6px; font-size: 11px; color: var(--tl-dim) }

/* ── 贴的图 ──────────────────────────────────────────────────────── */

.lv-shot {
  display: inline-block;
  margin: 4px 6px 0 0;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--tl-line);
}
.lv-shot img {
  display: block;
  max-height: 180px;
  max-width: min(100%, 22rem);
  object-fit: contain;
}
.lv-shot:hover { border-color: var(--tl-dim) }

/* ── 技能 / MCP 抽屉 ────────────────────────────────────────────── */

.lv-more {
  flex: none;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--tl-line);
  background: var(--tl-bg);
}
.lv-more[hidden] { display: none }

.lv-grp {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.lv-grp + .lv-grp { border-top: 1px solid color-mix(in oklab, var(--tl-line) 55%, transparent) }
/* 栏目名固定宽度：几组标签的左边要能对齐，不然「技能」和「内置工具」
   那两排起点不一样，读起来是散的。 */
.lv-gl {
  flex: none;
  width: 6.5rem;
  font-size: 11.5px;
  color: var(--tl-dim);
  letter-spacing: .03em;
}
.lv-gl b { margin-left: 5px; color: var(--tl-ink-2); font-weight: 500 }
.lv-gi { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px }

.lv-tag {
  font-size: 11.5px;
  line-height: 1.6;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--tl-line);
  color: var(--tl-ink-2);
  background: var(--tl-raise);
  overflow-wrap: anywhere;
}
.lv-tag.is-skill { color: var(--tl-caret); border-color: color-mix(in oklab, var(--tl-caret) 40%, transparent) }
.lv-tag.is-dim { color: var(--tl-dim); background: transparent }
/* 挂了但没连上的 MCP。**必须和连上的长得不一样** —— 这一格存在的全部意义
   就是回答「现在真的能调什么」，全一个颜色的话它就没回答了。 */
.lv-tag.is-bad { color: var(--tl-bad); border-color: color-mix(in oklab, var(--tl-bad) 45%, transparent) }

.lv-none { color: var(--tl-dim); font-size: 12px; display: block }
.lv-none b { color: var(--tl-ink-2) }

/* 顶栏那两个按钮 —— 和 .tl-x/.tl-helpbtn 同一套皮（terminal.css 里），
   这里只补一个「开着」的态。 */
.lv-tab[aria-expanded="true"] {
  color: var(--tl-caret);
  border-color: color-mix(in oklab, var(--tl-caret) 45%, transparent);
}
/* 退出。**比别的按钮显眼一档** —— 它是这一屏上唯一一个「会让别处
   立刻能用」的动作，也是唯一一个用户找不到就会以为「锁死了」的东西。
   但不能做成红的：它不是危险动作（会话本来就在自己名下）。 */
.lv-quit { color: var(--tl-caret) }
.lv-quit:hover { color: var(--tl-bg); background: var(--tl-caret); border-color: var(--tl-caret) }

/* ── 会话抽屉：开新的 / 接旧的 ──────────────────────────────────── */

.lv-sess {
  flex: none;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--tl-line);
  background: var(--tl-bg);
}
.lv-sess[hidden] { display: none }

/* 顶上那一条：开新会话 + 一句就地说明。**不做说明面板** —— 这句只在
   抽屉开着的时候出现，答的是「开新的会不会把旧的弄丢」，不是每次进来
   都挡在前面的介绍。 */
.lv-shead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in oklab, var(--tl-line) 55%, transparent);
}
.lv-snew {
  flex: none;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  padding: 2px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--tl-caret) 45%, transparent);
  background: transparent;
  color: var(--tl-caret);
  cursor: pointer;
}
.lv-snew:hover:not(:disabled) { background: var(--tl-caret); color: var(--tl-bg) }
.lv-snew:disabled { opacity: .45; cursor: default }
.lv-shint { font-size: 11.5px; color: var(--tl-dim) }

.lv-slist { display: flex; flex-direction: column; gap: 2px }
/* 一条一行的按钮不是「按钮」，是一行历史 —— 所以不留边框、不留底，
   只在左边用一条竖线标出「哪一段是现在」。 */
.lv-sone {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 6px 9px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--tl-ink);
  cursor: pointer;
}
.lv-sone:hover:not(:disabled) { background: var(--tl-raise) }
.lv-sone:disabled { opacity: .5; cursor: default }
/* 当前这一段要一眼认出来 —— 不然用户会去点它，然后等一个不会有的变化。 */
.lv-sone.is-cur { border-left-color: var(--tl-caret); background: var(--tl-raise) }
.lv-stitle { display: block; font-size: 13px; overflow-wrap: anywhere }
.lv-sone.is-cur .lv-stitle { color: var(--tl-ink-2) }
.lv-smeta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--tl-dim) }
.lv-smeta b { color: var(--tl-caret); font-weight: 500 }

/* ── 被别处占着 ──────────────────────────────────────────────────── */

/* 盖住日志和输入，但**不盖顶栏** —— 「退出」和「关闭」得还能点。
   盖住整屏的话人被锁在一张没有出口的图里，那是最糟的一种状态。 */
.lv-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in oklab, var(--tl-bg) 92%, transparent);
  backdrop-filter: blur(2px);
}
.lv-lock[hidden] { display: none }
.tl-bar { position: relative; z-index: 6 }

.lv-lockbox {
  max-width: 30rem;
  padding: 20px 22px;
  border: 1px solid var(--tl-line);
  border-radius: 12px;
  background: var(--tl-raise);
}
.lv-locktitle { font-size: 14px; color: var(--tl-ink); margin-bottom: 8px }
.lv-locktext { font-size: 12.5px; color: var(--tl-dim); line-height: 1.75 }
.lv-lockbtns { margin-top: 14px }
.lv-force {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--tl-bad) 45%, transparent);
  background: transparent;
  color: var(--tl-bad);
  cursor: pointer;
}
.lv-force:hover:not(:disabled) { color: var(--tl-bg); background: var(--tl-bad) }
.lv-force:disabled { opacity: .5; cursor: default }

/* ── 待发的图 ────────────────────────────────────────────────────── */

.lv-want { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.lv-want[hidden] { display: none }
.lv-wl { font-size: 11.5px; color: var(--tl-dim) }
.lv-wone { position: relative; display: inline-flex; align-items: center; gap: 6px }
.lv-wone img {
  height: 44px;
  width: auto;
  max-width: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--tl-line);
  display: block;
}
.lv-wone b { font-size: 11px; color: var(--tl-dim); font-weight: 400 }
.lv-wone button {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tl-dim);
  cursor: pointer;
}
.lv-wone button:hover { color: var(--tl-bad); border-color: color-mix(in oklab, var(--tl-bad) 45%, transparent) }

/* 待发的文件。和图片那块共用 .lv-wone，但**不能有 44px 那个高度约束**
   （那是给缩略图的），所以 is-file 这一支只给它自己的内边距和边框。
   名字长了截断 —— 一排待发栏是「确认发什么」的地方，不是文件浏览器，
   整个长路径把别的都挤出去反而看不清。 */
.lv-wone.is-file {
  padding: 4px 8px;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  max-width: 22rem;
}
.lv-fico { font-size: 12px; line-height: 1 }
.lv-fname {
  font-size: 12px;
  color: var(--tl-ink-2);
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 回复里的链接和附件 ──────────────────────────────────────────── */

/* 回复里那些地址（大多是它交付的下载链接）。下划线是必须的 ——
   这一屏是等宽字，光靠颜色区分「能点」太弱了，而用户要找的
   正是「哪一段是那个链接」。 */
.lv-a {
  color: var(--tl-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.lv-a:hover { color: var(--tl-ink) }

/* 用户行里那个附件标记（发出去之后，从服务端回来那份）。 */
.lv-attach {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 6px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--tl-line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--tl-ink-2);
}
.lv-attach b { font-size: 11px; color: var(--tl-dim); font-weight: 400 }

/* ── 「停下」 ────────────────────────────────────────────────────── */

/* 只在真的在跑的时候出现（见 live.js 的 renderFoot）。它是这一屏上
   唯一一个会让**正在发生的事**停止的按钮，所以给了和发送键同一档的
   分量，但用品牌色 —— 它是个正常操作，不是危险操作。 */
.lv-stop {
  flex: none;
  font: inherit;
  font-size: 12.5px;
  border-radius: 8px;
  padding: 5px 13px;
  cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--tl-brand) 50%, transparent);
  background: transparent;
  color: var(--tl-caret);
}
.lv-stop:hover:not(:disabled) { color: var(--tl-bg); background: var(--tl-brand) }
.lv-stop:disabled { opacity: .45; cursor: default }
.lv-stop[hidden] { display: none }

/* ── 拖进来一张图 ────────────────────────────────────────────────── */

/* 整屏套一个虚线内框。**必须足够明显** —— 拖拽最难过的关是
   「松手之后什么都没发生」，那会让人以为功能坏了。 */
.lv.is-drop::after {
  content: "松手就把图贴进这一句";
  position: absolute;
  inset: 8px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--tl-brand);
  border-radius: 12px;
  background: color-mix(in oklab, var(--tl-bg) 78%, transparent);
  color: var(--tl-caret);
  font-size: 13px;
  pointer-events: none;
}

/* ── 窄屏 ────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .lv-log { padding: 10px 12px 8px }
  /* 竖线在窄屏上更值钱（横向空间本来就少），所以留着，只把缩进收紧。 */
  .lv-line { padding-left: 11px }
  .lv-folded { max-height: 16rem }
  /* 栏目名那一列在窄屏上占掉四分之一屏宽，不如让标签自己换行。 */
  .lv-grp { display: block }
  .lv-gl { width: auto; display: block; margin-bottom: 4px }
  .lv-lockbox { padding: 16px }
  .lv-shot img { max-height: 140px }
}