/* Shared theme layer. Tailwind provides structure; these variables provide color. */

:root {
  --ce-page-bg: #f1f5f9;
  --ce-app-bg: #f8fafc;
  --ce-surface: #ffffff;
  --ce-surface-2: #f8fafc;
  --ce-surface-3: #f1f5f9;
  --ce-elevated: #ffffff;
  --ce-border: #e2e8f0;
  --ce-border-strong: #cbd5e1;
  --ce-text: #0f172a;
  --ce-muted: #64748b;
  --ce-soft: #94a3b8;
  --ce-inverted: #ffffff;
  --ce-accent: #0284c7;
  --ce-accent-hover: #0369a1;
  --ce-accent-soft: #f0f9ff;
  --ce-accent-border: #bae6fd;
  --ce-accent-text: #0369a1;
  --ce-danger: #e11d48;
  --ce-danger-soft: #fff1f2;
  --ce-danger-border: #fecdd3;
  --ce-warn-soft: #fef3c7;
  --ce-warn-text: #92400e;
  --ce-ok-soft: #ecfdf5;
  --ce-ok-text: #047857;
  --ce-input-bg: #ffffff;
  --ce-input-border: #cbd5e1;
  --ce-hover: #f1f5f9;
  --ce-active: #e0f2fe;
  --ce-message-bg: #f8fafc;
  --ce-bubble-in: #ffffff;
  --ce-bubble-out: #0284c7;
  --ce-bubble-out-text: #ffffff;
  --ce-code-bg: #f1f5f9;
  --ce-overlay: rgb(15 23 42 / .45);
  --ce-media-overlay: rgb(15 23 42 / .86);
  --ce-shadow: 0 1px 2px rgb(15 23 42 / .08);
  --ce-shadow-lg: 0 20px 40px rgb(15 23 42 / .16);
  --ce-mark: #fde68a;
}

html {
  color-scheme: var(--ce-color-scheme, light);
}

body,
.login-page {
  background: var(--ce-page-bg) !important;
  color: var(--ce-text) !important;
}

a,
.sr-name,
.gs-sender,
.pin-card-name,
.rq-name {
  color: var(--ce-accent-text) !important;
}

.main,
.messages,
.chat-settings-body,
.global-search-filters,
.chat-batch-bar {
  background: var(--ce-app-bg) !important;
}

.messages {
  background:
    linear-gradient(135deg, var(--ce-message-glow-a, transparent), transparent 22rem),
    linear-gradient(45deg, var(--ce-message-glow-b, transparent), transparent 18rem),
    var(--ce-message-bg) !important;
}

.sidebar,
.sidebar-head,
.topbar,
.chat-list-tabs,
.searchbar,
.settings-tabs,
.gallery-tabs,
.ce-dialog,
.ce-dialog-head,
.login-card,
.ce-section,
.chat-settings-summary,
.health-summary,
.health-row,
.user-row,
.admin-row,
.archive-card,
.user-chat-option,
.chat-settings-list-option,
.participants .pt-row,
.sources .src,
.filecard,
.g-row,
.sr-item,
.gs-item,
.pin-card,
.search-results,
.ctx-menu,
.edit-tip,
.control-popover,
.chat-settings-tabs,
.gslide-inline,
.gslide-external,
.glightbox-clean .gslide-description {
  background: var(--ce-surface) !important;
  border-color: var(--ce-border) !important;
  color: var(--ce-text) !important;
}

.ce-dialog,
.login-card,
.ctx-menu,
.control-popover,
.edit-tip {
  box-shadow: var(--ce-shadow-lg) !important;
}

.ce-section,
.chat-settings-summary,
.health-summary,
.health-row,
.user-row,
.admin-row,
.archive-card,
.user-chat-option,
.chat-settings-list-option,
.participants .pt-row,
.sources .src,
.filecard,
.g-row,
.sr-item,
.gs-item,
.pin-card {
  box-shadow: var(--ce-shadow) !important;
}

