/*
 * Theme Architecture v1 — Chat component layer.
 * All chat colours derive from the global semantic tokens. This keeps Warm,
 * Day and Night on the same interaction structure without palette borrowing.
 */

:root {
  --chat-message-g-surface: var(--color-surface);
  --chat-message-kiki-surface: var(--color-surface-raised);
  --chat-message-line: var(--color-border);
  --chat-composer-surface: var(--color-surface-raised);
  --chat-control-surface: var(--color-accent-soft);
  --chat-card-surface: var(--color-surface-raised);
}

/* 页面背景、顶栏与消息流 */
.chat-shell {
  background: var(--color-page) !important;
  color: var(--color-text) !important;
}

/* Day chat stays a cool blush-white field, never warm paper yellow. */
body[data-app-theme="day"][data-view="chat"] .chat-shell,
body[data-app-theme="day"][data-view="chat"] .chat-shell .messages,
body[data-app-theme="day"][data-view="chat"] .chat-shell .panel.main {
  background: var(--color-page-soft) !important;
}

.chat-shell .panel.main,
.chat-shell .messages {
  border-color: var(--chat-message-line) !important;
  background: transparent !important;
  color: var(--color-text) !important;
}

.chat-shell .chat-head {
  border-color: var(--chat-message-line) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .chat-head h2,
.chat-shell .chat-status,
.chat-shell .chat-identity,
.chat-shell .chat-identity h2 {
  color: var(--color-text) !important;
}

.chat-shell .chat-back,
.chat-shell .chat-menu,
.chat-shell .chat-bag,
.chat-shell .chat-plus,
.chat-shell .icon-send {
  color: var(--color-accent) !important;
}

/* 老G与琪琪消息、引用与时间线 */
.chat-shell .ai-msg,
.chat-shell .ai-response,
.chat-shell .ai-response-wrap,
.chat-shell .system-message-card,
.chat-shell .piggy-chat-card,
.chat-shell .live-harness-msg .ai-response-wrap {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-message-g-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .ai-msg::before {
  background: var(--color-accent) !important;
}

.chat-shell .user-card-msg,
.chat-shell .user-response,
.chat-shell .user-response-wrap {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-message-kiki-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .user-card-msg::after {
  background: var(--color-border-strong) !important;
}

.chat-shell .ai-response-body,
.chat-shell .user-response .ai-response-body,
.chat-shell .ai-response-body *,
.chat-shell .user-response .ai-response-body * {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Message copy must never inherit old paragraph/card fills. */
.chat-shell .ai-response,
.chat-shell .user-response,
.chat-shell .ai-response-body,
.chat-shell .user-response .ai-response-body,
.chat-shell .ai-response-body > p,
.chat-shell .user-response .ai-response-body > p {
  background: transparent !important;
  box-shadow: none !important;
}

/* Ordinary messages are ink on the page, never filled bubbles.
 * Identity is carried only by the thin side line: left for G, right for Kiki.
 */
.chat-shell .ai-msg,
.chat-shell .ai-response,
.chat-shell .ai-response-wrap,
.chat-shell .user-card-msg,
.chat-shell .user-response,
.chat-shell .user-response-wrap {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Use the original message rails, whose height follows the message box. */
.chat-shell .ai-msg {
  border-left: 3px solid var(--color-accent) !important;
  padding-left: 16px !important;
}

.chat-shell .user-card-msg {
  border-right: 3px solid var(--color-border-strong) !important;
  padding-right: 18px !important;
}

.chat-shell .ai-msg::before {
  display: none !important;
}

.chat-shell .user-card-msg::after {
  display: none !important;
}

body[data-app-theme="warm"][data-view="chat"] .chat-shell .ai-msg {
  border-left-color: var(--color-accent) !important;
}

.chat-shell .quote-block,
.chat-shell .quote-note-card,
.chat-shell .quote-fiction-card {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-control-surface) !important;
  color: var(--color-text-muted) !important;
}

.chat-shell .quote-block span,
.chat-shell .quote-note-card span,
.chat-shell .quote-fiction-card em,
.chat-shell .message-receipt,
.chat-shell .message-receipt time {
  color: var(--color-text-dim) !important;
  -webkit-text-fill-color: var(--color-text-dim) !important;
  border-color: var(--chat-message-line) !important;
}

/* Quote UI is rendered in two different roots: the composer preview stays
   inside Chat, while the text-selection popover is mounted on <body>.  Keep
   both on semantic theme tokens so a light/blue/warm room never inherits the
   old Night surface. */
body[data-app-theme][data-view="chat"] .chat-shell .quote-preview {
  border-color: var(--color-border) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .quote-preview .quote-block {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-soft) !important;
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .quote-preview .quote-block span {
  color: var(--color-text-dim) !important;
  -webkit-text-fill-color: var(--color-text-dim) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .quote-preview > button {
  border: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] #quote-selection-popover,
body[data-app-theme][data-view="chat"] .quote-selection-popover {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
  box-shadow: var(--shadow-card) !important;
}

body[data-app-theme][data-view="chat"] #quote-selection-popover .material-symbols-outlined,
body[data-app-theme][data-view="chat"] .quote-selection-popover .material-symbols-outlined {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

/* Composer、附件与 typing */
.chat-shell .composer,
.chat-shell .composer.selection-mode {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-composer-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .composer textarea {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-composer-surface) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  caret-color: var(--color-accent) !important;
}

.chat-shell .composer textarea::placeholder {
  color: var(--color-text-dim) !important;
  -webkit-text-fill-color: var(--color-text-dim) !important;
}

.chat-shell .icon-send.respond,
.chat-shell .icon-send.respond.is-stopping {
  border-color: var(--color-accent-strong) !important;
  background: var(--color-accent-strong) !important;
  color: var(--color-on-accent) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .icon-send.respond .paper-plane,
.chat-shell .icon-send.respond.is-stopping .paper-plane {
  color: var(--color-on-accent) !important;
}

.chat-shell .icon-send.respond .paper-plane path {
  stroke: var(--color-on-accent) !important;
}

.chat-shell .chat-attachments figure,
.chat-shell .attachment-preview figure,
.chat-shell .attachment-expired,
.chat-shell .g-typing,
.chat-shell .typing-bubble {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  color: var(--color-text-muted) !important;
  box-shadow: var(--shadow-card) !important;
}

.chat-shell .g-typing span,
.chat-shell .typing-bubble span {
  background: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* Writing states stay readable in every theme. */
.writing-status-pill,
.diary-writing-status {
  border-color: var(--chat-message-line) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  box-shadow: none !important;
}

.writing-status-pill.done,
.diary-writing-status.done {
  border-color: var(--color-success) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

.writing-status-pill.failed,
.diary-writing-status.failed {
  border-color: var(--color-error) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

.writing-dots i,
.g-typing span,
.typing-bubble span {
  background: var(--color-accent) !important;
  color: var(--color-accent) !important;
  box-shadow: none !important;
}

/* 加号菜单、侧边栏、搜索、小书包与纸条账本 */
.plus-menu,
.context-menu,
.chat-search-panel,
.chat-bag-sheet,
.chat-drawer,
.chat-bridge-panel,
.selection-bar {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-modal) !important;
}

.plus-menu button,
.context-menu button,
.chat-search-panel button,
.chat-bag-sheet button,
.chat-drawer button,
.chat-bridge-panel button,
.selection-bar button {
  border-color: var(--chat-message-line) !important;
  background: transparent !important;
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

.plus-menu-grid button > .material-symbols-outlined,
.chat-search-box,
.chat-search-results button,
.chat-drawer .drawer-card,
.chat-drawer .memory-control input,
.chat-bag-content .bridge-card,
.chat-bag-content summary,
.chat-bag-content .bridge-context-preview,
.proactive-ledger {
  border-color: var(--chat-message-line) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.chat-search-box input,
.chat-search-box input::placeholder,
.chat-bag-content .bridge-card p,
.chat-bag-content .bridge-card small,
.chat-bag-content .bridge-card > small,
.chat-bag-content .bridge-card .bridge-card-kicker,
.chat-bag-content .bridge-context-preview,
.chat-bag-content .bridge-context-preview *,
.proactive-ledger small,
.proactive-ledger p,
.proactive-ledger summary,
.proactive-ledger-stats,
.proactive-ledger-stats b {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

.chat-bag-content .bridge-card > p,
.chat-bag-content .bridge-card > div,
.chat-bag-content .bridge-card > details,
.chat-bag-content .bridge-context-preview,
.proactive-ledger,
.proactive-ledger details,
.proactive-ledger-list article,
.proactive-ledger-longing {
  border-color: var(--chat-message-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-bag-content .bridge-layers span {
  border-color: var(--chat-message-line) !important;
  background: transparent !important;
  color: var(--color-accent) !important;
}

/* The bag is a reading sheet.  Its inner flow must not create stacked cards. */
.chat-bag-content,
.chat-bag-content .bridge-card,
.chat-bag-content .bridge-card > *,
.chat-bag-content .bridge-card > p,
.chat-bag-content .bridge-card > div,
.chat-bag-content .bridge-card > details,
.chat-bag-content .bridge-context-preview,
.chat-bag-content .bridge-context-preview *,
.chat-bag-content .proactive-ledger,
.chat-bag-content .proactive-ledger *,
.chat-bag-content .bridge-explain,
.chat-bag-content .bridge-explain * {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* The drawer's automatic-memory control is a normal paper control. */
.chat-drawer .stitch-summary-row {
  border-color: var(--chat-message-line) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.chat-drawer .stitch-summary-row strong { color: var(--color-text) !important; }
.chat-drawer .stitch-summary-row small,
.chat-drawer .memory-control label { color: var(--color-text-muted) !important; }
.chat-drawer .stitch-summary-row b,
.chat-drawer .stitch-summary-icon { color: var(--color-accent) !important; }

/* 心声、编辑、资料与 Reminder */
.heart-modal,
.chat-edit-modal,
.profile-modal,
.reminder-chat-modal,
.recurring-scope-modal {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-modal) !important;
}

.heart-main h4,
.chat-edit-modal h3,
.profile-modal h3,
.reminder-chat-modal h3,
.recurring-scope-modal h3 {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

.heart-main p,
.reminder-chat-modal p,
.reminder-chat-modal small,
.recurring-scope-modal p,
.recurring-scope-modal small {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

.reminder-candidates,
.reminder-candidate,
.reminder-inline-actions button,
.reminder-inline-status,
.snooze-options,
.snooze-options button,
.reminder-candidate-actions button {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  color: var(--color-text-muted) !important;
  box-shadow: var(--shadow-card) !important;
}

.reminder-candidate strong,
.reminder-modal-kicker,
.reminder-inline-actions button,
.reminder-inline-status,
.snooze-options button,
.reminder-candidate-actions button {
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
}

/* Harness 事件、候选、执行、完成与失败 */
.harness-trace-card,
.harness-trace-card-v2,
.harness-candidate-option,
.agent-event-card {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.harness-trace-label,
.harness-step-copy strong,
.harness-candidate-option strong,
.agent-event-copy strong {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

.harness-trace-status,
.harness-step-copy span,
.harness-step-copy time,
.harness-candidate-option small,
.agent-event-copy small {
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
}

.harness-candidate-option.selected,
.harness-trace-card-v2 .harness-candidate-option.selected {
  border-color: var(--color-border-strong) !important;
  background: var(--color-accent-soft) !important;
}

.harness-trace-actions button,
.harness-candidate-confirm,
.harness-status-bar,
.harness-step-dot,
.agent-event-dot,
.agent-event-dots i {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
  color: var(--color-text-inverse) !important;
}

/* Status is expressed by the small bar/dots, never by a blue or green outer
   frame.  The card stays a single clean surface in all three themes. */
.harness-trace-card[data-status="failed"],
.harness-trace-card-v2[data-status="failed"],
.harness-trace-card[data-status="executing"],
.harness-trace-card-v2[data-status="executing"],
.harness-trace-card[data-status="completed"],
.harness-trace-card-v2[data-status="completed"] {
  border-color: var(--chat-message-line) !important;
}

/* Keep the Harness card's own paper fill; only its inner rows are transparent.
   This prevents the old lower slab/glow without hollowing out the card. */
.harness-trace-card,
.harness-trace-card-v2 {
  overflow: hidden !important;
  border-color: var(--chat-message-line) !important;
  background: var(--chat-card-surface) !important;
  background-image: none !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.harness-trace-card .harness-trace-head,
.harness-trace-card-v2 .harness-trace-head,
.harness-trace-card .harness-trace-body,
.harness-trace-card-v2 .harness-trace-body,
.harness-trace-card .harness-trace-step,
.harness-trace-card-v2 .harness-trace-step,
.harness-trace-card .harness-step-copy,
.harness-trace-card-v2 .harness-step-copy,
.harness-trace-card .harness-step-copy > div,
.harness-trace-card-v2 .harness-step-copy > div {
  background: transparent !important;
  background-image: none !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  box-shadow: none !important;
}

.harness-trace-card[data-status="executing"],
.harness-trace-card-v2[data-status="executing"] {
  --harness-status: var(--color-accent) !important;
}

/* The live message host is only layout.  Its earlier, more-specific message
   rule was leaving a second dark rectangle behind the real Harness card. */
.chat-shell .live-harness-msg .ai-response-wrap {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.harness-executing-dots i,
.harness-step-live-dots i,
.harness-trace-step.active .harness-step-dot {
  background: var(--color-accent) !important;
  box-shadow: none !important;
}

@keyframes harnessLiveDotPulse {
  0%, 100% { opacity: 0.28; transform: scale(0.72); background: var(--color-accent); box-shadow: none; }
  45% { opacity: 1; transform: scale(1.18); background: var(--color-accent); box-shadow: none; }
  72% { opacity: 0.7; transform: scale(0.92); background: var(--color-accent); box-shadow: none; }
}

/* External returns use the same readable paper card across themes. */
.xhs-chat-card,
.xhs-chat-card.github-chat-card {
  border-color: var(--chat-message-line) !important;
  background: var(--color-surface-raised) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-card) !important;
}

.xhs-chat-card strong,
.xhs-chat-card small,
.xhs-chat-card .xhs-chat-card-head div > span,
.xhs-chat-card .xhs-summary,
.xhs-chat-card .xhs-reason,
.xhs-chat-card .xhs-actions a,
.xhs-chat-card .xhs-actions button,
.xhs-chat-card .xhs-actions span,
.github-topics span {
  border-color: var(--chat-message-line) !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  box-shadow: none !important;
}

.xhs-chat-card strong { color: var(--color-text) !important; -webkit-text-fill-color: var(--color-text) !important; }
.xhs-chat-card .xhs-actions a,
.xhs-chat-card .xhs-actions button { color: var(--color-accent) !important; -webkit-text-fill-color: var(--color-accent) !important; }

/* 多选、语音、图片过期与错误状态 */
.chat-shell .select-dot input,
.chat-shell .selection-cancel,
.chat-shell .selection-delete,
.voice-player button {
  border-color: var(--chat-message-line) !important;
  background: var(--chat-control-surface) !important;
  color: var(--color-accent) !important;
}

.chat-shell .select-dot input:checked {
  border-color: var(--color-accent) !important;
  background: var(--color-accent) !important;
}

.voice-player-timeline input {
  accent-color: var(--color-accent) !important;
}

.attachment-expired,
.chat-render-fallback-msg,
.soft-error-modal {
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-muted) !important;
}

/* Chat drawer navigation is one icon family.  The legacy drawer mixed pink
   SVG strokes, grey Material Symbols and theme-specific lines; all five
   destinations now consume the same semantic accent in every palette. */
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-profile,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-section,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-nav {
  border-color: var(--color-border) !important;
}

body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-avatar {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-raised) !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-link > .material-symbols-outlined,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-nav button > .material-symbols-outlined,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-custom-icon {
  color: var(--color-accent) !important;
  fill: currentColor !important;
  filter: none !important;
  opacity: 1 !important;
}

body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-nav button.disabled > .material-symbols-outlined {
  color: var(--color-text-dim) !important;
}

body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-link:hover > .material-symbols-outlined,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-nav button:not(.disabled):hover > .material-symbols-outlined,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-link:hover > .stitch-drawer-custom-icon,
body[data-app-theme][data-view="chat"] .chat-drawer .stitch-drawer-nav button:not(.disabled):hover > .stitch-drawer-custom-icon {
  color: var(--color-accent-strong) !important;
  fill: currentColor !important;
}

/* Little Wish cards are durable Chat content, so their paper and ink must be
   readable after a theme switch.  Pink is not a status: ready follows the
   current interaction accent, while fulfilled retains the expense brass. */
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card {
  border: 1px solid var(--piggy-paper-line) !important;
  background: var(--piggy-paper) !important;
  background-image: none !important;
  color: var(--piggy-paper-text) !important;
  box-shadow: var(--shadow-card) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.fulfilled {
  overflow: hidden !important;
  border-color: var(--piggy-paper-line) !important;
  background: var(--piggy-paper) !important;
  background-image: none !important;
  color: var(--piggy-paper-text) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish::before,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish::after,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.created::before,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.fulfilled::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card .piggy-kicker,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card .piggy-label,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card time,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card .piggy-footer,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish .piggy-content.reply {
  color: var(--piggy-paper-muted) !important;
  -webkit-text-fill-color: var(--piggy-paper-muted) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card .piggy-content,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish .piggy-content,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-receipt > strong {
  color: var(--piggy-paper-text) !important;
  -webkit-text-fill-color: var(--piggy-paper-text) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish > strong {
  border: 1px solid var(--color-border-strong) !important;
  background: var(--piggy-income-soft) !important;
  color: var(--piggy-income) !important;
  -webkit-text-fill-color: var(--piggy-income) !important;
  box-shadow: none !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish .amount {
  color: var(--piggy-income) !important;
  -webkit-text-fill-color: var(--piggy-income) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.fulfilled > strong {
  border-color: color-mix(in srgb, var(--piggy-expense) 38%, transparent) !important;
  background: var(--piggy-expense-soft) !important;
  color: var(--piggy-expense) !important;
  -webkit-text-fill-color: var(--piggy-expense) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.fulfilled .amount,
body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish.fulfilled .piggy-wish-fulfillment-note {
  color: var(--piggy-expense) !important;
  -webkit-text-fill-color: var(--piggy-expense) !important;
}

body[data-app-theme][data-view="chat"] .chat-shell .piggy-chat-card-wish .piggy-note {
  border: 0 !important;
  background: var(--piggy-paper-soft) !important;
  color: var(--piggy-paper-muted) !important;
  -webkit-text-fill-color: var(--piggy-paper-muted) !important;
  box-shadow: none !important;
}