/* tallkee — design tokens & component base. talk. connect. grow. */

:root{
/* core palette */
--tk-blue-700:#1D4ED8;--tk-blue-600:#2563EB;--tk-blue-500:#3B82F6;--tk-blue-400:#60A5FA;--tk-blue-300:#93C5FD;--tk-blue-100:#DBEAFE;--tk-blue-50:#EFF6FF;
--tk-navy-900:#0F172A;--tk-navy-800:#172554;
--tk-slate-700:#334155;--tk-slate-600:#475569;--tk-slate-500:#64748B;--tk-slate-400:#94A3B8;--tk-slate-300:#CBD5E1;--tk-slate-200:#E2E8F0;--tk-slate-100:#F1F5F9;--tk-slate-50:#F8FAFC;--tk-white:#FFFFFF;
/* semantic */
--tk-success-600:#16A34A;--tk-success-500:#22C55E;--tk-success-100:#DCFCE7;
--tk-warning-600:#D97706;--tk-warning-500:#F59E0B;--tk-warning-100:#FEF3C7;
--tk-error-600:#DC2626;--tk-error-500:#EF4444;--tk-error-100:#FEE2E2;
--tk-info-600:#2563EB;--tk-info-100:#DBEAFE;
/* aliases */
--tk-primary:var(--tk-blue-600);--tk-primary-hover:var(--tk-blue-700);--tk-primary-soft:var(--tk-blue-50);--tk-primary-soft-2:var(--tk-blue-100);
--tk-bg:var(--tk-slate-50);--tk-surface:var(--tk-white);--tk-surface-subtle:var(--tk-slate-100);--tk-surface-raised:var(--tk-white);
--tk-text:var(--tk-navy-900);--tk-text-secondary:var(--tk-slate-700);--tk-text-muted:var(--tk-slate-500);--tk-text-placeholder:var(--tk-slate-400);--tk-text-onprimary:#fff;
--tk-border:var(--tk-slate-200);--tk-border-strong:var(--tk-slate-300);
--tk-bubble-in:var(--tk-slate-50);--tk-bubble-out:var(--tk-blue-600);--tk-bubble-note:#FEF8E7;--tk-bubble-note-border:#F6E4B0;
/* gradient — só branding/marketing */
--tk-gradient:linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#60A5FA 100%);
/* radius */
--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-2xl:20px;--r-full:9999px;--r-input:10px;--r-btn:10px;--r-card:14px;--r-modal:16px;--r-bubble:16px;
/* shadow */
--sh-sm:0 1px 2px rgba(15,23,42,.05);--sh-md:0 4px 12px rgba(15,23,42,.08);--sh-lg:0 12px 32px rgba(15,23,42,.10);
--ring:0 0 0 3px var(--tk-blue-100);
/* motion */
--d-fast:120ms;--d-normal:200ms;--d-slow:300ms;--ease:cubic-bezier(.22,.61,.36,1);
/* layout */
--w-sidebar:240px;--w-list:332px;--w-details:304px;--h-topbar:64px;
--font:'Inter',system-ui,-apple-system,sans-serif;
}
[data-theme="dark"]{
--tk-bg:#0F172A;--tk-surface:#172033;--tk-surface-subtle:#1E293B;--tk-surface-raised:#1E293B;
--tk-text:#F8FAFC;--tk-text-secondary:#CBD5E1;--tk-text-muted:#94A3B8;--tk-text-placeholder:#64748B;
--tk-border:#334155;--tk-border-strong:#475569;
--tk-primary:var(--tk-blue-500);--tk-primary-hover:var(--tk-blue-400);--tk-primary-soft:rgba(59,130,246,.14);--tk-primary-soft-2:rgba(59,130,246,.22);
--tk-bubble-in:#1E293B;--tk-bubble-out:var(--tk-blue-600);--tk-bubble-note:#2A2416;--tk-bubble-note-border:#4A3F1E;
--tk-success-100:rgba(34,197,94,.16);--tk-warning-100:rgba(245,158,11,.16);--tk-error-100:rgba(239,68,68,.16);--tk-info-100:rgba(59,130,246,.16);
--tk-success-600:#4ADE80;--tk-warning-600:#FBBF24;--tk-error-600:#F87171;
--sh-sm:0 1px 2px rgba(0,0,0,.3);--sh-md:0 4px 12px rgba(0,0,0,.35);--sh-lg:0 12px 32px rgba(0,0,0,.45);
--ring:0 0 0 3px rgba(59,130,246,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--tk-bg);color:var(--tk-text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--tk-primary);text-decoration:none}
a:hover{color:var(--tk-primary-hover)}
:focus-visible{outline:2px solid var(--tk-primary);outline-offset:2px}
::selection{background:var(--tk-blue-100);color:var(--tk-navy-900)}
[data-lucide]{width:20px;height:20px;stroke-width:1.8;flex:none}
.i16[data-lucide]{width:16px;height:16px}.i18[data-lucide]{width:18px;height:18px}.i24[data-lucide]{width:24px;height:24px}.i28[data-lucide]{width:28px;height:28px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- type ---------- */
.tk-display{font-size:44px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0}
.tk-h1{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0}
.tk-h2{font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:0}
.tk-h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0}
.tk-h4{font-size:16px;font-weight:600;margin:0}
.tk-body{font-size:14px;font-weight:400;margin:0}
.tk-small{font-size:12.5px;margin:0}
.tk-caption{font-size:11.5px;margin:0;color:var(--tk-text-muted)}
.tk-label{font-size:12px;font-weight:600;color:var(--tk-text-secondary);display:block;margin-bottom:6px}
.tk-eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tk-text-muted);margin:0}
.muted{color:var(--tk-text-muted)}.sec{color:var(--tk-text-secondary)}
.tk-wordmark{font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--tk-navy-800)}
[data-theme="dark"] .tk-wordmark{color:#F8FAFC}
.tk-wordmark b{font-weight:600;color:var(--tk-blue-600)}
[data-theme="dark"] .tk-wordmark b{color:var(--tk-blue-400)}

/* ---------- logo ---------- */
.tk-logo{display:flex;align-items:center;gap:9px}
.tk-mark{width:32px;height:32px;border-radius:9px;background:var(--tk-gradient);display:grid;place-items:center;flex:none;box-shadow:var(--sh-sm)}
.tk-mark svg{width:19px;height:19px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-btn);font:600 14px var(--font);border:1px solid transparent;cursor:pointer;transition:background var(--d-fast) var(--ease),color var(--d-fast),border-color var(--d-fast),transform var(--d-fast),box-shadow var(--d-fast);white-space:nowrap;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring);outline:none}
.btn-primary{background:var(--tk-primary);color:#fff}
.btn-primary:hover{background:var(--tk-primary-hover);color:#fff}
.btn-secondary{background:var(--tk-surface);color:var(--tk-primary);border-color:var(--tk-border-strong)}
.btn-secondary:hover{background:var(--tk-primary-soft);border-color:var(--tk-blue-300)}
.btn-ghost{background:transparent;color:var(--tk-slate-600)}
[data-theme="dark"] .btn-ghost{color:var(--tk-text-secondary)}
.btn-ghost:hover{background:var(--tk-surface-subtle);color:var(--tk-text)}
.btn-danger{background:var(--tk-error-600);color:#fff}
.btn-danger:hover{background:#B91C1C;color:#fff}
.btn-success{background:var(--tk-success-600);color:#fff}
.btn-lg{height:44px;padding:0 22px;font-size:15px}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn-icon{width:40px;padding:0}.btn-icon.btn-sm{width:32px}.btn-icon.btn-lg{width:44px}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn-round{border-radius:var(--r-full)}
.iconbtn{width:36px;height:36px;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--tk-slate-500);border-radius:9px;cursor:pointer;transition:background var(--d-fast),color var(--d-fast)}
.iconbtn:hover{background:var(--tk-surface-subtle);color:var(--tk-text)}
.iconbtn.is-active{background:var(--tk-primary-soft);color:var(--tk-primary)}
.send-btn{width:40px;height:40px;border-radius:var(--r-full);background:var(--tk-primary);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;transition:background var(--d-fast),transform var(--d-fast)}
.send-btn:hover{background:var(--tk-primary-hover)}.send-btn:active{transform:scale(.94)}

/* ---------- forms ---------- */
.input,.select,.textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--tk-border-strong);border-radius:var(--r-input);background:var(--tk-surface);color:var(--tk-text);font:400 14px var(--font);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.textarea{height:auto;min-height:88px;padding:10px 12px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--tk-text-placeholder)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--tk-primary);box-shadow:var(--ring)}
.input:disabled{background:var(--tk-surface-subtle);color:var(--tk-text-muted)}
.input.is-error{border-color:var(--tk-error-500);box-shadow:0 0 0 3px var(--tk-error-100)}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.field{margin-bottom:16px}
.hint{font-size:11.5px;color:var(--tk-text-muted);margin:6px 0 0}
.hint.err{color:var(--tk-error-600)}
.search{position:relative;display:flex;align-items:center}
.search [data-lucide]{position:absolute;left:11px;width:16px;height:16px;color:var(--tk-text-placeholder);pointer-events:none}
.search .input{padding-left:34px}
.switch{position:relative;width:40px;height:22px;flex:none;display:inline-block}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{position:absolute;inset:0;background:var(--tk-slate-300);border-radius:var(--r-full);transition:background var(--d-normal) var(--ease)}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:var(--sh-sm);transition:transform var(--d-normal) var(--ease)}
.switch input:checked+span{background:var(--tk-primary)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{box-shadow:var(--ring)}
.check,.radio{width:18px;height:18px;flex:none;appearance:none;border:1.5px solid var(--tk-border-strong);background:var(--tk-surface);cursor:pointer;transition:all var(--d-fast)}
.check{border-radius:5px}.radio{border-radius:50%}
.check:checked{background:var(--tk-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.5l3 3 6-6.5'/></svg>") center/13px no-repeat;border-color:var(--tk-primary)}
.radio:checked{border-color:var(--tk-primary);border-width:5px}
.check:focus-visible,.radio:focus-visible{box-shadow:var(--ring);outline:none}
.opt{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;padding:4px 0}

/* ---------- avatar ---------- */
.av{position:relative;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;color:#fff;background:var(--tk-blue-500);overflow:visible;font-size:13px;letter-spacing:.01em}
.av-24{width:24px;height:24px;font-size:10px}.av-32{width:32px;height:32px;font-size:11.5px}.av-40{width:40px;height:40px}.av-48{width:48px;height:48px;font-size:15px}.av-64{width:64px;height:64px;font-size:20px}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.av .pres{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:9px;min-height:9px;border-radius:50%;border:2px solid var(--tk-surface);background:var(--tk-slate-400)}
.pres.on{background:var(--tk-success-500)}.pres.away{background:var(--tk-warning-500)}.pres.off{background:var(--tk-slate-400)}.pres.busy{background:var(--tk-error-500)}
.av-c2{background:#7C6BF2}.av-c3{background:#0EA5A5}.av-c4{background:#E8912D}.av-c5{background:#DB5B8C}.av-c6{background:var(--tk-navy-800)}
.avg{display:flex}
.avg .av{border:2px solid var(--tk-surface);margin-left:-9px}
.avg .av:first-child{margin-left:0}
.avg .more{background:var(--tk-slate-100);color:var(--tk-slate-600);font-size:11px}
[data-theme="dark"] .avg .more{background:var(--tk-surface-subtle);color:var(--tk-text-secondary)}

/* ---------- badges / tags / chips ---------- */
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);background:var(--tk-primary);color:#fff;font-size:11px;font-weight:600;display:inline-grid;place-items:center;flex:none}
.badge-dot{width:8px;height:8px;min-width:0;padding:0}
.badge-muted{background:var(--tk-slate-300);color:var(--tk-slate-700)}
.pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--r-full);font-size:11.5px;font-weight:600;background:var(--tk-surface-subtle);color:var(--tk-text-secondary);white-space:nowrap}
.pill i{width:12px;height:12px;border-radius:50%;background:currentColor;flex:none;display:block}
.pill-blue{background:var(--tk-info-100);color:var(--tk-info-600)}
.pill-green{background:var(--tk-success-100);color:var(--tk-success-600)}
.pill-amber{background:var(--tk-warning-100);color:var(--tk-warning-600)}
.pill-red{background:var(--tk-error-100);color:var(--tk-error-600)}
.pill-navy{background:var(--tk-navy-800);color:#fff}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px 0 7px;border-radius:var(--r-sm);font-size:11.5px;font-weight:600;background:var(--tk-surface-subtle);color:var(--tk-text-secondary)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.tag button{border:0;background:none;padding:0;display:grid;place-items:center;color:inherit;opacity:.55;cursor:pointer}
.tag button:hover{opacity:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-full);border:1px solid var(--tk-border);background:var(--tk-surface);color:var(--tk-text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--d-fast)}
.chip:hover{border-color:var(--tk-blue-300);color:var(--tk-primary)}
.chip.is-active{background:var(--tk-primary-soft);border-color:var(--tk-blue-300);color:var(--tk-primary);font-weight:600}
.channel{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;flex:none;color:#fff}
.channel svg{width:10px;height:10px;stroke-width:2.4}
.ch-wa{background:#25D366}.ch-ig{background:linear-gradient(135deg,#F58529,#DD2A7B 60%,#8134AF)}.ch-fb{background:#1877F2}.ch-web{background:var(--tk-slate-500)}.ch-mail{background:var(--tk-navy-800)}

/* ---------- surfaces ---------- */
.card{background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:var(--r-card);padding:20px;transition:transform var(--d-normal) var(--ease),box-shadow var(--d-normal) var(--ease)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.panel{background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:var(--r-card)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--tk-border)}
.divider{height:1px;background:var(--tk-border);border:0;margin:0}
.kpi{background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:var(--r-card);padding:16px 18px}
.kpi-v{font-size:27px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px}
.trend{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600}
.trend.up{color:var(--tk-success-600)}.trend.down{color:var(--tk-error-600)}
.tooltip{background:var(--tk-navy-900);color:#fff;font-size:12px;font-weight:500;padding:6px 10px;border-radius:var(--r-md);box-shadow:var(--sh-md);display:inline-block}
[data-theme="dark"] .tooltip{background:#334155}
.toast{display:flex;align-items:center;gap:10px;background:var(--tk-surface);border:1px solid var(--tk-border);border-left:3px solid var(--tk-success-500);border-radius:var(--r-lg);padding:12px 14px;box-shadow:var(--sh-lg);font-size:13.5px;font-weight:500;min-width:280px}
.toast.err{border-left-color:var(--tk-error-500)}.toast.info{border-left-color:var(--tk-primary)}.toast.warn{border-left-color:var(--tk-warning-500)}
.alert{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-lg);font-size:13.5px;background:var(--tk-info-100);color:var(--tk-info-600)}
.alert.warn{background:var(--tk-warning-100);color:var(--tk-warning-600)}
.alert.err{background:var(--tk-error-100);color:var(--tk-error-600)}
.alert.ok{background:var(--tk-success-100);color:var(--tk-success-600)}
.alert b{display:block;color:var(--tk-text);font-size:13.5px;margin-bottom:2px}
.progress{height:6px;border-radius:var(--r-full);background:var(--tk-surface-subtle);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:var(--r-full);background:var(--tk-primary)}
.progress.ok>i{background:var(--tk-success-500)}.progress.warn>i{background:var(--tk-warning-500)}.progress.err>i{background:var(--tk-error-500)}
.sk{background:var(--tk-border);border-radius:var(--r-sm);height:12px;animation:skp 1.4s var(--ease) infinite}
@keyframes skp{0%,100%{opacity:1}50%{opacity:.45}}
.empty{text-align:center;padding:40px 24px;max-width:320px;margin:0 auto}
.empty .ill{width:76px;height:76px;border-radius:22px;background:var(--tk-primary-soft);color:var(--tk-primary);display:grid;place-items:center;margin:0 auto 16px}
.empty .ill [data-lucide]{width:32px;height:32px}
.empty p{color:var(--tk-text-muted);font-size:13.5px;margin:6px 0 18px}
.modal{background:var(--tk-surface);border-radius:var(--r-modal);box-shadow:var(--sh-lg);border:1px solid var(--tk-border);width:100%;max-width:440px}
.modal-h{padding:20px 22px 0}.modal-b{padding:14px 22px}.modal-f{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end}
.menu{background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:var(--r-lg);box-shadow:var(--sh-md);padding:6px;min-width:216px}
.menu-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);font-size:13.5px;color:var(--tk-text-secondary);cursor:pointer;transition:background var(--d-fast)}
.menu-i:hover{background:var(--tk-surface-subtle);color:var(--tk-text)}
.menu-i [data-lucide]{width:16px;height:16px;color:var(--tk-text-muted)}
.menu-i.danger{color:var(--tk-error-600)}.menu-i.danger [data-lucide]{color:var(--tk-error-600)}
.menu-sep{height:1px;background:var(--tk-border);margin:5px 0}
.menu-l{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tk-text-muted);padding:8px 10px 4px}

/* ---------- tabs / segmented ---------- */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--tk-border)}
.tab{padding:10px 1px;font-size:13.5px;font-weight:600;color:var(--tk-text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--d-fast)}
.tab:hover{color:var(--tk-text-secondary)}
.tab.is-active{color:var(--tk-primary);border-bottom-color:var(--tk-primary)}
.seg{display:inline-flex;background:var(--tk-surface-subtle);padding:3px;border-radius:var(--r-md);gap:2px}
.seg button{border:0;background:transparent;font:600 12.5px var(--font);color:var(--tk-text-muted);padding:6px 13px;border-radius:6px;cursor:pointer;transition:all var(--d-fast)}
.seg button.is-active{background:var(--tk-surface);color:var(--tk-text);box-shadow:var(--sh-sm)}

