/* ═════════════════════════════════════════════════════════════
   36 · 对话页浮层质感
   手机顶栏、输入区、回到最新、工作空间标签浮在对话上:半透明磨砂,内容从下面滑过时被柔化;
   区域靠深浅底色与柔影区分,不描边(只在顶部留一道玻璃高光)。表格只留行间细线。
   输入框:外框大圆角,内部控件全是正圆/胶囊(同心几何);发送键只在有内容可发时亮起品牌色。
   只用现有颜色变量;静止浮层才用磨砂,随抽屉移动的面板不用(见 L141)。
   ═════════════════════════════════════════════════════════════ */
#chat-view {
  /* 浮层底色比对话背景亮一级,与背景拉开对比;浅色主题用纯白 + 柔影 */
  --chrome-base: color-mix(in srgb, var(--text-main) 9%, var(--bg-layer-1));
  --chrome-glass: color-mix(in srgb, var(--chrome-base) 80%, transparent);
  --chrome-glass-strong: color-mix(in srgb, var(--chrome-base) 92%, transparent);
  --chrome-glass-soft: color-mix(in srgb, var(--chrome-base) 62%, transparent); /* 只放图标的小圆钮:更透,不抢正文 */
  --chrome-blur: blur(24px) saturate(180%);
  --chrome-glass-bar: color-mix(in srgb, var(--chrome-base) 55%, transparent);
  --chrome-blur-bar: blur(30px) saturate(180%);
  --chrome-edge: inset 0 1px 0 color-mix(in srgb, var(--text-bright) 8%, transparent);
  --chrome-shadow: 0 8px 28px color-mix(in srgb, var(--shadow-overlay) 60%, transparent);
  --chrome-fill: color-mix(in srgb, var(--text-main) 7%, transparent);
  --chrome-fill-hover: color-mix(in srgb, var(--text-main) 11%, transparent);
}
:root[data-theme="light"] #chat-view {
  --chrome-base: var(--theme-surface);
  --chrome-edge: inset 0 1px 0 color-mix(in srgb, var(--theme-surface) 80%, transparent);
  --chrome-shadow: 0 6px 24px var(--shadow-overlay), 0 1px 3px var(--shadow-overlay);
}

/* 输入区:卡片磨砂,卡片外仍由原渐变把内容收进底色 */
#chat-view .input-container {
  background: var(--chrome-glass);
  -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
  border-color: transparent; border-radius: 28px; padding: 4px 8px 8px;
  box-shadow: var(--chrome-edge), var(--chrome-shadow);
}
#chat-view .input-container:focus-within {
  background: var(--chrome-glass-strong);
  border-color: transparent;
  box-shadow: var(--chrome-edge), var(--chrome-shadow);
}
#chat-view .input-bar textarea, #chat-view #chat-input { font-size: 16px; }
#chat-view .input-container > .input-wrapper { padding: 0 8px; }
#chat-view .input-container > .input-row { align-items: center; }

/* 输入区内的控件:无底、无描边,只留图标和文字;悬停才出浅底 */
#chat-view .upload-btn { width: 40px; height: 40px; }
#chat-view .task-mode-toggle {
  height: 36px; margin: 0 0 0 2px;
  border-color: transparent; border-radius: 18px;
  background: transparent; color: var(--text-muted);
}
#chat-view .task-mode-toggle:not(.is-intent):not(.is-active):hover { background: var(--chrome-fill); }
#chat-view .task-mode-toggle.is-intent,
#chat-view .task-mode-toggle.is-active { border-color: transparent; }
#chat-view .thinking-depth-button {
  min-width: 0; height: 36px; padding: 0 10px; gap: 6px;
  border-color: transparent; background: transparent; color: var(--text-muted);
}
#chat-view .thinking-depth-button:hover { background: var(--chrome-fill); }
#chat-view .thinking-depth-button[aria-expanded="true"] { border-color: transparent; background: var(--chrome-fill); }
#chat-view .input-row .voice-mic-sidecar { width: 40px; height: 40px; border-radius: 50%; }

