/* 陪伴浮窗 + 面板 · 海/窗主题毛玻璃变体
   companion.css 里的挂件/面板结构与交互保持不变，这里只在
   .companion-dock--sea / --window、.companion-panel--sea / --window
   （由 companion-dock.js 按当前主屏模板动态挂上）覆盖视觉 token。
   奶油手账主题不挂这些 class，companion.css 的原样式完全不受影响。 */

.companion-dock--sea {
  --gd-ink: var(--ink-blue, #2c4b5c);
  --gd-ink-soft: rgba(44, 75, 92, 0.6);
  --gd-glass: rgba(255, 255, 255, 0.40);
  --gd-glass-strong: rgba(255, 255, 255, 0.58);
  --gd-glass-edge: rgba(255, 255, 255, 0.60);
  --gd-blur: blur(20px) saturate(120%);
  --gd-shadow: 0 10px 30px rgba(24, 58, 78, 0.18);
  --gd-accent: #d29a3f;
  --gd-accent-soft: rgba(210, 154, 63, 0.22);
  --gd-avatar-bg: linear-gradient(135deg, rgba(196, 226, 240, 0.85), rgba(255, 255, 255, 0.55));
  --gd-danger: #c1584f;
}

.companion-dock--window {
  --gd-ink: #58666e;
  --gd-ink-soft: rgba(88, 102, 110, 0.62);
  --gd-glass: rgba(255, 255, 255, 0.34);
  --gd-glass-strong: rgba(255, 255, 255, 0.52);
  --gd-glass-edge: rgba(255, 255, 255, 0.66);
  --gd-blur: blur(9px) saturate(112%);
  --gd-shadow: 0 8px 26px rgba(70, 86, 96, 0.16);
  --gd-accent: #7d93a0;
  --gd-accent-soft: rgba(125, 147, 160, 0.22);
  --gd-avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(238, 240, 238, 0.5));
  --gd-danger: #b3655e;
}

/* 面板是独立挂到 body 的元素，class 与 dock 一致地各自声明一遍变量 */
.companion-panel--sea {
  --gd-ink: var(--ink-blue, #2c4b5c);
  --gd-ink-soft: rgba(44, 75, 92, 0.6);
  --gd-glass: rgba(255, 255, 255, 0.40);
  --gd-glass-strong: rgba(255, 255, 255, 0.62);
  --gd-glass-edge: rgba(255, 255, 255, 0.60);
  --gd-blur: blur(20px) saturate(120%);
  --gd-shadow: 0 16px 40px rgba(24, 58, 78, 0.20);
  --gd-accent: #d29a3f;
  --gd-accent-soft: rgba(210, 154, 63, 0.22);
  --gd-avatar-bg: linear-gradient(135deg, rgba(196, 226, 240, 0.85), rgba(255, 255, 255, 0.55));
  --gd-danger: #c1584f;
}

.companion-panel--window {
  --gd-ink: #58666e;
  --gd-ink-soft: rgba(88, 102, 110, 0.62);
  --gd-glass: rgba(255, 255, 255, 0.34);
  --gd-glass-strong: rgba(255, 255, 255, 0.58);
  --gd-glass-edge: rgba(255, 255, 255, 0.66);
  --gd-blur: blur(9px) saturate(112%);
  --gd-shadow: 0 14px 36px rgba(70, 86, 96, 0.18);
  --gd-accent: #7d93a0;
  --gd-accent-soft: rgba(125, 147, 160, 0.22);
  --gd-avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(238, 240, 238, 0.5));
  --gd-danger: #b3655e;
}

/* ===== 挂件（头像 + 气泡）===== */

.companion-dock--sea .companion-dock-handle,
.companion-dock--window .companion-dock-handle {
  border-color: var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  -webkit-backdrop-filter: var(--gd-blur);
  backdrop-filter: var(--gd-blur);
  box-shadow: var(--gd-shadow);
}

.companion-dock--sea .companion-dock-handle::after,
.companion-dock--window .companion-dock-handle::after {
  border-color: var(--gd-glass-edge);
}

.companion-dock--sea .companion-dock-avatar,
.companion-dock--window .companion-dock-avatar {
  background: var(--gd-avatar-bg);
}

.companion-dock--sea .companion-dock-initial,
.companion-dock--window .companion-dock-initial {
  color: var(--gd-ink);
  text-shadow: none;
}

