@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#151a2d; --muted:#7d8499; --line:#e9eaf0; --surface:#fff; --soft:#f6f7fb; --navy:#11172b; --accent:#6558e8; --accent2:#8d7bff; --green:#36c98f; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font-family:"DM Sans",sans-serif; color:var(--ink); background:#f2f3f7; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.app-body { min-height:100%; }

.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(480px,44%) 1fr; background:#fbfbfd; }
.login-shell { width:min(470px,76%); margin:auto; padding:45px 0; }
.login-brand { display:flex; align-items:center; gap:14px; margin-bottom:10vh; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:white; background:linear-gradient(145deg,var(--accent2),#5144d6); box-shadow:0 12px 30px #6558e83a; }
.brand-mark svg { width:27px; }
.brand-mark svg path:first-child { fill:#ffffff1d; }
.eyebrow { font-size:9px; letter-spacing:.24em; color:#989db0; font-weight:700; }
.login-brand h1 { margin:1px 0 0; font:800 21px/1 "Manrope"; letter-spacing:-.04em; }
.login-copy .kicker { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.02em; }
.login-copy h2 { font:800 clamp(38px,4vw,54px)/1.05 "Manrope"; letter-spacing:-.055em; margin:12px 0 13px; }
.login-copy h2 span { color:var(--accent); }
.login-copy>p:last-child { color:var(--muted); margin:0 0 39px; font-size:15px; }
.login-form { display:grid; gap:19px; }
.login-form label>span { display:block; font-size:12px; font-weight:700; margin-bottom:8px; color:#444a5d; }
.input-wrap { height:52px; display:flex; align-items:center; gap:12px; padding:0 16px; background:white; border:1px solid #e3e5ec; border-radius:13px; transition:.2s; }
.input-wrap:focus-within { border-color:#887df0; box-shadow:0 0 0 4px #6558e812; }
.input-wrap svg { width:19px; color:#9a9fb0; }
.input-wrap input { border:0; outline:0; width:100%; background:transparent; color:var(--ink); }
.input-wrap input::placeholder { color:#b3b6c3; }
.login-form .remember { display:flex; align-items:center; gap:9px; margin-top:-2px; }
.login-form .remember span { display:inline; margin:0; color:#74798a; font-weight:500; }
.remember input { accent-color:var(--accent); width:16px; height:16px; }
.login-form>button { height:53px; border:0; border-radius:13px; background:linear-gradient(135deg,#6e62ed,#5547d4); color:white; font-weight:700; box-shadow:0 13px 27px #5c50dc36; }
.login-form>button span { font-size:20px; margin-left:9px; }
.form-error,.upload-error { background:#fff1f1; color:#bd3f4b; border:1px solid #ffd9dd; border-radius:10px; padding:11px 14px; font-size:13px; }
.privacy-note { text-align:center; color:#a1a5b4; font-size:11px; margin-top:28px; }.privacy-note span{color:var(--green);font-size:8px;margin-right:6px}
.login-art { position:relative; overflow:hidden; display:grid; place-items:center; margin:18px; border-radius:27px; background:radial-gradient(circle at 20% 15%,#333161 0,transparent 35%),linear-gradient(145deg,#13182c,#090c18); }
.login-art:before { content:""; position:absolute; inset:0; opacity:.15; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom right,#000,transparent 80%); }
.orb { position:absolute; border-radius:50%; filter:blur(3px); }.orb-one{width:360px;height:360px;background:#6857e84a;top:-130px;right:-80px}.orb-two{width:240px;height:240px;background:#16a88925;bottom:-70px;left:-50px}
.quote-card { position:relative; width:min(450px,70%); padding:48px; color:white; border:1px solid #ffffff1c; border-radius:24px; background:#ffffff0c; backdrop-filter:blur(16px); box-shadow:0 30px 80px #0005; }
.quote-marks { color:#8f84ff; font:800 64px/1 Georgia; height:35px; }.quote-card p{font:600 clamp(25px,3vw,39px)/1.32 "Manrope";letter-spacing:-.035em;margin:18px 0 35px}.tiny-line{display:flex;gap:8px}.tiny-line span{height:3px;width:32px;background:#7368e9;border-radius:4px}.tiny-line span+span{width:10px;background:#ffffff38}

.chat-app { width:100%; height:100vh; display:grid; grid-template-columns:310px minmax(0,1fr); background:#fff; overflow:hidden; }
.chat-sidebar { display:flex; flex-direction:column; background:#f8f8fb; border-right:1px solid var(--line); min-width:0; }
.sidebar-top { height:84px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.mini-brand { display:flex; align-items:center; gap:10px; font:800 18px "Manrope"; }.mini-brand>span,.mobile-brand{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:white;background:linear-gradient(135deg,#8175f3,#5548d5);box-shadow:0 7px 17px #6558e837}
.icon-button { width:41px;height:41px;border:0;border-radius:12px;background:transparent;color:#6f7487;display:grid;place-items:center;transition:.18s}.icon-button:hover{background:#eeedf8;color:var(--accent)}.icon-button svg{width:21px}
.sidebar-label { padding:26px 22px 11px; color:#aaaebc; font-size:9px; font-weight:800; letter-spacing:.2em; }
.conversation { margin:0 10px; padding:12px; border:0; border-radius:15px; background:transparent; display:grid; grid-template-columns:46px 1fr auto; gap:11px; align-items:center; text-align:left; color:inherit; }.conversation.active{background:white;box-shadow:0 5px 22px #2e33500b}.conversation-copy{min-width:0}.conversation-copy strong,.conversation-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-copy strong{font-size:14px}.conversation-copy small{color:#8a8fa0;font-size:11px;margin-top:4px}.conversation-meta{align-self:stretch;text-align:right}.conversation-meta time{display:block;color:#adb0bc;font-size:9px}.conversation-meta b{display:inline-grid;place-items:center;background:var(--accent);color:white;border-radius:10px;min-width:18px;height:18px;font-size:9px;margin-top:9px}
.sidebar-spacer { flex:1; }
.privacy-card { margin:16px; padding:15px; display:flex; gap:11px; align-items:flex-start; border:1px solid #e8e7f3; background:#f3f1ff; border-radius:14px; }.privacy-card svg{width:18px;color:var(--accent);flex:none}.privacy-card strong,.privacy-card span{display:block}.privacy-card strong{font-size:11px}.privacy-card span{font-size:9px;color:#8c8fa0;margin-top:3px;line-height:1.4}
.me-card { min-height:75px; padding:13px 18px; border-top:1px solid var(--line); display:flex;align-items:center;gap:10px}.me-card>div:nth-child(2){min-width:0;flex:1}.me-card strong,.me-card span{display:block}.me-card strong{font-size:12px}.me-card span{font-size:9px;color:#9296a5;margin-top:3px}.me-card span i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:4px}.me-card form button{border:0;background:none;color:#a1a5b4;padding:7px}.me-card form svg{width:18px}
.avatar { position:relative; width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,#f0cbcf,#d4919a); color:#fff; font:700 16px "Manrope"; box-shadow:inset 0 0 0 1px #ffffff77; }.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar.small{width:36px;height:36px;font-size:12px}.presence-dot{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#b7bbc7;border:2px solid white}.presence-dot.visible{background:var(--green)}
.conversation-panel { min-width:0; height:100vh; display:grid; grid-template-rows:84px minmax(0,1fr) auto; background:#fff; }
.chat-header { border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 25px; gap:12px; }.person-heading{min-width:0}.person-heading h1{font:700 15px "Manrope";margin:0}.person-heading p{font-size:10px;color:#989dac;margin:4px 0 0}.person-heading p.online{color:#28ae7a}.header-actions{margin-left:auto;display:flex;gap:5px}.mobile-brand{display:none}
.messages { overflow:auto; padding:22px max(24px,6vw) 15px; background:linear-gradient(180deg,#fdfdfe,#fafafe); scroll-behavior:smooth; }.messages::-webkit-scrollbar{width:6px}.messages::-webkit-scrollbar-thumb{background:#dfe1e9;border-radius:10px}
.date-divider { display:flex;align-items:center;gap:13px;margin:10px 0 22px;color:#aaaebc;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.date-divider:before,.date-divider:after{content:"";height:1px;background:#ececf1;flex:1}
.message-row { display:flex; margin:5px 0; }.message-row.mine{justify-content:flex-end}.message-bubble{max-width:min(560px,72%);padding:10px 14px 7px;border-radius:7px 17px 17px 17px;background:white;border:1px solid #ebecf1;box-shadow:0 3px 11px #272d4510}.mine .message-bubble{border:0;color:white;border-radius:17px 7px 17px 17px;background:linear-gradient(135deg,#7165e9,#5b4ed7);box-shadow:0 5px 14px #6255df25}.message-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.5}.message-bubble footer{text-align:right;margin-top:4px;height:12px}.message-bubble time{font-size:8px;color:#a4a8b5}.mine .message-bubble time{color:#ffffffa5}.receipt{font-size:9px;margin-left:5px;color:#ffffff9c;letter-spacing:-2px}.receipt.seen{color:#9ff4d4}.attachment-bubble{padding:6px;overflow:hidden}.message-image{display:block;max-width:330px;max-height:330px;border-radius:12px;object-fit:cover}.file-card{display:flex;align-items:center;gap:10px;min-width:240px;text-decoration:none;color:inherit;padding:7px}.file-card>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ffffff25}.theirs .file-card>span{background:#f0effc;color:var(--accent)}.file-card strong,.file-card small{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-card strong{font-size:11px}.file-card small{font-size:9px;opacity:.65;margin-top:3px}
.typing-bubble{display:flex;gap:4px;width:52px;padding:12px 13px;background:white;border:1px solid #ececf1;border-radius:7px 16px 16px}.typing-bubble i{width:5px;height:5px;border-radius:50%;background:#9b9faf;animation:typing 1s infinite}.typing-bubble i:nth-child(2){animation-delay:.15s}.typing-bubble i:nth-child(3){animation-delay:.3s}@keyframes typing{50%{transform:translateY(-3px);opacity:.5}}
.conversation-start{text-align:center;color:#8e93a3;padding:12vh 20px}.conversation-start .hero{margin:auto;width:68px;height:68px;font-size:24px}.conversation-start h2{color:var(--ink);font:700 19px "Manrope";margin:15px 0 5px}.conversation-start p{font-size:12px}.conversation-start span{display:inline-block;margin-top:12px;padding:7px 12px;background:#f0effc;color:var(--accent);border-radius:20px;font-size:10px;font-weight:700}
.composer-wrap { border-top:1px solid var(--line); background:white; padding:14px max(24px,6vw) 12px; }.composer{display:grid;grid-template-columns:38px 1fr 42px;align-items:end;gap:6px;padding:5px;background:#f6f7fa;border:1px solid #ececf1;border-radius:18px}.composer:focus-within{border-color:#d7d3fa}.composer textarea{resize:none;border:0;outline:0;background:transparent;min-height:39px;max-height:115px;padding:10px 8px;color:var(--ink);font-size:13px}.composer textarea::placeholder{color:#a9adba}.attach-button{height:39px;display:grid;place-items:center;color:#9297a8;cursor:pointer;border-radius:12px}.attach-button:hover{background:#ececf2;color:var(--accent)}.attach-button input{display:none}.attach-button svg{width:20px}.send-button{width:39px;height:39px;border:0;border-radius:13px;background:linear-gradient(135deg,#7669ed,#594bd7);color:white;display:grid;place-items:center;box-shadow:0 6px 15px #6256df35}.send-button:disabled{opacity:.38;box-shadow:none}.send-button svg{width:19px;fill:#ffffff16}.composer-wrap>p{text-align:center;color:#b0b3be;font-size:8px;margin:7px 0 0}.upload-error{margin:8px max(24px,6vw) 0;padding:7px 11px}
.record-button{width:39px;height:39px;border:0;border-radius:13px;background:transparent;color:#6d62df;display:grid;place-items:center;transition:.18s}.record-button:hover{background:#eceafb}.record-button svg{width:20px}.record-button.recording{color:white;background:#ed5367;box-shadow:0 0 0 5px #ed53671c;animation:recordPulse 1.4s infinite}.composer.is-recording{border-color:#f1cdd2;background:#fff7f8}.composer.is-recording .attach-button{opacity:.35;pointer-events:none}.recording-label{min-height:39px;display:flex;align-items:center;gap:8px;color:#686d7e}.recording-label i{width:8px;height:8px;border-radius:50%;background:#ed5367}.recording-label strong{font-size:12px;color:#d63f55;font-variant-numeric:tabular-nums}.recording-label span{font-size:11px;color:#969aa8}.voice-message{display:flex;align-items:center;gap:8px;min-width:280px;padding:3px}.voice-icon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:50%;background:#ffffff22}.theirs .voice-icon{background:#efedff;color:var(--accent)}.voice-icon svg{width:18px}.voice-message audio{width:230px;height:34px}.mine .voice-message audio{filter:sepia(.15) saturate(.7) brightness(1.2)}@keyframes recordPulse{50%{box-shadow:0 0 0 8px #ed53670c}}
.history-lock-button{color:#6558e8;background:#f0effc}.locked-history-icon{width:62px;height:62px;margin:0 auto 14px;display:grid;place-items:center;border-radius:20px;background:#f0effc;color:var(--accent)}.locked-history-icon svg{width:26px}.inline-unlock{border:0;border-radius:10px;padding:9px 14px;margin-top:10px;background:#6558e8;color:white;font-size:10px;font-weight:700}.history-modal-backdrop{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;padding:20px;background:#10142699;backdrop-filter:blur(7px)}.history-modal{position:relative;width:min(400px,100%);padding:30px;background:white;border:1px solid #ffffff80;border-radius:22px;box-shadow:0 30px 90px #11152d4f;animation:modalIn .2s ease-out}.modal-close{position:absolute;right:15px;top:13px;width:32px;height:32px;border:0;border-radius:10px;background:#f4f4f8;color:#85899a;font-size:21px;line-height:1}.history-modal-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#7669ed,#5547d4);color:white;box-shadow:0 10px 24px #6558e834;margin-bottom:18px}.history-modal-icon svg{width:23px}.modal-eyebrow{color:#7b70e9;font-size:9px;font-weight:800;letter-spacing:.18em}.history-modal h2{margin:7px 0 7px;font:800 25px "Manrope";letter-spacing:-.04em}.history-modal>p{margin:0 0 22px;color:#858a9c;font-size:12px;line-height:1.55}.history-modal form label{display:block;margin-bottom:7px;color:#4d5264;font-size:11px;font-weight:700}.history-password-field{height:48px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #e3e4eb;border-radius:12px}.history-password-field:focus-within{border-color:#877cf0;box-shadow:0 0 0 4px #6558e811}.history-password-field svg{width:18px;color:#9b9fae}.history-password-field input{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}.history-password-error{margin-top:9px;padding:8px 10px;border-radius:9px;background:#fff0f2;color:#c53e50;font-size:10px}.unlock-button,.not-now-button{width:100%;height:45px;border-radius:11px;font-weight:700;font-size:11px}.unlock-button{margin-top:14px;border:0;background:linear-gradient(135deg,#7165e9,#5749d5);color:white;box-shadow:0 8px 18px #6255dd2d}.unlock-button:disabled{opacity:.6}.not-now-button{margin-top:6px;border:0;background:transparent;color:#9296a5}.not-now-button:hover{background:#f6f6f9}@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.call-overlay{position:fixed;inset:0;z-index:2000;background:#090c17;color:white;display:grid;place-items:center;overflow:hidden}.call-overlay[hidden]{display:none}.call-overlay>video#remote-video{position:absolute;width:100%;height:100%;object-fit:cover}.call-overlay>video#local-video{position:absolute;z-index:2;right:24px;top:24px;width:180px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;background:#1b2031;box-shadow:0 15px 45px #0008}.call-gradient{position:absolute;inset:0;background:linear-gradient(#0005,transparent 30%,#000a)}.call-person{position:relative;text-align:center}.call-avatar{width:100px;height:100px;font-size:34px;margin:auto}.call-person h2{font:700 25px "Manrope";margin:16px 0 5px}.call-person p{opacity:.7;margin:0}.call-controls{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;gap:13px}.call-controls button{width:66px;height:54px;border:0;border-radius:18px;background:#ffffff22;color:white}.call-controls .hangup{background:#e94f62}
.empty-state,.chat-loading{min-height:100vh;display:grid;place-content:center;text-align:center;justify-items:center;background:#fafafe}.empty-state h1{font:700 24px "Manrope";margin:17px 0 5px}.empty-state p{color:var(--muted)}.chat-loading{gap:12px;color:var(--muted);font-size:12px}.loading-logo{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:var(--accent);color:white;font:800 22px "Manrope";animation:pulse 1.4s infinite}@keyframes pulse{50%{transform:scale(.94);opacity:.75}}
#blazor-error-ui{display:none;position:fixed;bottom:0;inset-inline:0;background:#fff1c9;padding:12px;z-index:5000}.validation-message{color:#c53f4b}

@media(max-width:800px){.login-page{grid-template-columns:1fr}.login-art{display:none}.login-shell{width:min(430px,86%)}.login-brand{margin-bottom:9vh}.chat-app{grid-template-columns:1fr}.chat-sidebar{display:none}.conversation-panel{grid-template-rows:70px minmax(0,1fr) auto}.chat-header{padding:0 13px}.mobile-brand{display:grid;margin-right:1px;width:36px;height:36px}.chat-header>.avatar{width:39px;height:39px}.messages{padding:18px 13px 10px}.message-bubble{max-width:84%}.composer-wrap{padding:10px 10px 8px}.composer-wrap>p{display:none}.message-image{max-width:min(280px,70vw)}.call-overlay>video#local-video{width:110px;right:12px;top:12px}}
@media(max-width:420px){.login-shell{padding:25px 0}.login-brand{margin-bottom:8vh}.login-copy h2{font-size:39px}.header-actions .icon-button{width:36px}.person-heading h1{font-size:13px}.chat-header{gap:8px}}
@media(max-width:420px){.voice-message{min-width:225px}.voice-message audio{width:175px}.recording-label span{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}