.sidebar,
.sidebar-head,
.topbar,
.chat-list-tabs,
.searchbar,
.settings-tabs,
.gallery-tabs,
.ce-dialog-head,
.global-search-filters,
.ctx-title,
.gs-source {
  border-color: var(--ce-border) !important;
}

.brand,
.t-name,
.chat-title,
.chat-settings-title-line,
.chat-settings-title-line strong,
.ce-dialog-head h2,
.ce-section h3,
.settings-section-title,
.health-main b,
.user-name,
.admin-row-title,
.user-chat-title,
.archive-card-title,
.gs-chat,
.fname,
.src-name,
.pt-name,
.login-card h1 {
  color: var(--ce-text) !important;
}

.hint,
.login-sub,
.login-foot,
.t-sub,
.chat-sub,
.platform-icon,
.s-ico,
.s-count,
.chat-list-empty,
.empty-state,
.gallery-empty,
.sr-empty,
.health-empty,
.ctx-empty,
.ctx-status,
.user-meta,
.admin-row-meta,
.admin-row-sub,
.user-chat-meta,
.archive-card-meta,
.fsize,
.g-when,
.sr-date,
.gs-date,
.pin-card-date,
.sr-text,
.gs-text,
.pin-card-body,
.gs-meta,
.gs-source,
.chat-settings-summary-sub,
.chat-settings-chip,
.src-stats,
.src-ctl > label,
.pt-count,
.aw-time,
.aw-label,
.aw-when,
.rc {
  color: var(--ce-muted) !important;
}

.ce-icon-action,
.ce-ghost-action,
.ce-segment,
.settings-tab,
.gtab,
.ctx-item,
.ctx-check,
.custom-date-trigger,
.custom-combobox-trigger,
.search-toggle,
.g-btn,
.fab,
.pt-me,
.prio button {
  color: var(--ce-muted) !important;
}

.ce-icon-action:hover,
.ce-ghost-action:hover,
.ce-segment:hover,
.settings-tab:hover,
.gtab:hover,
.ctx-item:hover,
.ctx-check:hover,
.custom-date-trigger:hover,
.custom-combobox-trigger:hover,
.g-btn:hover,
.fab:hover,
.topbar-head:hover,
.chat-item:hover,
.chat-list-tab:hover,
.chat-batch-list-option:hover,
.ctx-list-option:hover,
.combobox-option:hover {
  background: var(--ce-hover) !important;
  color: var(--ce-text) !important;
}

.ce-icon-action.active,
.ce-icon-action[aria-pressed="true"],
.settings-tab.active,
.gtab.active,
.ce-segment.sel,
.ce-segment.active,
.chat-list-tab.active,
.chat-list-tab[aria-pressed="true"],
.chat-item.active,
.chat-item.selected,
.chat-batch-list-option.active,
.ctx-list-option.active,
.chat-settings-tab.active,
.combobox-option.active {
  background: var(--ce-active) !important;
  border-color: var(--ce-accent-border) !important;
  color: var(--ce-accent-text) !important;
}

.ce-primary-action,
.aw-btn,
.aw-fill,
.aw-knob,
.switch input:checked + .track {
  background: var(--ce-accent) !important;
  color: var(--ce-inverted) !important;
}

.ce-primary-action:hover {
  background: var(--ce-accent-hover) !important;
}

.ce-soft-action,
.ce-segment-row,
.chat-list-tab,
.chat-batch-list-option,
.ctx-list-option,
.prio,
.prio button,
.prio span,
.aw-speed,
.chat-settings-tab,
.chat-settings-tab-count {
  background: var(--ce-surface) !important;
  border-color: var(--ce-border-strong) !important;
  color: var(--ce-text) !important;
}

.ce-soft-action:hover {
  background: var(--ce-hover) !important;
  border-color: var(--ce-border-strong) !important;
}

.ce-soft-action.danger,
.ce-ghost-action.danger,
.ctx-item.danger {
  color: var(--ce-danger) !important;
}

