:root{color-scheme:dark;--bg:#050914;--panel:#081225;--surface:#0d1a32;--surface2:#122443;--line:#1c3560;--text:#f8fbff;--muted:#a9bce5;--accent:#7c5cff;--accent2:#0ea5e9;--cyan:#06b6d4;--success:#31d19a;--danger:#ff6474;--shadow:0 30px 90px rgba(0,0,0,.28)}
body.light{color-scheme:light;--bg:#eef4ff;--panel:#fff;--surface:#f6f8ff;--surface2:#eaf0ff;--line:#cad7f0;--text:#11203d;--muted:#536785;--accent:#6246ea;--accent2:#087fc1;--cyan:#058ba4;--success:#08795c;--danger:#c52f44;--shadow:0 25px 70px rgba(40,63,108,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",system-ui,sans-serif}body{overflow:hidden;background:radial-gradient(circle at 12% 10%,rgba(124,92,255,.18),transparent 26rem),radial-gradient(circle at 88% 85%,rgba(14,165,233,.13),transparent 28rem),var(--bg)}button,input,textarea,select{font:inherit}.noscript{padding:20px;background:#5b1730;color:#fff}.app{height:100dvh;min-height:600px;display:grid;grid-template-rows:auto minmax(0,1fr)}.topbar{height:78px;padding:max(13px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 13px max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(20px);z-index:10}.brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:22px;font-weight:900;box-shadow:0 10px 30px rgba(124,92,255,.33)}.brand b{display:block;letter-spacing:.09em}.brand small{display:block;color:var(--muted);margin-top:2px}.top-status{margin-left:auto;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}.top-status i,.chat-person i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 18%,transparent)}.top-actions{display:flex;gap:8px}.top-actions button,.icon-button,.back-button{width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);cursor:pointer}.layout{min-height:0;padding:16px;display:grid;grid-template-columns:minmax(240px,300px) minmax(380px,1fr) minmax(250px,310px);gap:14px}.panel{min-height:0;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--panel) 96%,transparent);box-shadow:var(--shadow);overflow:hidden}.contacts-panel,.tools-panel{padding:20px;overflow:auto}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.eyebrow{margin:0 0 4px;color:var(--accent2);font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.panel-head h1,.panel-head h2{margin:0;font-size:26px}.search{margin:18px 0 13px;padding:0 14px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.search input{width:100%;height:46px;border:0;outline:0;background:transparent;color:var(--text)}.contact-list{display:grid;gap:8px}.contact{width:100%;padding:12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid transparent;border-radius:17px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.contact:hover{background:var(--surface)}.contact.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface))}.avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900}.contact-copy{min-width:0}.contact-copy b,.contact-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-copy span{margin-top:4px;color:var(--muted);font-size:12px}.contact-time{color:var(--muted);font-size:10px}.storage-card{margin-top:18px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.storage-card b,.storage-card span{display:block}.storage-card span{margin-top:5px;color:var(--muted);font-size:12px}.chat-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto}.chat-head{padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.chat-person{min-width:0;flex:1}.chat-person b,.chat-person span{display:block}.chat-person span{margin-top:4px;color:var(--muted);font-size:12px}.chat-person span i{display:inline-block;width:6px;height:6px;margin-right:6px}.back-button{display:none}.translation-banner{margin:12px 16px 0;padding:10px 13px;display:flex;align-items:center;gap:11px;border:1px solid color-mix(in srgb,var(--cyan) 42%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--cyan) 10%,var(--surface))}.translation-banner>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--cyan);color:#fff;font-weight:900}.translation-banner div{min-width:0;flex:1}.translation-banner b,.translation-banner small{display:block}.translation-banner small{color:var(--muted);margin-top:2px}.translation-banner button{padding:7px 10px;border:0;border-radius:999px;background:var(--success);color:#061c15;font-size:10px;font-weight:900;cursor:pointer}.translation-banner.off{opacity:.68}.translation-banner.off button{background:var(--surface2);color:var(--muted)}.message-list{min-height:0;padding:22px 18px 12px;overflow:auto;scroll-behavior:smooth}.day-label{margin:5px auto 18px;width:max-content;padding:5px 10px;border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px}.message-row{margin:10px 0;display:flex;align-items:flex-end;gap:8px}.message-row.mine{justify-content:flex-end}.bubble{max-width:min(76%,620px);padding:12px 14px;border:1px solid var(--line);border-radius:18px 18px 18px 5px;background:var(--surface);line-height:1.5;word-break:break-word}.mine .bubble{border-color:transparent;border-radius:18px 18px 5px 18px;background:linear-gradient(135deg,var(--accent),#5d44d8);color:#fff}.bubble p{margin:0}.bubble img{display:block;max-width:260px;width:100%;max-height:260px;object-fit:cover;border-radius:12px;margin-bottom:8px}.translation{margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;opacity:.78}.message-meta{display:flex;justify-content:flex-end;gap:5px;margin-top:5px;font-size:9px;opacity:.65}.attachment-preview{margin:0 16px 8px;padding:10px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.attachment-preview img{width:54px;height:54px;object-fit:cover;border-radius:11px}.attachment-preview button{margin-left:auto;border:0;background:transparent;color:var(--danger);cursor:pointer}.composer{position:relative;margin:0 14px max(14px,env(safe-area-inset-bottom));padding:8px;display:flex;align-items:flex-end;gap:7px;border:1px solid var(--line);border-radius:19px;background:var(--surface)}.composer textarea{min-width:0;flex:1;max-height:130px;padding:11px 5px;border:0;outline:0;resize:none;background:transparent;color:var(--text)}.composer-icon,.send-button{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:13px;background:var(--surface2);color:var(--text);cursor:pointer}.send-button{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900}.attach input{display:none}.emoji-picker{position:absolute;left:0;bottom:58px;width:min(310px,calc(100vw - 42px));padding:10px;display:grid;grid-template-columns:repeat(6,1fr);gap:5px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}.emoji-picker button{height:40px;border:0;border-radius:10px;background:var(--surface);font-size:20px;cursor:pointer}.tool-card{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.tool-card h3{margin:0 0 13px}.tool-card label{display:grid;gap:6px;margin-top:12px;color:var(--muted);font-size:12px}.tool-card select{height:43px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}.switch-row{grid-template-columns:1fr auto!important;align-items:center}.switch-row b,.switch-row small{display:block}.switch-row small{margin-top:3px}.switch-row input{width:22px;height:22px;accent-color:var(--accent)}.tool-button{width:100%;margin-top:8px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-align:center;cursor:pointer}.file-button{display:block}.file-button input{display:none}.tool-button.danger{color:var(--danger)}.tool-card.note{border-left:3px solid var(--accent2)}.tool-card.note p{margin-bottom:0;color:var(--muted);line-height:1.6}.mobile-nav{display:none}.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,20px);padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--text);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(480px,calc(100% - 28px));padding:0;border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--text);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(5px)}dialog form{padding:20px}dialog header{display:flex;justify-content:space-between}dialog header h2{margin:0}dialog header button{border:0;background:transparent;color:var(--text);font-size:26px}dialog label{display:grid;gap:7px;margin-top:14px;color:var(--muted)}dialog input{height:46px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}dialog menu{display:flex;justify-content:flex-end;gap:8px;margin:20px 0 0;padding:0}dialog menu button{padding:10px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}dialog menu button:last-child{background:var(--accent);color:#fff}
@media(max-width:1040px){.layout{grid-template-columns:250px minmax(0,1fr)}.tools-panel{position:fixed;z-index:30;right:16px;top:94px;bottom:16px;width:min(340px,calc(100% - 32px));transform:translateX(calc(100% + 30px));transition:.25s}.tools-panel.open{transform:none}}
@media(max-width:720px){body{overflow:hidden}.app{min-height:0}.topbar{height:68px;padding-top:max(9px,env(safe-area-inset-top));padding-inline:12px}.brand-mark{width:39px;height:39px}.brand small,.top-status{display:none}.layout{padding:0;display:block}.panel{position:absolute;inset:68px 0 max(64px,env(safe-area-inset-bottom));border:0;border-radius:0;box-shadow:none;display:none}.mobile-view.active{display:block}.contacts-panel,.tools-panel{padding:16px;overflow:auto;transform:none;width:auto}.chat-panel.active{display:grid}.tools-panel{position:absolute}.back-button{display:block}.translation-banner{margin-top:8px}.message-list{padding-inline:12px}.bubble{max-width:86%}.composer{margin-inline:8px;margin-bottom:8px}.mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(64px + env(safe-area-inset-bottom));padding:6px 12px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(18px)}.mobile-nav button{border:0;border-radius:13px;background:transparent;color:var(--muted);font-size:10px;font-weight:800}.mobile-nav button span{display:block;font-size:20px;margin-bottom:2px}.mobile-nav button.active{background:var(--surface2);color:var(--text)}.toast{bottom:84px}}
@media(max-width:390px){.top-actions button{width:38px;height:38px}.brand b{font-size:14px}.bubble{max-width:90%}.composer-icon,.send-button{width:37px;height:37px}.translation-banner{font-size:12px}.translation-banner small{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.cloud-card{border-color:color-mix(in srgb,#22c55e 35%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,#22c55e 7%,var(--panel)),var(--panel))}
.cloud-card p{margin:.25rem 0 .75rem;color:var(--muted);line-height:1.55}
.cloud-card small{display:block;margin-top:.75rem;color:var(--muted);line-height:1.5}