/* DeepLink 组件样式。所有取值来自 tokens.css；只有操作系统自带的窗口控件颜色写死在 .dl-window 里。 */

/* ---------- 基础 ---------- */
:where(html) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) { margin: 0; background: var(--surface); color: var(--text-primary); font: var(--text-body); }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

:root {
  --dl-row-h: var(--control-md);
  --dl-row-r: var(--radius-lg);
  --dl-row-font: var(--text-ui);
  --dl-ctl-h: var(--control-md);
  --dl-item-pad: var(--space-1-5) var(--space-2);
  --dl-item-font: var(--text-ui);
  --dl-item-r: var(--radius-md);
}
[data-density="touch"] {
  --dl-row-h: var(--control-lg);
  --dl-row-r: var(--radius-xl);
  --dl-row-font: var(--text-body);
  --dl-ctl-h: var(--control-lg);
  --dl-item-pad: var(--space-2-5) var(--space-3);
  --dl-item-font: var(--text-body);
  --dl-item-r: var(--radius-lg);
}

.dl-btn, .dl-iconbtn, .dl-row, .dl-model, .dl-account, .dl-menu__item, .dl-chip__main, .dl-chip__remove, .dl-seg__item, .dl-switch, .dl-cite, .dl-code__copy, .dl-file__remove, .dl-activity__head, .dl-banner__close {
  -webkit-appearance: none; appearance: none; margin: 0; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.dl-btn:focus-visible, .dl-iconbtn:focus-visible, .dl-row:focus-visible, .dl-model:focus-visible, .dl-account:focus-visible, .dl-menu__item:focus-visible,
.dl-chip__main:focus-visible, .dl-chip__remove:focus-visible, .dl-seg__item:focus-visible, .dl-switch:focus-visible, .dl-cite:focus-visible, .dl-code__copy:focus-visible,
.dl-file__remove:focus-visible, .dl-activity__head:focus-visible, .dl-banner__close:focus-visible, .dl-prose a:focus-visible, .dl-code__body:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.dl-menu__item:focus-visible { outline-offset: -2px; }
.dl-icon { display: block; flex: none; }
.dl-logo { display: block; flex: none; color: var(--brand-ink); }
.dl-logo--black { color: var(--brand-black); }
.dl-logo--white { color: var(--brand-white); }

/* ---------- 加载 ---------- */
.dl-spinner { display: inline-block; flex: none; box-sizing: border-box; border: 2px solid var(--border-strong); border-top-color: currentColor; border-radius: var(--radius-full); animation: dl-spin 0.8s linear infinite; }
@keyframes dl-spin { to { transform: rotate(360deg); } }
.dl-pulse { display: inline-block; flex: none; color: var(--text-primary); }
.dl-pulse__link { opacity: 0.25; }
.dl-pulse__node { opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: dl-pulse 1.2s var(--ease-move) infinite; }
.dl-pulse__node--1 { animation-delay: 0.2s; }
.dl-pulse__node--2 { animation-delay: 0.4s; }
@keyframes dl-pulse { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 20% { opacity: 1; transform: scale(1.1); } }
.dl-shimmer {
  display: inline-block; color: var(--text-tertiary);
  background: linear-gradient(to left, var(--text-tertiary), var(--text-primary) 50%, var(--text-tertiary)) no-repeat;
  background-color: var(--text-tertiary); background-size: 50% 200%; background-position: -100% top;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: dl-shimmer 3s 0.6s infinite;
}
@keyframes dl-shimmer { 0% { background-position: -100% top; } 70%, 100% { background-position: 250% top; } }
.dl-thinking { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-message); color: var(--text-tertiary); }

/* ---------- Button ---------- */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); box-sizing: border-box;
  height: var(--dl-btn-h, var(--dl-ctl-h)); padding: 0 var(--dl-btn-px, var(--space-4)); border: 1px solid transparent; border-radius: var(--radius-full);
  font: var(--text-label); white-space: nowrap; user-select: none;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.dl-btn--sm { --dl-btn-h: var(--control-sm); --dl-btn-px: var(--space-3); }
.dl-btn--lg { --dl-btn-h: var(--control-lg); --dl-btn-px: var(--space-5); }
.dl-btn--xl { --dl-btn-h: var(--control-xl); --dl-btn-px: var(--space-6); font: var(--text-body); font-weight: 500; }
.dl-btn--full { width: 100%; }
.dl-btn--primary { background: var(--fill-primary); color: var(--on-fill-primary); }
.dl-btn--primary:hover { background: var(--fill-primary-hover); }
.dl-btn--primary:active { background: var(--fill-primary-active); }
.dl-btn--secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-strong); }
.dl-btn--secondary:hover { background: var(--fill-soft); }
.dl-btn--secondary:active { background: var(--fill-soft-hover); }
.dl-btn--soft { background: var(--fill-soft); color: var(--text-primary); }
.dl-btn--soft:hover { background: var(--fill-soft-hover); }
.dl-btn--soft:active { background: var(--fill-soft-active); }
.dl-btn--ghost { color: var(--text-primary); }
.dl-btn--ghost:hover { background: var(--fill-hover); }
.dl-btn--ghost:active { background: var(--fill-active); }
.dl-btn--danger { background: var(--fill-danger); color: var(--on-fill-danger); }
.dl-btn--danger:hover { background: var(--fill-danger-hover); }
.dl-btn:disabled { background: var(--fill-soft); border-color: transparent; color: var(--text-tertiary); cursor: not-allowed; }
.dl-btn--ghost:disabled { background: transparent; }

