@import url('/fonts/noto-sans-sc-v2/font.css');
@import url('/fonts/kaomoji-v1.css');

/* Deliver the same light sans face to phones and desktops. */
:root {
  --chat-reading-font: "Acrux Reading Sans", "DengXian", "PingFang SC", "Noto Sans SC", sans-serif, var(--font-symbol-fallback);
  --mobile-chat-font: var(--chat-reading-font);
}

.chat-shell.chat-shell.chat-shell {
  --shell-font-ui: var(--chat-reading-font) !important;
  --shell-font-reading: var(--chat-reading-font) !important;
}

.chat-shell.chat-shell.chat-shell :is(.message-copy-content, .composer textarea) {
  font-weight: 350;
}

:root[data-acrux-theme='moonwhite'] {
  --theme-body-text: var(--theme-reading-ink, #262626) !important;
  --theme-heading-text: var(--theme-reading-ink, #262626) !important;
  --theme-muted-text: var(--theme-reading-ink, #262626) !important;
  --theme-ink-heavy: var(--theme-reading-ink, #262626) !important;
  --palette-body: var(--theme-reading-ink, #262626) !important;
  --palette-muted: var(--theme-reading-ink, #262626) !important;
  --text-primary: var(--theme-reading-ink, #262626) !important;
  --text-secondary: var(--theme-reading-ink, #262626) !important;
  --text-muted: var(--theme-reading-ink, #262626) !important;
}

.theme-reading-ink .theme-mode-toggle {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-reading-ink .theme-mode-toggle button {
  min-height: 36px;
}

.theme-reading-ink input[type='range']::-webkit-slider-runnable-track {
  background: color-mix(in srgb, var(--theme-settings) 35%, transparent);
}

.theme-reading-ink input[type='range']::-moz-range-track {
  background: color-mix(in srgb, var(--theme-settings) 35%, transparent);
}

/* Moonboat: the scene stays at the foot; only the quiet reading surface grows. */
:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: #e7edff;
  padding-bottom: 24px;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 112px;
  max-height: 100%;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  /* Align the artwork's horizon so only the bottom 16px contains dark water. */
  background:
    linear-gradient(transparent calc(100% - 16px), rgba(34,70,204,.38)),
    url('/theme-details/moon-scene-base-v3.png') center calc(83.5% + 2px) / max(180%, 640px) auto no-repeat;
  mask-image: linear-gradient(transparent, #000 20px);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer::before {
  content: none;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer textarea {
  color: var(--theme-body-text);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer textarea::placeholder {
  color: var(--theme-body-text);
  opacity: 1;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .conversation-search input::placeholder {
  color: var(--theme-body-text);
  opacity: 1;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer button:not(.stop) {
  color: var(--theme-body-text);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer .send-button:not(.stop) {
  /* The moonboat's water supplies the button blue; the arrow stays moon-white. */
  background: rgba(95,130,235,.24);
  color: #fff;
  border: 0;
  box-shadow: none;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer .send-button:not(:disabled):not(.stop) {
  background: #5f82eb;
  opacity: 1;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer .send-button:not(:disabled):not(.stop):is(:hover, :focus-visible) {
  background: #406ce2;
  color: #fff;
  box-shadow: none;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer .send-button:not(.stop):focus-visible {
  outline: 2px solid #406ce2;
  outline-offset: 3px;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer .send-button:disabled {
  background: rgba(95,130,235,.24);
  color: #fff;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user {
  width: fit-content;
  max-width: min(78%, 680px);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user .message-surface {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: 0;
  background: rgba(238,241,255,.86) !important;
  border: 0;
  border-radius: 22px 22px 8px 22px;
  padding: 18px 22px 22px;
  color: var(--theme-body-text);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user .message-surface .markdown-content > :last-child {
  margin-bottom: 0;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user .message-surface::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 64px;
  max-height: 100%;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(transparent calc(100% - 16px), rgba(34,70,204,.38)),
    url('/theme-details/moon-scene-base-v3.png') center calc(83.5% - 5px) / max(100%, 640px) auto no-repeat;
  mask-image: linear-gradient(transparent, #000 16px);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user .message-surface::after {
  content: '';
  position: absolute;
  top: auto;
  bottom: -4px;
  right: -6px;
  width: 72px;
  height: 48px;
  z-index: -1;
  pointer-events: none;
  background: url('/theme-details/moon-scene-corner-v3.png') center / contain no-repeat;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .composer-band {
  overflow: visible;
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .reading-paper-frame {
  padding-bottom: calc(var(--floating-composer-clearance, 144px) + 26px);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .message-viewport {
  scroll-padding-bottom: calc(var(--floating-composer-clearance, 144px) + 26px);
}

:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .sidebar-footer .sidebar-tool,
:root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .sidebar-footer .sidebar-tool > svg {
  color: #fff !important;
}

@media (max-width: 860px) {
  :root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .chat-message.user {
    max-width: calc(100% - 12px);
  }

  :root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .sidebar-footer {
    background: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }

  :root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .sidebar-footer .sidebar-tool {
    text-shadow: 0 0 4px rgba(255,255,255,.45);
  }

  :root[data-acrux-theme='moonwhite'] .chat-shell.chat-shell.chat-shell .sidebar-footer .sidebar-tool > svg {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.5));
  }
}

/* Chat controls share the ceiling; only maintenance needs a separate row. */
.chat-shell.chat-shell.chat-shell:has(> .chat-main > .ops-status.has-conversation-controls) .shell-control-band-surface {
  display: none;
}

.chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls {
  position: static;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls .ops-status-compact {
  min-height: 0;
  padding: 0;
}

.chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls:not(.is-maintenance) :is(.ops-status-overview, .ops-status-details) {
  display: none;
}

.chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls .ops-server-lights {
  position: fixed;
  top: calc(var(--procreate-topbar-height) - 22px);
  right: 16px;
  z-index: 4;
  margin: 0;
}

.chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls.is-maintenance .ops-status-compact {
  padding: 4px var(--shell-main-gutter, 22px);
}

.chat-shell.chat-shell.chat-shell:has(> .chat-main > .ops-status.has-conversation-controls) > .theme-ceiling .ceiling-motto {
  right: 84px;
}

@media (min-width: 861px) {
  .chat-shell.chat-shell.chat-shell:has(> .chat-main > .ops-status.has-conversation-controls) .conversation-search-row {
    min-height: 48px;
  }

  .chat-shell.chat-shell.chat-shell:has(> .chat-main > .ops-status.has-conversation-controls) .conversation-sidebar::before {
    top: var(--procreate-topbar-height);
  }
}

@media (max-width: 860px) {
  .chat-shell.chat-shell.chat-shell > .chat-main > .ops-status.has-conversation-controls.is-maintenance .ops-status-compact {
    padding: 4px 12px;
  }
}

.chat-shell.chat-shell.chat-shell .ceiling-brand-toggle {
  display: block;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.chat-shell.chat-shell.chat-shell .ceiling-brand-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.chat-shell.chat-shell.chat-shell .theme-ceiling :is(.brand-name, .brand-version, .brand-sub, .ceiling-motto) {
  text-shadow: none;
}

/* Cast one shared shadow from the finished mark and lettering. */
.chat-shell.chat-shell.chat-shell .theme-ceiling :is(.sidebar-brand-identity, .ceiling-motto) {
  filter: drop-shadow(0 2px 1px rgba(48,36,87,.8));
}

.chat-shell.chat-shell.chat-shell .ceiling-brand .brand-mark {
  position: relative;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  filter: none;
}

/* Keep the mask inside the shadow layer so it cannot clip the cast shadow. */
.chat-shell.chat-shell.chat-shell .ceiling-brand .brand-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff var(--shell-brand-mark-art-image, none) center / contain no-repeat;
  -webkit-mask: var(--shell-brand-mark-image, none) center / 132% no-repeat;
  mask: var(--shell-brand-mark-image, none) center / 132% no-repeat;
  filter: brightness(0) invert(1);
}

/* Chat notices use quiet surfaces; rounded cards do not need a colored rail. */
.chat-shell.chat-shell.chat-shell :is(.thought-block, .tool-activity, .message-error, .memory-capture pre) {
  border: 0;
  box-shadow: none;
}

.chat-shell.chat-shell.chat-shell :is(.thought-block, .tool-activity) {
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-surface) 82%, var(--theme-primary-soft));
}

.chat-shell.chat-shell.chat-shell .tool-activity:is(.memory, .core-memory, .reminder) {
  background: color-mix(in srgb, var(--theme-surface) 70%, #fff1bc);
}

.chat-shell.chat-shell.chat-shell .tool-activity > svg {
  color: var(--muted);
  flex-shrink: 0;
}

.chat-shell.chat-shell.chat-shell .tool-activity-action {
  color: var(--theme-control-ink, var(--ink));
  border: 0;
  background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
}

.chat-shell.chat-shell.chat-shell .tool-activity-action:hover {
  background: var(--theme-surface);
}

.chat-shell.chat-shell.chat-shell :is(.thought-block > summary, .tool-activity-action):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Apply the same edge treatment to receipts, drawers and floating notices. */
:root .chat-shell.chat-shell.chat-shell .message-column .star-cross-archive-receipt,
:root .chat-shell.chat-shell.chat-shell :is(.owner-memory-receipt-item, .message-detail-disclosure pre, .notice-bar),
:root :is(.app-update-banner, .acrux-assembly-alert),
:root .health-drawer :is(.health-status-card, .health-error, .health-loading),
:root .memory-history-modal .memory-history-item,
:root .archive-page :is(.archive-foyer-whisper, .archive-foyer-keepsake),
:root .archive-marginalia .archive-marginalia-notes p {
  border: 0;
}

:root .chat-shell.chat-shell.chat-shell .message-column .star-cross-archive-receipt,
:root .chat-shell.chat-shell.chat-shell .owner-memory-receipt-item,
:root .health-drawer .health-status-card {
  border-radius: 10px;
}

/* Selection is shown by its surface, without an extra colored side rail. */
:root .local-archive-shell .local-archive-entry-list > button.active,
:root .archive-entry.selected,
:root .settings-navigation button[aria-current],
:root .theme-saved-choice.active,
:root .page-navigation a:is(:hover, [aria-current]),
:root .inner-directory-field .diary-calendar button.selected,
:root .chat-shell.chat-shell .unified-directory-links button[aria-current],
:root .chat-shell.chat-shell .conversation-mode-tabs button.active {
  box-shadow: none;
}

:root .home-page-shell .archive-entry.selected::before {
  content: none;
}

:root .archive-page :is(.archive-night-artifacts button, .archive-foyer-card-row article, .digest-card),
:root .room-promise .archive-card-with-marginalia,
:root .person-section-current .person-prose {
  border-left: 0;
}