:root{color-scheme:light;--night:#112522;--teal:#006858;--teal-dark:#005144;--mint:#daf3e8;--paper:#f3f6f3;--white:#fff;--ink:#192b27;--muted:#4e655d;--line:#d9e4dd;font-family:"DM Sans",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{min-height:44px;cursor:pointer}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #26967e;outline-offset:2px}
.primary,.subtle{border:0;border-radius:12px;font-weight:700;padding:0 16px}
.primary{background:var(--teal);color:white}
.primary:hover:not(:disabled){background:var(--teal-dark)}
.subtle{background:transparent;color:inherit}
.mark{display:inline-grid;place-items:center;width:34px;height:34px;background:#a6eacb;color:var(--night);border-radius:10px;font-size:22px;font-weight:800}
.top{min-height:68px;padding:10px clamp(16px,4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--night);color:white}
.brand,.profile{display:flex;align-items:center;gap:10px}
.profile{font-size:.85rem}
#profile{max-width:26vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c4dfd4}
.shell{max-width:760px;margin:auto;padding:24px 18px 100px}
.heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
h1,h2,p{margin:0}
h1{font-size:clamp(1.85rem,5vw,2.55rem);letter-spacing:-.045em;line-height:1.06}
h2{font-size:1.35rem}
.filters{display:flex;gap:7px;margin-bottom:16px}
.filters button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:0 16px;font-weight:700;color:var(--muted)}
.filters [aria-pressed=true]{background:var(--mint);border-color:#acd8c3;color:#154a3c}
.list{display:grid;gap:10px}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.card>div{min-width:0;overflow-wrap:anywhere}
.card h2{font-size:1rem;margin-bottom:4px}
.card p,.empty{color:var(--muted);font-size:.9rem}
.details{white-space:pre-wrap;margin-top:8px}
.empty{border:1px dashed #b9cfc3;border-radius:14px;padding:20px}
.toggle{border:1px solid #bad4c8;background:var(--mint);color:#1a4d40;border-radius:11px;padding:0 10px;font-weight:700;flex-shrink:0}
.nav{position:fixed;z-index:1;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px max(7px,env(safe-area-inset-bottom));background:white;border-top:1px solid var(--line)}
.nav button{flex:1;max-width:220px;display:grid;justify-items:center;gap:2px;border:0;border-radius:12px;padding:6px;background:transparent;color:var(--muted);font-size:.82rem;font-weight:700}
.nav span{font-size:1.1rem}
.nav [aria-current=page]{background:var(--mint);color:var(--teal-dark)}
.login{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--night)}
.login-panel{width:min(100%,400px);background:white;border-radius:24px;padding:30px}
.login-panel .mark{margin-bottom:18px}
.login-panel p{margin:12px 0 20px;color:var(--muted)}
form,.contact{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:.9rem;font-weight:700}
input,select,textarea{width:100%;max-width:100%;min-width:0;min-height:44px;padding:9px 11px;border:1px solid #b9cdc3;border-radius:10px;background:white;color:var(--ink)}
textarea{resize:vertical}
.status,.error{font-size:.88rem;color:#942617}
.status:not(:empty){margin-bottom:12px}
.error:empty{display:none}
dialog{width:min(calc(100% - 30px),450px);max-height:calc(100% - 32px);padding:20px;border:1px solid var(--line);border-radius:18px;color:var(--ink)}
dialog::backdrop{background:#0e241eb0}
dialog .heading{margin-bottom:0}
.chat{border:1px solid var(--line);background:white;border-radius:16px;overflow:hidden}
.contact{padding:12px;background:white;grid-template-columns:auto 1fr;align-items:center;border-bottom:1px solid var(--line)}
.history{display:flex;flex-direction:column;align-items:flex-start;gap:8px;overflow:auto;height:clamp(120px,calc(100dvh - 370px),580px);padding:12px;background:#eaf2ec}
.bubble{max-width:85%;padding:8px 10px;border-radius:12px 12px 12px 3px;background:white;overflow-wrap:anywhere}
.bubble.mine{align-self:flex-end;background:#d0efdd;border-radius:12px 12px 3px 12px}
.bubble p{white-space:pre-wrap}
.bubble time{display:block;text-align:right;color:var(--muted);font-size:.71rem;margin-top:3px}
.composer{display:flex;gap:8px;padding:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:370px){#profile{display:none}.heading .primary{padding:0 9px}.card{padding:12px}.toggle{max-width:100px}}