/* ---------- IconButton ---------- */
.dl-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: var(--control-md); height: var(--control-md); border-radius: var(--radius-full); color: var(--text-secondary);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.dl-iconbtn--xs { width: var(--control-xs); height: var(--control-xs); }
.dl-iconbtn--sm { width: var(--control-sm); height: var(--control-sm); }
.dl-iconbtn--lg { width: var(--control-lg); height: var(--control-lg); }
.dl-iconbtn--ghost:hover { background: var(--fill-hover); color: var(--text-primary); }
.dl-iconbtn--ghost:active, .dl-iconbtn--ghost.is-active { background: var(--fill-active); color: var(--text-primary); }
.dl-iconbtn--soft { background: var(--fill-soft); color: var(--text-primary); }
.dl-iconbtn--soft:hover { background: var(--fill-soft-hover); }
.dl-iconbtn--soft:active { background: var(--fill-soft-active); }
.dl-iconbtn--primary { background: var(--fill-primary); color: var(--on-fill-primary); }
.dl-iconbtn--primary:hover { background: var(--fill-primary-hover); }
.dl-iconbtn--primary:active { background: var(--fill-primary-active); }
.dl-iconbtn--outline { background: var(--surface-raised); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); }
.dl-iconbtn--outline:hover { background: var(--fill-soft); }
.dl-iconbtn--raised { background: var(--surface-raised); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-subtle), var(--shadow-raised); }
.dl-iconbtn--raised:hover { background: var(--fill-soft); }
.dl-iconbtn:disabled { background: transparent; color: var(--text-tertiary); box-shadow: none; cursor: not-allowed; }
.dl-iconbtn--primary:disabled { background: var(--fill-soft); }
[data-density="touch"] .dl-iconbtn::after { content: ""; position: absolute; inset: -4px; }
[data-density="touch"] .dl-iconbtn--sm::after { inset: -6px; }
[data-density="touch"] .dl-iconbtn--xs::after { inset: -10px; }

/* ---------- Chip ---------- */
.dl-chip {
  display: inline-flex; align-items: center; box-sizing: border-box; max-width: 100%; height: var(--dl-ctl-h); border-radius: var(--radius-full);
  background: var(--surface-raised); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong); font: var(--text-label);
  transition: background-color var(--duration-fast) ease;
}
.dl-chip:has(button.dl-chip__main):hover { background: var(--fill-soft); }
.dl-chip__main { display: inline-flex; align-items: center; gap: var(--space-1-5); min-width: 0; height: 100%; padding: 0 var(--space-3-5); border-radius: inherit; white-space: nowrap; }
.dl-chip__main > span { overflow: hidden; text-overflow: ellipsis; }
.dl-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: var(--control-xs); height: var(--control-xs); margin: 0 var(--space-1) 0 calc(var(--space-2) * -1); border-radius: var(--radius-full); color: inherit; }
.dl-chip__remove:hover { background: var(--fill-hover); }
.dl-chip.is-selected { background: var(--fill-info-soft); color: var(--text-link); box-shadow: none; }
.dl-chip.is-selected:has(button.dl-chip__main):hover { background: var(--fill-info-soft); }
.dl-chip.is-disabled { background: var(--fill-soft); color: var(--text-tertiary); box-shadow: none; cursor: not-allowed; }

/* ---------- 表单 ---------- */
.dl-field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.dl-field__label { display: block; padding: 0; font: var(--text-label); color: var(--text-primary); }
.dl-field__msg { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; font: var(--text-caption); color: var(--text-secondary); }
.dl-field__msg--error { color: var(--text-danger); }
.dl-field__msg .dl-icon { margin-top: 0; }
.dl-input, .dl-select { position: relative; display: flex; align-items: center; box-sizing: border-box; min-height: var(--control-lg); border-radius: var(--radius-xl); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-control); transition: box-shadow var(--duration-fast) ease; }
.dl-input:hover, .dl-select:hover { box-shadow: inset 0 0 0 1px var(--text-secondary); }
.dl-input:focus-within, .dl-select:focus-within { box-shadow: inset 0 0 0 2px var(--ring); }
.is-error > .dl-input, .is-error > .dl-select { box-shadow: inset 0 0 0 1px var(--text-danger); }
.is-error > .dl-input:focus-within { box-shadow: inset 0 0 0 2px var(--text-danger); }
.dl-input input, .dl-input textarea, .dl-select select { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: var(--space-2-5) var(--space-3-5); border: 0; outline: 0; background: transparent; color: var(--text-primary); font: var(--text-body); -webkit-appearance: none; appearance: none; }
.dl-input input::placeholder, .dl-input textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.dl-input textarea { resize: vertical; display: block; }
.dl-input--sm, .dl-select--sm { min-height: var(--control-md); border-radius: var(--radius-lg); }
.dl-input--sm input, .dl-select--sm select { padding-top: var(--space-2); padding-bottom: var(--space-2); font: var(--text-ui); }
[data-density="touch"] .dl-input--sm, [data-density="touch"] .dl-select--sm { min-height: var(--control-lg); border-radius: var(--radius-xl); }
[data-density="touch"] .dl-input--sm input, [data-density="touch"] .dl-select--sm select { font: var(--text-body); }
.dl-input--multiline { align-items: flex-start; }
.dl-input__icon { margin-left: var(--space-3-5); color: var(--text-secondary); }
.dl-input__icon + input { padding-left: var(--space-2); }
.dl-input:has(:disabled), .dl-select:has(:disabled) { background: var(--fill-soft); box-shadow: none; }
.dl-input :disabled, .dl-select :disabled { color: var(--text-tertiary); cursor: not-allowed; }
.dl-select select { padding-right: var(--space-10); cursor: pointer; }
.dl-select select option { background: var(--surface-overlay); color: var(--text-primary); }
.dl-select__chevron { position: absolute; right: var(--space-3-5); color: var(--text-secondary); pointer-events: none; }

.dl-switch { position: relative; display: inline-block; flex: none; width: 32px; height: 19px; padding: 0; border-radius: var(--radius-full); background: var(--border-control); transition: background-color var(--duration-base) ease; }
.dl-switch__thumb { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: var(--radius-full); background: var(--on-fill-primary); box-shadow: var(--shadow-thumb); transition: transform var(--duration-base) var(--ease-move), background-color var(--duration-base) ease; }
.dl-switch.is-on { background: var(--fill-primary); }
.dl-switch.is-on .dl-switch__thumb { transform: translateX(13px); background: var(--on-fill-primary); }
.dl-switch:disabled { background: var(--fill-soft-active); cursor: not-allowed; }
.dl-switch:disabled .dl-switch__thumb { background: var(--surface-raised); box-shadow: none; }
[data-density="touch"] .dl-switch { width: 44px; height: 26px; }
[data-density="touch"] .dl-switch__thumb { width: 20px; height: 20px; }
[data-density="touch"] .dl-switch.is-on .dl-switch__thumb { transform: translateX(18px); }
.dl-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dl-switch-row__text { min-width: 0; }
.dl-switch-row__label { display: block; font: var(--dl-item-font); color: var(--text-primary); }
.dl-switch-row__desc { margin: var(--space-0-5) 0 0; font: var(--text-caption); color: var(--text-secondary); }

