/* ============================================================
   翻译站样式
   ------------------------------------------------------------
   两种布局：
     桌面（> 767px）  .shell      左侧会话栏 + 右侧对话区
     手机（<= 767px） 两层页面    .list-view（会话列表）
                                  .chat-view（翻译页，带返回）

   视觉基调：靛蓝品牌色 + 大圆角卡片 + 极轻的阴影分层。
   所有颜色都走 CSS 变量，深色模式只是换掉这组变量。
   ============================================================ */

:root {
  /* ---- 中性色 ---- */
  --bg:         #ffffff;
  --surface:    #ffffff;
  --bg-side:    #fafbff;
  --bg-soft:    #f4f6fb;
  --bg-code:    #eceff6;
  --line:       #e4e8f1;
  --line-soft:  #eef1f6;
  --fg:         #141821;
  --fg-mid:     #5a6478;
  --fg-dim:     #949db0;

  /* ---- 品牌色 ---- */
  --accent:     #4f46e5;
  --accent-2:   #6366f1;
  --accent-ink: #3730a3;
  --accent-dim: #eef0ff;
  --accent-ring: rgba(79, 70, 229, .18);
  --grad: linear-gradient(135deg, #6366f1 0%, #4f46e5 58%, #4338ca 100%);
  --on-accent: #fff;

  --danger:     #d92d20;
  --danger-bg:  #fef3f2;
  --danger-line: #f6cfca;

  /* ---- 阴影：三级，够用就不要再加 ---- */
  --sh-1: 0 1px 2px rgba(20, 24, 40, .05);
  --sh-2: 0 4px 14px rgba(20, 24, 40, .07);
  --sh-3: 0 16px 44px rgba(20, 24, 40, .16);
  --sh-accent: 0 6px 18px rgba(79, 70, 229, .26);

  /* ---- 圆角 ---- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --bar-h: 54px;

  /* 对话区顶部的一层极淡光晕，让空白页不那么寡淡。
     半径很大、衰减很快，只在顶部留一点颜色。 */
  --thread-bg: radial-gradient(1100px 420px at 50% -12%,
                               rgba(99, 102, 241, .09),
                               rgba(99, 102, 241, 0) 68%);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 品牌标记：渐变方块 + 双向箭头。
     做成图片而不是 ::before 里的文字，是因为站名会随界面语言变
     （邻语 / Linyu），文字标记会跟着语言串味。 */
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238b8ff8'/%3E%3Cstop offset='1' stop-color='%234f46e5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 12h13l-4-4M24.5 20h-13l4 4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- 深色模式：只换变量，规则一条不用改 ---- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0f1116;
    --surface:    #151922;
    --bg-side:    #12151d;
    --bg-soft:    #1b2029;
    --bg-code:    #222836;
    --line:       #262c39;
    --line-soft:  #1e232e;
    --fg:         #e7eaf2;
    --fg-mid:     #9aa4b9;
    --fg-dim:     #6c758a;

    --accent:     #8288f8;
    --accent-2:   #9aa0fb;
    --accent-ink: #c3c6ff;
    --accent-dim: #232a45;
    --accent-ring: rgba(130, 136, 248, .28);
    --grad: linear-gradient(135deg, #7c83f7 0%, #5b57e0 58%, #4a44c9 100%);
    --on-accent: #fff;

    --danger:     #ff6b5e;
    --danger-bg:  #2a1614;
    --danger-line: #4a2622;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-2: 0 4px 14px rgba(0, 0, 0, .35);
    --sh-3: 0 16px 44px rgba(0, 0, 0, .55);
    --sh-accent: 0 6px 18px rgba(79, 70, 229, .4);

    --thread-bg: radial-gradient(1100px 420px at 50% -12%,
                                 rgba(124, 131, 247, .16),
                                 rgba(124, 131, 247, 0) 68%);
  }
}

* { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
}

/* body 用 fixed 锚在视口上。
   这是关键：iOS 在输入框获得焦点时会把整个页面往上/往左滚，
   普通定位的 body 会被滚走且回不来 —— 表现为「顶栏被推出屏幕、
   输入框被键盘挡住、右边内容被裁掉」。

   用 width:100% 而不是 left:0 + right:0 —— 因为 JS 要动态设置 left
   来抵消视觉视口的横向偏移，同时留着 right:0 会把宽度压窄。 */
body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 高度由 JS 用 visualViewport 实时同步到 --vh。
     iOS 上地址栏和键盘都会改变可见高度，dvh 跟不上，
     所以 --vh 优先，没执行到 JS 时退回 dvh / vh。 */
  height: 100vh;
  height: var(--vh, 100dvh);
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 键盘用户才显示焦点环，鼠标点击不出现 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------- 图标按钮 ---------------- */

.icon-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--fg-mid);
  transition: background .14s, color .14s;
}
.icon-btn svg { width: 20px; height: 20px; display: block; }
.icon-btn.on {
  color: var(--accent);
  background: var(--accent-dim);
}

