/* AgentBro — AgentBro-style Island Color Themes */

:root {
  --island-bg: #fff7ec;
  --island-card: #fffdf8;
  --island-card-hover: #f6ead8;
  --island-border: #ead7ba;
  --island-text: #111214;
  --island-text-secondary: #6f604d;
  --island-text-muted: #a38d6b;
  --island-code-bg: #17120d;
  --island-input-bg: #f6ead8;
  --island-btn-bg: #efdbb8;
  --island-btn-hover: #e6c997;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 16px 44px rgba(95, 56, 0, 0.13);
  --island-pill-shadow: 0 14px 34px rgba(88, 48, 0, 0.18);
  --island-accent: #f8a400;
  --island-border-style: none;
  --island-subtle: rgba(248, 164, 0, 0.08);
  --island-subtle-hover: rgba(248, 164, 0, 0.14);
  --island-scrollbar: rgba(159, 92, 0, 0.22);
  --island-scrollbar-hover: rgba(159, 92, 0, 0.34);
  --island-link: var(--island-accent);
  --island-markdown-text: var(--island-text);
  --island-markdown-muted: var(--island-text-secondary);
  --island-inline-code-bg: color-mix(in srgb, var(--island-accent) 10%, transparent);
  --island-inline-code-text: color-mix(in srgb, var(--island-text) 86%, var(--island-accent) 14%);
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 70%, var(--island-accent) 10%);
  --island-code-text: #f5efe6;
  --island-code-muted: #b8b0a6;
  --island-success: #22c55e;
  --island-success-text: #16a34a;
  --island-success-bg: rgba(34, 197, 94, 0.13);
  --island-warning: #f59e0b;
  --island-warning-text: #b45309;
  --island-warning-bg: rgba(245, 158, 11, 0.13);
  --island-danger: #ef4444;
  --island-danger-text: #dc2626;
  --island-danger-bg: rgba(239, 68, 68, 0.12);
  --island-info: #3b82f6;
  --island-info-text: #2563eb;
  --island-info-bg: rgba(59, 130, 246, 0.12);
  --island-on-accent: #ffffff;
  --island-accent-rgb: 248, 164, 0;
  --island-action-neutral-bg: color-mix(in srgb, var(--island-btn-bg) 76%, var(--island-card) 24%);
  --island-action-neutral-bg-hover: color-mix(in srgb, var(--island-btn-hover) 76%, var(--island-card) 24%);
  --island-action-neutral-border: color-mix(in srgb, var(--island-border) 72%, var(--island-text) 10%);
  --island-action-neutral-text: var(--island-text);
  --island-action-deny-bg: color-mix(in srgb, var(--island-danger) 10%, var(--island-card) 90%);
  --island-action-deny-bg-hover: color-mix(in srgb, var(--island-danger) 16%, var(--island-card) 84%);
  --island-action-deny-border: color-mix(in srgb, var(--island-danger) 38%, var(--island-border) 62%);
  --island-action-deny-text: color-mix(in srgb, var(--island-danger-text) 84%, var(--island-text) 16%);
  --island-action-allow-bg: color-mix(in srgb, var(--island-success) 16%, var(--island-card) 84%);
  --island-action-allow-bg-hover: color-mix(in srgb, var(--island-success) 24%, var(--island-card) 76%);
  --island-action-allow-border: color-mix(in srgb, var(--island-success) 44%, var(--island-border) 56%);
  --island-action-allow-text: color-mix(in srgb, var(--island-success-text) 80%, var(--island-text) 20%);
  --island-action-always-bg: color-mix(in srgb, var(--island-info) 15%, var(--island-card) 85%);
  --island-action-always-bg-hover: color-mix(in srgb, var(--island-info) 23%, var(--island-card) 77%);
  --island-action-always-border: color-mix(in srgb, var(--island-info) 42%, var(--island-border) 58%);
  --island-action-always-text: color-mix(in srgb, var(--island-info-text) 82%, var(--island-text) 18%);
  --island-action-auto-bg: color-mix(in srgb, var(--island-danger) 16%, var(--island-card) 84%);
  --island-action-auto-bg-hover: color-mix(in srgb, var(--island-danger) 24%, var(--island-card) 76%);
  --island-action-auto-border: color-mix(in srgb, var(--island-danger) 48%, var(--island-border) 52%);
  --island-action-auto-text: var(--island-action-deny-text);
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(255, 253, 248, 0.9);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #f4dfbd;
  --chat-assistant-bg: #fffdf8;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #766753;
  --status-working: #f8a400;
  --status-error: #ef4444;
  --status-done: #18b981;
  --status-thinking: #9f5c00;
}