.dl-check { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--dl-item-font); color: var(--text-primary); cursor: pointer; }
.dl-check input, .dl-radio input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.dl-check__box { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 18px; height: 18px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--border-control); color: transparent; transition: background-color var(--duration-fast) ease; }
.dl-check input:checked + .dl-check__box { background: var(--fill-primary); box-shadow: none; color: var(--on-fill-primary); }
.dl-check input:focus-visible + .dl-check__box, .dl-radio input:focus-visible + .dl-radio__dot { outline: 2px solid var(--ring); outline-offset: 2px; }
.dl-check.is-disabled { color: var(--text-tertiary); cursor: not-allowed; }
.dl-check.is-disabled .dl-check__box { background: var(--fill-soft); box-shadow: none; }
.dl-check.is-disabled input:checked + .dl-check__box { background: var(--fill-soft-active); color: var(--text-tertiary); }

.dl-radios { display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.dl-radios > legend { margin-bottom: var(--space-2-5); }
.dl-radio { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.dl-radio__dot { position: relative; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 1px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--border-control); transition: background-color var(--duration-fast) ease; }
.dl-radio input:checked + .dl-radio__dot { background: var(--fill-primary); box-shadow: none; }
.dl-radio input:checked + .dl-radio__dot::after { content: ""; position: absolute; inset: 6px; border-radius: var(--radius-full); background: var(--on-fill-primary); }
.dl-radio__text { display: flex; flex-direction: column; gap: var(--space-0-5); }
.dl-radio__label { font: var(--dl-item-font); color: var(--text-primary); }
.dl-radio__desc { font: var(--text-caption); color: var(--text-secondary); }
fieldset:disabled .dl-radio { cursor: not-allowed; }
fieldset:disabled .dl-radio__label { color: var(--text-tertiary); }

.dl-seg { display: inline-flex; gap: var(--space-0-5); box-sizing: border-box; padding: var(--space-0-5); border-radius: var(--radius-full); background: var(--fill-soft); }
.dl-seg--full { display: flex; }
.dl-seg--full .dl-seg__item { flex: 1; justify-content: center; }
.dl-seg__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); box-sizing: border-box; height: calc(var(--control-md) - 4px); padding: 0 var(--space-3); border-radius: var(--radius-full); font: var(--text-label); color: var(--text-secondary); white-space: nowrap; transition: background-color var(--duration-base) ease, color var(--duration-base) ease; }
.dl-seg--sm .dl-seg__item { height: calc(var(--control-sm) - 4px); padding: 0 var(--space-2-5); }
.dl-seg__item:hover { color: var(--text-primary); }
.dl-seg__item.is-on { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-thumb); }
[data-theme="dark"] .dl-seg__item.is-on { background: var(--fill-soft-active); }

/* ---------- Avatar / Badge ---------- */
.dl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: var(--radius-full); background: var(--fill-soft-active); color: var(--text-primary); font-weight: 500; line-height: 1; user-select: none; }
.dl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dl-avatar--model { background: var(--brand-ink); }
.dl-avatar--model .dl-logo { color: var(--on-fill-primary); }
.dl-badge { display: inline-flex; align-items: center; gap: var(--space-1); box-sizing: border-box; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-xs); background: var(--fill-soft); color: var(--text-primary); font: var(--text-caption-strong); white-space: nowrap; }
.dl-badge--info { background: var(--fill-info-soft); color: var(--text-link); }
.dl-badge--success { background: var(--fill-success-soft); color: var(--text-success); }
.dl-badge--warning { background: var(--fill-warning-soft); color: var(--text-warning); }
.dl-badge--danger { background: var(--fill-danger-soft); color: var(--text-danger); }
.dl-badge--inverse { background: var(--surface-inverse); color: var(--text-inverse); }

/* ---------- Tooltip ---------- */
.dl-tip { position: relative; display: inline-flex; }
.dl-tip__bubble {
  position: absolute; z-index: var(--z-tooltip); display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); background: var(--surface-tooltip); color: var(--text-tooltip); box-shadow: var(--shadow-menu); font: var(--text-caption-strong); white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-base) ease;
}
.dl-tip:hover .dl-tip__bubble, .dl-tip:focus-within .dl-tip__bubble, .dl-tip.is-open .dl-tip__bubble { opacity: 1; visibility: visible; transition-delay: 300ms; }
.dl-tip.is-open .dl-tip__bubble { transition-delay: 0s; }
.dl-tip--top .dl-tip__bubble { bottom: calc(100% + var(--space-1-5)); left: 50%; transform: translateX(-50%); }
.dl-tip--bottom .dl-tip__bubble { top: calc(100% + var(--space-1-5)); left: 50%; transform: translateX(-50%); }
.dl-tip--right .dl-tip__bubble { left: calc(100% + var(--space-1-5)); top: 50%; transform: translateY(-50%); }
.dl-tip--left .dl-tip__bubble { right: calc(100% + var(--space-1-5)); top: 50%; transform: translateY(-50%); }
.dl-tip__kbd { font: inherit; font-weight: 400; color: inherit; opacity: 1; }