@media (hover: hover) {
  .icon-btn:hover { background: var(--bg-soft); color: var(--fg); }
  .icon-btn.on:hover { background: var(--accent-dim); color: var(--accent); }
}

/* 帮助入口是 <a>，要压掉链接默认下划线 */
a.icon-btn { text-decoration: none; }

/* ---------------- 页面顶栏 ---------------- */

.page-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--bar-h);
  padding: 0 8px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}

.page-bar .icon-btn:last-child { margin-right: 2px; }

.page-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 站名 + slogan 一起占左侧空间，右侧留给图标按钮。
   移动端这个容器是 h1（给搜索引擎一个页面级标题），所以必须把 h1 自带的
   margin、字号、字重重置掉，否则默认的 2em 字号和上下外边距会撑破顶栏。 */
.title-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 6px;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 品牌标记。26px 的圆角方块，跟站名同高，右侧靠 gap 拉开 */
.title-wrap::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(79, 70, 229, .26));
}

/* slogan 在窄屏会挤掉站名，先让它自己收缩 */
.slogan {
  flex: 0 1 auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-right { display: flex; align-items: center; gap: 2px; }

/* ---------------- 会话列表 ---------------- */

.conv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background .14s, box-shadow .14s;
}
/* 会话项的悬停效果只在真正支持悬停的设备上启用。
   触屏设备上，:hover 会导致「第一次点击只触发悬停、不触发点击」——
   用户表现为「要点两次才进得去」。 */
@media (hover: hover) {
  .conv-item:hover { background: var(--bg-soft); }
  .conv-item:hover .conv-more { visibility: visible; }
  .conv-more:hover { background: var(--bg-code); color: var(--fg); }
}

.conv-item.on { background: var(--accent-dim); }

.conv-main { flex: 1 1 auto; min-width: 0; }

.conv-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-preview {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-more {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--fg-dim);
  visibility: hidden;
  transition: background .14s, color .14s;
}
.conv-more svg { width: 16px; height: 16px; }

.empty-hint {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: 14px;
  color: var(--fg-dim);
  text-align: center;
  line-height: 1.6;
}

/* 空状态放一个放大的品牌标记，别让页面只剩一行灰字 */
#listEmpty.empty-hint::before,
#listEmptyD.empty-hint::before,
.thread-inner .empty-hint::before {
  content: "";
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  background: var(--mark) center / contain no-repeat;
  filter: drop-shadow(0 8px 20px rgba(79, 70, 229, .22));
  opacity: .95;
}

/* 列表为空时不要撑开，把空间让给空状态，让它居中 */
.conv-list:empty { flex: 0 0 auto; }

/* ---------------- 对话区 ---------------- */

.thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 6px;
  background: var(--thread-bg);
  -webkit-overflow-scrolling: touch;
}

.thread-inner {
  max-width: 720px;
  margin: 0 auto;
}

