/* ============================================================================
   DaCucina — WhatsApp inbox theme (2026-09-28): the inbox on the SAME visual system as the sidebar, the command centre
   and the login slab — cream / charcoal / bronze tokens, the same type, borders, radii and shadows. Pure presentation:
   overrides the --wa-* tokens and the inbox components; no behaviour changes. Loaded after the views (index.html); selectors
   are prefixed (html body …) so they outrank the inline <style> blocks the inbox injects into the page.
   Semantic colours (error / warning / success) stay distinct; the active filter is unmistakable; hover, press and keyboard
   focus get quiet feedback; reduced motion respected; density kept usable on phones.
   ============================================================================ */
html:root {
  --wa-cream: #F7F5F0;             /* page / list surfaces (sidebar --sb-bg) */
  --wa-stone: #FFFEFC;             /* cards / columns (sidebar --sb-surface) */
  --wa-line: #E5DDD2;              /* borders (sidebar --sb-border) */
  --wa-graphite: #292621;          /* ink (sidebar --sb-text) */
  --wa-muted: #756D63;             /* secondary text */
  --wa-champ: #A78053;             /* bronze accent */
  --wa-champ-soft: rgba(167, 128, 83, 0.14);
  --wa-note: #FBF3DC;
  --wa-green: #3d6b3a;             /* success / send (command-centre --a2-ok) */
  --wa-green-2: #4f8a4a;
  --wa-green-soft: #e6efe4;
  --wa-out: #EEE9E0;               /* my bubbles: warm stone, bronze edge */
  --wa-in: #FFFFFF;
  --wa-danger: #9b2c2c;            /* --a2-bad */
  --wa-warn: #b7791f;              /* --a2-warn */
  --wa-active: #2B2724;            /* selected filter / active row (sidebar --sb-active) */
  --wa-active-text: #F7F3EC;
  --wa-shadow: 0 1px 2px rgba(41, 38, 33, .06), 0 6px 18px rgba(41, 38, 33, .07);
  --wa-shadow-pop: 0 12px 34px rgba(41, 38, 33, .18);
  --wa-focus: 0 0 0 3px rgba(167, 128, 83, .35);
  --wa-t: 150ms;
  --wa-ease: cubic-bezier(.4, 0, .2, 1);
}
html body.dark {
  --wa-cream: #161922; --wa-stone: #1c2030; --wa-line: rgba(245, 241, 234, .10); --wa-graphite: #f5f1ea; --wa-muted: #b3ada1;
  --wa-champ: #c89d6b; --wa-champ-soft: rgba(200, 157, 107, .16); --wa-note: #2a2a1e;
  --wa-green: #4f8a4a; --wa-green-2: #62a05c; --wa-green-soft: #203327; --wa-out: #222737; --wa-in: #262b3a;
  --wa-danger: #e06c6c; --wa-warn: #e0a84a; --wa-active: #f2ede4; --wa-active-text: #1a1713;
  --wa-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .35); --wa-shadow-pop: 0 14px 40px rgba(0, 0, 0, .5); --wa-focus: 0 0 0 3px rgba(200, 157, 107, .4);
}

/* ---- frame & columns ---- */
html body .wa-screen { background: var(--wa-cream); border-radius: 16px; padding: .6rem; font-family: inherit; letter-spacing: .01em; }
html body .wa-header, html body .wa-col, html body .wa-chat-head { background: var(--wa-stone); border-color: var(--wa-line); }
html body .wa-header { border-radius: 14px; box-shadow: var(--wa-shadow); }
html body .wa-col { border-radius: 14px; box-shadow: var(--wa-shadow); }
html body .wa-acct-pill { background: var(--wa-cream); border-radius: 12px; transition: background var(--wa-t) var(--wa-ease), box-shadow var(--wa-t) var(--wa-ease); }
html body .wa-acct-pill:hover { background: var(--wa-champ-soft); }
html body .wa-acct-dd { background: var(--wa-stone); border-radius: 12px; box-shadow: var(--wa-shadow-pop); }
html body .wa-acct-dd-item:hover { background: var(--wa-champ-soft); }
html body .wa-conn { background: var(--wa-cream); }
html body .wa-conn.live .dot { background: var(--wa-green-2); }

