/* Color-only palette, sampled from Grok's rendered light/dark UI, 2026-09-10.
   No dimensions, typography, icons, cursor rules or motion are changed here. */
:root[data-zexir-resolved-theme="light"],
:root[data-zexir-resolved-theme="light"] body {
  --z-page: #f9f8f7;
  --z-sidebar: #f4f3f1;
  --z-surface: #ffffff;
  --z-surface-muted: #f0efed;
  --z-surface-subtle: #f4f3f1;
  --z-surface-hover: #eeedeb;
  --z-control: #eeedeb;
  --z-menu-selected: #eeedeb;
  --z-text: #050505;
  --z-text-secondary: #636363;
  --z-text-tertiary: #858585;
  --z-line: #e8e6e3;
  --z-line-strong: #d5d3d0;
  --z-hairline: #e8e6e3;
  --z-hairline-soft: #eeece9;
  --z-accent: #050505;
  --z-palette-primary: #050505;
  --z-palette-on-primary: #fcfcfc;
  --z-palette-blue: #0890ff;
  --z-palette-blue-hover: #007cde;
  --z-palette-page-clear: #f9f8f700;
  --z-palette-sidebar-clear: #f4f3f100;
}
:root[data-zexir-resolved-theme="dark"],
:root[data-zexir-resolved-theme="dark"] body {
  --z-page: #131211;
  --z-sidebar: #191816;
  --z-surface: #201f1d;
  --z-surface-muted: #282724;
  --z-surface-subtle: #201f1d;
  --z-surface-hover: #302f2c;
  --z-control: #302f2c;
  --z-menu-selected: #302f2c;
  --z-text: #fcfcfc;
  --z-text-secondary: #9e9e9e;
  --z-text-tertiary: #858585;
  --z-line: #302f2c;
  --z-line-strong: #45433f;
  --z-hairline: #302f2c;
  --z-hairline-soft: #242320;
  --z-accent: #fcfcfc;
  --z-palette-primary: #fcfcfc;
  --z-palette-on-primary: #050505;
  --z-palette-blue: #0890ff;
  --z-palette-blue-hover: #329fff;
  --z-palette-page-clear: #13121100;
  --z-palette-sidebar-clear: #19181600;
}
:root[data-zexir-resolved-theme] body {
  --z-action-start: var(--z-palette-primary);
  --z-action-mid: var(--z-palette-primary);
  --z-action-end: var(--z-palette-primary);
  --z-action-gradient: var(--z-palette-primary);
  --z-action-gradient-hover: var(--z-palette-primary);
  background-color: var(--z-page) !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace :is(.viewport,#chat-scroller,#chat-container,.chat-header,.top-bar,.header,.header-bar,.input-region,.workspace-profile-page) {
  background-color: var(--z-page) !important;
  color: var(--z-text) !important;
  border-color: var(--z-hairline-soft) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar,
:root[data-zexir-resolved-theme] body.index-workspace #sidebar :is(.sidebar-header,.sidebar-top-nav,.sidebar-main-content,.sidebar-bottom,.sidebar-user-menu-wrap,.sidebar-profile-shell,.sidebar-footer,.sidebar-history,.sidebar-history-scroll,#sidebar-auth-slot,.sidebar-bottom-profile,#sidebarLockBtn) {
  background-color: var(--z-sidebar) !important;
  color: var(--z-text) !important;
  border-color: var(--z-hairline-soft) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar #newChatBtn:is(.active,[aria-current="page"]),
:root[data-zexir-resolved-theme] body.index-workspace #sidebar :is(button,a):hover {
  background-color: var(--z-surface-hover) !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer,
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer:is(:hover,:focus,:focus-within) {
  background-color: var(--z-surface) !important;
  border-color: var(--z-line) !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer #userInput {
  background-color: transparent !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #userInput::placeholder { color: var(--z-text-secondary) !important; }
:root[data-zexir-resolved-theme] body.index-workspace :is(#modelPickerMenu,#composerAddMenu,#composerRecentMenu,#composerPersonalitiesMenu,.thinking-picker-view,.sidebar-user-menu-panel,.sidebar-user-submenu,.chat-options-menu,.chat-context-menu,.response-more-menu,.workspace-settings-sheet,.workspace-settings-main,.workspace-login-sheet,.workspace-signup-sheet,.modal-content,.modal-box) {
  background-color: var(--z-surface) !important;
  border-color: var(--z-line) !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .workspace-settings-nav {
  background-color: var(--z-sidebar) !important;
  border-color: var(--z-line) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace :is(#composerAddMenu,#composerRecentMenu,#composerPersonalitiesMenu) .composer-add-menu-item {
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace :is(#composerAddMenu,#composerRecentMenu,#composerPersonalitiesMenu) .composer-add-menu-item:is(:hover,[aria-checked="true"],.active,.selected),
:root[data-zexir-resolved-theme] body.index-workspace #modelPickerBtn:is(:hover,[aria-expanded="true"]),
:root[data-zexir-resolved-theme] body.index-workspace :is(#addContentBtn,#micBtn):is(:hover,[aria-expanded="true"]) {
  background-color: var(--z-surface-hover) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace :is(.user-message-bubble,.user-message .message-content,pre,.code-block) {
  background-color: var(--z-surface-muted) !important;
  border-color: var(--z-line) !important;
  color: var(--z-text) !important;
}
/* Keep the sampled Grok blue for composer actions and progress controls. */
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer #sendBtn:not(:disabled),
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer:has(#userInput) #sendBtn:not(:disabled) {
  background-color: var(--z-palette-blue) !important;
  border-color: var(--z-palette-blue) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .input-region .composer:has(#userInput) #sendBtn:not(:disabled):hover {
  background-color: var(--z-palette-blue-hover) !important;
  border-color: var(--z-palette-blue-hover) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .settings-usage-track > i {
  background-color: var(--z-palette-blue) !important;
}
:root[data-zexir-resolved-theme] body :is(.primary-action,.plan-cta,.upgrade-plan-btn),
:root[data-zexir-resolved-theme] body.index-workspace #auth-section .btn-primary,
:root[data-zexir-resolved-theme] body.index-workspace #sidebar .sidebar-login-btn--primary {
  background-color: var(--z-palette-primary) !important;
  color: var(--z-palette-on-primary) !important;
  border-color: var(--z-palette-primary) !important;
}
/* Keep existing mist geometry and opacity stops; recolor their endpoints. */
:root[data-zexir-resolved-theme] body.index-workspace .input-region::before {
  background-image: linear-gradient(to bottom, var(--z-palette-page-clear), color-mix(in srgb, var(--z-page) 73%, transparent) 55%, var(--z-page)) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar .sidebar-history-profile-mist {
  background-image: linear-gradient(to bottom, var(--z-palette-sidebar-clear), var(--z-sidebar)) !important;
}
:root[data-zexir-resolved-theme] body:not(.index-workspace) :is(.topbar,.about-topbar,.plugins-topbar,.checkout-topbar,.page-topbar) {
  background-color: var(--z-sidebar) !important;
  border-color: var(--z-line) !important;
}
:root[data-zexir-resolved-theme] body:not(.index-workspace) :is(.checkout-main,.checkout-summary,.checkout-gate,.panel,.card,.settings-card,.plugin-card,.auth-card,.plan-card) {
  background-color: var(--z-surface) !important;
  border-color: var(--z-line) !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar #sidebar-history {
  background-color: var(--z-sidebar) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar :is(#menuBtn,#searchToggleBtn) {
  background-color: transparent !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar :is(#menuBtn,#searchToggleBtn):hover {
  background-color: var(--z-surface-hover) !important;
}
:root[data-zexir-resolved-theme][data-zexir-icons] body.index-workspace #sidebar #newChatBtn:is(.active,[aria-current="page"]) {
  background-color: var(--z-surface-hover) !important;
  color: var(--z-text) !important;
}

/* Inactive history rows belong to the sidebar, not separate white cards. */
:root[data-zexir-resolved-theme] body.index-workspace #sidebar .history-chat-btn {
  background-color: transparent !important;
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar .history-chat-btn :is(.nav-text,.history-chat-title) {
  color: var(--z-text) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar .history-chat-btn:is(:hover,:focus-visible,:focus-within,.active,[aria-current="page"]) {
  background-color: var(--z-surface-hover) !important;
}

/* The collapsed rail uses the same quiet resting state as the full sidebar. */
:root[data-zexir-resolved-theme] body.index-workspace #sidebar:is(.collapsed,.sidebar-collapsed) :is(#newChatBtn,#sidebarCustomAiBtn,#sidebarPluginsBtn,#sidebarLibraryBtn,#sidebarRailLockBtn,#sidebarProfileBtn) {
  background-color: transparent !important;
}
:root[data-zexir-resolved-theme] body.index-workspace #sidebar:is(.collapsed,.sidebar-collapsed) :is(#newChatBtn,#sidebarCustomAiBtn,#sidebarPluginsBtn,#sidebarLibraryBtn,#sidebarRailLockBtn,#sidebarProfileBtn):is(:hover,:focus-visible,.active,[aria-current="page"],[aria-expanded="true"]) {
  background-color: var(--z-surface-hover) !important;
}

/* Feedback controls use image masks now, rather than legacy font glyphs. */
:root[data-zexir-resolved-theme] body.index-workspace .response-action-btn[data-feedback-code] {
  color: var(--z-text-secondary) !important;
  background-color: transparent !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .response-action-btn[data-feedback-code]:is(:hover,:focus-visible,[aria-pressed="true"]) {
  color: var(--z-text) !important;
  background-color: var(--z-surface-hover) !important;
}
:root[data-zexir-resolved-theme] body.index-workspace .response-action-btn[data-feedback-code] .response-action-icon {
  opacity: 1 !important;
  flex: 0 0 18px !important;
  aspect-ratio: 1 !important;
}