.row { display: flex; flex-direction: column; margin-bottom: 16px; }
.row.src { align-items: flex-end; }
.row.dst { align-items: flex-start; }

.bubble {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: 15px;
  line-height: 1.62;
  white-space: pre-wrap;
  word-break: break-word;
}
.src .bubble {
  color: var(--on-accent);
  background: var(--grad);
  border-bottom-right-radius: 6px;
  box-shadow: var(--sh-accent);
}
.dst .bubble {
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
  box-shadow: var(--sh-1);
}
.dst .bubble.pending { color: var(--fg-dim); }
.dst .bubble.failed  { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }

.dst-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding-left: 3px;
  font-size: 12px;
  color: var(--fg-dim);
}

/* 语言名做成小胶囊，比一排灰字更像「标签」 */
.dst-meta > span:first-child {
  padding: 2px 9px;
  font-size: 11.5px;
  color: var(--fg-mid);
  background: var(--bg-soft);
  border-radius: 999px;
}

/* 复制按钮 —— 做得明确一点，别让人找不到 */
.mini-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-mid);
  background: var(--surface);
  transition: color .14s, border-color .14s, background .14s;
}
@media (hover: hover) {
  .mini-copy:hover { border-color: var(--accent); color: var(--accent); }
}
.mini-copy svg { width: 13px; height: 13px; }
.mini-copy.done {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ---------------- 输入区 ---------------- */

.composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}

.m-input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 132px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: inherit;
  /* 必须 >= 16px：iOS Safari 在输入框字体小于 16px 时，
     聚焦会自动把整个页面放大，缩放后视口变窄、右边内容被遮。
     这是 iOS 的固定行为，不是 bug，只能靠字号规避。 */
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-soft);
  resize: none;
  outline: none;
  overflow-y: auto;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
/* 聚焦时才浮起来：底色转白 + 描边 + 一圈很淡的品牌色光晕 */
.m-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.m-input::placeholder { color: var(--fg-dim); }

.send {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--on-accent);
  background: var(--grad);
  box-shadow: var(--sh-accent);
  transition: box-shadow .14s, opacity .14s, transform .08s;
}
@media (hover: hover) {
  .send:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(79, 70, 229, .34); }
}
.send:active:not(:disabled) { transform: translateY(1px); }
.send:disabled { opacity: .4; box-shadow: none; cursor: default; }

/* ---------------- 桌面端布局 ---------------- */

.shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar {
  flex: 0 0 258px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line-soft);
  background: var(--bg-side);
}

.side-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--bar-h);
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line-soft);
}

.side-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* 侧栏里的会话做成独立卡片，当前项浮起来 + 左侧一道品牌色竖条 */
.sidebar .conv-item {
  padding: 10px 12px;
  margin: 2px 8px;
}
.sidebar .conv-item.on {
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.sidebar .conv-item.on::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
}
.sidebar .conv-more { visibility: visible; }
.sidebar .empty-hint { padding: 32px 18px; font-size: 13px; }

.chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

/* ---------------- 浮层 ---------------- */

/* 注意：给元素设了 display 会覆盖 HTML hidden 属性的 display:none，
   所以凡是设过 display 又想用 hidden 控制的，都要补一条 [hidden] 兜底。
   漏了这条，隐藏的空浮层会以一条边框的形式留在屏幕上。 */
[hidden] { display: none !important; }