html[data-island-color-theme="ink-amber"] {
  --island-bg: #f4eddf;
  --island-card: #fffaf2;
  --island-card-hover: #eee1cf;
  --island-border: #d7c3a5;
  --island-text: #1f2328;
  --island-text-secondary: #5f5548;
  --island-text-muted: #8d7c66;
  --island-code-bg: #211b15;
  --island-input-bg: #f0e3ce;
  --island-btn-bg: #e7d4b6;
  --island-btn-hover: #d9bd93;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 18px 44px rgba(84, 54, 24, 0.14);
  --island-pill-shadow: 0 14px 34px rgba(70, 45, 20, 0.18);
  --island-accent: #9a5f12;
  --island-accent-rgb: 154, 95, 18;
  --island-border-style: none;
  --island-subtle: rgba(154, 95, 18, 0.10);
  --island-subtle-hover: rgba(154, 95, 18, 0.16);
  --island-scrollbar: rgba(95, 68, 34, 0.24);
  --island-scrollbar-hover: rgba(95, 68, 34, 0.36);
  --island-link: #815018;
  --island-markdown-text: var(--island-text);
  --island-markdown-muted: var(--island-text-secondary);
  --island-inline-code-bg: rgba(154, 95, 18, 0.12);
  --island-inline-code-text: #5d3f1c;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 62%, var(--island-accent) 18%);
  --island-code-text: #f7efe3;
  --island-code-muted: #c8b9a5;
  --island-success: #26724a;
  --island-success-text: #1f643f;
  --island-success-bg: rgba(38, 114, 74, 0.13);
  --island-warning: #9a5f12;
  --island-warning-text: #7c4a10;
  --island-warning-bg: rgba(154, 95, 18, 0.14);
  --island-danger: #a34537;
  --island-danger-text: #8c352b;
  --island-danger-bg: rgba(163, 69, 55, 0.12);
  --island-info: #335f7d;
  --island-info-text: #2e536e;
  --island-info-bg: rgba(51, 95, 125, 0.12);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(255, 253, 248, 0.9);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #ead4ae;
  --chat-assistant-bg: #fffaf2;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #7c6d5b;
  --status-working: #9a5f12;
  --status-error: #a34537;
  --status-done: #26724a;
  --status-thinking: #695783;
}

html[data-island-color-theme="ink-amber"] .color-theme-card--active,
html[data-island-color-theme="ink-amber"] .claude-hook-lab__island-theme[data-active="true"] {
  border-color: var(--island-accent);
  background: rgba(var(--island-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--island-accent-rgb), 0.48);
  color: var(--island-text);
}

html[data-island-color-theme="ink-amber"] .color-theme-card:hover,
html[data-island-color-theme="ink-amber"] .claude-hook-lab__island-theme:hover {
  border-color: rgba(var(--island-accent-rgb), 0.42);
}

html[data-island-color-theme="ink-amber"] .color-theme-card,
html[data-island-color-theme="ink-amber"] .claude-hook-lab__island-theme {
  border-color: color-mix(in srgb, var(--island-border) 82%, var(--island-accent) 8%);
  background: color-mix(in srgb, var(--island-card) 72%, var(--island-bg) 28%);
  color: var(--island-text);
}

html[data-island-color-theme="ink-amber"] .color-theme-card__tag,
html[data-island-color-theme="ink-amber"] .claude-hook-lab__island-theme-tag {
  color: var(--island-text-muted);
}