/* ---------- Banner / Toast ---------- */
.dl-banner { display: flex; align-items: flex-start; gap: var(--space-3); box-sizing: border-box; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); font: var(--text-ui); color: var(--text-primary); background: var(--fill-soft); }
.dl-banner__icon { margin-top: 0; }
.dl-banner__body { flex: 1; min-width: 0; }
.dl-banner__title { margin: 0; font: var(--text-label); font-weight: 600; }
.dl-banner__text { margin: 0; }
.dl-banner__title + .dl-banner__text { margin-top: var(--space-0-5); }
.dl-banner__action { flex: none; }
.dl-banner__close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control-xs); height: var(--control-xs); margin: calc(var(--space-0-5) * -1) calc(var(--space-1) * -1) 0 0; border-radius: var(--radius-full); color: inherit; }
.dl-banner__close:hover { background: var(--fill-hover); }
.dl-banner--info { background: var(--fill-info-soft); }
.dl-banner--info .dl-banner__icon { color: var(--text-link); }
.dl-banner--success { background: var(--fill-success-soft); }
.dl-banner--success .dl-banner__icon { color: var(--text-success); }
.dl-banner--warning { background: var(--fill-warning-soft); }
.dl-banner--warning .dl-banner__icon { color: var(--text-warning); }
.dl-banner--danger { background: var(--fill-danger-soft); }
.dl-banner--danger .dl-banner__icon { color: var(--text-danger); }
.dl-toast { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; max-width: 100%; min-height: var(--control-lg); padding: var(--space-2-5) var(--space-4); border-radius: var(--radius-xl); background: var(--surface-overlay); color: var(--text-primary); box-shadow: var(--shadow-menu); font: var(--text-ui); }
.dl-toast--success .dl-toast__icon { color: var(--text-success); }
.dl-toast--warning .dl-toast__icon { color: var(--text-warning); }
.dl-toast--danger .dl-toast__icon { color: var(--text-danger); }
.dl-toast--info .dl-toast__icon { color: var(--text-link); }
.dl-toast__action { margin-left: var(--space-2); }

/* ---------- 应用骨架 ---------- */
.dl-shell { display: flex; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: var(--surface); color: var(--text-primary); }
.dl-shell__main { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.dl-shell__content { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.dl-shell__footer { flex: none; }
.dl-thread { display: flex; flex-direction: column; gap: var(--space-6); box-sizing: border-box; width: 100%; max-width: calc(var(--thread-width) + var(--thread-gutter) * 2); margin: 0 auto; padding: var(--space-4) var(--thread-gutter) var(--space-8); }
.dl-dock { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; max-width: calc(var(--thread-width) + var(--thread-gutter) * 2); margin: 0 auto; padding: 0 var(--thread-gutter) var(--space-2); }
[data-density="touch"] .dl-thread { padding-left: var(--space-4); padding-right: var(--space-4); }
[data-density="touch"] .dl-dock { padding-left: var(--composer-gutter); padding-right: var(--composer-gutter); }

.dl-sidebar { display: flex; flex: none; flex-direction: column; box-sizing: border-box; width: var(--sidebar-width); height: 100%; min-height: 0; background: var(--surface-sidebar); border-right: 1px solid var(--border); color: var(--text-primary); }
.dl-sidebar__header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--topbar-height); padding: 0 var(--space-2) 0 var(--space-4); box-sizing: border-box; }
.dl-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-1-5) var(--space-2); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.dl-sidebar__footer { flex: none; padding: var(--space-1-5); border-top: 1px solid var(--border); }
.dl-sidebar__section + .dl-sidebar__section { margin-top: var(--space-2); }
.dl-sidebar__title { margin: 0; padding: var(--space-4) var(--space-2-5) var(--space-1-5); font: var(--text-caption-strong); color: var(--text-tertiary); }
.dl-sidebar--rail { width: var(--sidebar-rail); }
.dl-sidebar--rail .dl-sidebar__header { justify-content: center; padding: 0; }
.dl-sidebar--rail .dl-row { justify-content: center; padding: 0; }
.dl-sidebar--rail .dl-row__label, .dl-sidebar--rail .dl-row__meta, .dl-sidebar--rail .dl-sidebar__title, .dl-sidebar--rail .dl-account__text { display: none; }
.dl-sidebar--rail .dl-account { justify-content: center; padding: 0; }

.dl-row { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; height: var(--dl-row-h); padding: 0 var(--space-2-5); border-radius: var(--dl-row-r); font: var(--dl-row-font); color: var(--text-primary); transition: background-color var(--duration-fast) ease; }
.dl-row:hover, .dl-row.is-active { background: var(--fill-hover); }
.dl-row:active { background: var(--fill-active); }
.dl-row__icon { color: currentColor; }
.dl-row__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-row__meta { flex: none; display: inline-flex; align-items: center; font: var(--text-caption); color: var(--text-tertiary); }
.dl-row:hover .dl-row__meta, .dl-row.is-active .dl-row__meta { color: var(--text-primary); }

.dl-conv { position: relative; }
.dl-conv.is-active .dl-conv__main { background: var(--fill-hover); }
.dl-conv__pin { color: var(--text-tertiary); }
.dl-conv:hover .dl-conv__pin { color: var(--text-primary); }
.dl-conv__menu { position: absolute; top: 50%; right: var(--space-1-5); transform: translateY(-50%); opacity: 0; color: var(--text-primary); }
.dl-conv:hover .dl-conv__menu, .dl-conv:focus-within .dl-conv__menu, .dl-conv.is-active .dl-conv__menu { opacity: 1; }
.dl-conv:hover .dl-conv__main, .dl-conv:focus-within .dl-conv__main, .dl-conv.is-active .dl-conv__main { padding-right: var(--space-8); }
.dl-conv:hover .dl-conv__main .dl-spinner, .dl-conv:hover .dl-conv__pin { display: none; }
[data-density="touch"] .dl-conv__menu { display: none; }
[data-density="touch"] .dl-conv.is-active .dl-conv__main { padding-right: var(--space-2-5); }