/* ---- buttons: bronze primary, quiet ghost, semantic danger ---- */
html body .wa-btn { background: var(--wa-champ); color: #fff; border-radius: 10px; transition: background var(--wa-t) var(--wa-ease), transform var(--wa-t) var(--wa-ease), box-shadow var(--wa-t) var(--wa-ease); }
html body .wa-btn:hover { background: #8a6636; }
html body .wa-btn:active { transform: translateY(1px); }
html body .wa-btn:focus-visible { outline: none; box-shadow: var(--wa-focus); }
html body .wa-btn.ghost { background: transparent; color: var(--wa-graphite); border: 1px solid var(--wa-line); }
html body .wa-btn.ghost:hover { background: var(--wa-champ-soft); border-color: var(--wa-champ); }
html body .wa-btn.brown { background: var(--wa-champ); }
html body .wa-btn.danger { background: var(--wa-danger); }
html body .wa-btn.danger:hover { background: #7f1d1d; }
html body .wa-btn:disabled { opacity: .45; transform: none; }

/* ---- search, filters, counters ---- */
html body .wa-comp-input { background: var(--wa-cream); border-color: var(--wa-line); border-radius: 12px; transition: border-color var(--wa-t) var(--wa-ease), box-shadow var(--wa-t) var(--wa-ease); }
html body .wa-comp-input:focus, html body .wa-comp-input:focus-visible { outline: none; border-color: var(--wa-champ); box-shadow: var(--wa-focus); }
html body .wa-tabs { gap: 5px; padding: .5rem .6rem; }
html body .wa-tab { background: var(--wa-cream); color: var(--wa-muted); border: 1px solid var(--wa-line); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; transition: background var(--wa-t) var(--wa-ease), color var(--wa-t) var(--wa-ease), border-color var(--wa-t) var(--wa-ease), transform var(--wa-t) var(--wa-ease); }
html body .wa-tab:hover { background: var(--wa-champ-soft); color: var(--wa-graphite); border-color: var(--wa-champ); }
html body .wa-tab:active { transform: translateY(1px); }
html body .wa-tab:focus-visible { outline: none; box-shadow: var(--wa-focus); }
html body .wa-tab.active { background: var(--wa-active); color: var(--wa-active-text); border-color: var(--wa-active); box-shadow: inset 0 -2px 0 var(--wa-champ); }
html body .wa-tab-count { background: rgba(41, 38, 33, .08); color: inherit; font-weight: 700; border-radius: 999px; min-width: 19px; }
html body .wa-tab.active .wa-tab-count { background: rgba(247, 243, 236, .22); }
html body.dark .wa-tab-count { background: rgba(245, 241, 234, .12); }
html body .wa-tagbar { color: var(--wa-muted); }
html body .wa-tag { border-radius: 999px; }
html body .wa-badge { border-radius: 999px; }
html body .wa-unread { background: var(--wa-champ); }

/* ---- conversation list ---- */
html body .wa-conv { padding: .62rem .75rem; transition: background var(--wa-t) var(--wa-ease); }
html body .wa-conv:hover { background: var(--wa-champ-soft); }
html body .wa-conv:focus-visible, html body .wa-conv:focus-within { outline: none; box-shadow: inset 0 0 0 2px rgba(167, 128, 83, .45); }
html body .wa-conv.active { background: var(--wa-champ-soft); border-right: 3px solid var(--wa-champ); }
html body .wa-conv.pinned { background: var(--wa-note); }
html body .wa-conv-name { color: var(--wa-graphite); font-weight: 700; }
html body .wa-conv-prev { color: var(--wa-muted); }
html body .wa-conv-more { background: var(--wa-stone); border: 1px solid var(--wa-line); border-radius: 8px; transition: opacity var(--wa-t) var(--wa-ease), background var(--wa-t) var(--wa-ease); }
html body .wa-conv-more:hover { background: var(--wa-champ-soft); }
html body .wa-avatar { background: var(--wa-champ-soft); border-color: var(--wa-champ); color: #6b5230; }

/* ---- chat header, pins, messages ---- */
html body .wa-chat-head { border-radius: 14px 14px 0 0; }
html body .wa-sending-via { background: var(--wa-cream); border-right: 3px solid var(--wa-champ); }
html body .wa-pins { background: var(--wa-note); }
html body .wa-daysep { background: var(--wa-stone); border-color: var(--wa-line); color: var(--wa-muted); }
html body .wa-msg { border-radius: 12px; box-shadow: 0 1px 1px rgba(41, 38, 33, .05); }
html body .wa-msg.in { background: var(--wa-in); border-color: var(--wa-line); }
html body .wa-msg.out { background: var(--wa-out); border: 1px solid rgba(167, 128, 83, .32); color: var(--wa-graphite); }
html body.dark .wa-msg.out { border-color: rgba(200, 157, 107, .35); }

/* ---- side panel cards, chips, entities ---- */
html body .wa-card { background: var(--wa-cream); border-color: var(--wa-line); border-radius: 12px; }
html body .wa-card h4 { color: var(--wa-graphite); }
html body .wa-lock { background: var(--wa-cream); }
html body .wa-chip { background: var(--wa-stone); border-color: var(--wa-line); border-radius: 999px; }
html body .wa-ent { background: var(--wa-stone); border-color: var(--wa-line); border-radius: 10px; }
html body .wa-choose-card { background: var(--wa-stone); border-top: 4px solid var(--wa-champ); border-radius: 16px; box-shadow: var(--wa-shadow); transition: transform var(--wa-t) var(--wa-ease), box-shadow var(--wa-t) var(--wa-ease); }
html body .wa-choose-card:hover { transform: translateY(-2px); box-shadow: var(--wa-shadow-pop); }

/* ---- context menu & emoji picker (fixed on body) ---- */
html body .wa-ctx, html body .wa-emoji { background: var(--wa-stone); color: var(--wa-graphite); border: 1px solid var(--wa-line); border-radius: 12px; box-shadow: var(--wa-shadow-pop); }
html body.dark .wa-ctx, html body.dark .wa-emoji { background: var(--wa-stone); color: var(--wa-graphite); border-color: var(--wa-line); }
html body .wa-ctx-emo, html body .wa-emoji-tabs { border-bottom-color: var(--wa-line); }
html body .wa-ctx-emo button:hover, html body .wa-emoji-tabs button.on, html body .wa-emoji-grid button:hover, html body .wa-emoji-grid button:focus { background: var(--wa-champ-soft); }
html body .wa-ctx-item { border-radius: 8px; transition: background var(--wa-t) var(--wa-ease); }
html body .wa-ctx-item:hover, html body .wa-ctx-item:focus, html body.dark .wa-ctx-item:hover, html body.dark .wa-ctx-item:focus { background: var(--wa-champ-soft); outline: none; }
html body .wa-ctx-item:focus-visible { box-shadow: var(--wa-focus); }
html body .wa-ctx-item .ti { color: var(--wa-champ); }
html body .wa-ctx-item.danger .ti { color: var(--wa-danger); }
html body .wa-ctx-sep { background: var(--wa-line); }
html body .wa-ctx-head { color: var(--wa-muted); }
html body .wa-emoji-search { background: var(--wa-cream); border-color: var(--wa-line); color: var(--wa-graphite); }
html body.dark .wa-emoji-search { background: var(--wa-cream); color: var(--wa-graphite); border-color: var(--wa-line); }

/* ---- bot settings tab (same family) ---- */
html body .wab-tab { background: var(--wa-stone); border-color: var(--wa-line); color: var(--wa-muted); transition: background var(--wa-t) var(--wa-ease), color var(--wa-t) var(--wa-ease); }
html body .wab-tab:hover { background: var(--wa-champ-soft); color: var(--wa-graphite); }
html body .wab-tab.active { background: var(--wa-active); color: var(--wa-active-text); border-color: var(--wa-active); }
html body .wab-tab:focus-visible { outline: none; box-shadow: var(--wa-focus); }

/* ---- mobile density & motion ---- */
@media (max-width: 760px) {
html body .wa-screen { padding: .4rem; border-radius: 12px; }
html body .wa-tabs { padding: .4rem .45rem; gap: 4px; }
html body .wa-tab { padding: 5px 9px; font-size: 11px; }
html body .wa-conv { padding: .55rem .6rem; }
html body .wa-btn { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
html body .wa-btn, html body .wa-tab, html body .wa-conv, html body .wa-conv-more, html body .wa-choose-card, html body .wa-ctx-item, html body .wa-acct-pill, html body .wa-comp-input, html body .wab-tab { transition: none !important; }
html body .wa-choose-card:hover { transform: none; }
html body .wa-conn.reconnecting .dot { animation: none; }
}