/* WITSI Sales Engine: web chat + admin. WITSI v2 mark = deep-blue disc, one gold light (WITSI-CHARACTER.md). */
:root { --night: #0B0D2B; --disc: #1E2170; --gold: #D1AA4E; --ivory: #F4EFE4; --ink: #15172E; --mute: #6B6E8A; --line: #E3DFD2; --bg: #F7F4EC; --card: #FFFFFF; --ok: #2E7D5B; --warn: #B8671B; --bad: #A33A3A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Archivo", system-ui, -apple-system, Segoe UI, sans-serif; }
a { color: var(--disc); }
.witsi { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--disc); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); position: relative; flex: 0 0 auto; }
.witsi::before { content: ""; position: absolute; left: 23%; top: calc(50% - 1.5px); width: 54%; height: 3px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 10px 2px rgba(209,170,78,.55); animation: idle 4s ease-in-out infinite; }
.witsi::after { content: ""; position: absolute; left: 23%; top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .9; }
.witsi.sm { width: 24px; height: 24px; } .witsi.sm::before { height: 2px; box-shadow: none; animation: none; } .witsi.sm::after { display: none; }
.witsi.thinking::after { animation: glint 1.4s linear infinite; }
@keyframes idle { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@keyframes glint { from { left: 23%; } to { left: 74%; } }
@media (prefers-reduced-motion: reduce) { .witsi::before, .witsi::after { animation: none; } }
header.bar { background: var(--night); color: var(--ivory); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
header.bar h1 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: .2px; } header.bar small { color: #B9BBD6; display: block; font-size: 12px; }
header.bar .right { margin-left: auto; font-size: 12px; color: #B9BBD6; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
.wrap.wide { max-width: 1180px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
h2 { font-size: 15px; margin: 0 0 10px; } h3 { font-size: 13px; margin: 14px 0 6px; color: var(--mute); text-transform: uppercase; letter-spacing: .5px; }
label { display: block; font-size: 13px; color: var(--mute); margin: 8px 0 4px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
button { font: inherit; padding: 10px 16px; border-radius: 999px; border: 0; background: var(--disc); color: #fff; cursor: pointer; }
button.ghost { background: transparent; color: var(--disc); border: 1px solid var(--line); } button.small { padding: 6px 12px; font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; } .row > * { flex: 1 1 160px; }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; }
.msg.in { align-self: flex-end; background: var(--disc); color: #fff; border-bottom-right-radius: 4px; }
.msg.out { align-self: flex-start; background: var(--ivory); border-bottom-left-radius: 4px; display: flex; gap: 10px; align-items: flex-start; }
.meta { font-size: 11px; color: var(--mute); margin-top: 4px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--ivory); color: var(--ink); margin: 2px 4px 2px 0; }
.pill.ok { background: #E3F2EA; color: var(--ok); } .pill.warn { background: #FBEBD9; color: var(--warn); } .pill.bad { background: #F7E1E1; color: var(--bad); } .pill.gold { background: #F6EBCF; color: #7A5A12; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .kpi b { font-size: 22px; display: block; } .kpi span { font-size: 12px; color: var(--mute); }
table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--mute); font-weight: 500; font-size: 12px; }
tr.click { cursor: pointer; } tr.click:hover { background: #FBF9F3; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .tabs button { background: transparent; color: var(--ink); border: 1px solid var(--line); } .tabs button.on { background: var(--night); color: #fff; border-color: var(--night); }
pre.sum { white-space: pre-wrap; background: var(--ivory); padding: 12px; border-radius: 10px; font-size: 13px; }
.note { font-size: 13px; color: var(--mute); }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 100%); background: var(--card); border-left: 1px solid var(--line); overflow: auto; padding: 16px; box-shadow: -8px 0 30px rgba(0,0,0,.12); display: none; } .drawer.open { display: block; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
@media (max-width: 640px) { .wrap { padding: 12px; } .msg { max-width: 94%; } th:nth-child(n+6), td:nth-child(n+6) { display: none; } }