/* ============================================================
 * Longlight - 长光雨滴小站 | 公共控件：快捷终端浮层 components/fast-shell.css
 * 来源：~README/项目架构.js → 风格（空气投影 / 玻璃材质 / 圆角 / 间隔 / 动效）
 * 用法：全站共用，由 shared/fastShell 在入口 main.js 挂载；本文件提供其样式（FE-08）
 * 说明：浮层内含一套终端输出渲染（输出行 / 语法着色 / 帮助表格 / README），
 *       样式作用域收在 .fast-shell 内，与 pages/index/terminal.css 同源但各自独立（页面私有样式不外泄）
 * 视觉：面板取玻璃材质（与弹窗同档），层级 40——高于页面内容与 mini-player(7)/mode-switch(6)，
 *       低于 modal(100)/editor(100)/boot(1000)，不干扰各页自有浮层
 * ============================================================ */

/* ========== 根层与遮罩 ========== */
.fast-shell {
  position: fixed;
  inset: 0;
  /* 浮层层级：见文件头说明（modal 100 之下、页面内容与常驻小组件之上） */
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-card);
  /* 根节点标 data-permanent 常驻，隐藏时用 hidden 属性整层移除 */
}
.fast-shell[hidden] { display: none; }

/* 浮层打开期间锁背景滚动：移动端防止滚动穿透（约定同 image-viewer / home-overload） */
body.fast-shell-open { overflow: hidden; }

.fast-shell-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  animation: fastShellBackdropIn var(--duration-modal-overlay) var(--ease-out) both;
}

/* ========== 面板 ========== */
.fast-shell-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  height: min(560px, 100%);
  overflow: hidden;
  border: var(--border-glass);
  border-radius: var(--radius-modal);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-3), var(--glass-highlight);
  color: var(--text-primary);
  font: var(--text-ui);
  transform-origin: center center;
  /* 开屏动画：CRT 上电（纵向展开 + 亮度闪白）；关闭切换为断电，见文件末 .is-closing */
  animation: fastShellIn var(--duration-modal-panel) var(--ease-out) both;
}

/* ---- 头部 ---- */
.fast-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 44px;
  padding: 0 var(--space-input);
  border-bottom: 1px solid var(--line);
  background: var(--surface-emphasis);
}

.fast-shell-title {
  font: var(--text-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.fast-shell-head-right {
  display: flex;
  align-items: center;
  gap: var(--space-icon-text);
}

.fast-shell-status {
  display: flex;
  align-items: center;
  gap: var(--space-icon-text);
  font: var(--text-caption);
  color: var(--text-secondary);
}

.fast-shell-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-secondary);
  font: var(--text-ui);
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-hover) var(--ease-out),
              background var(--duration-hover) var(--ease-out);
}
.fast-shell-close:hover { color: var(--text-primary); background: var(--hover-bg); }
.fast-shell-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ========== 输出区 ========== */
.fast-shell-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-card);
  scroll-behavior: smooth;
}
.fast-shell-body[hidden] { display: none; }

/* 输出文本常驻可选中（类 PowerShell），选择行为交还浏览器 */
.fast-shell-body,
.fast-shell-body * {
  -webkit-user-select: text;
  user-select: text;
}

/* 输出行（<pre>：终端语义，保留空格/换行） */
.fast-shell .output-line {
  margin-bottom: 2px;
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-all;
  animation: fastShellLineIn var(--duration-enter) var(--ease-out);
}

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

/* README ASCII 大字：字符画不折行（保留原样），超宽时在自身内部横向滚动，不撑宽面板
   （与 pages/index/terminal.css 的 .output-line.readme-art 同源，作用域收在浮层内） */
.fast-shell .output-line.readme-art {
  white-space: pre;
  word-break: normal;
  line-height: 14px;
  color: var(--tok-symbol);
  opacity: 0.85;
  margin-bottom: 6px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

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

/* 语法着色令牌工具类（与 terminal.css 同源，作用域收在浮层内） */
.fast-shell .tok-symbol  { color: var(--tok-symbol); }
.fast-shell .tok-keyword { color: var(--tok-keyword); font-weight: 600; }
.fast-shell .tok-value   { color: var(--tok-value); }
.fast-shell .tok-number  { color: var(--tok-number); }
.fast-shell .tok-text    { color: var(--tok-text); }
.fast-shell .tok-sub1    { color: var(--tok-sub1); }
.fast-shell .tok-sub2    { color: var(--tok-sub2); }
.fast-shell .tok-sub3    { color: var(--tok-sub3); }

/* 帮助表格 */
.fast-shell .help-table {
  margin: 8px 0;
  max-width: 100%;
  border-collapse: collapse;
}
.fast-shell .help-table td {
  padding: 2px var(--space-grid) 2px 0;
  vertical-align: top;
}
.fast-shell .help-table td:first-child {
  color: var(--green-primary);
  font-weight: 500;
  /* 首列为用法串，可能长于面板宽度：放开折行，避免撑宽表格导致输出横向溢出 */
  white-space: normal;
  overflow-wrap: anywhere;
}
.fast-shell .help-table td:last-child { color: var(--text-secondary); }

/* whoami 头像 */
.fast-shell .help-table .whoami-avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  border: var(--border-default);
  object-fit: cover;
}

