:root{color-scheme:light;--brand:#0068ff;--bg:#eef2f7;--surface:#fff;--text:#111827;--muted:#64748b;--line:#dbe3ee;--bubble:#fff;--focus:#0057d9;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overscroll-behavior:none;background:#dce5f1;color:var(--text);-webkit-tap-highlight-color:transparent}button{font:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none}.app{height:100vh;height:100dvh;max-width:680px;margin:auto;background:var(--bg);display:grid;grid-template-rows:auto 1fr;position:relative;overflow:hidden;box-shadow:0 0 32px rgba(15,23,42,.12)}
.topbar{min-height:64px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#0878ff,#005be2);color:#fff;box-shadow:0 1px 8px rgba(0,69,160,.24);z-index:2}.avatar{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-weight:750;border:1px solid rgba(255,255,255,.3)}.heading{min-width:0;flex:1}.heading h1{font-size:16px;line-height:1.25;margin:0;font-weight:700}.heading p{font-size:12px;line-height:1.4;margin:2px 0 0;display:flex;align-items:center;gap:6px;color:#e8f2ff}.status-dot{width:7px;height:7px;border-radius:50%;background:#47e38e;box-shadow:0 0 0 2px rgba(71,227,142,.2)}#refresh{width:48px;height:48px;border:0;border-radius:14px;background:transparent;color:#fff;display:grid;place-items:center}#refresh:active{background:rgba(255,255,255,.17)}#refresh svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.messages{overflow-y:auto;overscroll-behavior:contain;padding:16px 12px calc(20px + env(safe-area-inset-bottom,0px));scrollbar-gutter:stable}.loader,.empty,.error{text-align:center;color:var(--muted);font-size:13px;padding:12px}.day{display:flex;justify-content:center;margin:8px 0 12px}.day span{font-size:11px;color:#64748b;background:rgba(255,255,255,.82);border:1px solid rgba(203,213,225,.8);border-radius:999px;padding:4px 9px}.message{display:flex;margin:0 0 12px}.bubble{max-width:min(84%,520px);background:var(--bubble);border:1px solid rgba(216,226,238,.9);border-radius:6px 18px 18px 18px;padding:9px 11px;box-shadow:0 1px 2px rgba(15,23,42,.06);overflow:hidden}.source{font-size:12px;font-weight:700;color:var(--brand);margin-bottom:4px}.text{font-size:15px;line-height:1.48;white-space:pre-wrap;overflow-wrap:anywhere}.time{font-size:10px;line-height:1.3;color:var(--muted);text-align:right;margin-top:5px}.media{display:block;max-width:100%;max-height:70vh;border-radius:12px;background:#e2e8f0;object-fit:contain}.bubble:has(.media){padding:4px}.bubble:has(.media) .source{padding:5px 7px 0}.bubble:has(.media) .time{padding:0 7px 4px}.new-messages{position:absolute;right:16px;bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:44px;border:0;border-radius:999px;padding:0 16px;background:var(--brand);color:#fff;font-size:13px;font-weight:650;box-shadow:0 8px 22px rgba(0,104,255,.3)}.new-messages:active{background:#0058d8}button:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 5px var(--focus)}
@media (min-width:681px){body{padding:20px}.app{height:calc(100dvh - 40px);border-radius:18px}.topbar{padding-top:8px}}
@media (prefers-reduced-motion:no-preference){.new-messages{transition:transform .14s ease,background .14s ease}.new-messages:active{transform:scale(.97)}}