html[data-island-color-theme="ink-amber"] .notch-panel {
  background:
    radial-gradient(120% 90% at 50% -42%, rgba(255, 250, 242, 0.74), transparent 54%),
    linear-gradient(180deg, var(--island-card) 0%, var(--island-bg) 48%, #eee2cf 100%);
  box-shadow:
    var(--island-shadow),
    inset 0 -1px 0 rgba(74, 47, 20, 0.08);
}

html[data-island-color-theme="ink-amber"] .notch-panel::after {
  background: radial-gradient(80% 110% at 50% 100%, rgba(var(--island-accent-rgb), 0.08), transparent 62%);
}

html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="micro"] {
  background: linear-gradient(180deg, #fffaf2 0%, var(--island-bg) 100%);
}

html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="micro"],
html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="compact"],
html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="hover"],
html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="expanded"],
html[data-island-color-theme="ink-amber"] .notch-panel[data-island-state="feedback"] {
  box-shadow: inset 0 -1px 0 rgba(74, 47, 20, 0.08);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__icon-btn {
  background: rgba(var(--island-accent-rgb), 0.08);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__icon-btn:hover {
  background: rgba(var(--island-accent-rgb), 0.16);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar--expanded .collapsed-bar__status-row {
  border-bottom-color: rgba(74, 47, 20, 0.12);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar--shimmer .collapsed-bar__main::after {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--island-accent-rgb), 0.13) 50%, transparent 100%);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__counter-pills {
  border-color: rgba(95, 68, 34, 0.16);
  background: rgba(var(--island-accent-rgb), 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.72);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__counter-pill {
  border-right-color: rgba(95, 68, 34, 0.12);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__counter-pill--active {
  background: rgba(var(--island-accent-rgb), 0.12);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__counter-pill--act,
html[data-island-color-theme="ink-amber"] .hover-list__tool-count--add,
html[data-island-color-theme="ink-amber"] .hover-list__task-icon--done,
html[data-island-color-theme="ink-amber"] .hover-list__hook-notice--restored {
  color: var(--island-success-text);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__counter-pill--wait,
html[data-island-color-theme="ink-amber"] .collapsed-bar__unattended--amber,
html[data-island-color-theme="ink-amber"] .collapsed-bar__yolo-badge,
html[data-island-color-theme="ink-amber"] .hover-list__yolo-badge,
html[data-island-color-theme="ink-amber"] .hover-list__hook-notice--rate_limited,
html[data-island-color-theme="ink-amber"] .hover-list__error-icon,
html[data-island-color-theme="ink-amber"] .hover-list__error-text,
html[data-island-color-theme="ink-amber"] .hover-list__state-ribbon--warning {
  color: var(--island-warning-text);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__error-badge,
html[data-island-color-theme="ink-amber"] .collapsed-bar__unattended--red,
html[data-island-color-theme="ink-amber"] .hover-list__tool-count--del {
  color: var(--island-danger-text);
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__tool-label,
html[data-island-color-theme="ink-amber"] .collapsed-bar__tool-status,
html[data-island-color-theme="ink-amber"] .hover-list__tool-label {
  color: #9d5438;
}

html[data-island-color-theme="ink-amber"] .collapsed-bar__tool-target-name,
html[data-island-color-theme="ink-amber"] .hover-list__tool-target-name {
  color: var(--island-info-text);
}

html[data-island-color-theme="ink-amber"] .hover-list__source-badge,
html[data-island-color-theme="ink-amber"] .hover-list__notice-icon,
html[data-island-color-theme="ink-amber"] .hover-list__notice-action,
html[data-island-color-theme="ink-amber"] .hover-list__empty-agents span {
  background: rgba(var(--island-accent-rgb), 0.10);
  color: var(--island-text-secondary);
}

html[data-island-color-theme="ink-amber"] .hover-list__notice-action:hover {
  background: rgba(var(--island-accent-rgb), 0.17);
}

html[data-island-color-theme="ink-amber"] .hover-list__notice--terminal_approval .hover-list__notice-icon,
html[data-island-color-theme="ink-amber"] .hover-list__notice--terminal_question .hover-list__notice-icon {
  color: var(--island-warning-text);
}

html[data-island-color-theme="ink-amber"] .hover-list__notice--restart .hover-list__notice-icon,
html[data-island-color-theme="ink-amber"] .hover-list__notice--trust .hover-list__notice-icon {
  color: var(--island-info-text);
}

html[data-island-color-theme="ink-amber"] .hover-list__notice--compact_complete .hover-list__notice-icon,
html[data-island-color-theme="ink-amber"] .hover-list__state-ribbon--compact,
html[data-island-color-theme="ink-amber"] .hover-list__tool-label--compact {
  color: #695783;
}

html[data-island-color-theme="ink-amber"] .hover-list__context-menu {
  background: color-mix(in srgb, var(--island-card) 88%, var(--island-bg) 12%);
}

html[data-island-color-theme="ink-amber"] .hover-list__active-tool-diff .diff-view,
html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-diff .diff-view {
  border-color: color-mix(in srgb, var(--island-border) 76%, var(--island-accent) 14%) !important;
  background: color-mix(in srgb, var(--island-code-bg) 94%, #5a3700 6%) !important;
}

html[data-island-color-theme="ink-amber"] .hover-list__active-tool-diff .diff-view__header,
html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-diff .diff-view__header {
  background: rgba(var(--island-accent-rgb), 0.08);
}

html[data-island-color-theme="ink-amber"] .hover-list__inline-perm {
  border-color: color-mix(in srgb, var(--island-border) 72%, var(--island-warning) 18%);
  background: color-mix(in srgb, var(--island-card) 86%, var(--island-warning) 7%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.72);
}

html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-preview {
  border-color: color-mix(in srgb, var(--island-border) 84%, transparent);
  background: color-mix(in srgb, var(--island-card-hover) 78%, transparent);
}

html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-alert,
html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-tool,
html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-tool-name {
  color: var(--island-warning-text);
}

html[data-island-color-theme="ink-amber"] .hover-list__inline-perm-tool-name {
  background: var(--island-warning-bg);
}

html[data-island-color-theme="ink-amber"] .hover-list__inline-plan-perms {
  background: color-mix(in srgb, var(--island-card) 86%, var(--inline-plan-accent) 6%);
  box-shadow: inset 0 1px 0 rgba(255, 253, 248, 0.72);
}

html[data-island-color-theme="ink-amber"] .hover-list__empty {
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--island-accent-rgb), 0.12), transparent 23%),
    linear-gradient(180deg, rgba(var(--island-accent-rgb), 0.06), transparent 52%);
}

html[data-island-color-theme="ink-amber"] .hover-list__empty-orbit::before,
html[data-island-color-theme="ink-amber"] .hover-list__empty-orbit::after,
html[data-island-color-theme="ink-amber"] .hover-list__empty-agents span {
  border-color: rgba(95, 68, 34, 0.16);
}

html[data-island-color-theme="midnight"] {
  --island-bg: #000000;
  --island-card: #0a0a0a;
  --island-card-hover: #18181c;
  --island-border: #1a1a1a;
  --island-text: #e0e0e0;
  --island-text-secondary: #888888;
  --island-text-muted: #666666;
  --island-code-bg: #1a1a1a;
  --island-input-bg: #0d0d0d;
  --island-btn-bg: #2a2a2e;
  --island-btn-hover: #333333;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --island-pill-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
  --island-accent: #7b78ff;
  --island-border-style: none;
  --island-subtle: rgba(255, 255, 255, 0.05);
  --island-subtle-hover: rgba(255, 255, 255, 0.08);
  --island-scrollbar: rgba(255, 255, 255, 0.15);
  --island-scrollbar-hover: rgba(255, 255, 255, 0.25);
  --island-link: #aaa8ff;
  --island-inline-code-text: #ddd7ff;
  --island-code-text: #f3f4f6;
  --island-code-muted: #a6adba;
  --island-success-text: #86efac;
  --island-warning-text: #fbbf24;
  --island-danger-text: #f87171;
  --island-info-text: #93c5fd;
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 76%, var(--island-text) 24%);
  --island-brand-footer-border: rgba(255, 255, 255, 0.075);
  --island-brand-logo-light-opacity: 0;
  --island-brand-logo-dark-opacity: 1;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(0, 0, 0, 0.9);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #111827;
  --chat-assistant-bg: var(--island-card);
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #666666;
  --status-working: #60a5fa;
  --status-error: #ef4444;
  --status-done: #4ade80;
  --status-thinking: #a78bfa;
}

html[data-island-color-theme="frosted-glass"] {
  --island-bg: #eef2f8;
  --island-card: #fbfcff;
  --island-card-hover: #e7ecf5;
  --island-border: #cbd4e4;
  --island-text: #202633;
  --island-text-secondary: #5f6878;
  --island-text-muted: #8b95a6;
  --island-code-bg: #172033;
  --island-input-bg: #e7ecf5;
  --island-btn-bg: #dfe6f1;
  --island-btn-hover: #d2dbe9;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 18px 48px rgba(51, 65, 92, 0.12);
  --island-pill-shadow: 0 14px 34px rgba(48, 62, 92, 0.16);
  --island-accent: #3f46ff;
  --island-accent-rgb: 63, 70, 255;
  --island-border-style: none;
  --island-subtle: rgba(63, 70, 255, 0.07);
  --island-subtle-hover: rgba(63, 70, 255, 0.12);
  --island-scrollbar: rgba(62, 74, 96, 0.18);
  --island-scrollbar-hover: rgba(62, 74, 96, 0.28);
  --island-link: #343be0;
  --island-inline-code-bg: rgba(63, 70, 255, 0.10);
  --island-inline-code-text: #30368f;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 64%, var(--island-accent) 18%);
  --island-code-text: #eef4ff;
  --island-code-muted: #aeb9cc;
  --island-success: #2f8f62;
  --island-success-text: #23744f;
  --island-success-bg: rgba(47, 143, 98, 0.13);
  --island-warning: #b06a13;
  --island-warning-text: #8a4f0d;
  --island-warning-bg: rgba(176, 106, 19, 0.13);
  --island-danger: #b64a5a;
  --island-danger-text: #983744;
  --island-danger-bg: rgba(182, 74, 90, 0.12);
  --island-info: #3f46ff;
  --island-info-text: #343be0;
  --island-info-bg: rgba(63, 70, 255, 0.11);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(246, 247, 249, 0.86);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #e2e8f6;
  --chat-assistant-bg: #fbfcff;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #7d8797;
  --status-working: #3f46ff;
  --status-error: #b64a5a;
  --status-done: #2f8f62;
  --status-thinking: #6366f1;
}

html[data-island-color-theme="frosted-glass"] .color-theme-card,
html[data-island-color-theme="frosted-glass"] .claude-hook-lab__island-theme {
  border-color: color-mix(in srgb, var(--island-border) 78%, var(--island-accent) 10%);
  background: color-mix(in srgb, var(--island-card) 74%, var(--island-bg) 26%);
  color: var(--island-text);
}

html[data-island-color-theme="frosted-glass"] .color-theme-card:hover,
html[data-island-color-theme="frosted-glass"] .claude-hook-lab__island-theme:hover {
  border-color: rgba(var(--island-accent-rgb), 0.36);
}

html[data-island-color-theme="frosted-glass"] .color-theme-card--active,
html[data-island-color-theme="frosted-glass"] .claude-hook-lab__island-theme[data-active="true"] {
  border-color: var(--island-accent);
  background: rgba(var(--island-accent-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--island-accent-rgb), 0.42);
}

html[data-island-color-theme="frosted-glass"] .color-theme-card__tag,
html[data-island-color-theme="frosted-glass"] .claude-hook-lab__island-theme-tag {
  color: var(--island-text-muted);
}

html[data-island-color-theme="frosted-glass"] .notch-panel {
  background:
    radial-gradient(115% 82% at 50% -34%, rgba(255, 255, 255, 0.88), transparent 56%),
    linear-gradient(180deg, rgba(251, 252, 255, 0.96) 0%, rgba(238, 242, 248, 0.92) 100%);
  box-shadow:
    var(--island-shadow),
    inset 0 -1px 0 rgba(52, 62, 82, 0.08);
}

html[data-island-color-theme="frosted-glass"] .notch-panel::after {
  background: radial-gradient(80% 110% at 50% 100%, rgba(var(--island-accent-rgb), 0.07), transparent 62%);
}

html[data-island-color-theme="frosted-glass"] .notch-panel[data-island-state="micro"] {
  background: linear-gradient(180deg, rgba(251, 252, 255, 0.98), rgba(238, 242, 248, 0.94));
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__icon-btn,
html[data-island-color-theme="frosted-glass"] .hover-list__source-badge,
html[data-island-color-theme="frosted-glass"] .hover-list__notice-icon,
html[data-island-color-theme="frosted-glass"] .hover-list__notice-action {
  background: rgba(var(--island-accent-rgb), 0.08);
  color: var(--island-text-secondary);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__icon-btn:hover,
html[data-island-color-theme="frosted-glass"] .hover-list__notice-action:hover {
  background: rgba(var(--island-accent-rgb), 0.14);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__counter-pills {
  border-color: rgba(62, 74, 96, 0.14);
  background: rgba(var(--island-accent-rgb), 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__counter-pill--active {
  background: rgba(var(--island-accent-rgb), 0.10);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__counter-pill--act,
html[data-island-color-theme="frosted-glass"] .hover-list__tool-count--add,
html[data-island-color-theme="frosted-glass"] .hover-list__task-icon--done,
html[data-island-color-theme="frosted-glass"] .hover-list__hook-notice--restored {
  color: var(--island-success-text);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__counter-pill--wait,
html[data-island-color-theme="frosted-glass"] .collapsed-bar__unattended--amber,
html[data-island-color-theme="frosted-glass"] .collapsed-bar__yolo-badge,
html[data-island-color-theme="frosted-glass"] .hover-list__yolo-badge,
html[data-island-color-theme="frosted-glass"] .hover-list__hook-notice--rate_limited,
html[data-island-color-theme="frosted-glass"] .hover-list__error-icon,
html[data-island-color-theme="frosted-glass"] .hover-list__error-text,
html[data-island-color-theme="frosted-glass"] .hover-list__state-ribbon--warning {
  color: var(--island-warning-text);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__error-badge,
html[data-island-color-theme="frosted-glass"] .collapsed-bar__unattended--red,
html[data-island-color-theme="frosted-glass"] .hover-list__tool-count--del {
  color: var(--island-danger-text);
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__tool-label,
html[data-island-color-theme="frosted-glass"] .collapsed-bar__tool-status,
html[data-island-color-theme="frosted-glass"] .hover-list__tool-label {
  color: #5862b2;
}

html[data-island-color-theme="frosted-glass"] .collapsed-bar__tool-target-name,
html[data-island-color-theme="frosted-glass"] .hover-list__tool-target-name,
html[data-island-color-theme="frosted-glass"] .hover-list__notice--restart .hover-list__notice-icon,
html[data-island-color-theme="frosted-glass"] .hover-list__notice--trust .hover-list__notice-icon {
  color: var(--island-info-text);
}

html[data-island-color-theme="frosted-glass"] .hover-list__context-menu {
  background: color-mix(in srgb, var(--island-card) 84%, var(--island-bg) 16%);
}

html[data-island-color-theme="frosted-glass"] .hover-list__active-tool-diff .diff-view,
html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm-diff .diff-view {
  border-color: color-mix(in srgb, var(--island-border) 74%, var(--island-accent) 14%) !important;
  background: color-mix(in srgb, var(--island-code-bg) 92%, #27305c 8%) !important;
}

html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm {
  border-color: color-mix(in srgb, var(--island-border) 74%, var(--island-warning) 16%);
  background: color-mix(in srgb, var(--island-card) 88%, var(--island-warning) 5%);
}

html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm-alert,
html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm-tool,
html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm-tool-name {
  color: var(--island-warning-text);
}

html[data-island-color-theme="frosted-glass"] .hover-list__inline-perm-tool-name {
  background: var(--island-warning-bg);
}

html[data-island-color-theme="frosted-glass"] .hover-list__empty {
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--island-accent-rgb), 0.10), transparent 23%),
    linear-gradient(180deg, rgba(var(--island-accent-rgb), 0.05), transparent 52%);
}

html[data-island-color-theme="apple"] {
  --island-bg: #f5f5f7;
  --island-card: #ffffff;
  --island-card-hover: #f0f0f2;
  --island-border: rgba(0, 0, 0, 0.08);
  --island-text: #1d1d1f;
  --island-text-secondary: #6e6e73;
  --island-text-muted: #aeaeb2;
  --island-code-bg: #1c1c1e;
  --island-input-bg: #f5f5f7;
  --island-btn-bg: #e8e8ed;
  --island-btn-hover: #dddde2;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
  --island-pill-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
  --island-accent: #007aff;
  --island-accent-rgb: 0, 122, 255;
  --island-border-style: none;
  --island-subtle: rgba(0, 0, 0, 0.05);
  --island-subtle-hover: rgba(0, 0, 0, 0.08);
  --island-scrollbar: rgba(0, 0, 0, 0.16);
  --island-scrollbar-hover: rgba(0, 0, 0, 0.24);
  --island-link: #006adc;
  --island-inline-code-bg: rgba(0, 122, 255, 0.10);
  --island-inline-code-text: #075eb7;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: rgba(0, 0, 0, 0.12);
  --island-code-text: #f4f6fb;
  --island-code-muted: #a9b1be;
  --island-success: #248a45;
  --island-success-text: #1f7a3d;
  --island-success-bg: rgba(36, 138, 69, 0.12);
  --island-warning: #b9680d;
  --island-warning-text: #965309;
  --island-warning-bg: rgba(185, 104, 13, 0.12);
  --island-danger: #d94338;
  --island-danger-text: #b9362d;
  --island-danger-bg: rgba(217, 67, 56, 0.11);
  --island-info: #007aff;
  --island-info-text: #006adc;
  --island-info-bg: rgba(0, 122, 255, 0.10);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #eaf2ff;
  --chat-assistant-bg: #ffffff;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #8e8e93;
  --status-working: #007aff;
  --status-error: #d94338;
  --status-done: #248a45;
  --status-thinking: #5856d6;
  --theme-tool-label: #2f65a8;
}

html[data-island-color-theme="smoke"] {
  --island-bg: #e8e8ec;
  --island-card: #f4f4f6;
  --island-card-hover: #e0e0e4;
  --island-border: #d0d0d6;
  --island-text: #2a2a30;
  --island-text-secondary: #6a6a74;
  --island-text-muted: #8a8a94;
  --island-code-bg: #1e1e22;
  --island-input-bg: #e0e0e4;
  --island-btn-bg: #d4d4da;
  --island-btn-hover: #c6c6ce;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --island-pill-shadow: 0 14px 32px rgba(42, 42, 48, 0.12);
  --island-accent: #64748b;
  --island-accent-rgb: 100, 116, 139;
  --island-border-style: none;
  --island-subtle: rgba(0, 0, 0, 0.05);
  --island-subtle-hover: rgba(0, 0, 0, 0.08);
  --island-scrollbar: rgba(0, 0, 0, 0.16);
  --island-scrollbar-hover: rgba(0, 0, 0, 0.24);
  --island-link: #4f6278;
  --island-inline-code-bg: rgba(100, 116, 139, 0.13);
  --island-inline-code-text: #435267;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 74%, var(--island-accent) 14%);
  --island-code-text: #eef0f5;
  --island-code-muted: #b1b6c1;
  --island-success: #3f7c5c;
  --island-success-text: #326c4d;
  --island-success-bg: rgba(63, 124, 92, 0.13);
  --island-warning: #8d6425;
  --island-warning-text: #76521d;
  --island-warning-bg: rgba(141, 100, 37, 0.13);
  --island-danger: #9b4b52;
  --island-danger-text: #833d44;
  --island-danger-bg: rgba(155, 75, 82, 0.12);
  --island-info: #526a86;
  --island-info-text: #465c74;
  --island-info-bg: rgba(82, 106, 134, 0.12);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(244, 244, 246, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #dde2ea;
  --chat-assistant-bg: #f4f4f6;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #7b7f89;
  --status-working: #526a86;
  --status-error: #9b4b52;
  --status-done: #3f7c5c;
  --status-thinking: #6c5f88;
  --theme-tool-label: #596575;
}

html[data-island-color-theme="ocean-mist"] {
  --island-bg: #e8eef5;
  --island-card: #f2f6fb;
  --island-card-hover: #dde6f0;
  --island-border: #c8d4e0;
  --island-text: #242e3a;
  --island-text-secondary: #5a6e82;
  --island-text-muted: #8294a6;
  --island-code-bg: #1a2430;
  --island-input-bg: #dde6f0;
  --island-btn-bg: #d0dae6;
  --island-btn-hover: #c0ceda;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --island-pill-shadow: 0 14px 32px rgba(20, 72, 116, 0.13);
  --island-accent: #0284c7;
  --island-accent-rgb: 2, 132, 199;
  --island-border-style: none;
  --island-subtle: rgba(2, 132, 199, 0.07);
  --island-subtle-hover: rgba(2, 132, 199, 0.11);
  --island-scrollbar: rgba(2, 132, 199, 0.20);
  --island-scrollbar-hover: rgba(2, 132, 199, 0.30);
  --island-link: #036c9d;
  --island-inline-code-bg: rgba(2, 132, 199, 0.11);
  --island-inline-code-text: #075f8b;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 66%, var(--island-accent) 18%);
  --island-code-text: #eef8ff;
  --island-code-muted: #a8b9c8;
  --island-success: #2b7b68;
  --island-success-text: #236b5a;
  --island-success-bg: rgba(43, 123, 104, 0.13);
  --island-warning: #a26518;
  --island-warning-text: #844f12;
  --island-warning-bg: rgba(162, 101, 24, 0.13);
  --island-danger: #a94856;
  --island-danger-text: #913945;
  --island-danger-bg: rgba(169, 72, 86, 0.12);
  --island-info: #0284c7;
  --island-info-text: #036c9d;
  --island-info-bg: rgba(2, 132, 199, 0.12);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(242, 246, 251, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #dceaf7;
  --chat-assistant-bg: #f2f6fb;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #8294a6;
  --status-working: #0284c7;
  --status-error: #a94856;
  --status-done: #2b7b68;
  --status-thinking: #4f66a6;
  --theme-tool-label: #256f9c;
}

html[data-island-color-theme="warm-paper"] {
  --island-bg: #f2efe8;
  --island-card: #faf7f0;
  --island-card-hover: #ede9df;
  --island-border: #dcd6c8;
  --island-text: #33302a;
  --island-text-secondary: #7a7468;
  --island-text-muted: #a09888;
  --island-code-bg: #2a2520;
  --island-input-bg: #ede9df;
  --island-btn-bg: #e2ddd2;
  --island-btn-hover: #d6d0c2;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --island-pill-shadow: 0 14px 32px rgba(92, 64, 40, 0.12);
  --island-accent: #d97706;
  --island-accent-rgb: 217, 119, 6;
  --island-border-style: none;
  --island-subtle: rgba(217, 119, 6, 0.07);
  --island-subtle-hover: rgba(217, 119, 6, 0.11);
  --island-scrollbar: rgba(217, 119, 6, 0.18);
  --island-scrollbar-hover: rgba(217, 119, 6, 0.28);
  --island-link: #a65d0a;
  --island-inline-code-bg: rgba(217, 119, 6, 0.11);
  --island-inline-code-text: #7a501d;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 68%, var(--island-accent) 16%);
  --island-code-text: #f7f0e5;
  --island-code-muted: #c2b7a7;
  --island-success: #4f7d4c;
  --island-success-text: #416b3f;
  --island-success-bg: rgba(79, 125, 76, 0.13);
  --island-warning: #b86517;
  --island-warning-text: #925012;
  --island-warning-bg: rgba(184, 101, 23, 0.13);
  --island-danger: #a35245;
  --island-danger-text: #8c4439;
  --island-danger-bg: rgba(163, 82, 69, 0.12);
  --island-info: #4c6f8f;
  --island-info-text: #3f5f7c;
  --island-info-bg: rgba(76, 111, 143, 0.12);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(250, 247, 240, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #f0e8d9;
  --chat-assistant-bg: #faf7f0;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #918b80;
  --status-working: #b86517;
  --status-error: #a35245;
  --status-done: #4f7d4c;
  --status-thinking: #7f6394;
  --theme-tool-label: #8a6137;
}

html[data-island-color-theme="soft-lavender"] {
  --island-bg: #eeedf6;
  --island-card: #f8f7fc;
  --island-card-hover: #e8e6f2;
  --island-border: #d4d2e0;
  --island-text: #2e2c38;
  --island-text-secondary: #6e6a82;
  --island-text-muted: #9490a6;
  --island-code-bg: #1e1c2e;
  --island-input-bg: #e8e6f2;
  --island-btn-bg: #dddbe8;
  --island-btn-hover: #d0cee0;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  --island-pill-shadow: 0 14px 32px rgba(70, 58, 110, 0.13);
  --island-accent: #6366f1;
  --island-accent-rgb: 99, 102, 241;
  --island-border-style: none;
  --island-subtle: rgba(99, 102, 241, 0.07);
  --island-subtle-hover: rgba(99, 102, 241, 0.11);
  --island-scrollbar: rgba(99, 102, 241, 0.18);
  --island-scrollbar-hover: rgba(99, 102, 241, 0.28);
  --island-link: #5655d6;
  --island-inline-code-bg: rgba(99, 102, 241, 0.11);
  --island-inline-code-text: #524a98;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: color-mix(in srgb, var(--island-border) 66%, var(--island-accent) 18%);
  --island-code-text: #f1efff;
  --island-code-muted: #b9b4cc;
  --island-success: #4d8262;
  --island-success-text: #3f7053;
  --island-success-bg: rgba(77, 130, 98, 0.13);
  --island-warning: #9e6a21;
  --island-warning-text: #805519;
  --island-warning-bg: rgba(158, 106, 33, 0.13);
  --island-danger: #a24f68;
  --island-danger-text: #8a3f57;
  --island-danger-bg: rgba(162, 79, 104, 0.12);
  --island-info: #6366f1;
  --island-info-text: #5655d6;
  --island-info-bg: rgba(99, 102, 241, 0.12);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(248, 247, 252, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #e7e5f4;
  --chat-assistant-bg: #f8f7fc;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #8c879f;
  --status-working: #6366f1;
  --status-error: #a24f68;
  --status-done: #4d8262;
  --status-thinking: #8b5fb8;
  --theme-tool-label: #6a5db0;
}

html[data-island-color-theme="system"] {
  --island-bg: #f5f5f7;
  --island-card: #ffffff;
  --island-card-hover: #f0f0f2;
  --island-border: rgba(0, 0, 0, 0.08);
  --island-text: #1d1d1f;
  --island-text-secondary: #6e6e73;
  --island-text-muted: #aeaeb2;
  --island-code-bg: #1c1c1e;
  --island-input-bg: #f5f5f7;
  --island-btn-bg: #e8e8ed;
  --island-btn-hover: #dddde2;
  --island-button-bg: var(--island-btn-bg);
  --island-button-hover: var(--island-btn-hover);
  --island-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
  --island-pill-shadow: 0 16px 36px rgba(0, 0, 0, 0.13);
  --island-accent: #007aff;
  --island-accent-rgb: 0, 122, 255;
  --island-border-style: none;
  --island-subtle: rgba(0, 0, 0, 0.05);
  --island-subtle-hover: rgba(0, 0, 0, 0.08);
  --island-scrollbar: rgba(0, 0, 0, 0.16);
  --island-scrollbar-hover: rgba(0, 0, 0, 0.24);
  --island-link: #006adc;
  --island-inline-code-bg: rgba(0, 122, 255, 0.10);
  --island-inline-code-text: #075eb7;
  --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
  --island-code-border: rgba(0, 0, 0, 0.12);
  --island-code-text: #f4f6fb;
  --island-code-muted: #a9b1be;
  --island-success: #248a45;
  --island-success-text: #1f7a3d;
  --island-success-bg: rgba(36, 138, 69, 0.12);
  --island-warning: #b9680d;
  --island-warning-text: #965309;
  --island-warning-bg: rgba(185, 104, 13, 0.12);
  --island-danger: #d94338;
  --island-danger-text: #b9362d;
  --island-danger-bg: rgba(217, 67, 56, 0.11);
  --island-info: #007aff;
  --island-info-text: #006adc;
  --island-info-bg: rgba(0, 122, 255, 0.10);
  --island-on-accent: #ffffff;
  --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 82%, var(--island-text) 18%);
  --island-brand-footer-border: color-mix(in srgb, var(--island-text) 10%, transparent);
  --island-brand-logo-light-opacity: 1;
  --island-brand-logo-dark-opacity: 0;
  --bg-primary: var(--island-bg);
  --bg-secondary: var(--island-card);
  --bg-glass: rgba(255, 255, 255, 0.88);
  --text-primary: var(--island-text);
  --text-secondary: var(--island-text-secondary);
  --text-muted: var(--island-text-muted);
  --accent: var(--island-accent);
  --border: var(--island-border);
  --shadow: var(--island-shadow);
  --chat-user-bg: #eaf2ff;
  --chat-assistant-bg: #ffffff;
  --badge-bg: var(--island-btn-bg);
  --badge-text: var(--island-text);
  --status-idle: #8e8e93;
  --status-working: #007aff;
  --status-error: #d94338;
  --status-done: #248a45;
  --status-thinking: #5856d6;
  --theme-tool-label: #2f65a8;
}

@media (prefers-color-scheme: dark) {
  html[data-island-color-theme="system"] {
    --island-bg: #000000;
    --island-card: #0a0a0a;
    --island-card-hover: #18181c;
    --island-border: #1a1a1a;
    --island-text: #e0e0e0;
    --island-text-secondary: #888888;
    --island-text-muted: #666666;
    --island-code-bg: #1a1a1a;
    --island-input-bg: #0d0d0d;
    --island-btn-bg: #2a2a2e;
    --island-btn-hover: #333333;
    --island-button-bg: var(--island-btn-bg);
    --island-button-hover: var(--island-btn-hover);
    --island-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --island-pill-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    --island-accent: #7b78ff;
    --island-accent-rgb: 123, 120, 255;
    --island-border-style: none;
    --island-subtle: rgba(255, 255, 255, 0.05);
    --island-subtle-hover: rgba(255, 255, 255, 0.08);
    --island-scrollbar: rgba(255, 255, 255, 0.15);
    --island-scrollbar-hover: rgba(255, 255, 255, 0.25);
    --island-code-block-bg: color-mix(in srgb, var(--island-code-bg) 92%, #000 8%);
    --island-code-border: rgba(255, 255, 255, 0.10);
    --island-success: #4ade80;
    --island-success-bg: rgba(74, 222, 128, 0.14);
    --island-warning: #fbbf24;
    --island-warning-bg: rgba(251, 191, 36, 0.14);
    --island-danger: #f87171;
    --island-danger-bg: rgba(248, 113, 113, 0.14);
    --island-info: #93c5fd;
    --island-info-bg: rgba(147, 197, 253, 0.14);
    --island-brand-slogan: color-mix(in srgb, var(--island-text-secondary) 76%, var(--island-text) 24%);
    --island-brand-footer-border: rgba(255, 255, 255, 0.075);
    --island-brand-logo-light-opacity: 0;
    --island-brand-logo-dark-opacity: 1;
    --island-link: #aaa8ff;
    --island-inline-code-text: #ddd7ff;
    --island-code-text: #f3f4f6;
    --island-code-muted: #a6adba;
    --island-success-text: #86efac;
    --island-warning-text: #fbbf24;
    --island-danger-text: #f87171;
    --island-info-text: #93c5fd;
    --island-on-accent: #ffffff;
    --bg-primary: var(--island-bg);
    --bg-secondary: var(--island-card);
    --bg-glass: rgba(0, 0, 0, 0.9);
    --text-primary: var(--island-text);
    --text-secondary: var(--island-text-secondary);
    --text-muted: var(--island-text-muted);
    --accent: var(--island-accent);
    --border: var(--island-border);
    --shadow: var(--island-shadow);
    --chat-user-bg: #111827;
    --chat-assistant-bg: var(--island-card);
    --badge-bg: var(--island-btn-bg);
    --badge-text: var(--island-text);
    --status-idle: #666666;
    --status-working: #60a5fa;
    --status-error: #ef4444;
    --status-done: #4ade80;
    --status-thinking: #a78bfa;
    --theme-tool-label: #b9b7ff;
  }
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .color-theme-card,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .claude-hook-lab__island-theme {
  border-color: color-mix(in srgb, var(--island-border) 80%, var(--island-accent) 8%);
  background: color-mix(in srgb, var(--island-card) 74%, var(--island-bg) 26%);
  color: var(--island-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .color-theme-card:hover,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .claude-hook-lab__island-theme:hover {
  border-color: rgba(var(--island-accent-rgb), 0.38);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .color-theme-card--active,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .claude-hook-lab__island-theme[data-active="true"] {
  border-color: var(--island-accent);
  background: rgba(var(--island-accent-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--island-accent-rgb), 0.42);
  color: var(--island-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .color-theme-card__tag,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .claude-hook-lab__island-theme-tag {
  color: var(--island-text-muted);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .notch-panel {
  background:
    radial-gradient(115% 82% at 50% -34%, color-mix(in srgb, var(--island-card) 88%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--island-card) 92%, transparent) 0%, color-mix(in srgb, var(--island-bg) 92%, transparent) 100%);
  box-shadow:
    var(--island-shadow),
    inset 0 -1px 0 color-mix(in srgb, var(--island-text) 8%, transparent);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .notch-panel::after {
  background: radial-gradient(80% 110% at 50% 100%, rgba(var(--island-accent-rgb), 0.07), transparent 62%);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .notch-panel[data-island-state="micro"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--island-card) 94%, transparent), color-mix(in srgb, var(--island-bg) 92%, transparent));
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__icon-btn,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__source-badge,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__notice-icon,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__notice-action {
  background: rgba(var(--island-accent-rgb), 0.08);
  color: var(--island-text-secondary);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__icon-btn:hover,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__notice-action:hover {
  background: rgba(var(--island-accent-rgb), 0.14);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__counter-pills {
  border-color: color-mix(in srgb, var(--island-border) 72%, transparent);
  background: rgba(var(--island-accent-rgb), 0.05);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--island-card) 76%, transparent);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__counter-pill--active {
  background: rgba(var(--island-accent-rgb), 0.10);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__counter-pill--act,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__tool-count--add,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__task-icon--done,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__hook-notice--restored {
  color: var(--island-success-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__counter-pill--wait,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__unattended--amber,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__yolo-badge,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__yolo-badge,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__hook-notice--rate_limited,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__error-icon,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__error-text,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__state-ribbon--warning {
  color: var(--island-warning-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__error-badge,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__unattended--red,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__tool-count--del {
  color: var(--island-danger-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__tool-label,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__tool-status,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__tool-label {
  color: var(--theme-tool-label, var(--island-info-text));
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .collapsed-bar__tool-target-name,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__tool-target-name,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__notice--restart .hover-list__notice-icon,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__notice--trust .hover-list__notice-icon {
  color: var(--island-info-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__context-menu {
  background: color-mix(in srgb, var(--island-card) 84%, var(--island-bg) 16%);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__active-tool-diff .diff-view,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm-diff .diff-view {
  border-color: color-mix(in srgb, var(--island-border) 74%, var(--island-accent) 14%) !important;
  background: color-mix(in srgb, var(--island-code-bg) 92%, var(--island-accent) 8%) !important;
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm {
  border-color: color-mix(in srgb, var(--island-border) 74%, var(--island-warning) 16%);
  background: color-mix(in srgb, var(--island-card) 88%, var(--island-warning) 5%);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm-alert,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm-tool,
html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm-tool-name {
  color: var(--island-warning-text);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__inline-perm-tool-name {
  background: var(--island-warning-bg);
}

html:is(
  [data-island-color-theme="apple"],
  [data-island-color-theme="smoke"],
  [data-island-color-theme="ocean-mist"],
  [data-island-color-theme="warm-paper"],
  [data-island-color-theme="soft-lavender"],
  [data-island-color-theme="system"]
) .hover-list__empty {
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--island-accent-rgb), 0.10), transparent 23%),
    linear-gradient(180deg, rgba(var(--island-accent-rgb), 0.05), transparent 52%);
}
