.demo-wrap{--paper:var(--card);--edge:var(--foreground);--ground:var(--primary);--hivis:var(--primary);--on-hivis:var(--foreground);--char:var(--foreground);--dink:var(--foreground);
--line:color-mix(in oklab,var(--foreground) 18%,transparent);--muted:var(--muted-foreground);--soft2:var(--background);--ok:var(--whatsapp);--ok-soft:var(--whatsapp-bubble);
--warn:oklch(0.55 0.2 30);--warn-soft:oklch(0.95 0.04 30);--taken:oklch(0.9 0.012 250);--taken-ink:var(--foreground);--free-ink:color-mix(in oklab,var(--muted-foreground) 70%,transparent);
--radius:14px;--text:var(--font-sans);--head:var(--font-display)}

.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
@media (max-width:960px){.demo-grid{grid-template-columns:1fr}}
.pnl{background:var(--paper);border:2.5px solid var(--edge);box-shadow:var(--shadow-chunky-lg);border-radius:var(--radius);min-width:0;overflow:hidden}
.pnl-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:2px solid var(--edge);background:var(--ground)}
.pnl-h h2{font-size:24px;font-weight:800}
.stat{font:600 13px ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
.stat.live{color:var(--ok)}
.stat.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
.mini{font:700 14px var(--text);background:var(--paper);border:2px solid var(--edge);color:var(--dink);border-radius:var(--radius);padding:6px 10px;cursor:pointer}
.mini[aria-pressed="true"]{background:var(--hivis);color:var(--on-hivis)}
.chips{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chips p{font-size:14px;color:var(--muted)}
.chip{font:700 16px var(--text);text-align:left;color:var(--dink);background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center}
.chip span{font:600 12px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.chip:hover:not(:disabled){border-color:var(--edge)}
.chip:disabled{opacity:.5;cursor:default}
.chip.done{border-color:var(--ok)}
.chip.done span{color:var(--ok)}
.msgs{height:440px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--soft2)}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.45}
.msg.ai{background:var(--char);color:#fff;border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--paper);border:1px solid var(--line);border-bottom-right-radius:4px;align-self:flex-end}
.msg .who{display:block;font:700 11px var(--text);letter-spacing:.08em;opacity:.65;margin-bottom:2px}
.sys{align-self:center;text-align:center;font:600 12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:5px 10px;border-radius:6px;max-width:95%}
.sys.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.sys.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.empty{margin:auto;text-align:center;color:var(--muted);max-width:30ch}
.right{display:flex;flex-direction:column;gap:24px;min-width:0}
.days{position:relative;display:flex;gap:6px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--line)}
.day{flex:0 0 auto;font:700 14px var(--text);color:var(--dink);background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:5px 10px;cursor:pointer;text-align:center;line-height:1.2}
.day small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.day[aria-pressed="true"]{background:var(--hivis);color:var(--on-hivis);border-color:var(--edge)}
.day[aria-pressed="true"] small{color:var(--on-hivis)}
.diary{overflow-x:auto;max-height:520px;overflow-y:auto}
table{border-collapse:collapse;width:100%;min-width:360px;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;padding:10px 8px;border-bottom:2px solid var(--edge);position:sticky;top:0;background:var(--paper);z-index:1}
th small{display:block;font-weight:500;color:var(--muted);font-size:12px}
td{padding:3px 8px;border-bottom:1px solid var(--line);height:32px}
td.t{font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--muted);width:70px;white-space:nowrap}
.slot{border-radius:4px;padding:3px 8px;font-size:13px;line-height:1.3}
.slot.taken{background:var(--taken);color:var(--taken-ink)}
.slot.new{background:var(--hivis);color:var(--on-hivis);font-weight:700;border:1px solid var(--on-hivis)}
.slot.free{color:var(--free-ink)}
.closedday{padding:28px 16px;text-align:center;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 16px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.texts{display:flex;flex-direction:column;gap:8px;padding:14px 16px;max-height:300px;overflow-y:auto}
.text{border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;background:var(--soft2);font-size:14.5px}
.text .to{font:700 11px var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.text.urgent{border-color:var(--warn);background:var(--warn-soft)}
.text.urgent .to{color:var(--warn)}
.concept{display:inline-block;font:600 13px var(--text);border:2px dashed var(--muted);color:var(--muted);padding:4px 10px;border-radius:4px;margin-top:16px}

.demo-grid h2{font-family:var(--font-display)}