/*
 * XO surface tokens for SX chat, v1.1
 * Import after styles.css and theme.css; enable with <html data-design="xo">.
 * The app remains the owner of accent, gradient, mode and foreground choices.
 * Existing corner shapes, layout, spacing and typography stay in the app CSS.
 */

:root[data-design="xo"] {
  /* Neutral materials. The approved mark informs finish, not a fixed palette. */
  --xo-surface-canvas: #f3f4f6;
  --xo-surface-panel: #ffffff;
  --xo-surface-raised: #ffffff;
  --xo-surface-inset: #eef0f3;
  --xo-surface-message: #ffffff;
  --xo-text-primary: #202630;
  --xo-text-secondary: #596370;
  --xo-border-subtle: #d8dce2;
  --xo-border-control: #8a949f;
  --xo-edge-light: rgb(255 255 255 / 74%);
  --xo-edge-shade: rgb(20 26 36 / 5%);
  --xo-satin-start: rgb(255 255 255 / 32%);
  --xo-glass-highlight: rgb(255 255 255 / 38%);
  --xo-scrim: rgb(14 19 27 / 44%);

  /* Inputs from applyAppearance(). A fill can be a color OR a gradient. */
  --xo-accent: var(--accent, #727982);
  --xo-action-fill: var(--accent-fill, var(--xo-accent));
  --xo-action-foreground: var(--accent-foreground, #ffffff);
  --xo-message-outgoing-fill: var(--bubble-fill, var(--xo-surface-inset));
  --xo-message-outgoing-glass: var(--bubble-glass-fill, var(--xo-message-outgoing-fill));
  --xo-message-outgoing-foreground: var(--bubble-foreground, var(--xo-text-primary));

  /* Accent enters surfaces as a tint; it is never assumed to be readable text. */
  --xo-tint-ambient: color-mix(in srgb, var(--xo-accent) 5%, transparent);
  --xo-tint-hover: color-mix(in srgb, var(--xo-accent) 5%, var(--xo-surface-panel));
  --xo-tint-selected: color-mix(in srgb, var(--xo-accent) 10%, var(--xo-surface-panel));
  --xo-focus-color: color-mix(in srgb, var(--xo-text-primary) 78%, var(--xo-accent));
  --xo-focus-width: 2px;
  --xo-focus-offset: 3px;

  /* One soft highlight, quiet edges, restrained elevation. */
  --xo-satin: linear-gradient(180deg, var(--xo-satin-start), transparent 72%);
  --xo-bevel: inset 0 1px 0 var(--xo-edge-light), inset 0 -1px 0 var(--xo-edge-shade);
  --xo-shadow-control: 0 1px 2px rgb(17 24 39 / 5%);
  --xo-shadow-message: 0 2px 7px rgb(17 24 39 / 5%);
  --xo-shadow-floating: 0 8px 24px rgb(17 24 39 / 10%), 0 2px 5px rgb(17 24 39 / 5%);
  --xo-shadow-dialog: 0 20px 56px rgb(17 24 39 / 18%), 0 3px 10px rgb(17 24 39 / 7%);
  --xo-shadow-pressed: inset 0 1px 3px rgb(17 24 39 / 14%);
  --xo-bubble-glint: rgb(255 255 255 / 48%);
  --xo-bubble-edge: rgb(255 255 255 / 80%);
  --xo-bubble-depth: rgb(28 44 60 / 9%);
  --xo-bubble-shadow: rgb(20 33 48 / 12%);

  /* Opaque defaults also serve browsers without backdrop filtering. */
  --xo-surface-chrome: var(--xo-surface-panel);
  --xo-surface-menu: var(--xo-surface-raised);
  --xo-surface-rail: var(--xo-surface-panel);
  --xo-surface-composer: var(--xo-surface-panel);
  --xo-surface-stream: var(--xo-surface-canvas);
  --xo-atmosphere: none;
  --xo-glass-sheen: none;
  --xo-filter-chrome: none;
  --xo-filter-menu: none;
  --xo-filter-rail: none;
  --xo-filter-search: none;
  --xo-filter-top-action: none;
  --xo-filter-account-row: none;
  --xo-filter-message: none;
  --xo-glass-chrome-opacity: 72%;
  --xo-glass-menu-opacity: 80%;
  --xo-glass-rail-opacity: 74%;
  --xo-glass-composer-opacity: 82%;
  --xo-glass-stream-opacity: 94%;
  --xo-blur-chrome: 22px;
  --xo-blur-menu: 24px;
  --xo-blur-rail: 28px;

  --xo-duration-fast: 120ms;
  --xo-duration-normal: 180ms;
  --xo-ease: cubic-bezier(.2, .8, .2, 1);

  /* Bridge the existing neutral names without replacing the accent contract. */
  --page: var(--xo-surface-canvas);
  --panel: var(--xo-surface-panel);
  --field: var(--xo-surface-inset);
  --received: var(--xo-surface-message);
  --ink: var(--xo-text-primary);
  --muted: var(--xo-text-secondary);
  --line: var(--xo-border-subtle);
  --rail: var(--xo-surface-panel);
  --rail-ink: var(--xo-text-primary);
  --rail-muted: var(--xo-text-secondary);
  --rail-line: var(--xo-border-subtle);
}

:root[data-design="xo"][data-mode="dark"] {
  --xo-glass-chrome-opacity: 72%;
  --xo-glass-menu-opacity: 84%;
  --xo-glass-rail-opacity: 80%;
  --xo-surface-canvas: #111419;
  --xo-surface-panel: #1b1f26;
  --xo-surface-raised: #232830;
  --xo-surface-inset: #161a20;
  --xo-surface-message: #252a32;
  --xo-text-primary: #f0f2f5;
  --xo-text-secondary: #b0b7c2;
  --xo-border-subtle: #363d48;
  --xo-border-control: #7c8695;
  --xo-edge-light: rgb(255 255 255 / 9%);
  --xo-edge-shade: rgb(0 0 0 / 24%);
  --xo-satin-start: rgb(255 255 255 / 4%);
  --xo-glass-highlight: rgb(255 255 255 / 6%);
  --xo-scrim: rgb(3 5 9 / 62%);
  --xo-shadow-control: 0 1px 3px rgb(0 0 0 / 18%);
  --xo-shadow-message: 0 2px 8px rgb(0 0 0 / 15%);
  --xo-shadow-floating: 0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 16%);
  --xo-shadow-dialog: 0 24px 64px rgb(0 0 0 / 42%), 0 4px 12px rgb(0 0 0 / 20%);
  --xo-shadow-pressed: inset 0 1px 3px rgb(0 0 0 / 30%);
  --xo-bubble-glint: rgb(255 255 255 / 11%);
  --xo-bubble-edge: rgb(255 255 255 / 20%);
  --xo-bubble-depth: rgb(0 0 0 / 19%);
  --xo-bubble-shadow: rgb(0 0 0 / 27%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-design="xo"] {
    --xo-surface-chrome: color-mix(in srgb, var(--xo-surface-panel) var(--xo-glass-chrome-opacity), transparent);
    --xo-surface-menu: color-mix(in srgb, var(--xo-surface-raised) var(--xo-glass-menu-opacity), transparent);
    --xo-surface-rail: color-mix(in srgb, var(--xo-surface-panel) var(--xo-glass-rail-opacity), transparent);
    --xo-surface-composer: color-mix(in srgb, var(--xo-surface-panel) var(--xo-glass-composer-opacity), transparent);
    --xo-surface-stream: color-mix(in srgb, var(--xo-surface-canvas) var(--xo-glass-stream-opacity), transparent);
    --xo-atmosphere:
      radial-gradient(ellipse at 0% 12%, color-mix(in srgb, var(--xo-accent) 32%, transparent), transparent 52%),
      radial-gradient(ellipse at 100% 75%, color-mix(in srgb, var(--accent-bright, var(--xo-accent)) 25%, transparent), transparent 50%),
      radial-gradient(ellipse at 40% 100%, color-mix(in srgb, var(--xo-accent) 18%, transparent), transparent 46%);
    --xo-glass-sheen: linear-gradient(130deg, var(--xo-glass-highlight), transparent 48%);
    --xo-filter-chrome: blur(var(--xo-blur-chrome)) saturate(125%);
    --xo-filter-menu: blur(var(--xo-blur-menu)) saturate(130%);
    --xo-filter-rail: blur(var(--xo-blur-rail)) saturate(130%);
    --xo-filter-search: blur(14px) saturate(120%);
    --xo-filter-top-action: blur(12px);
    --xo-filter-account-row: blur(14px);
    --xo-filter-message: blur(8px);
  }
}

/* Component bindings use existing classes and do not touch geometry. */
:root[data-design="xo"] .app-shell {
  background: var(--xo-atmosphere), var(--page);
}
:root[data-design="xo"] :is(.chat-panel, .composer-area) {
  background: transparent;
}
:root[data-design="xo"] :is(.message-scroller, .thread-scroll, .peek-scroll) {
  background: radial-gradient(ellipse at 100% 0%, var(--xo-tint-ambient), transparent 58%), var(--xo-surface-stream);
}
:root[data-design="xo"] :is(.sidebar, .details-panel) {
  background: var(--xo-glass-sheen), var(--xo-surface-rail);
  -webkit-backdrop-filter: var(--xo-filter-rail);
  backdrop-filter: var(--xo-filter-rail);
  box-shadow: inset 1px 0 0 var(--xo-edge-light);
}

:root[data-design="xo"] :is(.sidebar-top, .chat-header, .details-top, .thread-header) {
  background: var(--xo-glass-sheen), var(--xo-surface-chrome);
  -webkit-backdrop-filter: var(--xo-filter-chrome);
  backdrop-filter: var(--xo-filter-chrome);
  box-shadow: inset 0 1px 0 var(--xo-edge-light);
  border-color: var(--line);
}

/* The header, search and Messages label share one continuous rail surface. */
:root[data-design="xo"] .sidebar-top {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-design="xo"] :is(.sidebar-section-head, .room-list) { background: transparent; }
:root[data-design="xo"] .sidebar-top .sidebar-search {
  background: color-mix(in srgb, var(--field) 76%, transparent);
  border-color: color-mix(in srgb, var(--line) 84%, transparent);
  -webkit-backdrop-filter: var(--xo-filter-search);
  backdrop-filter: var(--xo-filter-search);
  box-shadow: inset 0 1px 0 var(--xo-edge-light), 0 4px 16px #0b1d2b0c;
}
:root[data-design="xo"] .sidebar-top .top-menu {
  background: color-mix(in srgb, var(--field) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  -webkit-backdrop-filter: var(--xo-filter-top-action);
  backdrop-filter: var(--xo-filter-top-action);
  box-shadow: inset 0 1px 0 var(--xo-edge-light);
}

:root[data-design="xo"] .composer-area {
  background: linear-gradient(180deg, var(--xo-surface-stream), transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-design="xo"] .composer {
  background: var(--xo-glass-sheen), var(--xo-surface-composer);
  -webkit-backdrop-filter: var(--xo-filter-chrome);
  backdrop-filter: var(--xo-filter-chrome);
  border-color: var(--xo-border-control);
  box-shadow: var(--xo-bevel), var(--xo-shadow-control);
}
:root[data-design="xo"] .composer textarea {
  background: transparent;
}

:root[data-design="xo"] :is(.dialog, .peek-card) {
  background: var(--xo-satin), var(--xo-surface-raised);
  border-color: var(--line);
  box-shadow: var(--xo-bevel), var(--xo-shadow-dialog);
}
:root[data-design="xo"] :is(.account-menu, .message-menu, .new-chat-menu, .sidebar-bottom) {
  background: var(--xo-glass-sheen), color-mix(in srgb, var(--panel) 79%, transparent);
  border-color: var(--line);
  box-shadow: var(--xo-bevel), var(--xo-shadow-floating);
  -webkit-backdrop-filter: var(--xo-filter-menu);
  backdrop-filter: var(--xo-filter-menu);
}
:root[data-design="xo"] .account-trigger {
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  -webkit-backdrop-filter: var(--xo-filter-account-row);
  backdrop-filter: var(--xo-filter-account-row);
}
:root[data-design="xo"] :is(.dialog-backdrop, .peek-backdrop) {
  background: var(--xo-scrim);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Lightly frosted bubbles keep their text opaque and readable. */
:root[data-design="xo"] :is(.message-bubble, .peek-message-content) {
  background: color-mix(in srgb, var(--received) 95%, transparent);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--xo-bevel), var(--xo-shadow-message);
  -webkit-backdrop-filter: var(--xo-filter-message);
  backdrop-filter: var(--xo-filter-message);
}
:root[data-design="xo"] .mine :is(.message-bubble, .peek-message-content) {
  --xo-bubble-glint: var(--bubble-glint, rgb(255 255 255 / 18%));
  background: var(--xo-message-outgoing-glass);
  color: var(--xo-message-outgoing-foreground);
  border-color: color-mix(in srgb, var(--xo-accent) 30%, var(--line));
  box-shadow: var(--xo-shadow-message);
}
/* A short highlight gives text bubbles a polished glass edge. */
:root[data-design="xo"] :is(.message-bubble, .peek-message-content):not(:has(.media-gallery)) {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--xo-bubble-edge),
    inset 1px 0 0 color-mix(in srgb, var(--xo-bubble-edge) 55%, transparent),
    inset 0 -1px 0 var(--xo-bubble-depth),
    0 5px 17px var(--xo-bubble-shadow);
}
:root[data-design="xo"] :is(.message-bubble, .peek-message-content):not(:has(.media-gallery))::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(143deg, var(--xo-bubble-glint), transparent 42%);
  pointer-events: none;
}
:root[data-design="xo"] .gallery-stack::before,
:root[data-design="xo"] .gallery-stack::after {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: var(--xo-filter-message);
  backdrop-filter: var(--xo-filter-message);
}
:root[data-design="xo"] .gallery-card {
  background: color-mix(in srgb, var(--field) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--xo-edge-light), 0 5px 18px #0b1d2b14;
  -webkit-backdrop-filter: var(--xo-filter-message);
  backdrop-filter: var(--xo-filter-message);
}
/* Retain the gallery's transparent shell and image edge treatment. */
:root[data-design="xo"] .message-bubble.with-attachment:has(.media-gallery),
:root[data-design="xo"] .peek-message-content:has(.media-gallery) {
  background: transparent;
  box-shadow: none;
}

:root[data-design="xo"] :is(.search-wrap, .workspace-line) {
  background: var(--field);
  box-shadow: inset 0 1px 2px var(--xo-edge-shade);
  border-color: var(--line);
}
:root[data-design="xo"] .room-item.selected {
  background: var(--xo-tint-selected);
  box-shadow: inset 0 1px 0 var(--xo-edge-light);
}
:root[data-design="xo"] :is(.secondary-button, .primary-button, .send-button) {
  box-shadow: var(--xo-shadow-control);
}
:root[data-design="xo"] .secondary-button {
  background: var(--xo-satin), var(--panel);
  color: var(--ink);
}

@media (hover: hover) {
  :root[data-design="xo"] .room-item:hover:not(.selected),
  :root[data-design="xo"] .secondary-button:hover:not(:disabled),
  :root[data-design="xo"] .icon-button:hover:not(:disabled),
  :root[data-design="xo"] :is(.account-menu, .new-chat-menu) > button:hover:not(:disabled),
  :root[data-design="xo"] :is(.message-menu-item, .message-menu-cancel):hover:not(:disabled) {
    background: var(--xo-tint-hover);
    color: var(--ink);
  }
}
:root[data-design="xo"] :is(.primary-button, .secondary-button, .send-button):active:not(:disabled) {
  box-shadow: var(--xo-shadow-pressed);
}
:root[data-design="xo"] :is(.room-item, .icon-button, .primary-button, .secondary-button, .send-button) {
  transition-property: background-color, border-color, box-shadow, color;
  transition-duration: var(--xo-duration-fast);
  transition-timing-function: var(--xo-ease);
}
:root[data-design="xo"] :is(.composer, .search-wrap) {
  transition-property: border-color, box-shadow;
  transition-duration: var(--xo-duration-normal);
  transition-timing-function: var(--xo-ease);
}
:root[data-design="xo"] :is(.composer, .search-wrap):focus-within {
  border-color: var(--accent);
}
:root[data-design="xo"] :is(button, a, [tabindex]:not(input):not(textarea):not(select)):focus-visible {
  outline: var(--xo-focus-width) solid var(--xo-focus-color);
  outline-offset: var(--xo-focus-offset);
}
:root[data-design="xo"] :is(input, textarea, select):focus-visible {
  outline: none;
}
:root[data-design="xo"] :is(.dialog-form, .login-card, .settings-form, .people-picker, .emoji-custom, .thread-composer, .admin-create-fields, .admin-edit) :is(input, textarea, select):focus-visible {
  border-color: var(--accent);
  box-shadow: none;
}

/* Optional performance or readability switch; no new setting UI is required. */
:root[data-design="xo"][data-effects="solid"] {
  --xo-surface-chrome: var(--xo-surface-panel);
  --xo-surface-menu: var(--xo-surface-raised);
  --xo-surface-rail: var(--xo-surface-panel);
  --xo-surface-composer: var(--xo-surface-panel);
  --xo-surface-stream: var(--xo-surface-canvas);
  --xo-atmosphere: none;
  --xo-glass-sheen: none;
  --xo-filter-chrome: none;
  --xo-filter-menu: none;
  --xo-filter-rail: none;
  --xo-filter-search: none;
  --xo-filter-top-action: none;
  --xo-filter-account-row: none;
  --xo-filter-message: none;
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-design="xo"] {
    --xo-surface-chrome: var(--xo-surface-panel);
    --xo-surface-menu: var(--xo-surface-raised);
    --xo-surface-rail: var(--xo-surface-panel);
    --xo-surface-composer: var(--xo-surface-panel);
    --xo-surface-stream: var(--xo-surface-canvas);
    --xo-atmosphere: none;
    --xo-glass-sheen: none;
    --xo-filter-chrome: none;
    --xo-filter-menu: none;
    --xo-filter-rail: none;
    --xo-filter-search: none;
    --xo-filter-top-action: none;
    --xo-filter-account-row: none;
    --xo-filter-message: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-design="xo"] {
    --xo-duration-fast: 0ms;
    --xo-duration-normal: 0ms;
  }
}
@media (forced-colors: active) {
  :root[data-design="xo"] {
    --xo-surface-canvas: Canvas;
    --xo-surface-panel: Canvas;
    --xo-surface-raised: Canvas;
    --xo-surface-inset: Canvas;
    --xo-surface-message: Canvas;
    --xo-surface-chrome: Canvas;
    --xo-surface-menu: Canvas;
    --xo-surface-rail: Canvas;
    --xo-surface-composer: Canvas;
    --xo-surface-stream: Canvas;
    --xo-atmosphere: none;
    --xo-glass-sheen: none;
    --xo-text-primary: CanvasText;
    --xo-text-secondary: CanvasText;
    --xo-border-subtle: CanvasText;
    --xo-border-control: CanvasText;
    --xo-focus-color: Highlight;
    --xo-satin: none;
    --xo-bevel: none;
    --xo-filter-chrome: none;
    --xo-filter-menu: none;
    --xo-filter-rail: none;
    --xo-filter-search: none;
    --xo-filter-top-action: none;
    --xo-filter-account-row: none;
    --xo-filter-message: none;
  }
}