/* ============================================================
 * Longlight - 长光雨滴小站 | 页面样式：index / 终端
 * pages/index/terminal.css
 * 区块：终端外壳与头部、输出行与语法着色、帮助表格与 whoami 头像、输入行与提示符
 * 说明：不在本文件重复定义 :root / [data-theme]，颜色一律引用 tokens.css 令牌
 * ============================================================ */

/* ========== 终端 ========== */
#terminal {
  height: 100vh;
  height: 100dvh;   /* 移动端动态视口：随地址栏收放实时变化，避免终端高于可视区把输出/输入行挤出屏幕 */
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-page-mobile);
  height: 48px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.terminal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--text-caption);      /* 12/18 500 */
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.terminal-title img {
  width: 18px;
  height: 18px;
  /* 终端头部 logo：index.html 引用 assets/media/image/icon/android-chrome-192x192.png */
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: var(--space-icon-text);
  font: var(--text-caption);      /* 12/18 500 */
  color: var(--text-secondary);
}

/* 注：.status-dot 及终端角色态（.role-user/.role-vip/.role-admin/.role-banned/.role-deleted）
   已统一至 components/feedback.css（色彩令牌见 tokens.css 的 --role-* 系列） */

.terminal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-card);
  scroll-behavior: smooth;
}

/* 注：滚动条已统一由 base.css 的通用滚动条样式接管，本页不再私有声明 */

/* 终端输出文本常驻可选中（类 PowerShell 终端）：选择行为完全交给浏览器默认实现，
   输入框的重新聚焦由共享模块 shared/inputAutoFocus.js 在键盘输入时负责 */
.terminal-body,
.terminal-body * {
  -webkit-user-select: text;
  user-select: text;
}

/* 输出行（<pre>：终端语义，保留空格/换行） */
.output-line {
  margin-bottom: 2px;
  font-family: var(--font-mono); /* 覆盖 pre 的 UA 默认等宽字体，沿用项目字体 */
  white-space: pre-wrap;
  word-break: break-all;
  animation: lineIn var(--duration-enter) var(--ease-out);
}

@keyframes lineIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.output-line.cmd-echo { color: var(--green-secondary); }
.output-line.cmd-echo .prompt-echo { color: var(--green-primary); font-weight: 600; }
.output-line.success { color: var(--success); }
.output-line.error   { color: var(--error); }
.output-line.warn    { color: var(--amber); }
.output-line.info    { color: var(--warm-orange); }
.output-line.muted   { color: var(--text-secondary); }
.output-line .highlight { color: var(--green-primary); font-weight: 600; }
.output-line .accent    { color: var(--warm-orange); }
.output-line a {
  color: var(--green-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--green-secondary);
  opacity: 0.9;
  transition: opacity var(--duration-hover) var(--ease-out);
}
.output-line a:hover { opacity: 1; }

/* README 大字与持久内容 */
.output-line.readme-art {
  white-space: pre;      /* 覆盖 .output-line 的 pre-wrap + break-all：字符画绝不中途断行/折行 */
  word-break: normal;
  line-height: 14px;   /* 字符画需贴紧：13px 单倍取整（风格.字阶.解释要求行高带 px） */
  color: var(--tok-symbol);
  opacity: 0.85;
  margin-bottom: 6px;
  max-width: 100%;
  /* 超宽的字符画行在其自身内部横向滚动：块级 pre 宽度仍被约束在终端内，
     不把整页撑宽（此前 overflow 可见会把文本推出终端，触发文档级横向滚动） */
  overflow-x: auto;
  overflow-y: hidden;  /* 字符画 pre 只横滚不竖滚，杜绝竖向滚动条 */
}

/* —— 终端语法着色令牌工具类 —— */
.tok-symbol  { color: var(--tok-symbol); }
.tok-keyword { color: var(--tok-keyword); font-weight: 600; }
.tok-value   { color: var(--tok-value); }
.tok-number  { color: var(--tok-number); }
.tok-text    { color: var(--tok-text); }
.tok-sub1    { color: var(--tok-sub1); }
.tok-sub2    { color: var(--tok-sub2); }
.tok-sub3    { color: var(--tok-sub3); }

/* 帮助表格 */
.help-table {
  margin: 8px 0;
  border-collapse: collapse;
}
.help-table td {
  padding: 2px var(--space-grid) 2px 0;
  vertical-align: top;
}
.help-table td:first-child {
  color: var(--green-primary);
  font-weight: 500;
  white-space: nowrap;
}
.help-table td:last-child { color: var(--text-secondary); }

/* help 命令的双列表（命令 | 描述）：命令列与描述列等宽，且整体限宽，
   避免大尺寸屏幕下描述行过长、横跨全屏；字体等宽，用 ch 随字号自适应 */
.help-table--even {
  table-layout: fixed;
  width: 100%;
  max-width: 76ch;
}
.help-table--even td { width: 50%; }
.help-table--even td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* whoami 头像：单元格内渲染为图片（点击由图片查看器放大预览） */
.help-table .whoami-avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: var(--border-default);
  object-fit: cover;
}

/* photo 命令：终端内呈现的图片（点击由全局图片查看器全屏放大预览） */
.photo-image {
  display: block;
  margin: 8px 0;
  width: 160px;
  max-width: min(240px, 60vw);
  height: auto;
  border-radius: var(--radius-card);
  border: var(--border-default);
  object-fit: contain;
  cursor: zoom-in;
}

/* write <编号> / vim 读取：记录内的媒体版式见公共控件 assets/css/components/media.css
   （组件由 shared/mediaView.js 生成，三处共用：CUI vim 预览、CUI write 输出、GUI 随心记） */

/* ========== 输入行 ========== */
/* 输入区内容自适应：提示符宽度超过输入区 40% 时切换为两行布局
   （IP 较长 / 窄屏场景），由 JS 检测后添加 .wrap */
.input-line.wrap {
  flex-wrap: wrap;
  row-gap: 6px;
}

.input-line.wrap .prompt {
  flex-basis: 100%;
}

.input-line {
  display: flex;
  align-items: center;
  padding: var(--space-input) var(--space-page-mobile);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.prompt {
  color: var(--green-primary);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 提示符用户名按角色着色：字色由 .role-*（base.css）提供，此处不覆盖 */

/* 提示符 $：独立于输入框的元素，与 :~ 同款样式；单行时紧贴 :~，换行时独占第二行行首 */
.prompt-dollar {
  color: var(--green-primary);
  font-weight: 600;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

#command-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font: var(--text-mono);         /* 13/18 400，与终端输出行一致 */
  caret-color: var(--green-primary);
}
#command-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.5;
}

/* ========== 窄屏适配 ========== */
/* 帮助表格（help / log 概览 / board / mail / ulist 等）首列此前强制单行（white-space: nowrap），
   长用法串会把表格撑得比终端还宽：终端为固定高度且外层裁切，右侧内容既不可见也不可滚。
   窄屏下允许首列折行、表格按可用宽度收敛，输出不再溢出屏幕 */
@media (max-width: 768px) {
  .help-table { width: 100%; }
  .help-table td:first-child { white-space: normal; word-break: break-all; }
}