/* Appearance → Customize: live interface binding contract.
   Loaded AFTER base/layout/navigation/mobile CSS so actual interface controls win
   over old Command Core "no glow" and hard-coded sizing overrides.
   The preview remains demonstrative; these rules target real UI surfaces. */

/* Intentionally moderate neon on live selected/interactive elements. */
:root[data-theme-neon="on"] {
  --tm-active-neon: 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 38%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 20%, transparent);
  --tm-soft-neon: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
:root[data-theme-neon="off"] {
  --tm-active-neon: none;
  --tm-soft-neon: none;
}
:root[data-theme-neon] #nav-sidebar .nav-icon.active,
:root[data-theme-neon] #nav-sidebar .nav-icon:hover,
:root[data-theme-neon] #detail-sidebar .list-item.active,
:root[data-theme-neon] #detail-sidebar .list-item.active:hover,
:root[data-theme-neon] #notifications-button.has-unread,
:root[data-theme-neon] #main-action-dock .dock-action-btn.primary,
:root[data-theme-neon] #main-action-dock .dock-icon-btn:hover,
:root[data-theme-neon] .detail-icon-btn:hover,
:root[data-theme-neon] .channel-new-tab-btn:hover {
  box-shadow: var(--tm-active-neon) !important;
}
:root[data-theme-neon] .theme-choice-card.active,
:root[data-theme-neon] .theme-pattern-card.active,
:root[data-theme-neon] .theme-preview-row.active {
  box-shadow: var(--tm-active-neon) !important;
}
:root[data-theme-neon="on"] #detail-sidebar .detail-header,
:root[data-theme-neon="on"] #detail-sidebar .user-footer,
:root[data-theme-neon="on"] #main-action-dock {
  box-shadow: var(--tm-soft-neon), 0 10px 20px rgba(0,0,0,.15) !important;
}
:root[data-theme-neon="off"] #detail-sidebar .detail-header,
:root[data-theme-neon="off"] #detail-sidebar .user-footer,
:root[data-theme-neon="off"] #main-action-dock {
  box-shadow: 0 10px 20px rgba(0,0,0,.15) !important;
}

/* Pattern modes operate on the live shell. Old overlay rules were overridden
   later by solid backgrounds; keep each mode to its own region. */
:root[data-pattern-mode][data-pattern] #app::before,
:root[data-pattern-mode][data-pattern] #main-content::before,
:root[data-pattern-mode][data-pattern] #nav-sidebar::before,
:root[data-pattern-mode][data-pattern] #detail-sidebar::before,
:root[data-pattern-mode][data-pattern] .modal-card::before {
  background-image: var(--theme-pattern) !important;
  background-size: var(--theme-pattern-size, 120px 120px) !important;
  background-position: var(--theme-pattern-position, 0 0) !important;
  background-repeat: var(--theme-pattern-repeat, repeat) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
:root[data-pattern-mode="behind"]:not([data-pattern="none"]) #app::before,
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content::before,
:root[data-pattern-mode="side"]:not([data-pattern="none"]) #nav-sidebar::before,
:root[data-pattern-mode="side"]:not([data-pattern="none"]) #detail-sidebar::before,
:root[data-pattern-mode="cards"]:not([data-pattern="none"]) .modal-card::before {
  opacity: var(--pattern-opacity) !important;
}
:root[data-pattern-mode="behind"]:not([data-pattern="none"]) #main-content {
  background: color-mix(in srgb, var(--chat-bg) 79%, transparent) !important;
}
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content {
  background: var(--chat-bg) !important;
  isolation: isolate;
}
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content > #chat-view,
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content > #friends-view,
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content > #native-store-view,
:root[data-pattern-mode="main"]:not([data-pattern="none"]) #main-content > #app-channel-container {
  background: transparent !important;
}
:root[data-pattern-mode="behind"]:not([data-pattern="none"]) #nav-sidebar,
:root[data-pattern-mode="behind"]:not([data-pattern="none"]) #detail-sidebar {
  background-color: color-mix(in srgb, var(--sidebar-bg) 76%, transparent) !important;
}
:root[data-pattern-mode="behind"]:not([data-pattern="none"]) #app {
  background: var(--surface-0) !important;
}
:root[data-pattern-mode="side"]:not([data-pattern="none"]) #nav-sidebar,
:root[data-pattern-mode="side"]:not([data-pattern="none"]) #detail-sidebar {
  isolation: isolate;
}
/* Make pattern-containing cards preserve their controls above the pattern. */
:root[data-pattern-mode="cards"]:not([data-pattern="none"]) .modal-card {
  position: relative;
  isolation: isolate;
}
:root[data-pattern-mode="cards"]:not([data-pattern="none"]) .modal-card > * {
  position: relative;
  z-index: 1;
}
/* Pattern intensity zero and None must truly hide the decoration. */
:root[data-pattern="none"] #app::before,
:root[data-pattern="none"] #main-content::before,
:root[data-pattern="none"] #nav-sidebar::before,
:root[data-pattern="none"] #detail-sidebar::before,
:root[data-pattern="none"] .modal-card::before {
  opacity: 0 !important;
}