.overlay {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  /* 同上：fixed 用百分比而不是 100vw */
  max-width: calc(100% - 24px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform-origin: top center;
  animation: overlay-in .16s cubic-bezier(.2, .8, .3, 1);
}

@keyframes overlay-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.overlay-list {
  flex: 1 1 auto;
  min-height: 0;
  /* 必须显式给最大高度，不能只靠父级的 max-height + flex 压缩。
     父级是「auto 高度 + max-height」，这种情况下 flex 不会去压子项：
     实测列表会撑到 3793px（内容全高），被父级的 overflow:hidden 裁掉，
     但它自己 clientHeight === scrollHeight，所以**滚不动**。
     60vh 是浮层的上限，减去搜索框和上下内边距，留一点余量。 */
  max-height: calc(60vh - 76px);
  overflow-y: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.overlay-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  text-align: left;
  border-radius: var(--r-sm);
  color: var(--fg);
  transition: background .12s, color .12s;
}
@media (hover: hover) {
  .overlay-item:hover { background: var(--bg-soft); }
}
.overlay-item[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.overlay-item.danger { color: var(--danger); }
@media (hover: hover) {
  .overlay-item.danger:hover { background: var(--danger-bg); }
}

.overlay-item small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-dim);
}

.overlay-sep { height: 1px; margin: 5px 8px; background: var(--line-soft); }

.overlay-title {
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-dim);
}

/* 搜索框下方那行说明：告诉用户其实支持 90 多种语言 */
.overlay-hint {
  padding: 2px 2px 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-dim);
}
.overlay-hint a { color: var(--accent); text-decoration: none; }
@media (hover: hover) {
  .overlay-hint a:hover { text-decoration: underline; }
}

/* 重命名输入框 / 语言搜索框。同样要 >= 16px，否则 iOS 聚焦时会放大页面 */
.overlay-input {
  width: 100%;
  height: 40px;
  margin: 2px 0 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--bg-soft);
  outline: none;
  transition: background .14s, border-color .14s, box-shadow .14s;
}
.overlay-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.overlay-foot {
  display: flex;
  gap: 8px;
  padding: 4px 2px 2px;
}
.overlay-foot button {
  flex: 1 1 0;
  height: 38px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--fg-mid);
  background: var(--surface);
  transition: border-color .12s, color .12s, background .12s;
}
@media (hover: hover) {
  .overlay-foot button:hover { border-color: var(--fg-dim); color: var(--fg); }
}
.overlay-foot button.primary {
  color: var(--on-accent);
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--sh-accent);
}
@media (hover: hover) {
  .overlay-foot button.primary:hover { box-shadow: 0 8px 22px rgba(79, 70, 229, .34); }
}

/* ---------------- 提示条 ---------------- */

.notice {
  position: fixed;
  left: 50%;
  /* 抬到输入区上方 —— 贴在底部会压住输入框，用户可能正在打字 */
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 300;
  /* fixed 元素的百分比宽度基于视口，比 100vw 可靠（100vw 含滚动条） */
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: var(--sh-3);
  overflow-wrap: anywhere;
  animation: notice-in .2s cubic-bezier(.2, .8, .3, 1);
}
.notice.error { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }

/* 基础位移是 translateX(-50%)，动画两头都得带着，否则会跳到右边 */
@keyframes notice-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------------- 滚动条 ---------------- */

.conv-list,
.thread,
.overlay-list {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.conv-list::-webkit-scrollbar,
.thread::-webkit-scrollbar,
.overlay-list::-webkit-scrollbar { width: 8px; }

.conv-list::-webkit-scrollbar-thumb,
.thread::-webkit-scrollbar-thumb,
.overlay-list::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}

/* ============================================================
   手机（<= 767px）：隐藏桌面布局，启用两层页面
   ============================================================ */

@media (max-width: 767px) {
  :root { --bar-h: 50px; }

  .shell { display: none; }

  .list-view,
  .chat-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg);
  }
  .list-view[hidden],
  .chat-view[hidden] { display: none; }

  /* 返回键和菜单键同宽，标题居中才是对称的 */
  .chat-view .page-title {
    flex: 1 1 auto;
    text-align: center;
  }

  .bubble { max-width: 88%; }
  .thread { padding: 14px 12px 6px; }
}

/* 宽屏时隐藏手机那两层，避免和 .shell 抢位 */
@media (min-width: 768px) {
  .list-view,
  .chat-view { display: none; }
}

/* ---------------- 尊重系统的「减弱动效」 ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}