.dl-account { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; min-height: var(--dl-row-h); padding: var(--space-1-5) var(--space-2); border-radius: var(--dl-row-r); transition: background-color var(--duration-fast) ease; }
.dl-account:hover { background: var(--fill-hover); }
.dl-account__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dl-account__name { overflow: hidden; font: var(--text-ui); color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; }
.dl-account__detail { overflow: hidden; font: var(--text-caption); color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.dl-account:hover .dl-account__detail { color: var(--text-primary); }

.dl-topbar { position: relative; z-index: var(--z-topbar); display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-2); box-sizing: border-box; height: var(--topbar-height); padding: 0 var(--space-2-5); background: var(--surface); }
.dl-topbar--bordered { border-bottom: 1px solid var(--border); }
.dl-topbar__left, .dl-topbar__right { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.dl-topbar__center { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; transform: translate(-50%, -50%); }

/* ---------- Menu ---------- */
.dl-menuwrap { position: relative; display: inline-flex; }
.dl-menu { box-sizing: border-box; width: var(--menu-width); max-width: 100%; padding: var(--space-1-5); border-radius: var(--radius-xl); background: var(--surface-overlay); color: var(--text-primary); box-shadow: var(--shadow-menu); outline: 0; }
.dl-menu--float { position: absolute; z-index: var(--z-menu); max-width: none; animation: dl-menu-in var(--duration-base) var(--ease-enter); }
.dl-menu--bottom { top: calc(100% + var(--space-1)); }
.dl-menu--top { bottom: calc(100% + var(--space-1)); }
.dl-menu--start { left: 0; }
.dl-menu--end { right: 0; }
@keyframes dl-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dl-menu__item { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; padding: var(--dl-item-pad); border-radius: var(--dl-item-r); font: var(--dl-item-font); color: var(--text-primary); }
.dl-menu__item:hover, .dl-menu__item.is-highlighted { background: var(--fill-hover); }
.dl-menu__item:active { background: var(--fill-active); }
.dl-menu__item:disabled { color: var(--text-tertiary); cursor: not-allowed; background: transparent; }
.dl-menu__item.is-danger { color: var(--text-danger); }
.dl-menu__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dl-menu__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-menu__desc { font: var(--text-caption); color: var(--text-secondary); }
.dl-menu__kbd { flex: none; font: var(--text-caption); color: var(--text-tertiary); }
.dl-menu__check { flex: none; color: var(--text-primary); }
.dl-menu__item:hover .dl-menu__desc, .dl-menu__item:hover .dl-menu__kbd, .dl-menu__item.is-highlighted .dl-menu__desc, .dl-menu__item.is-highlighted .dl-menu__kbd { color: var(--text-primary); }
.dl-menu__sep { height: 1px; margin: var(--space-1-5) calc(var(--space-1-5) * -1); background: var(--border-subtle); }
.dl-menu__label { margin: 0; padding: var(--space-1-5) var(--space-2) var(--space-1); font: var(--text-caption-strong); color: var(--text-tertiary); }

.dl-model { display: inline-flex; align-items: center; gap: var(--space-1-5); box-sizing: border-box; height: var(--control-md); padding: 0 var(--space-2-5); border-radius: var(--radius-lg); font: var(--text-body); color: var(--text-primary); white-space: nowrap; transition: background-color var(--duration-fast) ease; }
.dl-model:hover, .dl-model.is-open { background: var(--fill-hover); }
.dl-model__name { font-weight: 500; }
.dl-model__mode, .dl-model__chevron { color: var(--text-secondary); }
.dl-model:hover .dl-model__mode, .dl-model:hover .dl-model__chevron, .dl-model.is-open .dl-model__mode, .dl-model.is-open .dl-model__chevron { color: var(--text-primary); }

/* ---------- Dialog / BottomSheet ---------- */
.dl-scrim { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface-scrim); }
.dl-scrim--bottom { align-items: flex-end; padding: 0; }
.dl-dialog { display: flex; flex-direction: column; box-sizing: border-box; width: var(--dialog-width); max-width: 100%; max-height: 100%; padding: var(--space-5); border-radius: var(--radius-3xl); background: var(--surface-overlay); color: var(--text-primary); box-shadow: var(--shadow-dialog); outline: 0; }
.dl-dialog--lg { width: var(--dialog-width-lg); }
.dl-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-sm); }
.dl-dialog__title { margin: 0; font: var(--text-title); }
.dl-dialog__desc { margin: var(--space-2) 0 0; font: var(--text-ui); color: var(--text-secondary); }
.dl-dialog__body { margin-top: var(--space-4); min-height: 0; overflow: auto; font: var(--text-ui); }
.dl-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.dl-sheet { box-sizing: border-box; width: 100%; padding: var(--space-2) var(--space-3) calc(var(--space-4) + var(--dl-safe-bottom, 0px)); border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; background: var(--surface-overlay); color: var(--text-primary); box-shadow: var(--shadow-dialog); }
.dl-sheet__grabber { display: block; width: 36px; height: 4px; margin: 0 auto var(--space-3); border-radius: var(--radius-full); background: var(--border-control); }
.dl-sheet__title { margin: 0 var(--space-2) var(--space-3); font: var(--text-title); }
.dl-sheet .dl-menu { width: 100%; padding: 0; background: transparent; box-shadow: none; }

