:root{--bg:#f4f6f8;--pn:#fff;--tx:#111827;--mt:#6b7280;--ac:#0f766e;--me:#d1fae5;--bd:#e5e7eb}
[data-theme=dark]{--bg:#0b1115;--pn:#162027;--tx:#e5e7eb;--mt:#94a3b8;--ac:#2dd4bf;--me:#134e4a;--bd:#233039}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px system-ui,sans-serif;background:var(--bg);color:var(--tx);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{height:100%}button,input{font:inherit;color:inherit}
button{background:var(--ac);color:#fff;border:0;border-radius:10px;padding:8px 12px;cursor:pointer;transition:.15s}
button.g{background:transparent;color:var(--tx)}button:hover{opacity:.85}
input{background:var(--pn);border:1px solid var(--bd);border-radius:10px;padding:10px;width:100%}
.auth{max-width:360px;margin:8vh auto;padding:24px;background:var(--pn);border-radius:16px;display:flex;flex-direction:column;gap:10px}
.auth h1{margin:0;color:var(--ac)}.err{color:#dc2626;min-height:1em}
.layout{display:grid;grid-template-columns:320px 1fr;height:100%}
.side{background:var(--pn);border-right:1px solid var(--bd);display:flex;flex-direction:column;min-height:0}
.bar{display:flex;gap:6px;align-items:center;padding:10px;justify-content:space-between}
.list{overflow:auto;flex:1}.item{padding:12px;border-bottom:1px solid var(--bd);cursor:pointer;display:flex;justify-content:space-between}
.item:hover,.item.on{background:var(--bg)}.badge{background:var(--ac);color:#fff;border-radius:99px;padding:0 7px;font-size:12px}
.chat{display:flex;flex-direction:column;min-height:0}.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.m{max-width:75%;padding:8px 10px;border-radius:12px;background:var(--pn);align-self:flex-start;animation:in .2s}
.m.me{background:var(--me);align-self:flex-end}.m small{color:var(--mt);display:block;font-size:11px;margin-top:2px}
.m .rp{border-left:3px solid var(--ac);padding-left:6px;color:var(--mt);font-size:12px}.m .ac{display:none;gap:4px}.m:hover .ac{display:flex}
.m .ac span{cursor:pointer;font-size:12px}.typing{padding:0 14px;color:var(--mt);height:18px;font-size:12px}
.send{display:flex;gap:8px;padding:10px;background:var(--pn)}.empty{margin:auto;color:var(--mt)}
@keyframes in{from{opacity:0;transform:translateY(4px)}}
@media(max-width:700px){.layout{grid-template-columns:1fr}.layout .chat{display:none}.layout.open .side{display:none}.layout.open .chat{display:flex}}
.land{max-width:1180px;margin:0 auto;padding:20px;background:radial-gradient(60% 50% at 0 0,rgba(15,118,110,.14),transparent)}
.land header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--ac)}
.lg{background:var(--ac);border-radius:12px;width:40px;height:40px;display:grid;place-items:center;font-size:20px}
.nav{display:flex;align-items:center;gap:6px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:60px 0}
.pill{background:var(--pn);border:1px solid var(--bd);border-radius:99px;padding:6px 12px;font-size:13px}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.05;margin:18px 0;letter-spacing:-2px}
.hero em{font-style:normal;background:linear-gradient(90deg,#0f766e,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--mt);font-size:18px;max-width:520px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.big{padding:14px 22px;border-radius:99px;font-weight:600}
.big.o{background:var(--pn);color:var(--tx);border:1px solid var(--bd)}.mut{color:var(--mt)}
.phone{background:#052e2b;border-radius:36px;padding:8px;max-width:380px;width:100%;justify-self:center;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.ph{display:flex;gap:10px;align-items:center;color:#fff;padding:14px}.ph small{display:block;color:#5eead4}
.pb{background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:8px}
.mb{max-width:80%;padding:8px 12px;border-radius:14px;background:var(--pn)}.mb.me{background:#059669;color:#fff;align-self:flex-end}
.mb small{display:block;text-align:right;opacity:.7;font-size:11px}
.pi{background:var(--pn);color:var(--mt);padding:14px;border-radius:0 0 30px 30px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-bottom:50px}
.card{background:var(--pn);border:1px solid var(--bd);border-radius:18px;padding:22px;transition:.2s}.card:hover{transform:translateY(-3px)}
.card .ic{background:var(--bg);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px}
.card p{color:var(--mt)}.land footer{border-top:1px solid var(--bd);padding:24px 0;color:var(--mt);text-align:right}
.av{background:var(--ac);color:#fff;border-radius:50%;width:36px;height:36px;display:inline-grid;place-items:center;font-weight:700;flex:none}
.row{display:flex;gap:10px;align-items:center}
.msgs{background-image:radial-gradient(var(--bd) 1px,transparent 1px);background-size:18px 18px}
.send input,.send button{border-radius:99px}.auth{box-shadow:0 20px 50px rgba(0,0,0,.12)}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding:30px 0}.land footer{text-align:left}}
.m.sel .ac{display:flex}.m .ac{flex-wrap:wrap}.rx{display:flex;gap:4px;margin-top:2px}.rx span{background:var(--bg);border-radius:99px;padding:0 6px;cursor:pointer}
.send input{flex:1}.send span{display:flex}.m img,.m video,.m audio{max-width:240px}
.call{position:fixed;inset:0;background:#0b1115;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
#rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#lv{position:absolute;right:12px;bottom:110px;width:110px;border-radius:12px;background:#000;z-index:2}
.call h2{position:relative;z-index:2;text-shadow:0 1px 6px #000}.cb{position:absolute;bottom:30px;display:flex;gap:14px;z-index:3}.cb button{border-radius:99px;padding:14px 18px;font-size:18px}.red{background:#dc2626}