/* Blur slider is live on translucent panels as well as the preview. */
:root #nav-sidebar,
:root #detail-sidebar,
:root #main-action-dock,
:root #detail-sidebar .detail-header,
:root #detail-sidebar .user-footer,
:root .modal-card,
:root .notifications-panel,
:root .notification-toast,
:root .theme-live-preview {
  backdrop-filter: blur(var(--panel-blur)) saturate(130%) !important;
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(130%) !important;
}
/* Flat sidebars are intentionally opaque/no blur; this reflects its label. */
:root[data-sidebar-style="flat"] #nav-sidebar,
:root[data-sidebar-style="flat"] #detail-sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: var(--surface-1) !important;
  background-image: none !important;
}
:root[data-sidebar-style="floating"] #nav-sidebar,
:root[data-sidebar-style="floating"] #detail-sidebar {
  backdrop-filter: blur(var(--panel-blur)) saturate(130%) !important;
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(130%) !important;
  background: color-mix(in srgb, var(--surface-1) 68%, transparent) !important;
  border-color: var(--border-1) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.22), var(--tm-soft-neon, none) !important;
}
:root[data-sidebar-style="flat"][data-pattern-mode="side"]:not([data-pattern="none"]) #nav-sidebar,
:root[data-sidebar-style="flat"][data-pattern-mode="side"]:not([data-pattern="none"]) #detail-sidebar {
  background: var(--surface-1) !important;
}

/* Density applies to real list rows and message layouts, not just preview text. */
:root[data-density="compact"] { --tm-list-height: 42px; --tm-list-gap: 2px; --tm-list-padding: 7px; --tm-message-space: 10px; --tm-message-padding: 5px; }
:root[data-density="comfortable"], :root:not([data-density]) { --tm-list-height: 54px; --tm-list-gap: 4px; --tm-list-padding: 9px; --tm-message-space: 16px; --tm-message-padding: 8px; }
:root[data-density="spacious"] { --tm-list-height: 66px; --tm-list-gap: 7px; --tm-list-padding: 14px; --tm-message-space: 26px; --tm-message-padding: 13px; }
:root[data-density] #detail-sidebar .list-item {
  min-height: var(--tm-list-height) !important;
  margin-block: var(--tm-list-gap) !important;
  padding: var(--tm-list-padding) 12px !important;
}
:root[data-density] #messages .message-row {
  margin-bottom: var(--tm-message-space) !important;
  padding: var(--tm-message-padding) !important;
}
:root[data-density] .theme-live-preview .theme-preview-row {
  padding: var(--tm-list-padding) !important;
}

/* Radius choice applies to prominent actual interface panels and controls. */
:root[data-radius="sharp"] { --tm-control-radius: 4px; --tm-panel-radius: 8px; --tm-nav-radius: 6px; }
:root[data-radius="rounded"], :root:not([data-radius]) { --tm-control-radius: 12px; --tm-panel-radius: 20px; --tm-nav-radius: 18px; }
:root[data-radius="pill"] { --tm-control-radius: 999px; --tm-panel-radius: 30px; --tm-nav-radius: 999px; }
:root[data-radius] #nav-sidebar .nav-icon,
:root[data-radius] #detail-sidebar .list-item,
:root[data-radius] .channel-icon,
:root[data-radius] .dock-action-btn,
:root[data-radius] .dock-icon-btn,
:root[data-radius] #main-action-dock #context-chip {
  border-radius: var(--tm-nav-radius) !important;
}
:root[data-radius] .modal-card,
:root[data-radius] #main-action-dock,
:root[data-radius] .theme-live-preview,
:root[data-radius] .tm-settings-card {
  border-radius: var(--tm-panel-radius) !important;
}
:root[data-radius] button:not(.nav-icon),
:root[data-radius] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
:root[data-radius] textarea,
:root[data-radius] select {
  border-radius: var(--tm-control-radius) !important;
}
/* Fonts propagate through interactive controls too; account content remains native. */
:root[data-font] body,
:root[data-font] button,
:root[data-font] input,
:root[data-font] select,
:root[data-font] textarea {
  font-family: var(--font-main) !important;
}

/* Message style must have unmistakably different live behavior. */
:root[data-message-style="cards"] #messages .message-row {
  width: 100%;
  background: var(--surface-1) !important;
  border: 1px solid var(--border-1);
  border-radius: var(--tm-control-radius, 12px) !important;
  padding: max(10px, var(--tm-message-padding)) !important;
}
:root[data-message-style="bubbles"] #messages .message-row {
  width: fit-content;
  max-width: min(86%, 900px);
  align-self: flex-start;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-1)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 27%, var(--border-1));
  border-radius: 18px !important;
  padding: max(9px, var(--tm-message-padding)) 13px !important;
}
:root[data-message-style="minimal"] #messages .message-row {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-1) !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
}
:root[data-message-style="minimal"] #messages .message-row:hover {
  background: transparent !important;
}
:root[data-message-style="default"] #messages .message-row {
  width: auto;
  max-width: none;
  border: none;
  background: var(--message-bg) !important;
  border-radius: var(--radius-md) !important;
}

/* Color overrides and app theme values are supplied by theme.js through
   --accent / surface tokens. No direct hardcoded colors in this stylesheet. */