/*
  AtticusBeta v6.9.18
  Authoritative readable main-app visual layer.

  This file intentionally loads last and owns color/contrast plus the two
  small geometry corrections explicitly requested by the user:
  - Messenger title/subtitle separation
  - Focus composer inner textarea border removal

  Absolute visual rule:
  DARK SURFACE -> LIGHT TEXT
  LIGHT SURFACE -> DARK TEXT

  Palette is deliberately small and repeated everywhere:
  - warm paper canvas
  - deep green-charcoal structure
  - cream text on dark structure
  - dark green-charcoal text on paper
  - orange for selection/action emphasis only
  - sage for status only
*/

:root {
  --ab18-paper: #E8E1D6;
  --ab18-paper-hi: #F3EDE4;
  --ab18-paper-low: #D8D0C4;
  --ab18-ink: #202B26;
  --ab18-ink-muted: #556159;
  --ab18-dark: #171E1A;
  --ab18-dark-2: #202722;
  --ab18-dark-3: #2C342F;
  --ab18-dark-hover: #36413A;
  --ab18-cream: #F2E7D5;
  --ab18-cream-muted: #CFC5B5;
  --ab18-cream-dim: #B8AFA1;
  --ab18-orange: #C97849;
  --ab18-orange-hi: #E39A68;
  --ab18-sage: #A5B5A5;
  --ab18-sage-hi: #C3CEC3;
  --ab18-dark-line: rgba(242,231,213,.20);
  --ab18-paper-line: rgba(32,43,38,.18);
  --mesh-neutral: #303733;
  --mesh-opacity: .78;
}

/* =========================================================
   GLOBAL CANVAS
   ========================================================= */
body {
  background: var(--ab18-dark) !important;
}

.app,
.stage {
  color: var(--ab18-ink) !important;
}

.stage {
  background:
    radial-gradient(1050px 680px at 75% 10%, rgba(165,181,165,.11), transparent 68%),
    radial-gradient(850px 620px at 14% 88%, rgba(201,120,73,.055), transparent 72%),
    linear-gradient(180deg, var(--ab18-paper-hi) 0%, var(--ab18-paper) 58%, var(--ab18-paper-low) 100%) !important;
}

/* The canvas remains animated by the existing JS. This only makes the dark
   network legible over the paper background. */
.mesh-canvas {
  opacity: var(--mesh-opacity) !important;
  mix-blend-mode: multiply !important;
  filter: none !important;
}

/* =========================================================
   LIGHT PAGE HEADERS
   ========================================================= */
.page-header,
.page-title,
.page-subtitle,
.dashboard-title,
.dashboard-subtitle,
.focus-header,
.focus-kicker,
.focus-logo {
  text-shadow: none !important;
}

.page-title,
.dashboard-title {
  color: var(--ab18-ink) !important;
}

.page-subtitle,
.dashboard-subtitle {
  color: var(--ab18-ink-muted) !important;
}

.page-title .accent,
.dashboard-title .accent,
.focus-logo .bet,
.brand-logo .bet {
  color: var(--ab18-orange) !important;
}

.focus-logo .att,
.brand-logo .att {
  color: #839788 !important;
}

.focus-logo .brace,
.brand-logo .brace {
  color: var(--ab18-ink) !important;
}