/* ---------- Composer ---------- */
.dl-composer {
  --dl-pad: calc((var(--composer-height) - var(--control-md) - 2px) / 2);
  display: flex; align-items: center; gap: var(--space-1); box-sizing: border-box; width: 100%; min-height: var(--composer-height);
  padding: var(--dl-pad) var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-composer); background: var(--surface-raised); box-shadow: var(--shadow-composer);
  transition: border-color var(--duration-fast) ease;
}
.dl-composer:focus-within { border-color: var(--border-control); }
.dl-composer__text { display: flex; flex: 1; min-width: 0; padding: 0 var(--space-1-5); }
.dl-composer__input { display: block; flex: 1; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: var(--space-1-5) 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--text-primary); font: var(--text-body); caret-color: var(--text-primary); overflow: hidden; }
.dl-composer__input::placeholder { color: var(--text-tertiary); opacity: 1; }
.dl-composer__input:disabled { cursor: not-allowed; }
.dl-composer__add { color: var(--text-primary); }
.dl-composer__right { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.dl-composer__right > .dl-iconbtn--ghost { color: var(--text-primary); }
.dl-composer__right > .dl-iconbtn--ghost:disabled { color: var(--text-tertiary); }
.dl-composer.is-stacked { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2-5) var(--space-2-5) var(--dl-pad); }
.dl-composer.is-stacked .dl-composer__text { padding: 0 var(--space-2); }
.dl-composer__files { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 0 var(--space-2); }
.dl-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); }
.dl-composer__left { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.dl-composer__left .dl-chip { --dl-ctl-h: var(--control-md); }
.dl-composer-note { margin: 0; padding: var(--space-2) var(--space-2) 0; font: var(--text-caption); color: var(--text-secondary); text-align: center; }
[data-density="touch"] .dl-composer { min-height: var(--composer-height-compact); padding: calc((var(--composer-height-compact) - var(--control-md) - 2px) / 2) var(--space-2); box-shadow: var(--shadow-composer-compact); }
[data-density="touch"] .dl-composer.is-stacked { padding: var(--space-2-5) var(--space-2) calc((var(--composer-height-compact) - var(--control-md) - 2px) / 2); }

/* ---------- 消息 ---------- */
.dl-msg { min-width: 0; }
.dl-msg--user { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.dl-msg__bubble { box-sizing: border-box; max-width: 70%; padding: var(--space-2-5) var(--space-4); border-radius: var(--radius-3xl); background: var(--surface-soft); color: var(--text-primary); font: var(--text-message); overflow-wrap: anywhere; white-space: pre-wrap; }
.dl-msg__files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); max-width: 100%; }
[data-density="touch"] .dl-msg__bubble { max-width: 85%; }
.dl-msg--assistant { display: flex; flex-direction: column; align-items: stretch; color: var(--text-primary); }
.dl-msg__activity { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.dl-msg__citations { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-3); }
.dl-msg__actions { margin-top: var(--space-1); }
.dl-msg--assistant .dl-msg__actions { margin-left: calc(var(--space-1-5) * -1); }
.dl-msg--assistant + .dl-msg--user { margin-top: var(--space-2); }
.dl-actions { display: flex; align-items: center; gap: 0; }
.dl-msg--user .dl-msg__actions { margin-top: calc(var(--space-1) * -1); margin-bottom: calc(var(--space-6) * -1); opacity: 0; transition: opacity var(--duration-base) ease; }
.dl-msg--user:hover .dl-msg__actions, .dl-msg--user:focus-within .dl-msg__actions { opacity: 1; }
[data-density="touch"] .dl-msg--user .dl-msg__actions { display: none; }
.dl-msg.is-streaming .dl-prose > :last-child:not(ul):not(ol):not(table):not(figure):not(.dl-table)::after,
.dl-msg.is-streaming .dl-prose > ul:last-child > li:last-child::after,
.dl-msg.is-streaming .dl-prose > ol:last-child > li:last-child::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: var(--space-1); vertical-align: -1px; border-radius: var(--radius-full); background: var(--fill-primary); animation: dl-caret 1.2s var(--ease-move) infinite;
}
@keyframes dl-caret { 0%, 100% { transform: scale(0.75); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } }

/* ---------- Prose ---------- */
.dl-prose { min-width: 0; font: var(--text-message); color: var(--text-primary); overflow-wrap: anywhere; }
.dl-prose > :first-child { margin-top: 0; }
.dl-prose > :last-child { margin-bottom: 0; }
.dl-prose p { margin: 0 0 var(--space-4); }
.dl-prose h1 { margin: var(--space-8) 0 var(--space-3); font: var(--text-heading-1); letter-spacing: -0.01em; }
.dl-prose h2 { margin: var(--space-8) 0 var(--space-3); font: var(--text-heading-2); }
.dl-prose h3 { margin: var(--space-5) 0 var(--space-2-5); font: var(--text-heading-3); }
.dl-prose h4 { margin: var(--space-4) 0 var(--space-2); font: var(--text-heading-4); }
.dl-prose strong, .dl-prose b { font-weight: 600; }
.dl-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; border-radius: var(--radius-xs); }
.dl-prose a:hover { color: var(--text-link-hover); }
.dl-prose ul, .dl-prose ol { margin: var(--space-2) 0 var(--space-4); padding-left: 1.625em; }
.dl-prose ul { list-style: disc; }
.dl-prose ol { list-style: decimal; }
.dl-prose li { margin: var(--space-1-5) 0; padding-left: 0.375em; }
.dl-prose li::marker { color: var(--text-secondary); }
.dl-prose li > ul, .dl-prose li > ol { margin: var(--space-1) 0 0; }
.dl-prose hr { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--border); }
.dl-prose blockquote { margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-4); border-left: 2px solid var(--border-strong); color: var(--text-secondary); }
.dl-prose blockquote > :last-child { margin-bottom: 0; }
.dl-prose :not(pre) > code { padding: var(--space-0-5) var(--space-1); border-radius: var(--radius-xs); background: var(--surface-strong); font-family: var(--font-mono); font-size: 0.875em; }
.dl-prose > .dl-code { margin: var(--space-2) 0 var(--space-4); }
.dl-table { margin: 0 0 var(--space-4); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); }
.dl-prose table { width: 100%; border-collapse: collapse; font: var(--text-ui); }
.dl-prose th { padding: var(--space-2-5) var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface-soft); font-weight: 600; text-align: left; white-space: nowrap; }
.dl-prose td { padding: var(--space-2-5) var(--space-3); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.dl-prose tr:last-child td { border-bottom: 0; }

/* ---------- CodeBlock ---------- */
.dl-code { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-code); }
.dl-code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); box-sizing: border-box; height: var(--control-md); padding: 0 var(--space-1-5) 0 var(--space-4); background: var(--surface-soft); }
.dl-code__lang { font: var(--text-caption-strong); color: var(--text-secondary); }
.dl-code__copy { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-xs); padding: 0 var(--space-2); border-radius: var(--radius-sm); font: var(--text-caption-strong); color: var(--text-secondary); }
.dl-code__copy:hover { background: var(--fill-hover); color: var(--text-primary); }
.dl-code__body { margin: 0; padding: var(--space-3-5) var(--space-4); overflow-x: auto; font: var(--text-code); color: var(--text-primary); tab-size: 2; }
.dl-code__body code { font: inherit; }
.dl-syn--keyword { color: var(--syntax-keyword); }
.dl-syn--string { color: var(--syntax-string); }
.dl-syn--function { color: var(--syntax-function); }
.dl-syn--number { color: var(--syntax-number); }
.dl-syn--property { color: var(--syntax-property); }
.dl-syn--comment { color: var(--syntax-comment); }

