/*
 * codex-web-419 customer theme
 * Visual source: 售后服务中心 (10.20.4.7:8092)
 */

:root,
:root.electron-light {
  --after-sales-bg: #fafafa;
  --after-sales-surface: #ffffff;
  --after-sales-text: #34495e;
  --after-sales-muted: #7f8c8d;
  --after-sales-accent: #7dd9b1;
  --after-sales-accent-strong: #42b983;
  --after-sales-accent-soft: color-mix(in srgb, #7dd9b1 12%, transparent);
  --after-sales-accent-hover: color-mix(in srgb, #7dd9b1 19%, transparent);
  --after-sales-border: #ecf0f1;
  --after-sales-border-heavy: #dfe5e8;
  --after-sales-code: #f8f8f8;

  --font-sans: Menlo, "Meslo LG", "Microsoft YaHei", "微软雅黑",
    ui-monospace, monospace, sans-serif !important;
  --font-sans-default: var(--font-sans) !important;
  --font-openai-sans: var(--font-sans) !important;
  --font-mono: var(--font-sans) !important;
  --font-mono-default: var(--font-sans) !important;

  --color-background-accent: var(--after-sales-accent-soft) !important;
  --color-background-accent-active: var(--after-sales-accent-hover) !important;
  --color-background-accent-hover: var(--after-sales-accent-hover) !important;
  --color-background-button-primary-active: var(--after-sales-accent-hover) !important;
  --color-background-button-secondary: transparent !important;
  --color-background-button-secondary-active: var(--after-sales-accent-hover) !important;
  --color-background-button-secondary-hover: var(--after-sales-accent-soft) !important;
  --color-background-button-tertiary-active: var(--after-sales-accent-hover) !important;
  --color-background-control: var(--after-sales-surface) !important;
  --color-background-editor-opaque: var(--after-sales-surface) !important;
  --color-background-elevated-primary: var(--after-sales-surface) !important;
  --color-background-elevated-primary-opaque: var(--after-sales-surface) !important;
  --color-background-elevated-secondary: var(--after-sales-surface) !important;
  --color-background-elevated-secondary-opaque: var(--after-sales-surface) !important;
  --color-background-panel: var(--after-sales-surface) !important;
  --color-background-surface: var(--after-sales-surface) !important;
  --color-border: var(--after-sales-border) !important;
  --color-border-focus: var(--after-sales-accent-strong) !important;
  --color-border-heavy: var(--after-sales-border-heavy) !important;
  --color-border-light: var(--after-sales-border) !important;
  --color-icon-accent: var(--after-sales-accent-strong) !important;
  --color-icon-primary: var(--after-sales-text) !important;
  --color-icon-secondary: var(--after-sales-muted) !important;
  --color-icon-tertiary: color-mix(in srgb, var(--after-sales-muted) 68%, transparent) !important;
  --color-text-accent: var(--after-sales-accent-strong) !important;
  --color-text-button-secondary: var(--after-sales-text) !important;
  --color-text-button-tertiary: var(--after-sales-muted) !important;
  --color-text-foreground: var(--after-sales-text) !important;
  --color-text-foreground-tertiary: var(--after-sales-muted) !important;
  --color-token-activity-bar-badge-background: var(--after-sales-accent-soft) !important;
  --color-token-badge-background: var(--after-sales-accent-soft) !important;
  --color-token-badge-foreground: var(--after-sales-accent-strong) !important;
  --color-token-bg-fog: var(--after-sales-accent-soft) !important;
  --color-token-bg-primary: var(--after-sales-bg) !important;
  --color-token-bg-secondary: color-mix(in srgb, var(--after-sales-bg) 94%, transparent) !important;
  --color-token-bg-tertiary: color-mix(in srgb, var(--after-sales-bg) 88%, transparent) !important;
  --color-token-border: var(--after-sales-border) !important;
  --color-token-border-default: var(--after-sales-border) !important;
  --color-token-border-heavy: var(--after-sales-border-heavy) !important;
  --color-token-border-light: var(--after-sales-border) !important;
  --color-token-button-background: var(--after-sales-text) !important;
  --color-token-button-border: var(--after-sales-border-heavy) !important;
  --color-token-button-foreground: #ffffff !important;
  --color-token-button-secondary-hover-background: var(--after-sales-accent-soft) !important;
  --color-token-checkbox-background: var(--after-sales-surface) !important;
  --color-token-checkbox-border: var(--after-sales-border-heavy) !important;
  --color-token-conversation-header: var(--after-sales-muted) !important;
  --color-token-conversation-summary-leading: var(--after-sales-muted) !important;
  --color-token-conversation-summary-trailing: var(--after-sales-text) !important;
  --color-token-description-foreground: var(--after-sales-muted) !important;
  --color-token-disabled-foreground: color-mix(in srgb, var(--after-sales-muted) 58%, transparent) !important;
  --color-token-dropdown-background: var(--after-sales-surface) !important;
  --color-token-dropdown-foreground: var(--after-sales-text) !important;
  --color-token-editor-background: var(--after-sales-surface) !important;
  --color-token-editor-find-match-background: var(--after-sales-accent-soft) !important;
  --color-token-editor-find-match-highlight-background: var(--after-sales-accent-hover) !important;
  --color-token-editor-foreground: var(--after-sales-text) !important;
  --color-token-editor-selection-background: var(--after-sales-accent-hover) !important;
  --color-token-editor-widget-background: var(--after-sales-surface) !important;
  --color-token-focus-border: var(--after-sales-accent-strong) !important;
  --color-token-foreground: var(--after-sales-text) !important;
  --color-token-icon-foreground: var(--after-sales-text) !important;
  --color-token-input-background: var(--after-sales-surface) !important;
  --color-token-input-border: var(--after-sales-border-heavy) !important;
  --color-token-link: var(--after-sales-accent-strong) !important;
  --color-token-list-active-selection-background: var(--after-sales-accent-soft) !important;
  --color-token-list-active-selection-foreground: var(--after-sales-text) !important;
  --color-token-list-hover-background: var(--after-sales-accent-soft) !important;
  --color-token-main-surface-primary: var(--after-sales-surface) !important;
  --color-token-menu-border: var(--after-sales-border) !important;
  --color-token-menubar-selection-background: var(--after-sales-accent-soft) !important;
  --color-token-menubar-selection-foreground: var(--after-sales-text) !important;
  --color-token-non-assistant-body-descendant: var(--after-sales-muted) !important;
  --color-token-radio-active-foreground: var(--after-sales-accent-strong) !important;
  --color-token-radio-inactive-border: var(--after-sales-border-heavy) !important;
  --color-token-scrollbar-slider-active-background: color-mix(in srgb, var(--after-sales-accent) 58%, transparent) !important;
  --color-token-scrollbar-slider-background: color-mix(in srgb, var(--after-sales-accent) 30%, transparent) !important;
  --color-token-side-bar-background: var(--after-sales-bg) !important;
  --color-token-text-code-block-background: var(--after-sales-code) !important;
  --color-token-text-link-active-foreground: var(--after-sales-accent-strong) !important;
  --color-token-text-link-foreground: var(--after-sales-accent-strong) !important;
  --color-token-text-preformat-background: var(--after-sales-code) !important;
  --color-token-text-preformat-foreground: var(--after-sales-text) !important;
  --color-token-text-primary: var(--after-sales-text) !important;
  --color-token-text-secondary: var(--after-sales-muted) !important;
  --color-token-text-tertiary: color-mix(in srgb, var(--after-sales-muted) 72%, transparent) !important;
  --color-token-toolbar-hover-background: var(--after-sales-accent-soft) !important;

  --radius-2xl: 6px !important;
  --radius-3xl: 8px !important;
  --radius-4xl: 8px !important;
  --radius-lg: 6px !important;
  --radius-md: 5px !important;
  --radius-sm: 4px !important;
  --radius-xl: 6px !important;
  --radius-xs: 3px !important;
  --radius-token-composer-single-line: 6px !important;
  --radius-token-row: 4px !important;
}

:root.electron-dark {
  --after-sales-bg: #292a2d;
  --after-sales-surface: #2f3034;
  --after-sales-text: #c6c8cf;
  --after-sales-muted: #93959d;
  --after-sales-accent: #5ac99a;
  --after-sales-accent-strong: #7dd9b1;
  --after-sales-accent-soft: rgba(90, 201, 154, 0.09);
  --after-sales-accent-hover: rgba(90, 201, 154, 0.15);
  --after-sales-border: #3b3d42;
  --after-sales-border-heavy: #4a4c52;
  --after-sales-code: #252629;
}

html,
body,
#root {
  background: var(--after-sales-bg) !important;
  color: var(--after-sales-text) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.005em;
}

body {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--after-sales-accent-hover);
  color: var(--after-sales-text);
}