.companion-dock--sea .companion-dock-dot,
.companion-dock--window .companion-dock-dot {
  border-color: var(--gd-glass-strong);
  background: rgba(255, 255, 255, 0.5);
}

.companion-dock--sea .companion-dock-dot.is-on,
.companion-dock--window .companion-dock-dot.is-on {
  background: #7fb08a;
  box-shadow: 0 0 0 2px rgba(127, 176, 138, 0.2);
}

.companion-dock--sea .companion-dock-bubble,
.companion-dock--window .companion-dock-bubble {
  border-color: var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  -webkit-backdrop-filter: var(--gd-blur);
  backdrop-filter: var(--gd-blur);
  color: var(--gd-ink);
  box-shadow: var(--gd-shadow);
}

.companion-dock--sea .companion-dock-bubble small,
.companion-dock--window .companion-dock-bubble small {
  color: var(--gd-ink-soft);
}

.companion-dock--sea .companion-dock-bubble-close,
.companion-dock--window .companion-dock-bubble-close {
  background: var(--gd-glass-strong);
  color: var(--gd-ink-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.companion-dock--sea .companion-dock-bubble-close:hover,
.companion-dock--sea .companion-dock-bubble-close:focus-visible,
.companion-dock--window .companion-dock-bubble-close:hover,
.companion-dock--window .companion-dock-bubble-close:focus-visible {
  background: var(--gd-glass-edge);
  color: var(--gd-ink);
}

/* ===== 面板 ===== */

.companion-panel--sea .companion-panel-backdrop,
.companion-panel--window .companion-panel-backdrop {
  background: rgba(20, 30, 38, 0.16);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.companion-panel--sea .companion-panel-card,
.companion-panel--window .companion-panel-card {
  border-color: var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  -webkit-backdrop-filter: var(--gd-blur);
  backdrop-filter: var(--gd-blur);
  box-shadow: var(--gd-shadow);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-close,
.companion-panel--window .companion-panel-close {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-head,
.companion-panel--window .companion-panel-head {
  border-bottom-color: var(--gd-glass-edge);
  border-bottom-style: solid;
}

.companion-panel--sea .companion-panel-avatar,
.companion-panel--window .companion-panel-avatar {
  background: var(--gd-avatar-bg);
}

.companion-panel--sea .companion-panel-avatar .companion-panel-initial,
.companion-panel--window .companion-panel-avatar .companion-panel-initial {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-head strong,
.companion-panel--window .companion-panel-head strong {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-head small,
.companion-panel--sea .companion-panel-tip,
.companion-panel--sea .companion-panel-section h3,
.companion-panel--window .companion-panel-head small,
.companion-panel--window .companion-panel-tip,
.companion-panel--window .companion-panel-section h3 {
  color: var(--gd-ink-soft);
}

.companion-panel--sea .companion-panel-warn,
.companion-panel--window .companion-panel-warn {
  border: 1px solid var(--gd-glass-edge);
  border-style: solid;
  background: var(--gd-glass);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-warn.is-error,
.companion-panel--window .companion-panel-warn.is-error {
  border-color: var(--gd-danger);
  background: rgba(193, 88, 79, 0.12);
  color: var(--gd-danger);
}

.companion-panel--sea .companion-panel-clock,
.companion-panel--window .companion-panel-clock {
  border-top-color: var(--gd-glass-edge);
  border-top-style: solid;
}

.companion-panel--sea .companion-panel-clock strong,
.companion-panel--window .companion-panel-clock strong {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-clock small,
.companion-panel--window .companion-panel-clock small {
  color: var(--gd-ink-soft);
}

.companion-panel--sea .companion-mini-player,
.companion-panel--window .companion-mini-player {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass);
}

.companion-panel--sea .companion-mini-progress,
.companion-panel--window .companion-mini-progress {
  background: rgba(255, 255, 255, 0.3);
}

.companion-panel--sea .companion-mini-progress span,
.companion-panel--window .companion-mini-progress span {
  background: var(--gd-accent);
}

.companion-panel--sea .companion-mini-info strong,
.companion-panel--window .companion-mini-info strong {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-mini-info small,
.companion-panel--window .companion-mini-info small {
  color: var(--gd-ink-soft);
}

.companion-panel--sea .companion-mini-btn,
.companion-panel--window .companion-mini-btn {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-mini-btn.is-main,
.companion-panel--window .companion-mini-btn.is-main {
  background: var(--gd-accent-soft);
  border-color: var(--gd-accent);
}

.companion-panel--sea .companion-mini-lyrics,
.companion-panel--window .companion-mini-lyrics {
  background: var(--gd-glass);
  color: var(--gd-ink-soft);
}

.companion-panel--sea .companion-mini-lyrics .is-current,
.companion-panel--window .companion-mini-lyrics .is-current {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-mini-queue button,
.companion-panel--window .companion-mini-queue button {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-mini-queue button.is-active,
.companion-panel--window .companion-mini-queue button.is-active {
  border-color: var(--gd-accent);
  background: var(--gd-accent-soft);
}

.companion-panel--sea .companion-mini-queue small,
.companion-panel--window .companion-mini-queue small {
  color: var(--gd-ink-soft);
}

.companion-panel--sea .companion-panel-foot,
.companion-panel--window .companion-panel-foot {
  border-top-color: var(--gd-glass-edge);
  border-top-style: solid;
}

.companion-panel--sea .companion-panel-bottom,
.companion-panel--window .companion-panel-bottom {
  border-top-color: var(--gd-glass-edge);
  border-top-style: solid;
  background: var(--gd-glass-strong);
  -webkit-backdrop-filter: var(--gd-blur);
  backdrop-filter: var(--gd-blur);
}

.companion-panel--sea .companion-context-card,
.companion-panel--window .companion-context-card {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass);
}

.companion-panel--sea .companion-context-head,
.companion-panel--window .companion-context-head {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-context-line,
.companion-panel--window .companion-context-line {
  background: var(--gd-glass-strong);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-outputs li.is-user .companion-context-line,
.companion-panel--window .companion-panel-outputs li.is-user .companion-context-line {
  background: var(--gd-accent-soft);
}

.companion-panel--sea .companion-panel-outputs em,
.companion-panel--window .companion-panel-outputs em {
  background: var(--gd-glass);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-replay-btn,
.companion-panel--window .companion-replay-btn {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-input-row input,
.companion-panel--window .companion-input-row input {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-input-btn,
.companion-panel--sea .companion-action-main,
.companion-panel--sea .companion-tool-btn,
.companion-panel--window .companion-input-btn,
.companion-panel--window .companion-action-main,
.companion-panel--window .companion-tool-btn {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass-strong);
  color: var(--gd-ink);
  box-shadow: none;
}

.companion-panel--sea .companion-input-btn.is-submit,
.companion-panel--window .companion-input-btn.is-submit {
  background: var(--gd-accent-soft);
  border-color: var(--gd-accent);
}

.companion-panel--sea .companion-action-main,
.companion-panel--window .companion-action-main {
  background: var(--gd-accent-soft);
  border-color: var(--gd-accent);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-tool-btn.is-danger,
.companion-panel--window .companion-tool-btn.is-danger {
  color: var(--gd-danger);
  background: rgba(193, 88, 79, 0.12);
}

/* ===== 面板内快捷设置区（复用 companion.css 的 toggle/kinds/freq/quiet 布局） ===== */

.companion-panel--sea .companion-quick-settings,
.companion-panel--window .companion-quick-settings {
  border-top: 1px solid var(--gd-glass-edge);
}

.companion-panel--sea .companion-panel-toggle,
.companion-panel--window .companion-panel-toggle {
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-freq-btn,
.companion-panel--window .companion-panel-freq-btn {
  border: 1px solid var(--gd-glass-edge);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-freq-btn.is-active,
.companion-panel--window .companion-panel-freq-btn.is-active {
  background: var(--gd-accent-soft);
  border-color: var(--gd-accent);
}

.companion-panel--sea .companion-panel-quiet input,
.companion-panel--window .companion-panel-quiet input {
  border: 1px solid var(--gd-glass-edge);
  background: var(--gd-glass);
  color: var(--gd-ink);
}

.companion-panel--sea .companion-panel-quiet small,
.companion-panel--window .companion-panel-quiet small,
.companion-panel--sea .companion-quick-settings-hint,
.companion-panel--window .companion-quick-settings-hint {
  color: var(--gd-ink-soft);
}