/* MetaCore Chat · Light visual layer
   VISUAL-ONLY CONTRACT:
   - loaded after chat.css
   - no layout, sizing, breakpoint, DOM or behavior changes
   - JS/API untouched
*/

:root {
  color-scheme: light;
  --bg0: #f7faff;
  --bg1: #eef4fa;
  --panel: rgba(255, 255, 255, 0.96);
  --line: rgba(39, 111, 170, 0.20);
  --line2: rgba(111, 82, 176, 0.18);
  --cyan: #1478d4;
  --magenta: #7650b5;
  --amber: #a86f09;
  --lime: #31854a;
  --text: #10243a;
  --muted: #6b7d91;
  --user-bubble: #eaf5ff;
  --bot-bubble: #f5f1fb;
}

html,
body {
  color: var(--text);
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(58, 169, 226, 0.10), transparent 55%),
    radial-gradient(800px 420px at 88% 0%, rgba(118, 80, 181, 0.07), transparent 50%),
    radial-gradient(700px 500px at 50% 100%, rgba(49, 133, 74, 0.04), transparent 55%),
    linear-gradient(180deg, #fbfdff, var(--bg0) 55%, var(--bg1));
}

body[data-page="chat"] {
  background-color: #f7faff;
}

::selection {
  background: rgba(20, 120, 212, 0.16);
  color: #0b2037;
}

a { color: var(--cyan); }
button,
textarea,
input,
select { color: var(--text); }