/* The reference uses quiet, bordered planes rather than floating glass cards. */
.app-header-tint {
  background: color-mix(in srgb, var(--after-sales-bg) 96%, transparent) !important;
  border-bottom: 1px solid var(--after-sales-border) !important;
  backdrop-filter: blur(10px) !important;
}

.app-shell-left-panel {
  background: var(--after-sales-bg) !important;
  border-right: 1px solid var(--after-sales-border) !important;
}

.main-surface {
  background: var(--after-sales-surface) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.electron-light .composer-surface-chrome,
html.electron-dark .composer-surface-chrome {
  background: var(--after-sales-surface) !important;
  border: 1px solid var(--after-sales-border-heavy) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

html.electron-light .composer-surface-chrome:focus-within,
html.electron-dark .composer-surface-chrome:focus-within {
  border-color: var(--after-sales-text) !important;
  box-shadow: 0 0 0 2px var(--after-sales-accent-soft) !important;
}

.ProseMirror {
  color: var(--after-sales-text) !important;
  caret-color: var(--after-sales-accent-strong) !important;
}

.ProseMirror p.is-editor-empty:first-child::before {
  color: var(--after-sales-muted) !important;
}

button,
input,
textarea,
select {
  font-family: inherit !important;
}

button {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease !important;
}

button:hover:not(:disabled) {
  border-color: var(--after-sales-border-heavy);
}

button[class*="rounded-2xl"][class*="border-token-input-border"] {
  min-height: 92px !important;
  background: var(--after-sales-surface) !important;
  border: 1px solid var(--after-sales-border) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

button[class*="rounded-2xl"][class*="border-token-input-border"]:hover {
  background: var(--after-sales-accent-soft) !important;
  border-color: var(--after-sales-accent) !important;
}

button[class*="rounded-2xl"][class*="border-token-input-border"] svg {
  color: var(--after-sales-accent-strong) !important;
}

[class*="shadow-md"],
[class*="shadow-lg"],
[class*="shadow-xl"] {
  box-shadow: none !important;
}

[role="dialog"],
[role="menu"],
[data-radix-popper-content-wrapper] > * {
  border-color: var(--after-sales-border-heavy) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(52, 73, 94, 0.08) !important;
}

code,
pre,
kbd {
  font-family: var(--font-mono) !important;
}

pre,
[class*="code-block"] {
  background: var(--after-sales-code) !important;
  border: 1px solid var(--after-sales-border) !important;
  border-radius: 4px !important;
}

a {
  color: var(--after-sales-accent-strong);
}

a:hover {
  color: color-mix(in srgb, var(--after-sales-accent-strong) 82%, var(--after-sales-text));
}

/* Make the status widget part of the same restrained visual system. */
#codex-quota-widget {
  top: 56px !important;
  right: 12px !important;
  min-width: 118px !important;
  padding: 7px 10px !important;
  color: #ffffff !important;
  background: var(--after-sales-text) !important;
  border: 1px solid var(--after-sales-text) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}

#codex-quota-widget:hover {
  background: color-mix(in srgb, var(--after-sales-text) 90%, var(--after-sales-accent)) !important;
}

/* Fine-grained rhythm: quiet labels, crisp rules, restrained focus. */
aside nav > button,
aside nav li > button {
  border-radius: 4px !important;
}

aside nav > button:hover,
aside nav li > button:hover {
  background: var(--after-sales-accent-soft) !important;
}

aside [aria-expanded="true"] {
  color: var(--after-sales-text) !important;
}

hr,
[role="separator"] {
  border-color: var(--after-sales-border) !important;
  background-color: var(--after-sales-border) !important;
}

*:focus-visible {
  outline-color: var(--after-sales-accent-strong) !important;
}

@media (max-width: 720px) {
  #codex-quota-widget {
    top: 50px !important;
    right: 8px !important;
    min-width: 96px !important;
    padding: 5px 7px !important;
  }
}