/* ---------- nav ---------- */
.navitem{display:flex;align-items:center;gap:11px;height:40px;padding:0 11px;border-radius:var(--r-md);color:var(--tk-slate-600);font-size:13.5px;font-weight:500;cursor:pointer;transition:background var(--d-fast),color var(--d-fast)}
[data-theme="dark"] .navitem{color:var(--tk-text-secondary)}
.navitem [data-lucide]{width:18px;height:18px;color:var(--tk-text-muted)}
.navitem:hover{background:var(--tk-surface-subtle);color:var(--tk-text)}
.navitem.is-active{background:var(--tk-primary-soft);color:var(--tk-primary);font-weight:600}
.navitem.is-active [data-lucide]{color:var(--tk-primary)}
.navitem .badge{margin-left:auto}
.navgroup{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tk-text-muted);padding:16px 11px 6px}

/* ---------- conversation list ---------- */
.conv{display:flex;gap:11px;padding:12px 14px 12px 11px;border-left:3px solid transparent;cursor:pointer;transition:background var(--d-fast);align-items:flex-start}
.conv:hover{background:var(--tk-surface-subtle)}
.conv.is-active{background:var(--tk-primary-soft);border-left-color:var(--tk-primary)}
.conv-b{min-width:0;flex:1}
.conv-t{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.conv-n{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-time{margin-left:auto;font-size:11px;color:var(--tk-text-muted);flex:none;font-weight:500}
.conv-p{font-size:12.5px;color:var(--tk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.conv.unread .conv-n{font-weight:700}.conv.unread .conv-p{color:var(--tk-text-secondary);font-weight:500}
.conv-m{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}

/* ---------- chat ---------- */
.msgs{padding:20px 26px;display:flex;flex-direction:column;gap:3px}
.daysep{display:flex;align-items:center;gap:12px;color:var(--tk-text-muted);font-size:11px;font-weight:600;margin:16px 0 10px}
.daysep::before,.daysep::after{content:"";height:1px;background:var(--tk-border);flex:1}
.row{display:flex;gap:9px;max-width:70%;margin-bottom:9px}
.row.out{margin-left:auto;flex-direction:row-reverse}
.bub{background:var(--tk-bubble-in);border:1px solid var(--tk-border);color:var(--tk-text);padding:9px 13px;border-radius:var(--r-bubble);border-top-left-radius:6px;font-size:13.5px;box-shadow:var(--sh-sm)}
.row.out .bub{background:var(--tk-bubble-out);border-color:transparent;color:#fff;border-radius:var(--r-bubble);border-top-right-radius:6px}
.bub .meta{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:4px;font-size:10.5px;color:var(--tk-text-muted);font-weight:500}
.row.out .bub .meta{color:rgba(255,255,255,.75)}
.row.out .bub .meta [data-lucide]{width:13px;height:13px;stroke-width:2.2}
.bub .from{font-size:11.5px;font-weight:600;color:var(--tk-primary);margin-bottom:3px}
.row.out .bub .from{color:rgba(255,255,255,.9)}
.bub-note{background:var(--tk-bubble-note);border-color:var(--tk-bubble-note-border);color:var(--tk-text)}
.row.out .bub-note{background:var(--tk-bubble-note);border-color:var(--tk-bubble-note-border);color:var(--tk-text)}
.row.out .bub-note .meta{color:var(--tk-warning-600)}
.sys{align-self:center;max-width:74%;text-align:center;font-size:11.5px;color:var(--tk-text-muted);background:var(--tk-surface-subtle);padding:5px 12px;border-radius:var(--r-full);margin:6px auto;font-weight:500}
.voice{display:flex;align-items:center;gap:10px;min-width:196px}
.wave{display:flex;align-items:center;gap:2.5px;height:22px;flex:1}
.wave i{width:2.5px;border-radius:2px;background:currentColor;opacity:.55;display:block}
.row.out .wave i{background:#fff}
.att{display:flex;align-items:center;gap:10px;padding:2px 0;min-width:210px}
.att .ic{width:36px;height:36px;border-radius:9px;background:var(--tk-primary-soft);color:var(--tk-primary);display:grid;place-items:center;flex:none}
.row.out .att .ic{background:rgba(255,255,255,.18);color:#fff}
.rx{display:inline-flex;align-items:center;gap:4px;background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:var(--r-full);padding:1px 7px;font-size:11.5px;font-weight:600;box-shadow:var(--sh-sm);margin-top:-6px}
.typing{display:flex;gap:3px;padding:11px 14px;background:var(--tk-bubble-in);border:1px solid var(--tk-border);border-radius:var(--r-bubble);border-top-left-radius:6px;width:fit-content}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--tk-slate-400);animation:tdot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- composer ---------- */
.composer{border-top:1px solid var(--tk-border);background:var(--tk-surface);padding:12px 18px 14px}
.comp-box{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--tk-border-strong);background:var(--tk-surface);border-radius:14px;padding:6px 8px 6px 12px;transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.comp-box:focus-within{border-color:var(--tk-primary);box-shadow:var(--ring)}
.comp-box textarea{flex:1;border:0;outline:0;background:transparent;resize:none;font:400 14px var(--font);color:var(--tk-text);min-height:32px;max-height:120px;padding:7px 0}
.comp-box textarea::placeholder{color:var(--tk-text-placeholder)}
.comp-tools{display:flex;align-items:center;gap:2px}
.comp-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.comp-note{border-color:var(--tk-bubble-note-border);background:var(--tk-bubble-note)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tk-text-muted);padding:0 16px 10px;border-bottom:1px solid var(--tk-border)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--tk-border);vertical-align:middle}
.tbl tbody tr:hover{background:var(--tk-surface-subtle)}
.tbl tbody tr:last-child td{border-bottom:0}

/* ---------- mobile ---------- */
.bottomnav{display:flex;background:var(--tk-surface);border-top:1px solid var(--tk-border);padding:6px 4px 8px}
.bn{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--tk-text-muted);font-size:10.5px;font-weight:600;border-radius:var(--r-md);cursor:pointer;position:relative}
.bn [data-lucide]{width:22px;height:22px}
.bn.is-active{color:var(--tk-primary)}
.sheet{background:var(--tk-surface);border-radius:20px 20px 0 0;box-shadow:var(--sh-lg);padding:8px 18px 22px}
.sheet .grab{width:38px;height:4px;border-radius:2px;background:var(--tk-border-strong);margin:0 auto 14px}
.fab{width:52px;height:52px;border-radius:50%;background:var(--tk-primary);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-lg);border:0;cursor:pointer}

/* ---------- utils ---------- */
.row-f{display:flex;align-items:center}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap20{gap:20px}.gap24{gap:24px}
.col{display:flex;flex-direction:column}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.center{justify-content:center}
.mla{margin-left:auto}
.grow{flex:1;min-width:0}
.scroll{overflow-y:auto;scrollbar-width:thin}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--tk-border-strong);border-radius:9999px}
.scroll::-webkit-scrollbar-track{background:transparent}