/* Hub v212: user-selected background for LS Command Center; semantic status colors remain untouched. */
#hub-status-assistant[data-command-color="midnight"] {
  --command-bg-start: #07162d;
  --command-bg-middle: #0b2348;
  --command-bg-end: #102c58;
  --command-grid: rgba(116, 180, 255, .25);
  --command-action: #172437;
  --command-action-hover: #222f41;
}

#hub-status-assistant[data-command-color="ocean"] {
  --command-bg-start: #041a22;
  --command-bg-middle: #052a35;
  --command-bg-end: #063440;
  --command-grid: rgba(96, 220, 236, .24);
  --command-action: #142735;
  --command-action-hover: #1e3140;
}

#hub-status-assistant[data-command-color="forest"] {
  --command-bg-start: #071a12;
  --command-bg-middle: #0c281c;
  --command-bg-end: #123324;
  --command-grid: rgba(124, 226, 166, .22);
  --command-action: #18251b;
  --command-action-hover: #233127;
}

#hub-status-assistant[data-command-color="violet"] {
  --command-bg-start: #181127;
  --command-bg-middle: #291b3e;
  --command-bg-end: #3a2752;
  --command-grid: rgba(193, 165, 255, .23);
  --command-action: #2b2034;
  --command-action-hover: #382941;
}

#hub-status-assistant[data-command-color="graphite"] {
  --command-bg-start: #0e141d;
  --command-bg-middle: #18232e;
  --command-bg-end: #23303d;
  --command-grid: rgba(181, 199, 221, .20);
  --command-action: #1c2632;
  --command-action-hover: #273340;
}

#hub-status-assistant[data-command-color] {
  background:
    radial-gradient(circle at 9% 130%, var(--assistant-soft), transparent 42%),
    linear-gradient(128deg, var(--command-bg-start) 0%, var(--command-bg-middle) 55%, var(--command-bg-end) 100%);
}

#hub-status-assistant[data-command-color]::before {
  background-image:
    linear-gradient(var(--command-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--command-grid) 1px, transparent 1px);
}

#hub-status-assistant[data-command-color] .assistant-action {
  background: var(--command-action);
}

#hub-status-assistant[data-command-color] .assistant-action:hover {
  background: var(--command-action-hover);
}

.assistant-color-open {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
}

.assistant-color-chip {
  display: block;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  border: 2px solid rgba(255, 255, 255, .74);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--command-bg-start), var(--command-bg-end)) !important;
  box-shadow: 0 0 0 1px rgba(5, 14, 29, .34) !important;
}

.hub-command-color-dialog {
  width: min(640px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--hub-theme-text, #142844);
}

.hub-command-color-dialog::backdrop {
  background: rgba(3, 10, 25, .72);
  backdrop-filter: blur(7px);
}

.hub-command-color-panel {
  padding: 24px;
  border: 1px solid var(--hub-theme-line, #cbd9e7);
  border-radius: 24px;
  background: var(--hub-theme-surface, #fff);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .30);
}

.hub-command-color-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hub-command-color-head p {
  margin: 0;
  color: var(--hub-theme-accent-strong, #0b4f93);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
}

.hub-command-color-head h2 {
  margin: 4px 0 0;
  color: var(--hub-theme-text, #142844);
  font-size: 26px;
}

.hub-command-color-close {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--hub-theme-line, #cbd9e7);
  border-radius: 50%;
  background: var(--hub-theme-surface-soft, #f4f8fc);
  color: var(--hub-theme-text, #142844);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

.hub-command-color-summary {
  margin: 10px 0 18px;
  color: var(--hub-theme-muted, #53657b);
  font-size: 14px;
}

.hub-command-color-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hub-command-color-fieldset legend {
  margin-bottom: 10px;
  color: var(--hub-theme-text, #142844);
  font-weight: 900;
}

.hub-command-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hub-command-color-option {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.hub-command-color-option:last-child {
  grid-column: 1 / -1;
}

.hub-command-color-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hub-command-color-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 10px;
  border: 2px solid var(--hub-theme-line, #cbd9e7);
  border-radius: 16px;
  background: var(--hub-theme-surface-soft, #f4f8fc);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.hub-command-color-option input:checked + .hub-command-color-card {
  border-color: var(--hub-theme-accent, #1769c2);
  background: var(--hub-theme-accent-soft, #e4f0ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-theme-accent, #1769c2) 18%, transparent);
}

.hub-command-color-option input:focus-visible + .hub-command-color-card {
  outline: 3px solid var(--hub-theme-focus, #0b64c0);
  outline-offset: 3px;
}

.hub-command-color-swatch {
  display: block;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(4, 13, 29, .22);
}

.hub-command-color-swatch[data-preview="midnight"] { background: linear-gradient(135deg, #07162d, #102c58); }
.hub-command-color-swatch[data-preview="ocean"] { background: linear-gradient(135deg, #041a22, #063440); }
.hub-command-color-swatch[data-preview="forest"] { background: linear-gradient(135deg, #071a12, #123324); }
.hub-command-color-swatch[data-preview="violet"] { background: linear-gradient(135deg, #181127, #3a2752); }
.hub-command-color-swatch[data-preview="graphite"] { background: linear-gradient(135deg, #0e141d, #23303d); }

.hub-command-color-card strong,
.hub-command-color-card small {
  display: block;
}

.hub-command-color-card strong {
  color: var(--hub-theme-text, #142844);
  font-size: 15px;
}

.hub-command-color-card small {
  margin-top: 3px;
  color: var(--hub-theme-muted, #53657b);
  font-size: 11px;
}

.hub-command-color-card b {
  color: transparent;
  font-size: 20px;
}

.hub-command-color-option input:checked + .hub-command-color-card b {
  color: var(--hub-theme-accent-strong, #0b4f93);
}

.hub-command-color-note {
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--hub-theme-line, #cbd9e7);
  border-radius: 13px;
  background: var(--hub-theme-surface-soft, #f4f8fc);
  color: var(--hub-theme-muted, #53657b);
  font-size: 12px;
  line-height: 1.5;
}

.hub-command-color-note strong {
  color: var(--hub-theme-text, #142844);
}

.hub-command-color-done {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--hub-theme-accent-strong, #0b4f93);
  color: var(--hub-theme-surface, #fff);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.hub-command-color-dialog :focus-visible {
  outline: 3px solid var(--hub-theme-focus, #0b64c0);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .assistant-meta {
    flex-wrap: wrap;
  }

  .assistant-color-open {
    min-height: 44px;
  }

  .hub-command-color-dialog {
    width: min(100% - 12px, 640px);
    max-height: calc(100dvh - 12px);
  }

  .hub-command-color-panel {
    padding: 18px 14px 14px;
  }

  .hub-command-color-head h2 {
    font-size: 22px;
  }

  .hub-command-color-grid {
    grid-template-columns: 1fr;
  }

  .hub-command-color-option:last-child {
    grid-column: auto;
  }

  .hub-command-color-card {
    min-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub-command-color-card {
    transition: none;
  }
}