/* Messenger title/subtitle must be two separate readable rows. */
body .stage > section.view.page-view.is-active[data-view="messenger"] {
  grid-template-rows: minmax(94px, auto) minmax(0, 1fr) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] > .page-header {
  min-height: 94px !important;
  max-height: 122px !important;
  align-items: end !important;
  overflow: visible !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] > .page-header > div:first-child {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-title {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: clamp(42px, 4.15vw, 66px) !important;
  color: var(--ab18-ink) !important;
}

body .stage > section.view.page-view.is-active[data-view="messenger"] .page-subtitle {
  margin: 0 !important;
  line-height: 1.35 !important;
  color: var(--ab18-ink-muted) !important;
}

/* =========================================================
   DARK STRUCTURAL SURFACES
   ========================================================= */
.rail,
.topbar,
.core-legal-footer,
.thread-list,
.thread-main,
.thread-head,
.thread-compose,
.panel,
.settings-card,
.abdash-panel,
.personal-panel,
.personal-hero,
.system-card,
.library-card,
.file-folder,
.contacts-panel,
.auth-panel,
.modal-panel,
[data-view="tools"] .app-library-row,
[data-view="tools"] .app-card,
[data-view="tools"] .app-filter-bar {
  background-color: var(--ab18-dark) !important;
  border-color: var(--ab18-dark-line) !important;
  color: var(--ab18-cream) !important;
}

.thread-list,
.thread-main,
.panel,
.settings-card,
.abdash-panel,
.personal-panel,
.personal-hero,
.system-card,
.library-card,
.file-folder,
.contacts-panel,
.auth-panel,
.modal-panel,
[data-view="tools"] .app-library-row,
[data-view="tools"] .app-card {
  background-image: linear-gradient(180deg, var(--ab18-dark-2), var(--ab18-dark)) !important;
}

/* Generic dark-surface text. Light reading surfaces below override this. */
.rail :is(h1,h2,h3,h4,h5,h6,strong,b,.title,.label,.brand-inner,.nav-button),
.topbar :is(h1,h2,h3,h4,h5,h6,strong,b),
.thread-list :is(h1,h2,h3,h4,h5,h6,strong,b),
.thread-main :is(h1,h2,h3,h4,h5,h6,strong,b),
.panel :is(h1,h2,h3,h4,h5,h6,strong,b,.panel-title,.settings-card-title,.setting-title),
.settings-card :is(h1,h2,h3,h4,h5,h6,strong,b,.settings-card-title,.setting-title),
.abdash-panel :is(h1,h2,h3,h4,h5,h6,strong,b,.panel-title),
.personal-panel :is(h1,h2,h3,h4,h5,h6,strong,b,.panel-title),
.personal-hero :is(h1,h2,h3,h4,h5,h6,strong,b),
.system-card :is(h1,h2,h3,h4,h5,h6,strong,b),
.library-card :is(h1,h2,h3,h4,h5,h6,strong,b),
.contacts-panel :is(h1,h2,h3,h4,h5,h6,strong,b),
.auth-panel :is(h1,h2,h3,h4,h5,h6,strong,b),
.modal-panel :is(h1,h2,h3,h4,h5,h6,strong,b) {
  color: var(--ab18-cream) !important;
}

.rail :is(p,small,em,.copy,.recent-title,.recent-time,.logged-in-as),
.thread-list :is(p,small,em,.copy),
.thread-main :is(p,small,em,.copy),
.panel :is(p,small,em,.copy,.panel-subtitle,.settings-copy,.setting-copy),
.settings-card :is(p,small,em,.copy,.settings-copy,.setting-copy),
.abdash-panel :is(p,small,em,.copy,.setting-copy),
.personal-panel :is(p,small,em,.copy,.setting-copy),
.personal-hero :is(p,small,em,.copy),
.system-card :is(p,small,em,.copy),
.library-card :is(p,small,em,.copy),
.contacts-panel :is(p,small,em,.copy),
.auth-panel :is(p,small,em,.copy),
.modal-panel :is(p,small,em,.copy) {
  color: var(--ab18-cream-muted) !important;
}

/* =========================================================
   TOP RIGHT HEADER: ALWAYS READABLE ON DARK
   ========================================================= */
.topbar {
  background: linear-gradient(180deg, #1C231F, #121814) !important;
  color: var(--ab18-cream-muted) !important;
  border-bottom-color: rgba(242,231,213,.14) !important;
}

.topbar > span,
.topbar #topClock,
.topbar .online,
.topbar .topbar-action,
.topbar .top-install-button,
.topbar .logout-button,
.topbar button,
.topbar button span {
  color: var(--ab18-cream-muted) !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

.topbar .topbar-action svg,
.topbar .top-install-button svg,
.topbar .logout-button svg {
  color: inherit !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

.topbar .online,
.topbar .online * {
  color: var(--ab18-sage-hi) !important;
}

.topbar .dot {
  background: #53D587 !important;
  box-shadow: 0 0 10px rgba(83,213,135,.42) !important;
}

.topbar .topbar-action:hover,
.topbar .top-install-button:hover,
.topbar .logout-button:hover {
  background: rgba(242,231,213,.08) !important;
  color: var(--ab18-cream) !important;
}

.topbar .topbar-action:disabled,
.topbar .top-install-button:disabled,
.topbar .logout-button:disabled {
  color: var(--ab18-cream-dim) !important;
  opacity: 1 !important;
}

/* =========================================================
   ONE BUTTON SYSTEM
   All adjacent actions share one dark neutral treatment.
   ========================================================= */
body .stage :is(
  .action,
  .small-action,
  .focus-icon-action,
  .focus-action-button,
  .walkthrough-button,
  .app-card-action,
  .archive-restore-button,
  .workspace-archive-button,
  .workspace-restore-button,
  .thread-rename,
  .thread-archive-card,
  .file-view-button,
  button[data-uninstall-tool]
) {
  background: #121815 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.24) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body .stage :is(
  .action,
  .small-action,
  .focus-icon-action,
  .focus-action-button,
  .walkthrough-button,
  .app-card-action,
  .archive-restore-button,
  .workspace-archive-button,
  .workspace-restore-button,
  .thread-rename,
  .thread-archive-card,
  .file-view-button,
  button[data-uninstall-tool]
):hover:not(:disabled) {
  background: var(--ab18-dark-hover) !important;
  color: #FFF7EA !important;
  border-color: rgba(201,120,73,.72) !important;
}

/* Primary state uses the same fill, only an orange outline/accent. */
body .stage :is(
  .action.primary,
  .action-new-conversation,
  .action-new-workspace,
  .app-card-action.primary,
  .personal-action-pill.is-primary
) {
  background: #121815 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(201,120,73,.70) !important;
}

/* Disabled controls remain clearly legible. */
body .stage button:disabled,
body .stage .action:disabled,
body .stage .small-action:disabled,
body .stage .focus-icon-action:disabled,
body .stage .focus-action-button:disabled,
body .stage .walkthrough-button:disabled,
body .stage .app-card-action:disabled {
  background: #303732 !important;
  color: #D4CABB !important;
  border-color: rgba(212,202,187,.26) !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* Exact Messenger controls from the red-box screenshot. */
body .stage > section.view.page-view[data-view="messenger"] :is(
  #conversationListButton,
  #messengerFullscreenButton,
  #newThreadButton,
  #newWorkspaceButton
) {
  background: #18201C !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.24) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] :is(
  #newThreadButton,
  #newWorkspaceButton
):disabled {
  background: #303732 !important;
  color: #D4CABB !important;
  border-color: rgba(212,202,187,.26) !important;
  opacity: 1 !important;
}

/* =========================================================
   MESSENGER HISTORY + CHROME
   ========================================================= */
body .stage > section.view.page-view[data-view="messenger"] .thread-list,
body .stage > section.view.page-view[data-view="messenger"] .thread-main,
body .stage > section.view.page-view[data-view="messenger"] .thread-head,
body .stage > section.view.page-view[data-view="messenger"] .thread-compose {
  background: var(--ab18-dark) !important;
  color: var(--ab18-cream) !important;
  border-color: var(--ab18-dark-line) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-list-heading {
  background: #0F1512 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(201,120,73,.54) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-list-heading strong {
  color: var(--ab18-orange-hi) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-list-heading span {
  color: var(--ab18-cream-muted) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card {
  background: #18201C !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.12) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card.is-active {
  background: #28261F !important;
  border-color: rgba(201,120,73,.75) !important;
  box-shadow: inset 3px 0 0 var(--ab18-orange) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card .thread-button,
body .stage > section.view.page-view[data-view="messenger"] .thread-card.is-active .thread-button {
  background: transparent !important;
  color: var(--ab18-cream) !important;
  border-color: transparent !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card :is(
  .thread-name,
  .thread-title
) {
  color: var(--ab18-cream) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card :is(
  .thread-preview,
  .thread-snippet
) {
  color: var(--ab18-cream-muted) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card .thread-time {
  color: var(--ab18-cream-dim) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card .thread-workspace {
  background: rgba(201,120,73,.10) !important;
  color: var(--ab18-orange-hi) !important;
  border-color: rgba(201,120,73,.48) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card .avatar {
  background: rgba(201,120,73,.08) !important;
  color: var(--ab18-orange-hi) !important;
  border-color: rgba(201,120,73,.55) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-card :is(
  .thread-rename,
  .thread-archive-card
) {
  background: #0E1411 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.22) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-head .thread-title {
  color: var(--ab18-cream) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .thread-head .thread-sub {
  color: var(--ab18-cream-muted) !important;
}

/* Light assistant reading cards always use dark text. This comes after all
   dark thread-shell rules so no inherited cream can leak into the paper. */
body .stage > section.view.page-view[data-view="messenger"] .response-content,
body .stage > section.view.page-view[data-view="messenger"] .message:not(.user),
body .stage > section.view.focus-view[data-view="focus"] .response-content {
  background: var(--ab18-paper-hi) !important;
  color: var(--ab18-ink) !important;
  border-color: var(--ab18-paper-line) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .response-content *,
body .stage > section.view.page-view[data-view="messenger"] .message:not(.user) *,
body .stage > section.view.focus-view[data-view="focus"] .response-content * {
  color: var(--ab18-ink) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .response-content a,
body .stage > section.view.page-view[data-view="messenger"] .message:not(.user) a,
body .stage > section.view.focus-view[data-view="focus"] .response-content a {
  color: #8B4829 !important;
}

body .stage > section.view.page-view[data-view="messenger"] .message.user {
  background: #121815 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(201,120,73,.55) !important;
}

body .stage > section.view.page-view[data-view="messenger"] .message.user * {
  color: var(--ab18-cream) !important;
}

/* =========================================================
   FOCUS CONTROLS + COMPOSER
   ========================================================= */
body .stage > section.view.focus-view.is-active[data-view="focus"] .response-meta,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-bar {
  background: var(--ab18-dark-2) !important;
  color: var(--ab18-cream) !important;
  border-color: var(--ab18-dark-line) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select,
body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select:disabled {
  background: #0F1512 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.24) !important;
  -webkit-text-fill-color: var(--ab18-cream) !important;
  opacity: 1 !important;
  filter: none !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects select option {
  background: #0F1512 !important;
  color: var(--ab18-cream) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects :is(
  .focus-icon-action,
  .focus-action-button,
  .walkthrough-button
) {
  background: #18201C !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.24) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] .focus-context-selects :is(
  .focus-icon-action,
  .focus-action-button,
  .walkthrough-button
):disabled {
  background: #303732 !important;
  color: #D4CABB !important;
  opacity: 1 !important;
}

.focus-console,
.thread-compose {
  color: var(--ab18-cream) !important;
}

.focus-console .composer-icon-button,
.thread-compose .composer-icon-button,
.focus-console .send,
.thread-compose .send,
.focus-console .prompt,
.thread-compose .prompt {
  color: var(--ab18-cream-muted) !important;
}

.focus-console .terminal,
.thread-compose .terminal {
  background: #0D1411 !important;
  color: var(--ab18-cream) !important;
  border: 1px solid rgba(242,231,213,.16) !important;
}

/* Remove the pill-inside-a-pill appearance from Focus input. */
body .stage > section.view.focus-view.is-active[data-view="focus"] textarea#focusInput {
  background: transparent !important;
  color: var(--ab18-cream) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  caret-color: var(--ab18-orange-hi) !important;
}

body .stage > section.view.focus-view.is-active[data-view="focus"] textarea#focusInput::placeholder {
  color: var(--ab18-cream-dim) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="messenger"] textarea#messengerInput {
  background: transparent !important;
  color: var(--ab18-cream) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body .stage > section.view.page-view[data-view="messenger"] textarea#messengerInput::placeholder {
  color: var(--ab18-cream-dim) !important;
  opacity: 1 !important;
}

/* =========================================================
   DASHBOARD: EVERY DARK CARD GETS LIGHT TEXT
   ========================================================= */
body .stage > section.view.page-view[data-view="dashboard"] .personal-console {
  color: var(--ab18-cream) !important;
}

body .stage > section.view.page-view[data-view="dashboard"] :is(
  .personal-hero,
  .personal-panel,
  .personal-action-pill,
  .personal-snapshot-card,
  .personal-chart-card,
  .personal-radar-row,
  .personal-app-row,
  .personal-workspace-breakdown-row,
  .personal-usage-row,
  .project-row,
  .system-card,
  .notification-row,
  .library-card,
  .dashboard-chip,
  .personal-empty
) {
  background: linear-gradient(180deg, var(--ab18-dark-2), var(--ab18-dark)) !important;
  color: var(--ab18-cream) !important;
  border-color: var(--ab18-dark-line) !important;
  box-shadow: none !important;
}

/* Explicitly override every text-bearing dashboard class that legacy CSS can
   color independently. */
body .stage > section.view.page-view[data-view="dashboard"] :is(
  .dashboard-hero-title,
  .dashboard-chip strong,
  .panel-title,
  .personal-action-pill strong,
  .personal-snapshot-value,
  .personal-chart-top strong,
  .personal-radar-row strong,
  .personal-app-row strong,
  .personal-workspace-breakdown-row strong,
  .personal-usage-row strong,
  .project-title,
  .system-card-title,
  .notification-title,
  .library-title
) {
  color: var(--ab18-cream) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="dashboard"] :is(
  .dashboard-hero-copy,
  .dashboard-chip span,
  .setting-copy,
  .personal-action-pill span,
  .personal-snapshot-copy,
  .personal-chart-top span,
  .personal-chart-readout,
  .personal-radar-row em,
  .personal-app-row em,
  .personal-workspace-breakdown-row em,
  .personal-usage-row span,
  .project-copy,
  .system-card-copy,
  .notification-copy,
  .library-copy,
  .personal-panel-copy
) {
  color: var(--ab18-cream-muted) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="dashboard"] :is(
  .personal-snapshot-label,
  .personal-snapshot-trend,
  .personal-chart-top em,
  .personal-radar-row b,
  .personal-app-row b,
  .personal-workspace-breakdown-row b,
  .project-state,
  .system-card-value,
  .settings-kicker
) {
  color: var(--ab18-orange-hi) !important;
  opacity: 1 !important;
}

body .stage > section.view.page-view[data-view="dashboard"] .personal-action-pill,
body .stage > section.view.page-view[data-view="dashboard"] .personal-action-pill.is-primary,
body .stage > section.view.page-view[data-view="dashboard"] .personal-action-pill.action-new-workspace,
body .stage > section.view.page-view[data-view="dashboard"] .personal-action-pill.action-walkthrough {
  background: #18201C !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.20) !important;
}

body .stage > section.view.page-view[data-view="dashboard"] .personal-action-pill:hover {
  background: var(--ab18-dark-hover) !important;
  border-color: rgba(201,120,73,.65) !important;
}

body .stage > section.view.page-view[data-view="dashboard"] :is(
  .personal-chart-card,
  .personal-snapshot-card,
  .personal-radar-row,
  .personal-usage-row
) * {
  text-shadow: none !important;
}

/* =========================================================
   APPS / FILES / CONTACTS / SETTINGS: CONSISTENT DARK CARDS
   ========================================================= */
body .stage [data-view="tools"] :is(.app-library-title,.app-card-title,.app-library-row strong,.app-card strong),
body .stage [data-view="files"] :is(.file-title,.project-title,strong),
body .stage [data-view="contacts"] :is(.contact-title,.project-title,strong),
body .stage [data-view="settings"] :is(.settings-card-title,.setting-title,.project-title,strong) {
  color: var(--ab18-cream) !important;
}

body .stage [data-view="tools"] :is(.app-library-description,.app-card-copy,.app-card-note,.app-empty-copy),
body .stage [data-view="files"] :is(.file-copy,.project-copy,.setting-copy),
body .stage [data-view="contacts"] :is(.contact-copy,.project-copy,.setting-copy),
body .stage [data-view="settings"] :is(.settings-copy,.setting-copy,.project-copy) {
  color: var(--ab18-cream-muted) !important;
}

body .stage [data-view="tools"] :is(.app-library-subtitle,.app-card-state),
body .stage [data-view="files"] :is(.settings-kicker,.project-state),
body .stage [data-view="contacts"] :is(.settings-kicker,.project-state),
body .stage [data-view="settings"] :is(.settings-kicker,.project-state,.settings-pill) {
  color: var(--ab18-orange-hi) !important;
}

body .stage :is(
  .app-filter-bar input,
  .app-filter-bar select,
  .file-browser-controls input,
  .file-browser-controls select,
  .settings-card input,
  .settings-card select,
  .settings-card textarea,
  .modal-panel input,
  .modal-panel select,
  .modal-panel textarea
) {
  background: #0F1512 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(242,231,213,.22) !important;
  -webkit-text-fill-color: var(--ab18-cream) !important;
}

body .stage :is(
  .app-filter-bar input,
  .file-browser-controls input,
  .settings-card input,
  .settings-card textarea,
  .modal-panel input,
  .modal-panel textarea
)::placeholder {
  color: var(--ab18-cream-dim) !important;
  opacity: 1 !important;
}

body .stage select option {
  background: #0F1512 !important;
  color: var(--ab18-cream) !important;
}

/* Remove / uninstall is readable, but not a random third button palette. */
body .stage :is(button[data-uninstall-tool], .app-card-action.danger, .attachment-remove) {
  background: #121815 !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(201,120,73,.70) !important;
  opacity: 1 !important;
}

/* =========================================================
   RAIL
   ========================================================= */
.rail {
  background: linear-gradient(180deg, #202722, #101612) !important;
}

.rail :is(.nav-button,.rail-footer,.recent-title,.recent-time,.logged-in-as,.label,.logo-sub) {
  color: var(--ab18-cream-muted) !important;
  opacity: 1 !important;
}

.rail .nav-button:hover {
  background: rgba(242,231,213,.06) !important;
  color: var(--ab18-cream) !important;
}

.rail .nav-button.is-active,
.rail .nav-button[aria-current="page"] {
  background: rgba(242,231,213,.08) !important;
  color: var(--ab18-cream) !important;
  border-color: rgba(201,120,73,.48) !important;
}

.rail .rail-tier-label,
.rail .success,
.rail .online {
  color: var(--ab18-orange-hi) !important;
}

/* =========================================================
   FOOTER: RESTORE LEGAL LINKS ABOVE COPYRIGHT
   ========================================================= */
body .app .core-legal-footer,
body .app.compact-nav .core-legal-footer {
  background: linear-gradient(180deg, #1B211E, #101512) !important;
  border-top: 1px solid rgba(242,231,213,.14) !important;
  color: var(--ab18-cream-muted) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
}

body .app .core-legal-footer .core-footer-links {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 5px clamp(14px, 1.7vw, 24px) !important;
  pointer-events: auto !important;
}

body .app .core-legal-footer .core-footer-links button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--ab18-cream-muted) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

body .app .core-legal-footer .core-footer-links button:hover {
  color: var(--ab18-orange-hi) !important;
}

body .app .core-legal-footer .core-footer-copy {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #958D81 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* =========================================================
   LAST-RESORT SURFACE GUARANTEES
   These enforce the user's explicit rule even if an older stylesheet has a
   more specific legacy text declaration.
   ========================================================= */
body .stage :is(
  .thread-list,
  .thread-head,
  .thread-compose,
  .personal-hero,
  .personal-panel,
  .panel,
  .settings-card,
  .abdash-panel,
  .system-card,
  .library-card,
  .file-folder,
  .contacts-panel,
  .auth-panel,
  .modal-panel
) :is(.muted,.subtle,.copy,small,em) {
  color: var(--ab18-cream-muted) !important;
}

body .stage :is(
  .thread-list,
  .thread-head,
  .thread-compose,
  .personal-hero,
  .personal-panel,
  .panel,
  .settings-card,
  .abdash-panel,
  .system-card,
  .library-card,
  .file-folder,
  .contacts-panel,
  .auth-panel,
  .modal-panel
) :is(h1,h2,h3,h4,h5,h6,strong,b,.title) {
  color: var(--ab18-cream) !important;
}

/* Light reading surfaces win absolutely at the end. */
body .stage :is(.response-content,.message:not(.user),.light-surface,.paper-surface) {
  background-color: var(--ab18-paper-hi) !important;
  color: var(--ab18-ink) !important;
}

body .stage :is(.response-content,.message:not(.user),.light-surface,.paper-surface) * {
  color: var(--ab18-ink) !important;
}