@charset "UTF-8";
:root {
  color-scheme: dark;
  --canvas:#100f13; --canvas-raised:#151419; --surface:#1a191f; --surface-soft:#211f27; --surface-hover:#292730;
  --line:rgba(244,238,255,.08); --line-strong:rgba(244,238,255,.13); --text:#f4f0f8; --text-2:#b4afbd; --text-3:#817c89;
  --accent:#caa9f3; --accent-strong:#b991ed; --accent-ink:#21182c; --coral:#e2a49b; --online:#8bc7a5; --danger:#f09b9b;
  --bubble-me:#49365f; --bubble-them:#211f27; --shadow:0 24px 80px rgba(0,0,0,.3); --font:"Aptos","Segoe UI","Helvetica Neue",sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; }
html { min-width:320px; min-height:100%; background:var(--canvas); }
body { min-width:320px; min-height:100dvh; margin:0; color:var(--text); background:var(--canvas); font-family:var(--font); -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { color:inherit; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.48; }
::selection { color:#201929; background:#d6b8fa; }
[hidden] { display:none !important; }

/* Sign in */
.login-page { display:grid; overflow-x:hidden; background:#111015; }
.login-layout { display:grid; grid-template-columns:minmax(390px,.92fr) minmax(480px,1.08fr); width:min(1440px,100%); min-height:100dvh; margin:auto; background:var(--canvas); }
.login-aside { position:relative; display:flex; min-height:100dvh; flex-direction:column; overflow:hidden; padding:clamp(30px,5vw,72px); background:#17151b; isolation:isolate; }
.login-aside::before,.login-aside::after { position:absolute; z-index:-1; content:""; pointer-events:none; }
.login-aside::before { inset:0; opacity:.23; background:radial-gradient(ellipse at 32% 70%,rgba(192,157,235,.19),transparent 48%),radial-gradient(ellipse at 83% 20%,rgba(222,159,150,.13),transparent 39%); }
.login-aside::after { right:-220px; bottom:-260px; width:660px; height:660px; border:1px solid rgba(212,191,237,.09); border-radius:50%; box-shadow:0 0 0 42px rgba(212,191,237,.018),0 0 0 110px rgba(212,191,237,.014); }
.brand-lockup,.app-brand { display:inline-flex; align-items:center; gap:13px; color:var(--text); text-decoration:none; }
.brand-lockup span,.app-brand span { font-size:20px; font-weight:650; letter-spacing:-.045em; }
.brand-lockup img,.app-brand img { flex:0 0 auto; filter:drop-shadow(0 4px 12px rgba(181,145,227,.16)); }
.login-story { max-width:490px; margin-top:clamp(78px,14vh,142px); }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:var(--text-3); font-size:10px; font-weight:700; letter-spacing:.16em; line-height:1.4; }
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px rgba(202,169,243,.5); }
.login-story h1 { margin:20px 0 17px; color:#f5f0fa; font-size:clamp(42px,5.4vw,67px); font-weight:550; letter-spacing:-.065em; line-height:.99; }
.login-story h1 em { color:#c6a6e8; font-style:normal; }
.login-story p { max-width:340px; margin:0; color:#aaa4b3; font-size:15px; line-height:1.8; }
.login-orbit { position:relative; display:grid; width:min(320px,72%); aspect-ratio:1; place-items:center; margin:auto auto 40px 4%; }
.orbit-halo { position:absolute; width:74%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(183,143,225,.12),transparent 72%); filter:blur(3px); }
.orbit-ring { position:absolute; border:1px solid rgba(219,192,246,.16); border-radius:50%; transform:rotate(-27deg); }
.orbit-ring-one { width:76%; height:43%; }
.orbit-ring-two { width:69%; height:39%; transform:rotate(52deg); }
.orbit-chat { position:relative; display:flex; width:94px; height:76px; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(236,218,255,.22); border-radius:27px 27px 27px 8px; background:linear-gradient(145deg,rgba(192,163,223,.24),rgba(81,65,98,.32)); box-shadow:0 20px 60px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.1); transform:rotate(-6deg); }
.orbit-chat span { width:5px; height:5px; border-radius:50%; background:#ddc7f3; opacity:.87; }
.orbit-chat span:nth-child(2) { transform:translateY(-4px); } .orbit-chat span:nth-child(3) { transform:translateY(3px); }
.orbit-caption { position:absolute; right:1%; bottom:19%; display:flex; align-items:center; gap:8px; color:#8d8598; font-size:11px; letter-spacing:.04em; }
.orbit-caption b { color:#d6b4f4; font-size:15px; font-weight:500; }
.login-aside-footer { display:flex; justify-content:space-between; color:#716b78; font-size:9px; font-weight:700; letter-spacing:.15em; }
.login-main { display:grid; min-height:100dvh; place-items:center; padding:50px clamp(30px,7vw,108px); background:#111015; }
.login-card { width:min(100%,410px); animation:rise-in .45s cubic-bezier(.2,.65,.25,1) both; }
.login-card-mark { display:flex; align-items:center; gap:12px; margin-bottom:clamp(48px,9vh,92px); color:#928b99; font-size:12px; }
.login-card-mark img { filter:saturate(.78); }
.login-heading .eyebrow { color:#a695bc; }
.login-heading h2 { margin:11px 0 9px; font-size:clamp(27px,3vw,34px); font-weight:570; letter-spacing:-.05em; line-height:1.12; }
.login-heading p { margin:0; color:var(--text-3); font-size:14px; line-height:1.6; }
.login-form { display:flex; flex-direction:column; margin-top:34px; }
.login-form>label,.profile-form>label { margin:0 0 9px; color:#d4cedb; font-size:12px; font-weight:600; }
.input-wrap { position:relative; display:flex; height:52px; align-items:center; margin-bottom:23px; border:1px solid #302d36; border-radius:11px; background:#19181e; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.input-wrap:focus-within { border-color:rgba(202,169,243,.67); background:#1c1a21; box-shadow:0 0 0 3px rgba(202,169,243,.09); }
.input-wrap>svg { width:18px; height:18px; margin-left:15px; fill:none; stroke:#847c8d; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.55; }
.input-wrap input { width:100%; height:100%; min-width:0; padding:0 13px; border:0; outline:0; color:var(--text); background:transparent; font-size:14px; }
.input-wrap input::placeholder { color:#6f6a76; }
.password-toggle { display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; margin-right:3px; border:0; border-radius:9px; color:#827b8a; background:transparent; cursor:pointer; }
.password-toggle:hover { color:var(--text); background:rgba(255,255,255,.04); }
.password-toggle svg { width:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.remember-option { display:flex; min-height:44px; align-items:center; gap:11px; margin:-7px 0 18px; cursor:pointer; }
.remember-option input { position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.remember-check { display:grid; width:19px; height:19px; flex:0 0 auto; place-items:center; border:1px solid #48434f; border-radius:6px; background:#1b191f; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.remember-check::after { width:8px; height:4px; border-bottom:1.7px solid #21182c; border-left:1.7px solid #21182c; content:""; opacity:0; transform:translateY(-1px) rotate(-45deg); }
.remember-option input:checked+.remember-check { border-color:var(--accent); background:var(--accent); }
.remember-option input:checked+.remember-check::after { opacity:1; }
.remember-option input:focus-visible+.remember-check { outline:2px solid var(--accent); outline-offset:3px; }
.remember-copy { display:flex; flex-direction:column; gap:3px; }
.remember-copy strong { color:#d4cedb; font-size:12px; font-weight:600; }
.remember-copy small { color:#837c8a; font-size:10px; line-height:1.35; }
.button-primary,.button-secondary { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:13px; border:0; border-radius:10px; font-size:13px; font-weight:650; cursor:pointer; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.button-primary { color:var(--accent-ink); background:var(--accent); box-shadow:0 8px 24px rgba(143,111,181,.15); }
.button-primary:hover:not(:disabled) { background:#d5b9f6; box-shadow:0 10px 28px rgba(143,111,181,.24); transform:translateY(-1px); }
.button-primary:active:not(:disabled) { transform:translateY(0); }
.button-primary svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.button-primary.is-loading span { opacity:.65; }
.login-submit { min-height:51px; margin-top:4px; } .login-submit svg { margin-left:auto; }
.form-error { margin:-9px 0 15px; color:var(--danger); font-size:12px; line-height:1.5; }
.login-private-note { display:flex; align-items:center; gap:10px; margin-top:26px; color:#797381; font-size:11px; line-height:1.55; }
.lock-mark { display:grid; width:22px; height:22px; flex:0 0 auto; place-items:center; border:1px solid #35313b; border-radius:7px; color:#b49ace; font-size:17px; }
.pwa-install-guidance { display:flex; min-width:0; align-items:center; gap:10px; margin-top:15px; color:#85808c; font-size:10px; line-height:1.45; }
.pwa-install-mark { display:grid; width:24px; height:24px; flex:0 0 auto; place-items:center; border:1px solid rgba(202,169,243,.18); border-radius:8px; color:#b99bd4; background:rgba(202,169,243,.05); font-size:14px; }
.pwa-install-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; }
.pwa-install-copy small { color:#77717e; font-size:9px; }
.pwa-install-button { min-height:34px; padding:0 12px; font-size:10px; }
.login-mobile-brand { display:none; }

/* Authentication Tabs & E2EE */
.auth-tabs { display:flex; gap:6px; padding:4px; margin-top:22px; border-radius:11px; background:#19181e; border:1px solid #302d36; }
.auth-tab { flex:1; min-height:40px; border:0; border-radius:8px; background:transparent; color:#8a8393; font-size:12px; font-weight:650; cursor:pointer; transition:all .18s ease; }
.auth-tab.is-active { background:var(--accent); color:var(--accent-ink); box-shadow:0 2px 10px rgba(0,0,0,.25); }
.auth-tab:disabled { opacity:.4; cursor:not-allowed; }
.e2ee-notice { display:flex; align-items:flex-start; gap:10px; margin:0 0 18px; padding:12px 14px; border-radius:10px; background:rgba(60,192,120,.07); border:1px solid rgba(60,192,120,.22); font-size:11px; color:#c6e6d2; line-height:1.45; }
.e2ee-notice-icon { font-size:16px; flex:0 0 auto; line-height:1.2; }

/* Peer Waiting State */
.peer-waiting-box { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; max-width:460px; margin:auto; }
.waiting-icon { font-size:46px; margin-bottom:16px; animation:pulse 2.2s infinite ease-in-out; }
.peer-waiting-box h2 { font-size:24px; margin:10px 0 8px; color:var(--text); }
.peer-waiting-box p { font-size:13px; color:var(--text-3); line-height:1.6; margin:0 0 20px; }
.invite-card { width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; border-radius:14px; background:rgba(202,169,243,.06); border:1px solid rgba(202,169,243,.18); margin-bottom:14px; }
.invite-card span { font-size:11px; color:#8d8597; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.invite-code-val { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:26px; letter-spacing:4px; color:var(--accent); font-weight:750; user-select:all; }
.waiting-note { font-size:11px; color:#797381; }

/* Settings E2EE & Switch Control */
.settings-e2ee-card { padding:14px 16px; border-radius:12px; background:rgba(60,192,120,.06); border:1px solid rgba(60,192,120,.22); margin:14px 0; }
.settings-e2ee-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.e2ee-shield { font-size:20px; }
.e2ee-badge { font-size:11px; color:#5cd68f; font-weight:600; }
.e2ee-desc { font-size:11px; color:#9c95a5; line-height:1.5; margin:0 0 12px; }
.e2ee-actions { display:flex; gap:8px; flex-wrap:wrap; }
.e2ee-actions button { min-height:34px; font-size:11px; padding:0 12px; border-radius:8px; }
.settings-row-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
.settings-row-toggle strong { font-size:12px; color:#d4cedb; }
.switch-control { position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; cursor:pointer; }
.switch-control input { opacity:0; width:0; height:0; position:absolute; }
.switch-slider { position:absolute; inset:0; background:#2c2833; border-radius:34px; transition:.2s; border:1px solid #433e4c; }
.switch-slider::before { position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch-control input:checked + .switch-slider { background:var(--accent); border-color:var(--accent); }
.switch-control input:checked + .switch-slider::before { transform:translateX(18px); background:#1e1429; }

/* Conversation shell */
.chat-page { display:grid; min-height:100dvh; place-items:center; padding:24px; background:radial-gradient(ellipse at 47% 8%,rgba(73,57,88,.17),transparent 42%),#100f13; }
.app-shell { display:grid; width:min(1360px,100%); height:min(880px,calc(100dvh - 48px)); min-height:590px; grid-template-columns:286px minmax(0,1fr); overflow:hidden; border:1px solid rgba(242,234,255,.09); border-radius:19px; background:var(--canvas-raised); box-shadow:var(--shadow); }
.conversation-sidebar { position:relative; display:flex; min-width:0; flex-direction:column; border-right:1px solid var(--line); background:#141318; }
.sidebar-top { display:flex; height:82px; flex:0 0 auto; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }
.app-brand { gap:10px; } .app-brand span { font-size:17px; } .app-brand img { width:35px; height:35px; }
.sidebar-private { display:inline-flex; align-items:center; gap:6px; color:#827b8a; font-size:8px; font-weight:700; letter-spacing:.1em; }
.sidebar-private i { width:5px; height:5px; border-radius:50%; background:#a992bd; }
.sidebar-section-label { display:flex; align-items:center; justify-content:space-between; padding:27px 20px 13px; color:#77727f; font-size:9px; font-weight:700; letter-spacing:.12em; }
.sidebar-one { color:#6f6879; font-variant-numeric:tabular-nums; }
.conversation-item { display:flex; min-height:72px; align-items:center; gap:12px; margin:0 10px; padding:10px 11px; border:1px solid transparent; border-radius:12px; color:inherit; text-align:left; background:transparent; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.conversation-item:hover,.conversation-item.is-active { border-color:rgba(202,169,243,.09); background:#211e27; }
.conversation-copy,.sidebar-profile-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:5px; }
.conversation-copy strong,.sidebar-profile-copy strong { overflow:hidden; color:#eee9f2; font-size:13px; font-weight:620; text-overflow:ellipsis; white-space:nowrap; }
.conversation-copy>span,.sidebar-profile-copy>span { overflow:hidden; color:#8a8491; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.conversation-unread-badge { display:grid; min-width:19px; height:19px; flex:0 0 auto; place-items:center; padding:0 5px; border-radius:99px; color:#241b2e; background:var(--accent); font-size:9px; font-weight:700; font-variant-numeric:tabular-nums; }
.avatar { position:relative; display:inline-grid; flex:0 0 auto; place-items:center; overflow:hidden; border:1px solid rgba(242,224,255,.14); border-radius:50%; color:#241a2f; background:linear-gradient(145deg,#d9c3e7,#a78fc4 75%); font-size:15px; font-weight:650; letter-spacing:-.03em; }
.avatar img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; } .avatar>span:first-child { position:relative; z-index:1; line-height:1; }
.avatar.has-image>span:first-child:not(.avatar-edit-mark) { visibility:hidden; }
.avatar-large { width:44px; height:44px; } .avatar-small { width:38px; height:38px; } .avatar-header { width:43px; height:43px; }
.avatar-small>span:first-child { font-size:13px; }
.avatar-header.online::after { position:absolute; right:0; bottom:0; width:10px; height:10px; border:2px solid #19171d; border-radius:50%; background:var(--online); content:""; }
.sidebar-note { position:absolute; right:21px; bottom:118px; left:21px; padding:18px 17px 15px; border:1px solid rgba(234,220,251,.07); border-radius:12px; background:radial-gradient(ellipse at 100% 0,rgba(186,148,221,.09),transparent 62%),#19171e; }
.sidebar-note-star { color:#c1a1df; font-size:14px; }
.sidebar-note p { margin:11px 0 9px; color:#d4cedb; font-size:13px; line-height:1.55; }
.sidebar-note>span:last-child { color:#77717e; font-size:10px; }
.sidebar-bottom { margin-top:auto; padding:14px 11px; border-top:1px solid var(--line); }
.sidebar-profile { display:flex; width:100%; align-items:center; gap:11px; padding:7px 8px; border:1px solid transparent; border-radius:11px; text-align:left; background:transparent; cursor:pointer; transition:background .18s ease; }
.sidebar-profile:hover { background:#211e27; }
.sidebar-profile-copy { gap:4px; } .sidebar-profile-copy strong { font-size:12px; } .sidebar-profile-copy>span { font-size:10px; }
.sidebar-profile>svg { width:16px; flex:0 0 auto; fill:none; stroke:#77717e; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }

.chat-panel { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; background:var(--canvas-raised); }
.chat-header { z-index:2; display:flex; min-height:76px; flex:0 0 auto; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; border-bottom:1px solid var(--line); background:rgba(21,20,25,.93); }
.chat-partner { display:flex; min-width:0; align-items:center; gap:12px; }
.chat-partner-copy { display:flex; min-width:0; flex-direction:column; gap:5px; }
.chat-partner-copy strong { overflow:hidden; color:var(--text); font-size:14px; font-weight:640; text-overflow:ellipsis; white-space:nowrap; }
.chat-partner-copy>span { display:flex; align-items:center; gap:6px; color:#8d8794; font-size:11px; }
.status-dot { width:6px; height:6px; flex:0 0 auto; border-radius:50%; background:#77717d; }
.status-dot.is-online { background:var(--online); box-shadow:0 0 10px rgba(139,199,165,.4); }
.chat-header-actions { display:flex; flex:0 0 auto; align-items:center; gap:15px; }
.connection-status { display:inline-flex; align-items:center; gap:7px; color:#817b88; font-size:10px; white-space:nowrap; }
.connection-status i { width:6px; height:6px; border-radius:50%; background:var(--online); }
.connection-status.is-offline i { background:#d7a48d; } .connection-status.is-offline { color:#c0a494; }
.connection-status.is-connected span { color:#8eaa98; }
.icon-button { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border:1px solid transparent; border-radius:10px; color:#a39daa; background:transparent; cursor:pointer; transition:color .18s ease,background .18s ease,border-color .18s ease; }
.icon-button:hover { border-color:var(--line-strong); color:var(--text); background:var(--surface-soft); }
.icon-button svg { width:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.reconnect-banner { display:flex; min-height:34px; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; border-bottom:1px solid rgba(216,170,139,.12); color:#c4a894; background:rgba(155,108,81,.08); font-size:11px; }
.reconnect-spinner,.history-loading>span { width:12px; height:12px; border:1.5px solid rgba(202,169,243,.25); border-top-color:var(--accent); border-radius:50%; animation:rotate .85s linear infinite; }
.timeline-scroll { position:relative; display:flex; min-height:0; flex:1; flex-direction:column; overflow:auto; overscroll-behavior:contain; padding:22px clamp(15px,4.2vw,58px) 16px; scrollbar-color:rgba(187,174,204,.2) transparent; scrollbar-width:thin; }
.message-list { display:flex; width:100%; max-width:780px; flex-direction:column; gap:15px; margin:0 auto; padding:12px 0 30px; list-style:none; }
.message-day { display:flex; justify-content:center; margin:7px 0 5px; color:#77717e; font-size:10px; font-weight:550; letter-spacing:.035em; }
.message-day span { padding:6px 11px; border:1px solid rgba(230,218,242,.06); border-radius:99px; background:rgba(32,30,37,.72); }
.message-item { display:flex; width:100%; align-items:flex-end; gap:9px; animation:message-in .22s ease-out both; }
.message-item.is-mine { justify-content:flex-end; }
.message-avatar { width:28px; height:28px; margin-bottom:19px; font-size:10px; }
.message-content { display:flex; max-width:min(78%,560px); flex-direction:column; align-items:flex-start; }
.message-item.is-mine .message-content { align-items:flex-end; }
.message-bubble { max-width:100%; padding:11px 14px 10px; border:1px solid rgba(255,255,255,.045); border-radius:15px 15px 15px 5px; color:#e9e4ee; background:var(--bubble-them); box-shadow:0 3px 12px rgba(0,0,0,.06); }
.message-item.is-mine .message-bubble { border-color:rgba(211,185,238,.14); border-radius:15px 15px 5px 15px; color:#f7f0ff; background:var(--bubble-me); }
.message-text { overflow-wrap:anywhere; white-space:pre-wrap; font-size:13px; line-height:1.58; }
.message-caption { margin-top:8px; }
.message-meta { display:flex; align-items:center; gap:6px; padding:4px 2px 0; color:#79737f; font-size:9px; font-variant-numeric:tabular-nums; }
.message-item.is-mine .message-meta { color:#91869c; }
.message-status { display:inline-flex; align-items:center; gap:3px; color:#8b82a0; }
.message-status.is-read { color:#c9a8ef; }
.message-status svg { width:14px; height:11px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.55; }
.message-attachment { display:block; width:min(100%,380px); max-height:360px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:#17151b; }
.message-attachment img,.message-attachment video { display:block; width:100%; max-height:360px; object-fit:contain; background:#111015; }
.message-attachment--audio { padding:0; background:transparent; border:none; width:auto; max-height:none; overflow:visible; }

/* Custom Luxury Sermingram Voice Player */
.sermingram-voice-player { display:flex; align-items:center; gap:11px; width:min(320px,76vw); padding:8px 12px; border-radius:14px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(10px); user-select:none; }
.voice-play-btn { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border:0; border-radius:50%; color:var(--accent-ink); background:linear-gradient(135deg,var(--accent),var(--coral)); box-shadow:0 4px 14px rgba(202,169,243,.32); cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
.voice-play-btn:hover { transform:scale(1.06); box-shadow:0 6px 18px rgba(202,169,243,.45); }
.voice-play-btn:active { transform:scale(.94); }
.voice-play-btn svg { width:16px; height:16px; fill:currentColor; }
.voice-play-btn .voice-icon-pause { display:none; }
.sermingram-voice-player.is-playing .voice-play-btn .voice-icon-play { display:none; }
.sermingram-voice-player.is-playing .voice-play-btn .voice-icon-pause { display:block; }
.voice-body { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.voice-waveform-track { position:relative; display:flex; align-items:center; height:26px; cursor:pointer; padding:2px 0; }
.voice-bars { display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; gap:2px; }
.voice-bar { flex:1; border-radius:99px; background:rgba(255,255,255,.2); min-height:4px; max-height:22px; transition:background .15s ease,transform .15s ease; }
.voice-bar.is-passed { background:linear-gradient(180deg,var(--accent),var(--coral)); box-shadow:0 0 6px rgba(202,169,243,.35); }
.sermingram-voice-player.is-playing .voice-bar.is-current { transform:scaleY(1.35); background:#fff; }
.voice-meta { display:flex; align-items:center; justify-content:space-between; font-size:10px; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; }
.voice-time-group { display:flex; align-items:center; gap:3px; }
.voice-speed-pill { display:inline-flex; align-items:center; justify-content:center; padding:1px 6px; border-radius:99px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--text-2); font-size:9px; font-weight:600; cursor:pointer; transition:all .15s ease; }
.voice-speed-pill:hover { background:rgba(255,255,255,.14); color:var(--text); border-color:var(--accent); }
body[data-theme="light"] .sermingram-voice-player { background:rgba(242,238,247,.88); border-color:rgba(41,31,52,.12); }
body[data-theme="light"] .voice-bar { background:rgba(41,31,52,.18); }
body[data-theme="light"] .voice-meta { color:var(--text-2); }
body[data-theme="light"] .voice-speed-pill { border-color:rgba(41,31,52,.15); background:rgba(41,31,52,.05); }

/* Audio preview tray container */
.audio-preview-container { display:flex; flex:1; min-width:0; }
.audio-preview-container .sermingram-voice-player { width:100%; }

/* Delete button on messages */
.message-delete-btn { display:inline-grid; place-items:center; width:26px; height:26px; border:0; border-radius:50%; color:var(--text-3); background:transparent; cursor:pointer; opacity:0; transition:opacity .16s ease,color .16s ease,background .16s ease; }
.message-item:hover .message-delete-btn,.message-delete-btn:focus-visible { opacity:1; }
.message-delete-btn:hover { color:var(--danger); background:rgba(240,155,155,.14); }
.message-delete-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }

/* Brand Logo Styling */
.brand-logo { border-radius:11px; box-shadow:0 4px 16px rgba(202,169,243,.18); object-fit:cover; flex-shrink:0; transition:transform .18s ease; }
.brand-logo:hover { transform:scale(1.05); }

/* Web Notification Prompt Banner */
.notif-prompt-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; margin:12px 16px 0; border-radius:14px; background:linear-gradient(135deg,rgba(202,169,243,.12),rgba(226,164,155,.12)); border:1px solid rgba(202,169,243,.25); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,.15); animation:rise-in .35s ease both; }
.notif-prompt-content { display:flex; align-items:center; gap:12px; }
.notif-prompt-heart { font-size:22px; animation:pulse 1.8s ease-in-out infinite; }
.notif-prompt-text strong { font-size:13px; color:#f7f1fc; }
.notif-prompt-text p { margin:2px 0 0; font-size:11px; color:var(--text-2); }
.notif-prompt-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.notif-btn-dismiss { min-height:34px; padding:0 12px; font-size:11px; }
.notif-btn-accept { min-height:34px; padding:0 14px; font-size:11px; background:linear-gradient(135deg,var(--accent),var(--coral)); }
@media (max-width:768px) {
  .notif-prompt-banner { flex-direction:column; align-items:flex-start; margin:8px 10px 0; padding:12px 14px; }
  .notif-prompt-actions { width:100%; justify-content:flex-end; }
}

/* Custom Romantic Dialog Modal */
.romantic-dialog { position:fixed; width:min(380px,calc(100vw - 32px)); padding:26px; border-radius:18px; background:#19171e; border:1px solid var(--line-strong); box-shadow:0 24px 80px rgba(0,0,0,.5); text-align:center; animation:dialog-in .22s ease both; }
.romantic-dialog::backdrop { background:rgba(8,7,10,.65); backdrop-filter:blur(6px); }
.romantic-dialog[open] { display:block; }
.romantic-dialog-icon { font-size:32px; margin-bottom:10px; }
.romantic-dialog h3 { margin:0 0 8px; font-size:18px; font-weight:600; color:var(--text); }
.romantic-dialog p { margin:0 0 20px; font-size:12px; color:var(--text-2); line-height:1.55; }
.romantic-dialog .dialog-actions { display:flex; gap:10px; justify-content:center; }
.romantic-dialog .dialog-actions button { flex:1; }
.message-reactions { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.message-reaction { display:inline-flex; min-width:35px; min-height:27px; align-items:center; justify-content:center; gap:5px; padding:3px 8px; border:1px solid rgba(218,200,239,.1); border-radius:99px; color:#d9d1e0; background:#24212a; font-size:12px; cursor:pointer; transition:border-color .16s ease,background .16s ease,transform .16s ease; }
.message-reaction:hover { transform:translateY(-1px); }
.message-reaction.is-mine { border-color:rgba(202,169,243,.34); background:rgba(130,99,163,.23); }
.message-reaction small { color:#b2aab8; font-size:10px; }
.reaction-add { display:inline-grid; width:27px; height:27px; place-items:center; border:1px solid transparent; border-radius:50%; color:#817b88; background:transparent; font-size:14px; cursor:pointer; opacity:0; transition:opacity .16s ease,color .16s ease,background .16s ease; }
.message-item:hover .reaction-add,.reaction-add:focus-visible { opacity:1; }
.reaction-add:hover { color:var(--accent); background:rgba(202,169,243,.1); }
.reaction-picker { display:flex; gap:3px; margin-top:5px; padding:4px; border:1px solid var(--line-strong); border-radius:99px; background:#28252e; box-shadow:0 8px 25px rgba(0,0,0,.2); }
.reaction-picker button { display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:50%; background:transparent; font-size:15px; cursor:pointer; transition:background .15s ease,transform .15s ease; }
.reaction-picker button:hover { background:#383341; transform:scale(1.12); }
.empty-state { display:flex; min-height:100%; flex:1; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; animation:rise-in .35s ease both; }
.empty-orbit { position:relative; display:grid; width:86px; height:86px; place-items:center; margin-bottom:23px; border:1px solid rgba(202,169,243,.18); border-radius:50%; background:radial-gradient(circle,rgba(188,151,223,.12),rgba(36,31,43,.12) 70%); }
.empty-orbit::before,.empty-orbit::after { position:absolute; inset:8px; border:1px solid rgba(202,169,243,.11); border-radius:50%; content:""; }
.empty-orbit::after { inset:-6px; border-style:dashed; border-color:rgba(202,169,243,.12); }
.empty-star { position:absolute; top:11px; right:10px; color:#e5c7fa; font-size:13px; }
.empty-bubble { position:relative; width:34px; height:28px; border:1px solid rgba(221,196,245,.54); border-radius:11px 11px 11px 3px; background:rgba(187,150,223,.22); transform:rotate(-5deg); }
.empty-bubble::after { position:absolute; top:9px; left:8px; width:14px; height:3px; border-radius:5px; background:#d0b3ec; content:""; }
.empty-state .eyebrow { color:#a897b6; }
.empty-state h2 { margin:10px 0 6px; font-size:21px; font-weight:580; letter-spacing:-.04em; }
.empty-state p { max-width:265px; margin:0; color:#87818d; font-size:12px; line-height:1.65; }
.history-loading { display:flex; align-items:center; justify-content:center; gap:8px; min-height:32px; color:#938b9c; font-size:10px; }
.jump-to-latest { position:sticky; z-index:2; bottom:9px; display:flex; min-height:36px; align-items:center; gap:12px; align-self:center; margin-top:auto; padding:0 13px; border:1px solid var(--line-strong); border-radius:99px; color:var(--text); background:#2c2832; box-shadow:0 6px 22px rgba(0,0,0,.18); font-size:10px; cursor:pointer; }
.jump-to-latest span { color:var(--accent); font-size:15px; }
.retry-send { margin-left:6px; padding:2px 5px; border:0; border-radius:4px; color:var(--danger); background:transparent; font-size:9px; text-decoration:underline; cursor:pointer; }
.status-wait { color:var(--accent); font-size:13px; }

.upload-progress { position:relative; display:flex; min-height:35px; flex:0 0 auto; align-items:center; gap:12px; padding:0 32px; color:#aaa2b0; background:#1b191f; font-size:10px; }
.upload-progress-bar { width:min(180px,28vw); height:3px; overflow:hidden; border-radius:3px; background:#34303b; }
.upload-progress-bar i { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .15s linear; }
.upload-progress>button { position:absolute; right:17px; display:grid; width:27px; height:27px; place-items:center; border:0; border-radius:50%; color:#96909d; background:transparent; font-size:18px; cursor:pointer; }
.recording-tray,.audio-preview-tray { display:flex; min-height:58px; flex:0 0 auto; align-items:center; gap:11px; padding:9px 26px; border-top:1px solid rgba(219,162,153,.12); background:rgba(92,57,58,.12); color:#d4b5b0; font-size:12px; }
.recording-dot { width:8px; height:8px; border-radius:50%; background:#e09289; animation:pulse 1.2s ease-in-out infinite; }
.recording-tray time { margin-left:auto; color:#c6a8a6; font-variant-numeric:tabular-nums; }
.tray-button { min-height:34px; padding:0 12px; border:1px solid rgba(220,189,184,.17); border-radius:8px; color:#e2d3d1; background:rgba(255,255,255,.035); font-size:11px; cursor:pointer; }
.tray-button:hover { background:rgba(255,255,255,.08); } .tray-cancel { color:#b29b98; }
.audio-preview-tray { border-top-color:var(--line); background:var(--surface); color:var(--text); gap:12px; }
.audio-preview-tray .audio-preview-container { min-width:0; flex:1; }
.audio-send { min-height:37px; padding:0 14px; }
.composer-form { z-index:1; flex:0 0 auto; padding:13px clamp(15px,3vw,31px) calc(13px + var(--safe-bottom)); border-top:1px solid var(--line); background:var(--canvas-raised); transition:background .2s ease,box-shadow .2s ease; }
.composer-form:focus-within { box-shadow:0 -8px 22px rgba(0,0,0,.07); }
.composer-shell { display:flex; width:min(780px,100%); min-height:54px; align-items:flex-end; gap:5px; margin:0 auto; padding:6px 7px 6px 9px; border:1px solid #32303a; border-radius:15px; background:#1c1a21; transition:border-color .16s ease,box-shadow .16s ease; }
.composer-shell:focus-within { border-color:rgba(202,169,243,.4); box-shadow:0 0 0 3px rgba(202,169,243,.045); }
.composer-tool,.send-button { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border:0; border-radius:10px; color:#a49dab; background:transparent; cursor:pointer; transition:color .15s ease,background .15s ease,transform .15s ease; }
.composer-tool:hover { color:var(--accent); background:rgba(202,169,243,.09); }
.composer-tool:active,.send-button:active { transform:scale(.94); }
.composer-tool svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.55; }
.composer-shell textarea { display:block; width:100%; min-width:0; max-height:130px; min-height:40px; resize:none; overflow-y:auto; padding:10px 8px 8px; border:0; outline:0; color:var(--text); background:transparent; font-size:13px; line-height:1.55; }
.composer-shell textarea::placeholder { color:#77717f; }
.send-button { width:40px; height:40px; color:var(--accent-ink); background:var(--accent); }
.send-button:hover:not(:disabled) { background:#ddc2fa; transform:translateY(-1px); }
.send-button:disabled { color:#8d8694; background:#2c2931; opacity:1; }
.send-button svg { width:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.composer-hint { display:flex; width:min(780px,100%); justify-content:space-between; gap:12px; margin:8px auto 0; color:#706b76; font-size:9px; }
.composer-hint span:last-child { text-align:right; }

/* Sheets, previews and feedback */
dialog { color:var(--text); }
dialog::backdrop { background:rgba(8,7,10,.69); backdrop-filter:blur(4px); }
.settings-dialog,.crop-dialog,.media-preview-dialog { position:fixed; width:min(430px,calc(100vw - 28px)); max-width:none; max-height:min(92dvh,780px); overflow-y:auto; padding:30px; border:1px solid var(--line-strong); border-radius:17px; background:#1a181f; box-shadow:0 26px 90px rgba(0,0,0,.46); animation:dialog-in .2s ease both; }
.settings-dialog[open],.crop-dialog[open],.media-preview-dialog[open] { display:block; }
.settings-dialog>form:first-child,.crop-dialog>form:first-child,.media-preview-dialog>form:first-child { display:contents; }
.dialog-close { position:absolute; top:16px; right:16px; display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:9px; color:#aaa3b0; background:rgba(255,255,255,.025); font-size:20px; font-weight:300; cursor:pointer; }
.dialog-close:hover { color:var(--text); background:rgba(255,255,255,.075); }
.settings-heading h2,.dialog-heading h2 { margin:7px 0 5px; font-size:22px; font-weight:590; letter-spacing:-.045em; }
.settings-heading p,.dialog-heading p { margin:0; color:#8d8793; font-size:12px; line-height:1.55; }
.settings-profile { display:flex; align-items:center; gap:14px; margin:24px 0 23px; }
.avatar-settings { width:58px; height:58px; border:1px solid rgba(231,214,250,.22); font-size:18px; cursor:pointer; }
.avatar-edit-mark { position:absolute; right:0; bottom:0; display:grid; width:19px; height:19px; place-items:center; border:2px solid #1a181f; border-radius:50%; color:#271d32; background:var(--accent); font-size:13px; }
.settings-profile>div { display:flex; min-width:0; flex-direction:column; gap:4px; }
.settings-profile>div strong { color:var(--text); font-size:14px; }
.settings-profile>div>span,.settings-profile>div small { color:#918a98; font-size:11px; }
.settings-profile>div small { margin-top:2px; color:#716b78; font-size:9px; }
.profile-form>label { display:block; }
.settings-name-row { display:flex; gap:8px; }
.settings-name-row input { width:100%; min-width:0; height:42px; padding:0 12px; border:1px solid #393640; border-radius:9px; outline:0; color:var(--text); background:#211f26; font-size:12px; }
.settings-name-row input:focus { border-color:rgba(202,169,243,.63); }
.button-secondary { min-height:42px; flex:0 0 auto; padding:0 15px; border:1px solid var(--line-strong); color:#dfd8e5; background:#292630; font-size:11px; }
.button-secondary:hover { background:#34303b; }
.settings-divider { height:1px; margin:20px 0; background:var(--line); }
.theme-choice { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; border:0; }
.theme-choice legend { margin-bottom:10px; color:#ded8e3; font-size:12px; font-weight:650; }
.theme-option { position:relative; display:flex; min-height:57px; align-items:center; gap:12px; padding:7px 11px; border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.theme-option:has(input:checked) { border-color:rgba(202,169,243,.38); background:rgba(202,169,243,.07); }
.theme-option input { position:absolute; width:1px; height:1px; opacity:0; }
.theme-option input:focus-visible+.theme-preview { outline:2px solid var(--accent); outline-offset:3px; }
.theme-preview { display:flex; width:48px; height:35px; flex:0 0 auto; flex-direction:column; justify-content:center; gap:4px; padding:6px; border-radius:6px; }
.theme-preview i { display:block; width:70%; height:4px; border-radius:4px; background:#b69ad4; }
.theme-preview i:nth-child(2) { width:56%; align-self:flex-end; background:#805e9f; } .theme-preview i:nth-child(3) { width:42%; }
.theme-dark-preview { border:1px solid #38333f; background:#19171e; } .theme-light-preview { border:1px solid #dbd6e0; background:#f3f0f5; }
.theme-light-preview i { background:#a482c2; } .theme-light-preview i:nth-child(2) { background:#cab9d9; }
.theme-option>span:nth-of-type(2) { display:flex; flex-direction:column; gap:3px; }
.theme-option strong { color:#e8e2ec; font-size:11px; } .theme-option small { color:#88828e; font-size:10px; }
.theme-check { display:none; margin-left:auto; color:var(--accent); font-size:14px; font-weight:500; }
.theme-option:has(input:checked) .theme-check { display:inline; }
.settings-secure-note { display:flex; align-items:flex-start; gap:11px; }
.settings-secure-note>span { color:#c7a6e3; font-size:18px; }
.settings-secure-note strong { color:#d5cedd; font-size:11px; }
.settings-secure-note p { margin:4px 0 0; color:#827c89; font-size:10px; line-height:1.55; }
.settings-install-guidance { margin-top:17px; padding-top:15px; border-top:1px solid var(--line); }
.logout-button { display:flex; width:100%; min-height:42px; align-items:center; justify-content:space-between; margin-top:22px; padding:0 12px; border:1px solid rgba(225,143,143,.13); border-radius:9px; color:#dfaaa7; background:rgba(205,101,101,.04); font-size:11px; cursor:pointer; }
.logout-button:hover { background:rgba(205,101,101,.09); }
.logout-button svg { width:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.crop-dialog,.media-preview-dialog { width:min(520px,calc(100vw - 28px)); }
.crop-frame { display:grid; width:100%; aspect-ratio:4/3; place-items:center; overflow:hidden; margin:18px auto 13px; border:1px solid rgba(245,239,255,.1); border-radius:12px; background:#0e0d11; touch-action:none; }
.crop-frame.is-square { width:min(100%,370px); aspect-ratio:1; }
#crop-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; } #crop-canvas.is-dragging { cursor:grabbing; }
.zoom-label { display:flex; align-items:center; gap:11px; color:#a9a2b0; font-size:10px; }
.zoom-label input { min-width:40px; flex:1; accent-color:var(--accent); }
.zoom-label>span:last-child { min-width:39px; color:#d3c8dc; text-align:right; font-variant-numeric:tabular-nums; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:19px; }
.dialog-actions .button-primary,.dialog-actions .button-secondary { min-height:41px; padding:0 15px; font-size:11px; }
.media-preview-stage { display:grid; min-height:110px; max-height:48dvh; place-items:center; overflow:hidden; margin:18px 0 16px; border:1px solid var(--line); border-radius:11px; background:#0f0e12; }
.media-preview-stage img,.media-preview-stage video { display:block; max-width:100%; max-height:45dvh; object-fit:contain; }
.caption-label { display:block; margin:0 0 7px; color:#aaa3b1; font-size:10px; }
#media-caption { display:block; width:100%; min-height:58px; resize:vertical; padding:10px 11px; border:1px solid #393640; border-radius:9px; outline:0; color:var(--text); background:#211f26; font-size:12px; line-height:1.5; }
#media-caption::placeholder { color:#716b78; } #media-caption:focus { border-color:rgba(202,169,243,.58); }
.toast-region { position:fixed; z-index:20; right:max(18px,env(safe-area-inset-right)); bottom:calc(20px + var(--safe-bottom)); display:flex; max-width:min(380px,calc(100vw - 36px)); flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:12px 15px; border:1px solid var(--line-strong); border-radius:11px; color:var(--text); background:#292630; box-shadow:0 12px 35px rgba(0,0,0,.3); font-size:12px; line-height:1.45; animation:toast-in .2s ease both; }
.toast.is-error { border-color:rgba(240,155,155,.25); color:#f2b3b3; }

/* Light theme */
body[data-theme="light"] { color-scheme:light; --canvas:#f3f0f5; --canvas-raised:#faf8fb; --surface:#fff; --surface-soft:#f0edf3; --surface-hover:#e8e3ed; --line:rgba(41,31,52,.09); --line-strong:rgba(41,31,52,.16); --text:#292330; --text-2:#645d6b; --text-3:#817987; --accent:#b087d4; --accent-strong:#986abf; --accent-ink:#fff; --coral:#b36f67; --online:#579c73; --danger:#af4949; --bubble-me:#e9def3; --bubble-them:#fff; --shadow:0 24px 80px rgba(58,44,69,.13); background:#f1eef4; }
body[data-theme="light"].chat-page { background:radial-gradient(ellipse at 47% 8%,rgba(180,146,205,.16),transparent 42%),#f1eef4; }
body[data-theme="light"] .app-shell { border-color:rgba(54,42,65,.1); }
body[data-theme="light"] .conversation-sidebar { background:#f7f4f8; }
body[data-theme="light"] .sidebar-private,body[data-theme="light"] .sidebar-section-label,body[data-theme="light"] .sidebar-note>span:last-child { color:#837b89; }
body[data-theme="light"] .conversation-item:hover,body[data-theme="light"] .conversation-item.is-active { border-color:rgba(149,111,177,.12); background:#eee8f2; }
body[data-theme="light"] .conversation-copy strong,body[data-theme="light"] .sidebar-profile-copy strong { color:#312a37; }
body[data-theme="light"] .conversation-copy>span,body[data-theme="light"] .sidebar-profile-copy>span { color:#7f7785; }
body[data-theme="light"] .sidebar-note { border-color:rgba(93,72,112,.09); background:radial-gradient(ellipse at 100% 0,rgba(186,148,221,.13),transparent 62%),#f0ebf4; }
body[data-theme="light"] .sidebar-note p { color:#534b5c; }
body[data-theme="light"] .chat-header { background:rgba(250,248,251,.94); }
body[data-theme="light"] .chat-partner-copy>span { color:#77707c; }
body[data-theme="light"] .icon-button { color:#756d7c; } body[data-theme="light"] .icon-button:hover { color:#302a36; }
body[data-theme="light"] .timeline-scroll { scrollbar-color:rgba(110,88,130,.2) transparent; }
body[data-theme="light"] .message-day { color:#817987; }
body[data-theme="light"] .message-day span { border-color:rgba(62,48,73,.09); background:rgba(255,255,255,.76); }
body[data-theme="light"] .message-bubble { border-color:rgba(58,46,67,.07); color:#41394a; }
body[data-theme="light"] .message-item.is-mine .message-bubble { border-color:rgba(145,106,174,.16); color:#3d3049; }
body[data-theme="light"] .message-item.is-mine .message-meta { color:#796b88; }
body[data-theme="light"] .message-status { color:#77658e; } body[data-theme="light"] .message-status.is-read { color:#8d5fbb; }
body[data-theme="light"] .message-attachment { border-color:rgba(58,46,67,.12); background:#e6e0e9; }
body[data-theme="light"] .message-attachment img,body[data-theme="light"] .message-attachment video { background:#eeeaf1; }
body[data-theme="light"] .message-reaction { border-color:rgba(79,60,94,.12); color:#51485a; background:#f5f1f7; }
body[data-theme="light"] .message-reaction.is-mine { border-color:rgba(149,111,177,.36); background:rgba(177,142,204,.18); }
body[data-theme="light"] .message-reaction small { color:#746a7d; }
body[data-theme="light"] .reaction-picker { border-color:rgba(63,47,76,.16); background:#fff; box-shadow:0 8px 25px rgba(46,34,57,.12); }
body[data-theme="light"] .reaction-picker button:hover { background:#f1ebf5; }
body[data-theme="light"] .empty-orbit { border-color:rgba(149,111,177,.2); background:radial-gradient(circle,rgba(188,151,223,.18),rgba(236,229,242,.3) 70%); }
body[data-theme="light"] .empty-orbit::before,body[data-theme="light"] .empty-orbit::after { border-color:rgba(149,111,177,.14); }
body[data-theme="light"] .empty-star { color:#946bb3; } body[data-theme="light"] .empty-bubble { border-color:rgba(135,96,169,.65); background:rgba(187,150,223,.34); }
body[data-theme="light"] .empty-bubble::after { background:#9f79bd; } body[data-theme="light"] .empty-state .eyebrow { color:#8b7399; }
body[data-theme="light"] .empty-state p { color:#77707c; }
body[data-theme="light"] .jump-to-latest { border-color:rgba(57,43,68,.14); color:#42394a; background:#fff; box-shadow:0 6px 22px rgba(46,34,57,.12); }
body[data-theme="light"] .retry-send { color:#a94848; }
body[data-theme="light"] .upload-progress { color:#645d6b; background:#f1edf4; } body[data-theme="light"] .upload-progress-bar { background:#d9d2df; }
body[data-theme="light"] .upload-progress>button { color:#716b78; } body[data-theme="light"] .audio-preview-tray { background:#f4f1f6; }
body[data-theme="light"] .composer-form { background:var(--canvas-raised); } body[data-theme="light"] .composer-shell { border-color:#d9d2df; background:#fff; }
body[data-theme="light"] .composer-shell textarea { color:#302a36; } body[data-theme="light"] .composer-shell textarea::placeholder { color:#89818f; }
body[data-theme="light"] .composer-tool { color:#77707f; } body[data-theme="light"] .composer-hint { color:#827b88; }
body[data-theme="light"] .send-button { color:#fff; background:#a77fc6; } body[data-theme="light"] .send-button:disabled { color:#958b9d; background:#e9e4ed; }
body[data-theme="light"] .settings-dialog,body[data-theme="light"] .crop-dialog,body[data-theme="light"] .media-preview-dialog { border-color:rgba(57,43,68,.14); background:#faf8fb; box-shadow:0 26px 90px rgba(59,43,70,.2); }
body[data-theme="light"] .settings-profile>div strong,body[data-theme="light"] .theme-choice legend,body[data-theme="light"] .theme-option strong,body[data-theme="light"] .settings-secure-note strong { color:#352e3b; }
body[data-theme="light"] .pwa-install-guidance { color:#696270; }
body[data-theme="light"] .pwa-install-copy small { color:#7b7482; }
body[data-theme="light"] .pwa-install-mark { border-color:rgba(142,102,171,.2); color:#8d68aa; background:rgba(173,137,202,.08); }
body[data-theme="light"] .settings-profile>div>span,body[data-theme="light"] .settings-heading p,body[data-theme="light"] .dialog-heading p,body[data-theme="light"] .settings-profile>div small { color:#77707e; }
body[data-theme="light"] .settings-name-row input,body[data-theme="light"] #media-caption { border-color:#dcd5e1; color:#302a36; background:#fff; }
body[data-theme="light"] .button-secondary { border-color:#d9d2df; color:#473d50; background:#f0ecf3; } body[data-theme="light"] .button-secondary:hover { background:#e8e1ec; }
body[data-theme="light"] .theme-option { border-color:rgba(57,43,68,.1); } body[data-theme="light"] .theme-option:has(input:checked) { border-color:rgba(149,111,177,.42); background:rgba(176,135,212,.08); }
body[data-theme="light"] .theme-option small,body[data-theme="light"] .settings-secure-note p { color:#77707c; }
body[data-theme="light"] .theme-check { color:#9465bb; } body[data-theme="light"] .settings-secure-note>span { color:#9e75bd; }
body[data-theme="light"] .dialog-close { border-color:rgba(55,42,67,.1); color:#6f6876; background:#f3eff5; }
body[data-theme="light"] .crop-frame,body[data-theme="light"] .media-preview-stage { border-color:#dcd5e1; background:#eeeaf1; }
body[data-theme="light"] .zoom-label,body[data-theme="light"] .zoom-label>span:last-child { color:#6b6371; }
body[data-theme="light"] .toast { border-color:rgba(55,42,67,.13); color:#332c39; background:#fff; box-shadow:0 12px 35px rgba(46,34,57,.14); }

@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes rise-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes message-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes dialog-in { from { opacity:0; transform:translateY(5px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 50% { opacity:.38; transform:scale(.83); } }
@media (max-width:1024px) {
  .login-layout { grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr); }
  .login-aside { padding:36px; }
  .app-shell { grid-template-columns:250px minmax(0,1fr); width:100%; height:100dvh; border-radius:0; border:0; }
  .sidebar-top { padding:0 16px; }
  .message-content { max-width:80%; }
}
@media (min-width:701px) and (max-width:840px) {
  .login-layout { display:flex; min-height:100dvh; }
  .login-aside { display:none; }
  .login-main { width:100%; min-height:100dvh; padding:40px 28px; }
  .login-card { width:min(100%,440px); }
  .app-shell { grid-template-columns:230px minmax(0,1fr); }
  .sidebar-note { display:none; }
}
@media (max-width:700px) {
  .login-layout { display:flex; min-height:100dvh; flex-direction:column; } .login-aside { display:none; }
  .login-main { min-height:100dvh; padding:34px 26px calc(27px + var(--safe-bottom)); }
  .login-card { width:min(100%,410px); } .login-card-mark { margin-bottom:clamp(50px,11vh,90px); }
  .login-mobile-brand { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:clamp(50px,10vh,86px); color:#77717f; font-size:11px; }
  .login-mobile-brand img { opacity:.75; }
  .chat-page { display:block; padding:0; background:var(--canvas-raised); }
  .app-shell { width:100%; height:100dvh; min-height:0; grid-template-columns:minmax(0,1fr); border:0; border-radius:0; box-shadow:none; }
  .conversation-sidebar { display:none; }
  .chat-header { min-height:68px; padding:0 15px; } .chat-partner { gap:10px; }
  .avatar-header { width:40px; height:40px; } .chat-partner-copy strong { font-size:13px; } .chat-partner-copy>span { font-size:10px; }
  .chat-header-actions { gap:9px; } .connection-status { gap:5px; font-size:9px; } .icon-button { width:36px; height:36px; }
  .timeline-scroll { padding:12px 14px 8px; } .message-list { gap:13px; padding:10px 0 22px; }
  .message-content { max-width:min(84%,470px); } .message-bubble { padding:10px 12px 9px; } .message-text { font-size:13px; }
  .message-attachment { width:min(100%,320px); max-height:320px; } .message-attachment img,.message-attachment video { max-height:320px; }
  .composer-form { padding:10px 12px calc(9px + var(--safe-bottom)); } .composer-shell { min-height:52px; border-radius:14px; }
  .composer-tool,.send-button { width:38px; height:38px; } .composer-shell textarea { font-size:13px; } .composer-hint { margin-top:6px; font-size:8px; }
  .reconnect-banner { min-height:32px; font-size:10px; } .recording-tray,.audio-preview-tray { padding-right:13px; padding-left:14px; }
  .settings-dialog,.crop-dialog,.media-preview-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 24px - var(--safe-bottom)); padding:25px 20px 21px; border-radius:16px; }
  .settings-dialog { align-self:end; margin-bottom:calc(10px + var(--safe-bottom)); }
  .toast-region { right:12px; bottom:calc(12px + var(--safe-bottom)); }
}
@media (max-width:390px) {
  .login-main { padding-right:21px; padding-left:21px; } .login-heading h2 { font-size:27px; }
  .pwa-install-guidance { gap:8px; } .pwa-install-button { min-height:32px; padding:0 9px; }
  .chat-header { padding-right:11px; padding-left:11px; } .connection-status span { max-width:62px; overflow:hidden; text-overflow:ellipsis; }
  .chat-header-actions { gap:5px; } .composer-form { padding-right:9px; padding-left:9px; } .composer-hint span:last-child { display:none; }
  .message-content { max-width:88%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* --- Instagram Features: Shared Media Sheet, Double-Tap Like, Long-Press Menu, Editing Bar --- */
.chat-partner { cursor: pointer; user-select: none; transition: opacity .15s ease; display: flex; align-items: center; gap: 10px; }
.chat-partner:hover { opacity: .88; }
.chat-partner-chevron { opacity: .6; margin-left: 2px; transition: transform .2s ease; }
.chat-partner:hover .chat-partner-chevron { opacity: 1; transform: translateY(1px); }

/* Message Editing Bar */
.editing-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(202,169,243,.12); border-left: 3px solid var(--accent, #caa9f3); border-radius: 12px; margin: 0 16px 8px; backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.06); border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.editing-bar-content { display: flex; align-items: center; gap: 10px; color: var(--text, #fff); font-size: 13px; min-width: 0; }
.editing-bar-text { display: flex; flex-direction: column; min-width: 0; }
.editing-bar-text strong { font-size: 12px; color: var(--accent, #caa9f3); }
.editing-bar-text span { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
.editing-bar-cancel { background: transparent; border: 0; color: var(--text-muted, #888); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 50%; line-height: 1; }
.editing-bar-cancel:hover { color: var(--text, #fff); background: rgba(255,255,255,.08); }

/* Context Menu */
.message-context-backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); display: grid; place-items: center; animation: fadeIn .18s ease; }
.message-context-menu { background: var(--surface, #18171d); border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 20px; padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); min-width: 260px; max-width: 90vw; animation: scaleUp .18s cubic-bezier(.16, 1, .3, 1); }
.context-reactions-bar { display: flex; justify-content: space-around; padding: 6px 4px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.context-reaction-btn { font-size: 24px; background: transparent; border: 0; cursor: pointer; transition: transform .14s cubic-bezier(.175,.885,.32,1.275); padding: 4px 6px; border-radius: 10px; }
.context-reaction-btn:hover, .context-reaction-btn:active { transform: scale(1.35); }
.context-menu-actions { display: flex; flex-direction: column; padding-top: 6px; gap: 2px; }
.context-action-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; background: transparent; color: var(--text, #fff); font-size: 14px; font-weight: 500; border-radius: 12px; cursor: pointer; text-align: left; width: 100%; transition: background .12s ease; }
.context-action-item:hover, .context-action-item:active { background: rgba(255,255,255,.08); }
.context-action-item.is-danger { color: #ff5c77; }
.context-action-item.is-danger:hover { background: rgba(255,92,119,.15); }

/* Instagram Shared Media Bottom Sheet */
.shared-media-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 640px; margin: 0 auto; height: 82vh; max-height: 82vh; border: 1px solid var(--border, rgba(255,255,255,.1)); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--bg, #100f13); color: var(--text, #fff); padding: 0; box-shadow: 0 -10px 40px rgba(0,0,0,.6); overflow: hidden; animation: slideSheetUp .28s cubic-bezier(.16, 1, .3, 1); z-index: 1000; }
.shared-media-sheet:not([open]) { display: none !important; }
.shared-media-sheet[open] { display: flex !important; flex-direction: column !important; }
.shared-media-sheet::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.sheet-drag-handle { width: 44px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 10px auto 4px; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.sheet-profile-info { display: flex; align-items: center; gap: 14px; }
.sheet-names h2 { font-size: 17px; margin: 0; font-weight: 600; }
.sheet-subtitle { font-size: 12px; color: var(--text-muted, #888); }
.sheet-close-btn { background: rgba(255,255,255,.06); border: 0; color: var(--text, #fff); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .15s ease; }
.sheet-close-btn:hover { background: rgba(255,255,255,.12); }
.gallery-tabs { display: flex; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); background: var(--surface, #18171d); }
.gallery-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted, #888); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .16s ease; }
.gallery-tab.is-active { color: var(--accent, #caa9f3); border-bottom-color: var(--accent, #caa9f3); background: rgba(202,169,243,.06); }
.gallery-body { flex: 1; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.25); cursor: pointer; }
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.04); }
.gallery-video-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; color: #fff; }
.gallery-audio-list { display: flex; flex-direction: column; gap: 10px; padding: 8px 4px; }
.gallery-audio-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--surface, #18171d); border-radius: 14px; border: 1px solid var(--border, rgba(255,255,255,.08)); }
.gallery-audio-header { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted, #888); }
.gallery-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; color: var(--text-muted, #888); gap: 12px; }
.gallery-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: var(--text-muted, #888); gap: 12px; }
.gallery-spinner { width: 28px; height: 28px; border: 2.5px solid rgba(255,255,255,.15); border-top-color: var(--accent, #caa9f3); border-radius: 50%; animation: spin .8s linear infinite; }

/* Instagram Double Tap Heart Burst */
.instagram-heart-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 25;
  animation: instaHeartPop .85s cubic-bezier(.175, .885, .32, 1.275) forwards;
  filter: drop-shadow(0 6px 20px rgba(233, 30, 99, .6));
}
.message-bubble { position: relative; }
.message-edited-tag { font-size: 10px; opacity: .7; margin-left: 5px; font-style: italic; }

@keyframes instaHeartPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -85px) scale(0.6); opacity: 0; }
}
@keyframes slideSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes scaleUp {
  from { transform: scale(.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --- Mobile Keyboard Resizing & Tablet Compatibility --- */
:root {
  --app-height: 100dvh;
  --vvh: 100dvh;
}
@keyframes shakeForm {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.is-shaking {
  animation: shakeForm .38s ease-in-out;
}

@media (max-width: 800px) {
  html, body.chat-page {
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    inset: 0 !important;
  }
  .app-shell {
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    border-radius: 0 !important;
    border: 0 !important;
  }
  .conversation-sidebar {
    display: none !important;
  }
  .chat-panel {
    height: 100% !important;
    max-height: var(--app-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .timeline-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .composer-form {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    background: var(--canvas-raised, #151419) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  .composer-shell {
    border-radius: 20px !important;
  }
}

/* Tablet Layout (801px - 1080px) */
@media (min-width: 801px) and (max-width: 1080px) {
  .app-shell {
    width: 100% !important;
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    border-radius: 0 !important;
    border: 0 !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  .chat-panel {
    height: 100% !important;
    max-height: var(--app-height, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .timeline-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}