/* 发送键:正圆、向上箭头;没有内容可发时低调,输入文字或附图后亮起品牌色;生成中为中性停止键 */
#chat-view #btn-send { width: 40px; height: 40px; border-radius: 50%; margin: 2px 0; }
#chat-view #btn-send .send-ic-send { transform: rotate(-45deg); width: 18px; height: 18px; }
#chat-view .input-container:has(#chat-input:placeholder-shown):not(:has(#image-preview:not(.hidden))) #btn-send:not(.is-stop):not(.is-stopping) {
  background: var(--chrome-fill); color: var(--text-dim);
}
#chat-view #btn-send.is-stop { background: var(--chrome-fill-hover); box-shadow: none; color: var(--text-bright); }

@media (max-width: 430px) {
  /* 窄屏:回答方式按钮靠右、收紧内距(模型名先截断,见 31-thinking-control.css) */
  #chat-view .input-row > .thinking-depth-button {
    margin-left: auto; width: auto; min-width: 0; font-size: 13px; padding-inline: 8px; gap: 4px;
  }
}

/* 回到最新:只留图标的半透明磨砂圆钮(文字在 aria-label/title),与收起时的小圆钮同一质感 */
#chat-view .scroll-to-latest {
  width: 40px; height: 40px; min-height: 0; padding: 0; gap: 0; justify-content: center;
  color: var(--text-muted);
  background: var(--chrome-glass-soft);
  -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
  border-color: transparent;
  box-shadow: var(--chrome-edge), var(--chrome-shadow);
}
#chat-view .scroll-to-latest svg { width: 18px; height: 18px; }
#chat-view .scroll-to-latest:hover { border-color: transparent; background: var(--chrome-glass-strong); color: var(--text-bright); }
/* 输入框上方有任务/工作空间标签时,浮钮随之上移,不与标签叠在一起 */
#chat-view:has(#workspace-mode-banner:not(.hidden)) .scroll-to-latest,
#chat-view:has(#task-mode-banner:not(.hidden)) .scroll-to-latest { margin-bottom: 34px; }
#chat-view:has(#workspace-mode-banner:not(.hidden)):has(#task-mode-banner:not(.hidden)) .scroll-to-latest { margin-bottom: 68px; }

/* 工作空间标签:磨砂胶囊,压在内容上也看得清 */
#workspace-mode-banner .ws-banner-pill {
  background: var(--chrome-glass-strong);
  -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
  border-color: transparent;
  box-shadow: var(--chrome-edge), var(--chrome-shadow);
  padding-top: 4px; padding-bottom: 4px;
  opacity: 1;
}

/* 手机顶栏:磨砂玻璃从屏幕最顶端铺下,覆盖系统顶部区(状态栏 + iOS 主屏模糊带),与状态栏融为一体;
   文字和按钮落在 --app-top-inset 以下(03-layout .topbar padding-top),不被系统模糊压住。
   比背景亮一级、较透,正文滑过时只剩柔和色块;不描边,下方一层淡影与正文分开 */
@media (max-width: 1023px) {
  #chat-view .topbar {
    height: calc(var(--chat-topbar-h) + var(--app-top-inset));
    background: var(--chrome-glass-bar);
    -webkit-backdrop-filter: var(--chrome-blur-bar); backdrop-filter: var(--chrome-blur-bar);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-overlay) 45%, transparent);
  }
}

/* 表格:去外框与表头底色,只留行间细线 */
#chat-view .msg-ai-content table { border: none; border-radius: 0; }
#chat-view .msg-ai-content th {
  background: none; padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--border-light);
  text-transform: none; letter-spacing: 0;
}
#chat-view .msg-ai-content td { padding: 12px 14px 12px 0; }
#chat-view .msg-ai-content tr:first-child td { border-top: none; }
#chat-view .msg-ai-content tr:hover td { background: none; }

@media (prefers-reduced-transparency: reduce) {
  #chat-view .input-container,
  #chat-view .topbar,
  #chat-view .scroll-to-latest,
  #workspace-mode-banner .ws-banner-pill {
    background: var(--chrome-base);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}