.ce-soft-action.danger:hover,
.ce-ghost-action.danger:hover,
.ctx-item.danger:hover {
  background: var(--ce-danger-soft) !important;
  border-color: var(--ce-danger-border) !important;
  color: var(--ce-danger) !important;
}

input,
textarea,
select,
.ce-control > input,
.ce-control > textarea,
.ce-select-control select,
.credential-copy-row input,
.global-search-filters input,
.global-search-filters select,
.ctx-select,
.pt-name-input,
.chat-list-picker-tools input,
.cal-select {
  background: var(--ce-input-bg) !important;
  border-color: var(--ce-input-border) !important;
  color: var(--ce-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ce-soft) !important;
}

input:focus,
textarea:focus,
select:focus,
.pt-name-input:focus,
.chat-list-picker-tools input:focus {
  border-color: var(--ce-accent) !important;
  box-shadow: 0 0 0 2px var(--ce-focus-ring, rgb(14 165 233 / .18)) !important;
}

.bubble {
  background: var(--ce-bubble-in) !important;
  border-color: var(--ce-border) !important;
  color: var(--ce-text) !important;
}

.row.out .bubble {
  background: var(--ce-bubble-out) !important;
  border-color: var(--ce-bubble-out) !important;
  color: var(--ce-bubble-out-text) !important;
}

.bubble.sticker {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.origin-chip,
.reaction,
.service,
.day-sep,
.reply-quote,
.media-missing,
.sticker-fallback,
.fi,
.aw,
.aw-track,
.g-tile,
.login-logo,
.chat-settings-chip,
.health-badge,
.user-badge,
.text code,
.pin-card-body code,
.text pre,
.spoiler.revealed {
  background: var(--ce-surface-3) !important;
  border-color: var(--ce-border) !important;
  color: var(--ce-muted) !important;
}

.row.out .origin-chip,
.row.out .reply-quote,
.row.out .text code {
  background: rgb(255 255 255 / .16) !important;
  border-color: rgb(255 255 255 / .28) !important;
  color: rgb(255 255 255 / .82) !important;
}

.row.out .rq-name,
.row.out .rq-text,
.row.out .fwd,
.row.out .bubble .meta {
  color: rgb(255 255 255 / .78) !important;
}

.chat-settings-chip.info,
.health-summary.ok,
.health-row.ok,
.health-badge.ok {
  background: var(--ce-ok-soft) !important;
  color: var(--ce-ok-text) !important;
}

.chat-settings-chip.warn,
.health-summary.warn,
.health-row.warn,
.health-summary.loading,
.health-badge.warn,
.user-badge.warn {
  background: var(--ce-warn-soft) !important;
  border-color: var(--ce-warn-border, var(--ce-border)) !important;
  color: var(--ce-warn-text) !important;
}

.chat-settings-chip.danger,
.health-summary.fail,
.health-row.fail,
.health-badge.fail {
  background: var(--ce-danger-soft) !important;
  border-color: var(--ce-danger-border) !important;
  color: var(--ce-danger) !important;
}

.participants .pt-row.is-me,
.chat-settings-list-option:hover,
.user-chat-option:hover,
.sr-item:hover,
.gs-item:hover,
.pin-card:hover {
  background: var(--ce-accent-soft) !important;
  border-color: var(--ce-accent-border) !important;
}

.ce-overlay {
  background: var(--ce-overlay) !important;
}

.media-viewer {
  background: var(--ce-media-overlay) !important;
}

.toast {
  background: var(--ce-toast-bg, var(--ce-text)) !important;
  color: var(--ce-toast-text, var(--ce-surface)) !important;
}

mark,
.text .hl {
  background: var(--ce-mark) !important;
  color: inherit !important;
}

* {
  scrollbar-color: var(--ce-scroll-thumb, var(--ce-border-strong)) var(--ce-scroll-track, transparent);
}

::-webkit-scrollbar-thumb {
  background-color: var(--ce-scroll-thumb, var(--ce-border-strong)) !important;
}