/* ================================================================
   Base — Reset, global typography, and foundation styles.
   ================================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-l2);
  font-weight: var(--fw-l2);
  line-height: var(--lh-l2);
  color: var(--text-primary);
  background: transparent;   /* 透出 Mica；非 Win11 平台由窗口 backgroundColor 兜底 */
  overflow-x: hidden;        /* 纵向滚动由文档承担（液态玻璃纹理与 demo 同构的前提） */
  min-height: 100vh;
}

/* Acrylic 材质衬底：DWM Acrylic 透出的壁纸花纹过重，
   加一层高不透明表面色压住，保留实时模糊背景的同时接近 Mica 观感。
   必须画在 html 根上而不是 body：视口滚动条的轨道区域不属于 body 盒，
   只有传播到画布的根背景才会垫到滚动条下方，否则滚动条处露出裸 Acrylic。 */
html[data-material="acrylic"] {
  background: rgba(243, 243, 243, 0.70);
}
html[data-theme="dark"][data-material="acrylic"] {
  background: rgba(32, 32, 32, 0.84);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"])[data-material="acrylic"] {
    background: rgba(32, 32, 32, 0.84);
  }
}

/* === Typography defaults === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-l1);
  line-height: var(--lh-l1);
  color: var(--text-primary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover {
  text-decoration: underline;
}

/* === Hairline rules === */
hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* === Selection === */
::selection {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

/* === Scrollbar（Fluent 细滚动条） === */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 视口原生滚动条隐藏：Blink 把 body（而非 html）的滚动条样式传播到视口，
   宽度归零即不占 gutter（实测 html 选择器无效，gutter 仍在）。
   文档滚动由 #doc-scrollbar 浮层滚动条承担（对齐消息内容列右缘）；
   元素内部滚动条（侧栏列表 / 代码块等）不受影响。 */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 5px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* === 文档浮层滚动条（js/custom-scrollbar.js） === */
#doc-scrollbar {
  position: fixed;
  top: 4px;
  bottom: 4px;
  width: 14px;            /* 命中区比可视 thumb 宽，便于抓取 */
  z-index: 40;            /* 高于 sticky 头部(8)/输入区(10)/报告栏(20,30)，低于弹层(10000) */
  user-select: none;
  touch-action: none;
}

#doc-scrollbar-thumb {
  position: absolute;
  right: 4px;
  width: 4px;
  border-radius: 2px;
  background: var(--rule-strong);
  opacity: 0;
  transition: opacity 0.3s ease, width 0.15s ease, background-color 0.15s ease;
}

/* 滚动中短暂显现；悬浮命中区或拖拽时常驻并加粗 */
#doc-scrollbar.visible #doc-scrollbar-thumb,
#doc-scrollbar:hover #doc-scrollbar-thumb {
  opacity: 1;
}

#doc-scrollbar:hover #doc-scrollbar-thumb,
#doc-scrollbar.dragging #doc-scrollbar-thumb {
  width: 6px;
  background: var(--text-tertiary);
}

/* === Focus === */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === Buttons (base) === */
button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

button:active {
  transform: scale(0.96);
}

button:disabled:active {
  transform: none;
}

/* === Form elements === */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.form-label {
  font-size: var(--fs-l4);
  font-weight: var(--fw-l4);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-label .external-link {
  font-weight: 400;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: normal;
}
.form-label .external-link:hover {
  text-decoration: underline;
}

.form-input,
.form-textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-l2);
  line-height: var(--lh-l2);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--rule);
  border-bottom-color: var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-control);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* WinUI TextBox：焦点态底部 2px 强调色指示线 */
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--rule);
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -1px 0 0 var(--accent);
  background: var(--surface-card);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.form-range {
  width: 100%;
  accent-color: var(--accent);
}

.form-hint {
  font-size: var(--fs-l4);
  color: var(--text-tertiary);
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* 整层 no-drag：弹层虽在视觉上盖住标题栏（z 100 > 8），但 -webkit-app-region
     命中测试按 DOM 区域表判定、无视层叠——浮入标题栏拖拽区（0-52px）的弹层内容
     （如 modal-close-float，矮窗口时 top:-35px 恰落入其中）会被 HTCAPTION 吞掉
     点击（260813 btn-close-settings 实测 nchittest=2）。弹层打开期间窗口本就
     无法经被遮住的标题栏拖拽，整层 no-drag 不影响可用性 */
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  /* 开关动画：JS 通过 .visible class 驱动（display 由 JS 控制），遮罩淡入淡出 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}

/* 弹层本体：缩放 + 上移进入（WinUI 缓出），随 overlay 的 .visible 联动 */
.modal-overlay .modal-panel,
.modal-overlay .modal-sidebar-wrapper {
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  transition: transform var(--transition-modal), opacity 160ms ease;
}

.modal-overlay.visible .modal-panel,
.modal-overlay.visible .modal-sidebar-wrapper {
  transform: none;
  opacity: 1;
}

.modal-panel {
  background: var(--surface-modal);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);   /* WinUI OverlayCornerRadius 8px */
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-small {
  max-width: 360px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
}

/* === Toast === */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  background: var(--text-primary);
  color: var(--surface-primary);
  font-size: var(--fs-l4);
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 200;
}

.app-toast.show {
  opacity: 1;
  transform: translateX(-50%);
}

/* === Popover（弹出小面板统一出入场：slash 面板 / 强度面板 / 模型面板 / 容量浮窗 / 引用浮钮） === */
/* JS 通过 showPopover/hidePopover 驱动 .popover-visible；display 由 JS 控制 */
.popover-anim {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity var(--transition-popover), transform var(--transition-popover);
}

.popover-anim.popover-visible {
  opacity: 1;
  transform: none;
}

/* 向下展开的浮窗（如容量浮窗）：从上方落入 */
.popover-anim--top {
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
}

.popover-anim--top.popover-visible {
  transform: none;
}

/* === Animations === */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 复制成功反馈：轻微弹跳 */
@keyframes copy-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}


/* === Reduced Motion（系统减弱动画时关闭弹层与交互动效） === */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-overlay .modal-panel,
  .modal-overlay .modal-sidebar-wrapper,
  .settings-tab-content,
  .settings-tab,
  .settings-tab::before,
  .prompt-section-body,
  .prompt-chevron,
  /* 弹出小面板 */
  .popover-anim,
  /* Toast 滑入 */
  .app-toast,
  /* 消息与列表入场 */
  .message-wrapper,
  .hero-chip,
  .conv-item.active::before,
  /* 呼吸 / 脉冲 / 闪光类循环或一次性动画 */
  .conv-item--generating::after,
  .conv-item--generating .conv-item-title::before,
  .sidebar-nav-badge,
  .ai-think-header .thinking-icon--anim,
  .ai-think-header .indicator .dot-pulse span,
  #report-content.report-flash,
  .code-copy-btn.copied,
  /* 图标微动效 */
  .icon-btn svg,
  .btn-new-chat svg,
  .btn-send-circle svg,
  .input-action-btn svg,
  #report-panel-toggle svg,
  /* 桌面端侧栏滑出/滑入 */
  body,
  #sidebar,
  .msg-action-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* === 系统减弱透明：关闭镜像模糊层，标题栏 / 输入卡回退不透明表面 === */
@media (prefers-reduced-transparency: reduce) {
  .blur-mirror {
    display: none;
  }
  #chat-header {
    background: var(--surface-primary);
  }
  #input-card {
    background: var(--surface-card);
  }
}