/* Compatibility entrypoint. Remove the imported implementation after the
   page has passed the next Night/Day/Warm desktop and mobile screenshot run. */
@import url("../themes/chat.css?v=theme-chat-20260711-13");

/* The plane is an outlined SVG, so lock the actual drawing paths in the final
   Chat layer instead of relying on inherited button colour. */
/* Chat page hosts must follow the active theme instead of inheriting the
   frozen legacy Night canvas. Keep message content itself transparent. */
body[data-app-theme][data-view="chat"] .chat-shell {
  background: var(--color-page) !important;
  color: var(--color-text) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell > .app-page,
body[data-app-theme][data-view="chat"] .chat-shell .panel.main,
body[data-app-theme][data-view="chat"] .chat-shell .messages {
  background: transparent !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .chat-head,
body[data-app-theme][data-view="chat"] .chat-shell .composer {
  background: var(--color-chrome) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .composer {
  box-shadow: var(--shadow-card) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .composer textarea {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .chat-plus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .ai-response-body strong,
body[data-app-theme][data-view="chat"] .user-response .ai-response-body strong,
body[data-app-theme][data-view="chat"] .ai-response-body b,
body[data-app-theme][data-view="chat"] .user-response .ai-response-body b,
body[data-app-theme][data-view="chat"] .ai-response-body q,
body[data-app-theme][data-view="chat"] .user-response .ai-response-body q {
  color: var(--color-highlight) !important;
  -webkit-text-fill-color: var(--color-highlight) !important;
}

body[data-app-theme][data-view="chat"] .moon-star-em,
body[data-app-theme][data-view="chat"] .ai-response-body .moon-star-em,
body[data-app-theme][data-view="chat"] .user-response .ai-response-body .moon-star-em,
body[data-app-theme][data-view="chat"] .bubble .moon-star-em {
  color: var(--color-highlight) !important;
  -webkit-text-fill-color: var(--color-highlight) !important;
}

body[data-app-theme][data-view="chat"] [data-theme-highlight="quote"] {
  color: var(--color-highlight) !important;
  -webkit-text-fill-color: var(--color-highlight) !important;
}

body[data-app-theme][data-view="chat"] .chat-search-panel,
body[data-app-theme][data-view="chat"] .chat-search-head,
body[data-app-theme][data-view="chat"] .chat-search-results,
body[data-app-theme][data-view="chat"] .chat-search-results button {
  background: var(--color-panel-solid) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body[data-app-theme][data-view="chat"] .chat-search-box,
body[data-app-theme][data-view="chat"] .chat-search-box input {
  background: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .composer .icon-send.respond svg.paper-plane {
  color: var(--color-on-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .composer .icon-send.respond svg.paper-plane path {
  fill: none !important;
  stroke: var(--color-on-accent) !important;
}

/* Kiki messages are ink on the page. Remove the legacy Warm rectangle whose
   transparent left edge stopped abruptly at the message container boundary. */
body[data-app-theme][data-view="chat"] .chat-shell .user-card-msg,
body[data-app-theme][data-view="chat"] .chat-shell .user-response-wrap,
body[data-app-theme][data-view="chat"] .chat-shell .user-response {
  background: transparent !important;
  box-shadow: none !important;
}

/* Audio used to inherit the character colour from an inline custom property.
   Theme accent owns every playback state instead. */
body[data-app-theme][data-view="chat"] .chat-shell .voice-player {
  --voice-accent: var(--color-accent) !important;
  --stitch-primary: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .voice-player-button {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .voice-player-button span::before {
  border-left-color: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .voice-player.is-active .voice-player-button span::before,
body[data-app-theme][data-view="chat"] .chat-shell .voice-player.is-active .voice-player-button span::after {
  background: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .voice-player-timeline input {
  accent-color: var(--color-accent) !important;
}

/* The status dropdown belongs to the themed top bar. Its legacy declaration
   was a fixed black/pink Night card and leaked into Warm and Blue Night. */
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover {
  border-color: var(--color-border) !important;
  background: var(--color-panel-solid) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-modal) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover header span,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover header b,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover p,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover em,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel strong,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel small {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover header span,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel small,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover p,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-residue-popover em {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel i {
  background: var(--color-accent-soft) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel,
body[data-app-theme][data-view="chat"] .chat-shell .somatic-channel:not(.active) {
  opacity: 1 !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .sensory-kernel-note span,
body[data-app-theme][data-view="chat"] .chat-shell .sensory-kernel-note small {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .sensory-kernel-note small b {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .sensory-kernel-note i {
  border-color: var(--color-border-strong) !important;
  background: var(--color-accent-soft) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Compact tool activity is an inline status, never a card.  Keep every host
   and text node paint-free so generic card/strong rules cannot add a slab. */
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-msg,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-card,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy strong,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy strong em,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy small {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy strong,
body[data-app-theme][data-view="chat"] .chat-shell .agent-event-copy strong em {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}