/* Top shell */
.mc-top {
  border-bottom-color: rgba(39, 111, 170, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(15, 48, 79, 0.03), 0 8px 28px rgba(32, 77, 118, 0.05);
}
.mc-brand { color: var(--text); }
.mc-brand-mark {
  border-color: rgba(20, 120, 212, 0.30);
  box-shadow: 0 5px 16px rgba(20, 120, 212, 0.12);
  color: var(--cyan);
  background: #f4f9ff;
}
.mc-brand small { color: #52708e; }
.mc-chip,
.mc-icon,
.mc-pill,
.mc-ico-btn {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(39, 111, 170, 0.18);
  color: var(--text);
}
.mc-icon:hover,
.mc-ico-btn:hover,
.mc-pill:hover {
  border-color: rgba(20, 120, 212, 0.42);
  box-shadow: 0 5px 16px rgba(20, 120, 212, 0.10);
}
.mc-menu-btn {
  border-color: rgba(180, 128, 22, 0.36);
  color: #a16b08;
  background: #fffaf0;
  box-shadow: 0 4px 14px rgba(180, 128, 22, 0.08);
}
.mc-menu-btn:hover,
.mc-menu-btn.is-active {
  border-color: #b47d16;
  color: #8d5d05;
  background: #fff7e6;
  box-shadow: 0 5px 16px rgba(180, 128, 22, 0.12);
}
.mc-top-local .mc-m-sep { color: rgba(67, 86, 107, 0.35); }
.mc-avatar {
  border-color: rgba(118, 80, 181, 0.26);
  background: linear-gradient(135deg, #e8f5ff, #efe9fb);
  color: #29415d;
}
.mc-avatar.is-user {
  border-color: rgba(84, 102, 190, 0.28);
  background: linear-gradient(135deg, #2e8ee4, #7259b9 74%);
  color: #fff;
  box-shadow: 0 5px 15px rgba(67, 83, 170, 0.16);
}
button.mc-avatar:hover {
  border-color: rgba(118, 80, 181, 0.50);
  box-shadow: 0 5px 18px rgba(118, 80, 181, 0.14);
}
.mc-pill.is-guest { border-color: rgba(100, 116, 139, 0.30); }
.mc-pill:not(.is-guest) { border-color: rgba(20, 120, 212, 0.22); }
.mc-wallet-combo {
  border-color: rgba(20, 120, 212, 0.24);
  background: #f4f9ff;
  box-shadow: 0 4px 16px rgba(20, 120, 212, 0.07);
}
.mc-wallet-combo a { color: var(--text); }
.mc-wallet-combo a:hover { background: rgba(20, 120, 212, 0.07); }

/* Left drawer */
.mc-side.is-open {
  background: rgba(255, 255, 255, 0.985);
  border-right-color: rgba(39, 111, 170, 0.18);
  box-shadow: 16px 0 40px rgba(24, 55, 86, 0.14);
}
.mc-side-backdrop,
.mc-profile-backdrop {
  background: rgba(26, 45, 66, 0.28);
}
.mc-side,
.mc-stage { border-right-color: rgba(25, 59, 91, 0.08); }
.mc-side-h,
.mc-stage-h { border-bottom-color: rgba(25, 59, 91, 0.08); }
.mc-side-h h1,
.mc-stage-h h2 {
  color: var(--cyan);
  text-shadow: none;
}
.mc-thread { color: var(--text); }
.mc-thread:hover,
.mc-thread.active {
  border-color: rgba(20, 120, 212, 0.18);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px rgba(20, 120, 212, 0.04);
}
.mc-thread span.mc-thread-meta { color: var(--muted); }
.mc-thread span.mc-thread-meta time { color: #317bbd; }
.mc-thread-edit { color: #73859a; }
.mc-thread-edit:hover {
  color: var(--cyan);
  border-color: rgba(20, 120, 212, 0.24);
  background: #eef7ff;
}
.mc-thread.is-renaming {
  border-color: rgba(20, 120, 212, 0.30);
  background: #eef7ff;
}
.mc-thread-rename-row input,
.mc-field input,
.mc-form input,
.mc-form select,
.mc-form textarea {
  background: #ffffff;
  border-color: rgba(39, 111, 170, 0.20);
  color: var(--text);
}
.mc-thread-rename-row button {
  border-color: rgba(39, 111, 170, 0.18);
  background: #eef7ff;
  color: var(--cyan);
}
.mc-thread-rename-row button.mc-thread-rename-cancel {
  background: #ffffff;
  color: var(--muted);
}
.mc-side-foot {
  border-top-color: rgba(25, 59, 91, 0.08);
  background: #f7faff;
}
.mc-side-account {
  border-color: rgba(39, 111, 170, 0.16);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(20, 120, 212, 0.08), transparent 55%),
    #ffffff;
}
.mc-side-acc-hit:hover { background: #f0f7ff; }
.mc-side-acc-user,
.mc-side-acc-email { color: var(--muted); }
.mc-side-acc-email { color: #7a8ca0; }
.mc-side-acc-av {
  color: #fff;
  background: linear-gradient(145deg, #2d95e5, #4ab9dd);
  box-shadow: 0 5px 15px rgba(45, 149, 229, 0.15);
}
.mc-side-acc-av.is-guest {
  color: #50657d;
  background: #edf2f7;
  border-color: #d4dee8;
}
.mc-side-acc-badge {
  border-color: rgba(20, 120, 212, 0.20);
  color: #1268b5;
  background: #edf7ff;
}
.mc-side-acc-badge.is-member {
  border-color: rgba(49, 133, 74, 0.24);
  color: #2a7741;
  background: #edf9f1;
}
.mc-side-acc-badge.is-sub {
  border-color: rgba(168, 111, 9, 0.24);
  color: #926207;
  background: #fff8e7;
}
.mc-side-acc-kr {
  border-color: rgba(25, 59, 91, 0.08);
  background: #f7faff;
}
.mc-side-acc-cta {
  background: linear-gradient(135deg, #238adf, #39addc);
  color: #fff;
}
.mc-side-acc-cta.mc-side-acc-cta--ghost {
  background: #ffffff;
  color: var(--text);
  border-color: rgba(39, 111, 170, 0.18);
}
.mc-side-slider-kicker { color: #5a7fa3; }
.mc-side-slider-title strong {
  color: var(--cyan);
  text-shadow: none;
}

/* Persona / stage */
.mc-persona-avatar {
  background:
    radial-gradient(circle at 30% 30%, rgba(77, 175, 228, 0.28), transparent 45%),
    linear-gradient(145deg, #e9f5ff, #eee9fb);
  border-color: rgba(20, 120, 212, 0.26);
  box-shadow: 0 5px 18px rgba(20, 120, 212, 0.10);
  color: #38546f;
}
.mc-persona small { color: var(--muted); }
.mc-ready { color: #2d8248; }
.mc-ready i {
  background: #3ca25b;
  box-shadow: 0 0 8px rgba(60, 162, 91, 0.30);
}
.mc-delta-proof-link {
  color: #4f779b;
  border-bottom-color: rgba(79, 119, 155, 0.20);
}
.mc-delta-proof-link:hover,
.mc-delta-proof-link:focus-visible {
  color: var(--text);
  border-bottom-color: rgba(79, 119, 155, 0.48);
}

/* Chat bubbles */
.mc-bubble {
  color: var(--text);
  box-shadow: 0 5px 18px rgba(32, 77, 118, 0.04);
}
.mc-bubble.user {
  background: var(--user-bubble);
  border-color: rgba(20, 120, 212, 0.18);
}
.mc-bubble.assistant {
  background: var(--bot-bubble);
  border-color: rgba(118, 80, 181, 0.18);
}
.mc-bubble .mc-h,
.mc-bubble strong { color: #16324f; }
.mc-bubble.user strong { color: inherit; }
.mc-bubble .who,
.mc-bubble .who-time { color: var(--muted); }
.mc-bubble .who-origin {
  border-color: rgba(49, 133, 74, 0.24);
  color: #2b7a49;
  background: #eef9f2;
}
.mc-bubble-actions { border-top-color: rgba(25, 59, 91, 0.09); }
.mc-bubble-act {
  border-color: rgba(118, 80, 181, 0.20);
  background: #ffffff;
  color: #5c5a7b;
}
.mc-bubble-act:hover {
  background: #f5f1fb;
  border-color: rgba(118, 80, 181, 0.30);
  color: #372f5d;
}
.mc-bubble-act.is-speaking {
  background: #eaf7ff;
  border-color: rgba(20, 120, 212, 0.28);
  color: #1268b5;
}
.mc-bubble-act.is-speaking:hover {
  background: #deeffb;
  color: #0b548f;
}
.mc-bubble.limit {
  border-color: rgba(181, 126, 19, 0.28);
  background: linear-gradient(135deg, #fff9e9, #f7f2fc);
}
.mc-bubble.limit .mc-limit-cta {
  background: #eaf7ff;
  border-color: rgba(20, 120, 212, 0.24);
  color: #1268b5;
}
.mc-bubble.limit .mc-limit-cta:hover { background: #ddecf8; }

/* Composer */
.mc-composer {
  border-top-color: rgba(25, 59, 91, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -8px 28px rgba(32, 77, 118, 0.04);
}
.mc-composer textarea {
  background: #ffffff;
  border-color: rgba(39, 111, 170, 0.20);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(32, 77, 118, 0.04);
}
.mc-composer textarea::placeholder { color: #8798aa; }
.mc-composer textarea:focus {
  border-color: rgba(20, 120, 212, 0.40);
  box-shadow: 0 0 0 3px rgba(20, 120, 212, 0.08);
}
.mc-composer-likutis { color: var(--text); }
.mc-composer-likutis-label,
.mc-composer-cost { color: var(--muted); }
.mc-mic {
  border-color: rgba(39, 111, 170, 0.20);
  background: #ffffff;
  color: #557089;
  box-shadow: 0 4px 14px rgba(32, 77, 118, 0.05);
}
.mc-mic:hover {
  color: var(--cyan);
  border-color: rgba(20, 120, 212, 0.34);
  box-shadow: 0 5px 16px rgba(20, 120, 212, 0.10);
}
.mc-mic.is-listening {
  color: #b4232d;
  border-color: rgba(199, 52, 60, 0.32);
  background: #fff1f2;
  box-shadow: 0 0 0 3px rgba(199, 52, 60, 0.08), 0 5px 16px rgba(199, 52, 60, 0.08);
}
.mc-send {
  background: linear-gradient(145deg, #1681dc, #39addc);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 129, 220, 0.18);
}

/* Context strip */
.mc-context-frame {
  border-color: rgba(39, 111, 170, 0.16);
  background: linear-gradient(180deg, #f9fcff, #f2f7fb);
  box-shadow: 0 4px 14px rgba(32, 77, 118, 0.035);
}
.mc-info-strip-title { color: var(--text); }
.mc-info-strip-status { color: #287bb9; }
.mc-info-strip-chevron {
  border-color: rgba(20, 120, 212, 0.20);
  background: #eaf5ff;
  color: #44647f;
}
.mc-context-panel { border-top-color: rgba(25, 59, 91, 0.08); }
.mc-context-section-title { color: #9b6b0e; }
.mc-context-field > span { color: var(--muted); }
.mc-context-field input,
.mc-context-field select {
  border-color: rgba(39, 111, 170, 0.18);
  background: #ffffff;
  color: var(--text);
}
.mc-context-field input:focus,
.mc-context-field select:focus { border-color: rgba(20, 120, 212, 0.38); }

/* Bottom ecosystem dock */
.mc-bottom {
  border-top-color: rgba(39, 111, 170, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.99));
  box-shadow: 0 -8px 28px rgba(32, 77, 118, 0.10);
}
.mc-bottom a {
  color: #718298;
  text-shadow: none;
}
.mc-bottom a.active,
.mc-bottom a:hover {
  color: var(--cyan);
  text-shadow: none;
  background: #edf7ff;
}
.mc-bottom a.active svg,
.mc-bottom a:hover svg {
  filter: drop-shadow(0 3px 5px rgba(20, 120, 212, 0.16));
}

/* Language controls */
.mc-lang-switch .flag-circle {
  border-color: rgba(87, 110, 134, 0.25);
  box-shadow: 0 1px 3px rgba(25, 59, 91, 0.04);
}
.mc-lang-switch .flag-circle:hover,
.mc-lang-switch .flag-circle.active {
  border-color: rgba(20, 120, 212, 0.48);
  box-shadow: 0 3px 10px rgba(20, 120, 212, 0.12);
}
.mc-side-lang-wrap,
.mc-lang-mobile-bar {
  border-bottom-color: rgba(25, 59, 91, 0.08);
  background: #f7faff;
}
.mc-ico-wa--side {
  color: #20874c;
  border-color: rgba(37, 160, 89, 0.30);
  background: #eefaf3;
}
.mc-ico-wa--side:hover {
  color: #16733e;
  border-color: #25a059;
  background: #e6f6ed;
}

/* Profile drawer */
.mc-profile-panel {
  border-left-color: rgba(118, 80, 181, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(248, 250, 255, 0.985)),
    linear-gradient(180deg, rgba(20, 120, 212, 0.04), rgba(118, 80, 181, 0.05));
  box-shadow: -24px 0 70px rgba(24, 55, 86, 0.16);
}
.mc-profile-panel::after {
  background: linear-gradient(180deg, #38a7de, #7a62bb);
  opacity: 0.60;
}
.mc-pp-head { border-bottom-color: rgba(25, 59, 91, 0.08); }
.mc-pp-head strong { color: var(--cyan); }
.mc-pp-head small { color: var(--muted); }
.mc-pp-close {
  border-color: rgba(39, 111, 170, 0.18);
  background: #ffffff;
  color: #64788c;
}
.mc-pp-close:hover {
  color: #184f7d;
  border-color: rgba(20, 120, 212, 0.34);
}
.mc-pp-card {
  border-color: rgba(118, 80, 181, 0.14);
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(32, 77, 118, 0.04);
}
.mc-pp-av {
  color: #ffffff;
  background: linear-gradient(135deg, #398fd5, #7650b5 72%);
  border-color: rgba(118, 80, 181, 0.24);
}
.mc-pp-av.is-guest {
  background: #edf2f7;
  border-color: #d5dfe9;
  color: #5b7086;
}
.mc-pp-name { color: var(--text); }
.mc-pp-handle { color: var(--muted); }
.mc-pp-meta { color: #74879a; }
.mc-pp-metric {
  border-color: rgba(25, 59, 91, 0.08);
  background: #f7faff;
}
.mc-pp-tool--primary {
  color: #ffffff;
  background: linear-gradient(135deg, #238adf, #7650b5);
}
.mc-pp-tool--ghost {
  color: var(--text);
  border-color: rgba(39, 111, 170, 0.18);
  background: #ffffff;
}
.mc-pp-copy {
  border-color: rgba(20, 120, 212, 0.22);
  background: #edf7ff;
  color: var(--cyan);
}
.mc-pp-ref-code { color: #294866; }
.mc-pp-url-row input {
  border-color: rgba(39, 111, 170, 0.16);
  background: #f8fbfe;
  color: #6b7d91;
}
.mc-pp-url-row button {
  border-color: rgba(20, 120, 212, 0.22);
  background: #edf7ff;
  color: var(--cyan);
}
.mc-pp-nav-title a {
  border-color: rgba(39, 111, 170, 0.16);
  color: var(--text);
  background: #ffffff;
}
.mc-pp-nav a { color: var(--text); }
.mc-pp-nav a:hover {
  background: #eef7ff;
  border-color: rgba(20, 120, 212, 0.16);
}

/* Privacy / trust block */
.mc-privacy-mini { color: var(--muted); }
.mc-privacy-mini a { color: #287bb9; }
.mc-privacy-mini a:hover { color: var(--cyan); }
.mc-privacy-mini--side {
  border-top-color: rgba(25, 59, 91, 0.08);
  background: #f3f7fb;
}

/* Generic cards/forms/toasts that can appear from chat actions */
.mc-toast {
  background: #ffffff;
  border-color: rgba(39, 111, 170, 0.18);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(24, 55, 86, 0.14);
}
.mc-card {
  border-color: rgba(39, 111, 170, 0.18);
  background: #ffffff;
}
.mc-card-h { border-bottom-color: rgba(25, 59, 91, 0.08); }
.mc-mini {
  border-color: rgba(25, 59, 91, 0.10);
  background: #f7faff;
}
.mc-ops-out {
  background: #f7faff;
  border-color: rgba(39, 111, 170, 0.18);
  color: #245d8d;
}
.mc-ops pre { color: #506b84; }
.mc-title-input { color: var(--text); }
.mc-title-input:not(:disabled) {
  border-color: rgba(39, 111, 170, 0.18);
  background: #ffffff;
}
.mc-title-input:focus {
  border-color: rgba(20, 120, 212, 0.38);
  box-shadow: 0 0 0 3px rgba(20, 120, 212, 0.08);
}
.mc-title-input::placeholder { color: #8595a7; }
.mc-title-edit.is-editing {
  border-color: rgba(20, 120, 212, 0.34);
  color: var(--cyan);
  background: #edf7ff;
  box-shadow: 0 4px 12px rgba(20, 120, 212, 0.08);
}

/* Native control polish */
input,
textarea,
select { caret-color: var(--cyan); }
select option {
  background: #ffffff;
  color: var(--text);
}


/* Primary action accent: same geometry, light corporate palette */
.mc-btn-primary {
  background: linear-gradient(135deg, #238adf, #39addc);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(35, 138, 223, 0.16);
}