/* ---------- Citation / Attachment / Activity ---------- */
.dl-cite { display: inline-flex; align-items: center; gap: var(--space-1); box-sizing: border-box; max-width: 240px; height: var(--control-xs); padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--fill-soft); color: var(--text-secondary); font: var(--text-caption-strong); transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.dl-cite > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dl-cite:hover { background: var(--fill-soft-hover); color: var(--text-primary); }

.dl-file { position: relative; display: flex; align-items: center; gap: var(--space-2-5); box-sizing: border-box; width: 240px; max-width: 100%; height: 56px; padding: var(--space-2-5); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface-raised); }
.dl-file__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-md); background: var(--fill-soft); color: var(--text-primary); }
.dl-file__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.dl-file__name { overflow: hidden; font: var(--text-label); color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; }
.dl-file__meta { overflow: hidden; font: var(--text-caption); color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; }
.dl-file--image { width: 56px; padding: 0; overflow: visible; }
.dl-file__thumb { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.dl-file.is-error { border-color: var(--text-danger); }
.dl-file.is-error .dl-file__icon { background: var(--fill-danger-soft); color: var(--text-danger); }
.dl-file.is-error .dl-file__meta { color: var(--text-danger); }
.dl-file__remove { position: absolute; top: calc(var(--space-1-5) * -1); right: calc(var(--space-1-5) * -1); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--fill-primary); color: var(--on-fill-primary); }
.dl-file__remove:hover { background: var(--fill-primary-hover); }
[data-density="touch"] .dl-file__remove::after { content: ""; position: absolute; inset: -12px; }

.dl-activity { font: var(--text-ui); color: var(--text-secondary); }
.dl-activity__head { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--control-xs); border-radius: var(--radius-sm); color: var(--text-secondary); transition: color var(--duration-fast) ease; }
button.dl-activity__head:hover { color: var(--text-primary); }
.dl-activity__lead { display: inline-flex; flex: none; color: inherit; }
.dl-activity__lead .dl-pulse { color: var(--text-primary); }
.dl-activity__error { color: var(--text-danger); }
.dl-activity__chevron { transition: transform var(--duration-base) var(--ease-move); }
.dl-activity.is-open .dl-activity__chevron { transform: rotate(90deg); }
.dl-activity__body { margin: var(--space-2) 0 var(--space-1) calc(var(--space-2) + 1px); padding-left: var(--space-4); border-left: 1px solid var(--border); font: var(--text-ui); color: var(--text-secondary); }
.dl-activity__body > :first-child { margin-top: 0; }
.dl-activity__body > :last-child { margin-bottom: 0; }
.dl-activity__body p { margin: 0 0 var(--space-2); }