/* photo 命令：终端内呈现的图片（点击由全局图片查看器放大） */
.fast-shell .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;
}

/* ========== 内联编辑器（vim 轻量版） ========== */
.fast-shell-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fast-shell-editor[hidden] { display: none; }

.fast-shell-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 8px var(--space-input);
  border-bottom: 1px solid var(--line);
  font: var(--text-caption);
  color: var(--text-secondary);
}

.fast-shell-editor-hint { opacity: .7; }

/* 移动端触屏操作按钮：桌面由 Ctrl+S / Esc 完成，故默认隐藏，窄屏块内才显示 */
.fast-shell-editor-actions { display: none; gap: 8px; }

.fast-shell-editor-btn {
  padding: 4px 10px;
  border: var(--border-soft);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--green-900);
  font: var(--text-caption);
  cursor: pointer;
}
.fast-shell-editor-btn.is-ghost { color: var(--text-secondary); }

.fast-shell-editor-area {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: var(--space-card);
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text-primary);
  font: var(--text-mono);
  caret-color: var(--green-primary);
}

.fast-shell-editor-status {
  flex-shrink: 0;
  padding: 6px var(--space-input);
  border-top: 1px solid var(--line);
  font: var(--text-caption);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fast-shell-editor-status.is-warn { color: var(--amber); }

/* ========== 输入行 ========== */
.fast-shell-input-line {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-input);
  border-top: 1px solid var(--line);
  background: var(--surface-emphasis);
}
.fast-shell-input-line[hidden] { display: none; }

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

.fast-shell-dollar {
  color: var(--green-primary);
  font-weight: 600;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.fast-shell-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font: var(--text-mono);
  caret-color: var(--green-primary);
}
.fast-shell-input::placeholder {
  color: var(--text-secondary);
  opacity: .5;
}

/* ========== 开合动画（CRT 上电 / 断电） ========== */
/* 扫描光带：开屏时自上而下扫过一遍（关闭时停用） */
.fast-shell-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-120%);
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--green-primary) 30%, transparent) 50%,
    transparent);
  animation: fastShellScan 560ms var(--ease-out) both;
}

/* 关闭态：断电（纵向压成一条亮线）——由 panel.js 在隐藏前挂 .is-closing 驱动 */
.fast-shell.is-closing .fast-shell-panel {
  animation: fastShellOut var(--duration-modal-panel) var(--ease-in) both;
}
.fast-shell.is-closing .fast-shell-backdrop {
  animation: fastShellBackdropOut var(--duration-modal-overlay) var(--ease-in) both;
}
.fast-shell.is-closing .fast-shell-panel::after { animation: none; opacity: 0; }

@keyframes fastShellIn {
  0%   { opacity: 0; transform: scaleY(.02) scaleX(.96); filter: brightness(3.2) saturate(1.6); }
  35%  { opacity: 1; transform: scaleY(1.03) scaleX(1);   filter: brightness(1.7); }
  55%  { transform: scaleY(.99);                          filter: brightness(1.15); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1);      filter: brightness(1); }
}
@keyframes fastShellOut {
  0%   { opacity: 1; transform: scaleY(1) scaleX(1);    filter: brightness(1); }
  28%  { transform: scaleY(1.02) scaleX(1.01);          filter: brightness(1.7); }
  100% { opacity: 0; transform: scaleY(.02) scaleX(.9); filter: brightness(4); }
}
@keyframes fastShellBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fastShellBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fastShellScan {
  0%   { opacity: 0;  transform: translateY(-120%); }
  20%  { opacity: .9; }
  100% { opacity: 0;  transform: translateY(400%); }
}

/* ========== 窄屏适配 ========== */
@media (max-width: 768px) {
  .fast-shell { padding: 0; }

  .fast-shell-panel {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    /* 消除双击缩放/延迟点击，触屏更跟手 */
    touch-action: manipulation;
  }

  .fast-shell-body { padding: var(--space-input); }

  .fast-shell .help-table { width: 100%; }

  /* 输入框/编辑器字号 ≥16px：iOS 聚焦时不会自动放大页面 */
  .fast-shell-input,
  .fast-shell-editor-area { font-size: 16px; }

  /* 输入行贴底：底部留出安全区（iPhone 手势条），避免输入框被挡住 */
  .fast-shell-input-line {
    padding-bottom: calc(var(--space-input) + env(safe-area-inset-bottom));
  }

  /* 触控目标放大到 44px（头部同步加高） */
  .fast-shell-head { height: 48px; }
  .fast-shell-close { width: 44px; height: 44px; }

  /* 编辑区：桌面键位提示让位给可点的「保存/退出」按钮 */
  .fast-shell-editor-hint { display: none; }
  .fast-shell-editor-actions { display: flex; }
}