:root{--bg:oklch(96.5% .007 85);--surface:oklch(99% .004 85);--surface-2:oklch(93.5% .009 85);--text:oklch(23% .009 70);--muted:oklch(50% .014 70);--border:oklch(89.5% .011 80);--accent:oklch(42% .06 165);--accent-soft:oklch(42% .06 165/.12);--on-accent:oklch(99% .004 165);--on-accent-muted:oklch(99% .004 165/.72);--on-accent-tint:oklch(100% 0 0/.14);--received:var(--surface);--danger:oklch(48% .16 28);--scrim:oklch(15% .01 70/.35);--shadow:0 8px 24px oklch(20% .01 70/.16), 0 1px 2px oklch(20% .01 70/.08);--radius-s:.5rem;--radius-m:.75rem;--radius-l:1.125rem;--tail:.3rem;--control:2.75rem;--ease:cubic-bezier(.16, 1, .3, 1);--pop:cubic-bezier(.2, 1.4, .4, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.4}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:oklch(20% .006 80);--surface:oklch(24.5% .007 80);--surface-2:oklch(30% .008 78);--text:oklch(93% .008 80);--muted:oklch(70% .012 75);--border:oklch(33% .009 75);--accent:oklch(50% .065 165);--accent-soft:oklch(60% .065 165/.2);--received:oklch(28% .008 75);--danger:oklch(70% .13 28);--scrim:oklch(10% .01 70/.55);--shadow:0 8px 24px oklch(5% .01 70/.5), 0 1px 2px oklch(5% .01 70/.3)}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text)}button,textarea,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}svg{flex-shrink:0}.icon-button{width:var(--control);height:var(--control);color:var(--muted);transition:color .15s var(--ease), background-color .15s var(--ease);background:0 0;border:0;border-radius:999px;place-items:center;padding:0;display:inline-grid;position:relative}.icon-button:hover:not(:disabled){color:var(--text);background:var(--accent-soft)}.icon-button:active:not(:disabled){background:var(--surface-2)}.icon-button.sm{width:2rem;height:2rem}@media (pointer:coarse){.icon-button.sm:after,.text-button:after,.reactions button:after{content:"";position:absolute;inset:-.4rem}.text-button:after,.reactions button:after{inset:-.7rem}}.text-button{color:inherit;background:0 0;border:0;padding:0;font-weight:500;position:relative}.text-button:hover{text-underline-offset:.15em;text-decoration:underline}.primary{min-height:var(--control);border-radius:var(--radius-m);background:var(--accent);color:var(--on-accent);transition:filter .15s var(--ease);border:0;padding:.6rem 1rem;font-weight:500}.primary:hover:not(:disabled){filter:brightness(1.08)}.primary:disabled{background:var(--surface-2);color:var(--muted)}.login{flex-direction:column;gap:.5rem;max-width:22rem;margin:20vh auto 0;padding:0 1rem;display:flex}.login h1{letter-spacing:-.01em;margin:0;font-size:1.75rem}.login .lede{color:var(--muted);margin:0 0 1rem}.login label{color:var(--muted);font-size:.875rem}.login input{min-height:var(--control);border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);padding:.6rem .8rem}.login input:focus-visible,.composer textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.login .primary{margin-top:.5rem}.error{color:var(--danger);margin:0;font-size:.875rem}.chat{height:var(--vv-height,100%);transform:translateY(var(--vv-top,0px));flex-direction:column;max-width:44rem;margin:0 auto;display:flex}@media (width>=48rem){.chat{border-inline:1px solid var(--border)}}.chat header{padding:.5rem .75rem .5rem 1rem;padding-top:max(.5rem, env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:.25rem;display:flex}.who{flex:1;min-width:0}.chat h1{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.3}.status{color:var(--muted);font-size:.8125rem;line-height:1.2;display:block}.banner,.notice{align-items:center;gap:.5rem;padding:.35rem .5rem .35rem 1rem;font-size:.875rem;display:flex}.banner{border-bottom:1px solid var(--border);background:var(--accent-soft)}.notice{color:var(--danger);background:var(--surface);border-top:1px solid var(--border)}.banner p,.notice p{flex:1;margin:0}.thread{flex:1;min-height:0;display:flex;position:relative}.messages{flex-direction:column;flex:1;gap:2px;margin:0;padding:.75rem 1rem 1rem;list-style:none;display:flex;overflow-y:auto}.jump{width:2.5rem;height:2.5rem;color:var(--text);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);animation:pop-in .25s var(--ease);position:absolute;bottom:.75rem;right:1rem}.jump:hover:not(:disabled){background:var(--surface)}.day{color:var(--muted);align-self:center;margin:1rem 0 .5rem;font-size:.8125rem;font-weight:500}.day:first-letter{text-transform:uppercase}.bubble{border-radius:var(--radius-l);overflow-wrap:anywhere;touch-action:pan-y;max-width:80%;padding:.5rem .75rem;position:relative}.bubble.first{margin-top:.5rem}.day+.bubble.first{margin-top:0}.bubble.menu-open{z-index:2;animation:bubble-pop .35s var(--pop)}@keyframes bubble-pop{50%{transform:scale(1.04)}}@media (pointer:coarse){.bubble{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.bubble .more{display:none}}.bubble.flash{animation:flash 1.2s var(--ease)}@keyframes flash{0%{box-shadow:0 0 0 3px var(--accent)}to{box-shadow:0 0 0 3px #0000}}.bubble p{white-space:pre-wrap;margin:0}.bubble.own{background:var(--accent);color:var(--on-accent);align-self:flex-end}.bubble.own.last{border-bottom-right-radius:var(--tail)}.bubble.received{background:var(--received);border:1px solid var(--border);align-self:flex-start}.bubble.received.last{border-bottom-left-radius:var(--tail)}.meta{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.8125rem;display:flex}.bubble.own .meta{color:var(--on-accent-muted);justify-content:flex-end}.meta>:not(:first-child):before{content:"·";margin-right:.35rem}.meta .ok{align-items:center;gap:.2rem;display:inline-flex}.meta .ok:before{margin-right:.15rem}.meta .failed{color:var(--danger)}.bubble.own .meta .failed,.bubble.own .meta .text-button{color:var(--on-accent)}.bubble .original{border-top:1px solid var(--border);color:var(--muted);margin-top:.4rem;padding-top:.4rem;font-style:italic}.meta .feedback-toggle{align-items:center;gap:.2rem;margin-right:auto;font-weight:400;display:inline-flex}.meta .feedback-toggle+:before{content:none}.feedback-toggle svg{transition:transform .2s var(--ease)}.feedback-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.feedback{margin-top:.2rem;font-size:.875rem}.feedback .corrected{border-radius:var(--radius-s);background:var(--on-accent-tint);margin:.4rem 0 .5rem;padding:.4rem .6rem}.feedback ul{flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.feedback del,.feedback ins{border-radius:.3rem;padding:.05rem .35rem;text-decoration:none;display:inline-block}.feedback del{color:var(--on-accent-muted);text-decoration:line-through}.feedback ins{background:var(--on-accent-tint);margin-left:.25rem;font-weight:500}.feedback .why{color:var(--on-accent-muted);margin-top:.15rem;display:block}.quote,.replying{border-radius:var(--radius-s);background:var(--surface-2);width:100%;color:inherit;text-align:left;border:0;margin:0;padding:.35rem .6rem;font-size:.875rem;display:block}.quote{margin-bottom:.4rem}.bubble.own .quote{background:var(--on-accent-tint)}.quote strong,.replying strong{color:var(--accent);font-size:.75rem;display:block}.bubble.own .quote strong{color:var(--on-accent)}.quote span{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.reactions{gap:.2rem;display:flex;position:absolute;bottom:-.75rem}.bubble.received .reactions{left:.6rem}.bubble.own .reactions{right:.6rem}.bubble:has(.reactions){margin-bottom:.8rem}.reactions button{border:1px solid var(--border);background:var(--surface);color:var(--text);transition:border-color .15s var(--ease);border-radius:999px;padding:.05rem .45rem;font-size:.8125rem;position:relative;box-shadow:0 1px 2px oklch(20% .01 70/.12)}.reactions button.mine{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.more{background:var(--surface);color:var(--text);box-shadow:var(--shadow);opacity:0;transition:opacity .15s var(--ease);position:absolute;top:0}.bubble.received .more{left:calc(100% + .25rem)}.bubble.own .more{right:calc(100% + .25rem)}.bubble:hover .more,.more:focus-visible,.more[aria-expanded=true]{opacity:1}.actions{z-index:1;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow);white-space:nowrap;transform-origin:0 100%;animation:pop-in .25s var(--pop);border-radius:999px;align-items:center;gap:.15rem;margin-bottom:.4rem;padding:.25rem;display:flex;position:absolute;bottom:100%;left:0}.bubble.own .actions{transform-origin:100% 100%;left:auto;right:0}@keyframes pop-in{0%{opacity:0;transform:scale(.6)translateY(.5rem)}}.actions button{width:2.25rem;height:2.25rem;transition:transform .15s var(--ease), background .15s var(--ease);animation:rise .3s calc(var(--i,0) * 30ms) var(--pop) backwards;background:0 0;border:0;border-radius:999px;place-items:center;padding:0;font-size:1.35rem;line-height:1;display:grid}@keyframes rise{0%{opacity:0;transform:translateY(.4rem)scale(.5)}}.actions button:hover{background:var(--bg);transform:scale(1.15)}.actions button:active{transform:scale(.9)}.actions button.selected{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}.actions button.reply{width:auto;margin-left:.35rem;padding:0 .8rem 0 .65rem;font-size:.875rem;font-weight:500;animation:none;position:relative}.actions button.reply:before{content:"";background:var(--border);width:1px;position:absolute;top:.45rem;bottom:.45rem;left:-.25rem}.scrim{display:none}@media (pointer:coarse){.scrim{z-index:1;background:var(--scrim);animation:fade-in .2s var(--ease);display:block;position:fixed;inset:0}}@keyframes fade-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.bubble.menu-open,.actions,.actions button,.scrim,.jump{animation:none}}.composer{padding:.5rem .75rem;padding-bottom:max(.5rem, env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);flex-direction:column;gap:.5rem;display:flex}.composer-row{align-items:flex-end;gap:.25rem;display:flex}.composer textarea{min-width:0;min-height:var(--control);border:1px solid var(--border);border-radius:calc(var(--control) / 2);background:var(--bg);resize:none;flex:1;max-height:8rem;padding:.6rem .9rem;overflow-y:auto}.composer textarea::placeholder{color:var(--muted)}.send:not(:disabled){background:var(--accent);color:var(--on-accent)}.send:hover:not(:disabled){background:var(--accent);color:var(--on-accent);filter:brightness(1.08)}.send:disabled{color:var(--muted);opacity:.6}.replying{align-items:center;gap:.5rem;padding-right:.25rem;display:flex}.replying>div{flex:1;min-width:0}.replying p{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.bubble .photo{cursor:zoom-in;background:0 0;border:0;max-width:calc(100% + 1rem);margin:-.25rem -.5rem .35rem;padding:0;display:block}.bubble .photo img{object-fit:cover;border-radius:calc(var(--radius-l) - .25rem);background:var(--surface-2);width:100%;height:auto;max-height:60vh;display:block}.bubble.own.last .photo img{border-bottom-right-radius:var(--tail)}.bubble.received.last .photo img{border-bottom-left-radius:var(--tail)}.lightbox{cursor:zoom-out;background:oklch(8% .004 80);border:0;justify-content:center;align-items:center;width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;padding:0;display:flex}.lightbox::backdrop{background:oklch(8% .004 80)}.lightbox img{object-fit:contain;max-width:100%;max-height:100%}.attach{cursor:pointer}.attach input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.attach:focus-within{outline:2px solid var(--accent);outline-offset:2px}.attachment{align-self:flex-start;margin:.25rem 0 0 .5rem;position:relative}.attachment img{border-radius:var(--radius-m);object-fit:cover;width:auto;max-width:100%;height:6rem;display:block}.attachment .icon-button{background:var(--surface);color:var(--text);border:1px solid var(--border);position:absolute;top:-.5rem;right:-.5rem}
