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

/* ========== 终端 ========== */
#terminal {
  height: 100vh;
  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 及终端态（.logged-in/.has-code）已统一至 components/feedback.css */

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

.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: var(--border); }

/* 终端输出文本常驻可选中（类 PowerShell 终端）：选择行为完全交给浏览器默认实现，
   输入框的重新聚焦由页面私有模块 modules/index/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;
}

/* —— 终端语法着色令牌工具类 —— */
.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); }

/* 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;
}

/* ========== 输入行 ========== */
/* 输入区内容自适应：提示符宽度超过输入区 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;
}
.prompt .user-name { color: var(--warm-orange); }

/* 提示符 $：独立于输入框的元素，与 :~ 同款样式；单行时紧贴 :~，换行时独占第二行行首 */
.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;
}