/* ---------- 桌面窗口 ---------- */
.dl-window { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-dialog); }
.dl-window__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dl-window--mac { border-radius: var(--radius-xl); }
.dl-window__lights { position: absolute; top: 22px; left: 20px; z-index: var(--z-topbar); display: flex; gap: var(--space-2); }
.dl-window__lights i { display: block; width: 12px; height: 12px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 0.5px #00000026; }
.dl-window__lights .is-close { background: #ff5f57; }
.dl-window__lights .is-min { background: #febc2e; }
.dl-window__lights .is-max { background: #28c840; }
.dl-window--mac .dl-sidebar__header { padding-left: 84px; justify-content: flex-end; }
.dl-window--windows { border-radius: var(--radius-md); }
.dl-window__caption { display: flex; flex: none; align-items: stretch; justify-content: space-between; height: 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
.dl-window__app { display: inline-flex; align-items: center; gap: var(--space-2); padding-left: var(--space-3); font: var(--text-caption); color: var(--text-primary); }
.dl-window__controls { display: flex; }
.dl-window__ctl { display: inline-flex; align-items: center; justify-content: center; width: 46px; color: var(--text-primary); }
.dl-window__ctl:hover { background: var(--fill-hover); }
.dl-window__ctl--close:hover { background: #c42b1c; color: #ffffff; }

/* ---------- 设备外框（仅文档使用） ---------- */
.dl-device { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: 0; }
.dl-device__screen { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--text-primary); box-shadow: 0 0 0 8px var(--surface-strong), 0 0 0 9px var(--border); }
.dl-device--ios .dl-device__screen { --dl-safe-top: 54px; --dl-safe-bottom: 22px; border-radius: 48px; }
.dl-device--android .dl-device__screen { --dl-safe-top: 36px; --dl-safe-bottom: 16px; border-radius: 32px; }
.dl-device--tablet .dl-device__screen { --dl-safe-top: 24px; border-radius: 24px; }
.dl-device__status { position: relative; z-index: var(--z-toast); display: flex; flex: none; align-items: center; justify-content: space-between; height: 36px; padding: 0 var(--space-6); font-size: 14px; font-weight: 600; line-height: 20px; color: var(--text-primary); }
.dl-device--ios .dl-device__status { height: 54px; padding: var(--space-2) 30px 0; font-size: 16px; }
.dl-device--tablet .dl-device__status { height: 24px; padding: 0 var(--space-5); font-size: 13px; }
.dl-device__island { position: absolute; top: 12px; left: 50%; width: 120px; height: 34px; border-radius: var(--radius-full); background: var(--brand-black); transform: translateX(-50%); }
[data-theme="dark"] .dl-device__island { box-shadow: 0 0 0 1px var(--border); }
.dl-device__glyphs { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.dl-device__content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.dl-device--ios .dl-device__content { padding-bottom: 22px; }
.dl-device--android .dl-device__content { padding-bottom: 16px; }
.dl-device__home { position: absolute; bottom: 8px; left: 50%; z-index: var(--z-toast); width: 134px; height: 5px; border-radius: var(--radius-full); background: var(--text-primary); transform: translateX(-50%); }
.dl-device--android .dl-device__home { width: 108px; height: 4px; bottom: 6px; }
.dl-device__label { font: var(--text-ui); color: var(--text-secondary); text-align: center; }

/* ---------- 预览辅助类（只在设计系统预览中使用） ---------- */
.dl-preview { min-height: 100vh; background: var(--surface); color: var(--text-primary); font: var(--text-body); }
.dl-demo { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; padding: var(--space-5); }
.dl-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dl-demo-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dl-demo-grid { display: grid; gap: var(--space-5); }
.dl-demo-cap { margin: 0; font: var(--text-caption-strong); color: var(--text-tertiary); }
.dl-demo-tile { display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: var(--radius-2xl); border: 1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  .dl-spinner { animation-duration: 2.4s; }
  .dl-pulse__node { animation: none; opacity: 1; }
  .dl-pulse__link { opacity: 0.4; }
  .dl-shimmer { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .dl-msg.is-streaming .dl-prose > :last-child::after { animation: none; }
  .dl-menu--float { animation: none; }
}

/* ---------- Drawer ---------- */
.dl-drawer { position: absolute; inset: 0; z-index: var(--z-drawer); display: flex; }
.dl-drawer__panel { flex: none; box-sizing: border-box; border-right: 1px solid var(--border); width: var(--drawer-width); max-width: 85%; height: 100%; padding-top: var(--dl-safe-top, 0); padding-bottom: var(--dl-safe-bottom, 0); background: var(--surface-sidebar); box-shadow: var(--shadow-dialog); }
.dl-drawer__panel .dl-sidebar { width: 100%; border-right: 0; }
.dl-drawer__scrim { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: var(--surface-scrim); cursor: pointer; }

/* ---------- Android 触控尺寸 ---------- */
[data-platform="android"] { --dl-row-h: var(--control-xl); --dl-ctl-h: var(--control-xl); }
[data-platform="android"] .dl-iconbtn::after { inset: -6px; }
[data-platform="android"] .dl-iconbtn--lg::after { inset: -2px; }

/* ---------- 页面样板 ---------- */
.dl-stage { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; background: var(--surface-soft); }
.dl-home { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.dl-home__center { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding-bottom: var(--topbar-height); }
.dl-home__title { margin: 0; color: var(--text-primary); text-align: center; }
.dl-home__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.dl-home__note { padding-bottom: var(--space-2); }
.dl-phone-home { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.dl-phone-home__center { display: flex; flex: 1; align-items: center; justify-content: center; padding-bottom: var(--space-8); }
.dl-phone-home__chips { display: flex; gap: var(--space-2); padding: 0 var(--composer-gutter) var(--space-3); overflow-x: auto; scrollbar-width: none; }
.dl-phone-home__chips .dl-chip { flex: none; }
.dl-signin { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; padding: var(--space-8) var(--space-5); background: var(--surface); }
.dl-signin__panel { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 360px; }
.dl-signin__title { margin: var(--space-6) 0 var(--space-2); text-align: center; }
.dl-signin__sub { margin: 0 0 var(--space-8); font: var(--text-body); color: var(--text-secondary); text-align: center; }
.dl-signin__or { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: var(--space-5) 0; font: var(--text-caption); color: var(--text-tertiary); }
.dl-signin__or::before, .dl-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.dl-signin__form { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.dl-signin__foot { display: flex; gap: var(--space-4); margin: 0; font: var(--text-caption); color: var(--text-secondary); }
.dl-settings { display: flex; gap: var(--space-5); min-height: 0; }
.dl-settings__nav { flex: none; width: 180px; }
.dl-settings__panel { flex: 1; min-width: 0; }
.dl-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-lg); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); font: var(--text-ui); color: var(--text-primary); }
.dl-setting:last-child { border-bottom: 0; }
.dl-setting__select { width: 160px; flex: none; }
.dl-setting > .dl-switch-row { flex: 1; }
.dl-quick { box-sizing: border-box; width: 640px; max-width: 100%; padding: var(--space-2); border-radius: var(--radius-composer); background: var(--surface-overlay); box-shadow: var(--shadow-dialog); }
.dl-quick .dl-composer { border: 0; background: transparent; box-shadow: none; }
.dl-quick__sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--border-subtle); }
.dl-quick__list { padding: var(--space-1); }
.dl-quick__hint { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-3) var(--space-1-5); font: var(--text-caption); color: var(--text-tertiary); }
.dl-grow { flex: 1; min-width: 0; }
[data-density="touch"] .dl-sidebar__header { height: auto; min-height: var(--topbar-height); padding: var(--space-1-5) var(--space-2) var(--space-1-5) var(--space-3); }

.dl-voice { display: flex; flex: 1; flex-direction: column; align-items: center; min-height: 0; padding: 0 var(--space-6); }
.dl-voice__center { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); min-height: 0; }
.dl-voice__status { margin: 0; font: var(--text-body); color: var(--text-secondary); text-align: center; }
.dl-voice__caption { margin: 0; max-width: 300px; font: var(--text-greeting); color: var(--text-primary); text-align: center; }
.dl-voice__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6) 0 var(--space-4); }

/* ---------- 响应式 ---------- */
@media (max-width: 767.98px) {
  .dl-shell > .dl-sidebar { display: none; }
}
@media (max-width: 379.98px) {
  .dl-composer__right > .dl-iconbtn--ghost { display: none; }
}
/* 没有悬停能力的设备不显示悬停态 */
@media (hover: none) {
  .dl-row:hover:not(.is-active), .dl-account:hover, .dl-model:hover:not(.is-open), .dl-menu__item:hover:not(.is-highlighted), .dl-iconbtn--ghost:hover:not(.is-active), .dl-btn--ghost:hover, .dl-code__copy:hover { background: transparent; }
  .dl-btn--secondary:hover, .dl-iconbtn--outline:hover, .dl-iconbtn--raised:hover { background: var(--surface-raised); }
  .dl-btn--soft:hover, .dl-iconbtn--soft:hover { background: var(--fill-soft); }
  .dl-btn--primary:hover, .dl-iconbtn--primary:hover { background: var(--fill-primary); }
  .dl-iconbtn--ghost:hover:not(.is-active) { color: var(--text-secondary); }
}