/* Customer-facing cleanup: keep internal controls out of the 419 interface. */
#codex-quota-widget,
header button[aria-label="Toggle bottom panel"],
header button[aria-label="Toggle side panel"],
aside nav button[aria-label="Search"],
aside nav button[data-after-sales-search="true"],
aside button[aria-label="Open settings"],
aside button[aria-label="Open help menu"],
[data-after-sales-starter-action="true"],
[data-after-sales-slash-menu-hidden="true"],
[data-app-action-sidebar-project-row]
  button[aria-label^="Project actions for "] {
  display: none !important;
}

[data-after-sales-project-new-task-slot="true"] {
  z-index: 2 !important;
  width: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

[data-after-sales-project-new-task="true"] {
  display: inline-flex !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 4px !important;
  color: var(--after-sales-accent-strong) !important;
  background: var(--after-sales-accent-soft) !important;
  border: 1px solid color-mix(in srgb, var(--after-sales-accent) 42%, transparent) !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

[data-after-sales-project-new-task="true"]:hover {
  background: var(--after-sales-accent-hover) !important;
  border-color: var(--after-sales-accent) !important;
}

.after-sales-disclaimer {
  width: 100%;
  padding: 2px 12px 0;
  color: color-mix(in srgb, var(--after-sales-muted) 88%, transparent);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 720px) {
  [data-after-sales-project-new-task="true"] {
    width: 42px !important;
    min-width: 42px !important;
    gap: 2px !important;
    padding: 3px 5px !important;
  }

  [data-after-sales-project-new-task="true"]::after {
    content: "新建";
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .after-sales-disclaimer {
    padding-inline: 8px;
    font-size: 10px;
  }
}

.after-sales-provider {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: var(--height-token-row);
  color: var(--after-sales-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  user-select: none;
}

[data-after-sales-hidden="true"] {
  display: none !important;
}

[data-after-sales-model-locked="true"] {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 1 !important;
}

/* Browser-local thread isolation: rows remain hidden until ownership is verified. */
[data-app-action-sidebar-thread-id]:not(
    [data-after-sales-thread-owned="true"]
  ) {
  display: none !important;
}