:root{
  --bg-top:#152b24;--bg-mid:#0f1318;--bg-low:#090b0f;--bg-base:#040506;
  --panel:#0f0f1a;--text:#ffffff;--muted:rgba(255,255,255,.45);
  --soft:rgba(255,255,255,.25);--line:rgba(255,255,255,.08);
  --card-top:rgba(255,255,255,.07);--card-bottom:rgba(255,255,255,.03);
  --accent:#7DF9C2;--accent-2:#66e4af;--accent-text:#07120c;
  --input-bg:rgba(255,255,255,.07);--input-border:rgba(255,255,255,.12);
  --app-header:rgba(6,8,12,.78);--bottom-nav:rgba(6,8,12,.84);
  --chat-in:rgba(38,46,58,.96);--chat-out-top:#9bffd6;--chat-out-bottom:#6ee6b4;
  --chat-out-text:#04110b;--shadow:0 10px 40px rgba(0,0,0,.28);
  --toggle-shell:rgba(255,255,255,.08);--toggle-text:rgba(255,255,255,.82);
}
body[data-theme="light"]{
  --bg-top:#dceee7;--bg-mid:#e9e1f1;--bg-low:#d5ccdf;--bg-base:#c9bfda;
  --panel:#e7dfef;--text:#18131f;--muted:rgba(31,25,43,.72);
  --soft:rgba(31,25,43,.56);--line:rgba(77,55,119,.22);
  --card-top:rgba(255,255,255,.56);--card-bottom:rgba(226,217,238,.78);
  --accent:#287b62;--accent-2:#6a5796;--accent-text:#ffffff;
  --input-bg:rgba(238,232,244,.86);--input-border:rgba(73,115,96,.34);
  --app-header:rgba(231,223,239,.86);--bottom-nav:rgba(226,218,237,.90);
  --chat-in:rgba(241,237,247,.86);--chat-out-top:#3f9d7d;--chat-out-bottom:#7560a2;
  --chat-out-text:#ffffff;--shadow:0 14px 34px rgba(55,43,82,.16);
  --toggle-shell:rgba(88,70,129,.12);--toggle-text:#1c1628;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top,var(--bg-top) 0%,var(--bg-mid) 30%,var(--bg-low) 70%,var(--bg-base) 100%);color:var(--text);transition:background .25s ease,color .25s ease}
body{display:flex;justify-content:center}
#app{width:100%;max-width:520px;height:100vh;height:100svh;min-height:100dvh;position:relative}
.screen{display:none;flex-direction:column;height:100%;min-height:0}
.screen.show{display:flex}
#login{justify-content:center;align-items:center;padding:28px;background:var(--panel);position:relative}
.theme-toggle{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;background:var(--toggle-shell);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--toggle-text);font-size:12px;font-weight:700;cursor:pointer;backdrop-filter:blur(14px)}
.theme-toggle .tt-icon{font-size:14px}
.header-actions{display:flex;align-items:center;gap:8px}
.theme-chip{display:flex;align-items:center;gap:6px;background:var(--toggle-shell);color:var(--toggle-text);border:1px solid var(--input-border);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer;line-height:1}
body[data-theme="light"] .theme-chip{background:rgba(221,214,234,.96);border-color:rgba(90,75,128,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.theme-chip .tt-icon{font-size:13px}
.theme-icon-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--input-border);background:var(--toggle-shell);color:var(--toggle-text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
body[data-theme="light"] .theme-icon-btn{background:rgba(221,214,234,.96);border-color:rgba(90,75,128,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.theme-icon-btn .tt-icon{font-size:14px}
@keyframes shimmer{0%{background-position:-300% center}100%{background-position:300% center}}
@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.03);opacity:.8}100%{transform:scale(1);opacity:1}}
.logo-big{font-size:74px;font-weight:800;letter-spacing:-4px;margin-bottom:14px;background:linear-gradient(90deg,var(--accent) 25%,#fff 45%,#c8fff0 50%,#fff 55%,var(--accent) 75%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}
body[data-theme="light"] .logo-big{background:linear-gradient(90deg,#3f7a67 25%,#7b66a8 45%,#b8a6d8 50%,#7b66a8 55%,#3f7a67 75%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-sub{font-size:13px;color:var(--muted);margin-bottom:26px;text-align:center;line-height:1.7;max-width:300px}
.input-group{width:100%;max-width:340px;margin-bottom:12px}
.input-group label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px}
.input-group input{width:100%;padding:14px 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:14px;color:var(--text);font-size:16px;outline:none;backdrop-filter:blur(16px)}
.input-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(125,249,194,.08)}
.btn-primary{width:100%;max-width:340px;padding:15px;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text);border:none;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;margin-top:6px;box-shadow:0 14px 32px rgba(102,228,175,.22)}
.btn-secondary{width:100%;max-width:340px;padding:12px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid var(--line);border-radius:14px;font-size:13px;cursor:pointer;margin-top:8px}
body[data-theme="light"] .btn-secondary{background:rgba(224,216,236,.88);border-color:rgba(90,75,128,.26)}
.login-note{font-size:11px;color:var(--soft);margin-top:16px;text-align:center;max-width:300px;line-height:1.7}
.version-tag{font-size:10px;color:rgba(255,255,255,.16);margin-top:20px}
body[data-theme="light"] .version-tag{color:rgba(23,20,31,.30)}
.glass{background:linear-gradient(180deg,var(--card-top),var(--card-bottom));backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:var(--shadow)}
.app-header{padding:12px 16px;flex-shrink:0;background:var(--app-header);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between}
.logo-small{font-size:20px;font-weight:800;color:var(--accent);letter-spacing:-.5px}
.desktop-quick-nav{display:none}
.bottom-nav{background:var(--bottom-nav);display:flex;gap:6px;border-top:1px solid var(--line);flex-shrink:0;padding:8px 10px calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(18px);position:sticky;bottom:0;z-index:30}
body[data-theme="light"] .bottom-nav{border-top-color:rgba(90,75,128,.20);box-shadow:0 -4px 22px rgba(58,45,84,.06)}
.nav-btn{flex:1;padding:9px 0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border:1px solid transparent;border-radius:16px;background:none;color:rgba(255,255,255,.58);position:relative;transition:background .18s ease,border-color .18s ease,color .18s ease}
body[data-theme="light"] .nav-btn{color:rgba(23,20,31,.78)}
.nav-btn.active{color:var(--accent);background:rgba(125,249,194,.10);border-color:rgba(125,249,194,.18)}
body[data-theme="light"] .nav-btn.active{background:rgba(111,96,145,.12);border-color:rgba(90,75,128,.24);color:#1d6a52;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.nav-icon{font-size:19px;font-weight:800}
.nav-label{font-size:11px;font-weight:800;letter-spacing:.2px}
.content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fab{position:absolute;right:16px;bottom:82px;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text);border:none;font-size:30px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px rgba(102,228,175,.22);z-index:10}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:rgba(255,255,255,.28);padding:32px;text-align:center}
body[data-theme="light"] .empty-state{color:rgba(23,20,31,.50)}
.empty-icon{font-size:48px}
.empty-text{font-size:14px;line-height:1.7}
.contact-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.contact-item:active{background:rgba(255,255,255,.04)}
.avatar-wrap{position:relative;flex-shrink:0}
.avatar{width:46px;height:46px;border-radius:50%;background:rgba(125,249,194,.12);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--accent);text-transform:uppercase;overflow:hidden;border:1px solid rgba(125,249,194,.18)}
.avatar img{width:100%;height:100%;object-fit:cover}
.status-dot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:2px solid var(--bg-base);background:#444}
.status-dot.online{background:#33d17a;box-shadow:0 0 0 4px rgba(51,209,122,.12)}
.contact-info{flex:1;min-width:0}
.contact-name{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.contact-preview{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.time-small{font-size:10px;color:rgba(255,255,255,.3)}
body[data-theme="light"] .time-small{color:rgba(23,20,31,.58)}
.unread-badge,.tab-badge{background:#ff5c5c;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.tab-badge{margin-left:8px}
.delete-soon{font-size:10px;color:#ff8b8b}
.request-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(125,249,194,.05);border-bottom:1px solid rgba(125,249,194,.1)}
.request-info{flex:1}
.request-name{font-size:14px;font-weight:700;color:var(--accent)}
.request-msg{font-size:12px;color:var(--muted);margin-top:2px}
.request-btns{display:flex;gap:6px;flex-wrap:wrap}
.accept-btn{background:rgba(125,249,194,.15);color:var(--accent);border:1px solid rgba(125,249,194,.3);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
body[data-theme="light"] .accept-btn{border-color:rgba(47,139,108,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.reject-btn{background:rgba(255,107,107,.1);color:#ff6b6b;border:1px solid rgba(255,107,107,.2);border-radius:10px;padding:6px 12px;font-size:12px;cursor:pointer}
body[data-theme="light"] .reject-btn{border-color:rgba(214,88,88,.30)}
.block-btn{background:rgba(255,170,60,.12);color:#ffb14a;border:1px solid rgba(255,177,74,.25);border-radius:10px;padding:6px 12px;font-size:12px;cursor:pointer}
.chat-header{padding:10px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;background:rgba(6,8,12,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
body[data-theme="light"] .chat-header{background:linear-gradient(135deg,rgba(238,232,244,.92),rgba(222,241,233,.72));border-bottom-color:rgba(73,115,96,.24)}
.back-btn{background:none;border:none;color:var(--accent);font-size:22px;cursor:pointer;padding:4px;flex-shrink:0}
.chat-title{flex:1;min-width:0}
.chat-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-actions{display:flex;gap:6px;align-items:center;margin-left:auto;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.chip-btn{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer;font-weight:800}
body[data-theme="light"] .chip-btn{background:rgba(224,216,236,.86);border-color:rgba(90,75,128,.30);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.chip-btn.green{background:rgba(125,249,194,.12);color:var(--accent);border-color:rgba(125,249,194,.2)}
body[data-theme="light"] .chip-btn.green{background:rgba(222,215,234,.96);color:#1f6f57;border-color:rgba(47,139,108,.34)}
.chip-btn.red{background:rgba(255,107,107,.12);color:#ff7a7a;border-color:rgba(255,107,107,.2)}
.desktop-close-chat-btn{display:none;width:34px;height:34px;border-radius:999px;border:1px solid var(--input-border);background:var(--toggle-shell);color:var(--toggle-text);font-size:20px;line-height:1;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
body[data-theme="light"] .desktop-close-chat-btn{background:rgba(238,232,244,.88);border-color:rgba(73,115,96,.30);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
@media (max-width:560px){
  .chat-header{align-items:flex-start}
  .chat-title{flex:1 1 calc(100% - 82px);min-width:calc(100% - 82px)}
  .chat-name,.chat-sub{white-space:normal;overflow:visible;text-overflow:clip}
  .chat-actions{width:100%;margin-left:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap;overflow:visible;padding-top:4px;scrollbar-width:none}
  .chat-actions::-webkit-scrollbar{display:none}
  .chat-actions .chip-btn{width:auto;min-width:42px;height:36px;padding:0 10px;display:flex;align-items:center;justify-content:center;font-size:11px;white-space:nowrap;flex:0 0 auto}
  .chat-actions .retention-select,
  .chat-actions .desktop-close-chat-btn,
  .chat-actions .theme-icon-btn,
  .chat-actions .chip-btn.red{display:none!important}
  .chat-actions button:nth-of-type(2){display:none!important}
}
.messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.auto-delete-notice{text-align:center;font-size:10px;color:rgba(255,255,255,.24);background:rgba(255,255,255,.04);padding:4px 12px;border-radius:20px;align-self:center}
body[data-theme="light"] .auto-delete-notice{color:rgba(23,20,31,.66);background:rgba(226,219,238,.74);border:1px solid rgba(90,75,128,.16)}
.bubble{max-width:82%;padding:11px 14px;border-radius:18px;font-size:14.5px;line-height:1.58;word-break:break-word;position:relative;letter-spacing:0;border:1px solid transparent}
.bubble.out{background:linear-gradient(135deg,var(--chat-out-top),var(--chat-out-bottom));color:var(--chat-out-text);align-self:flex-end;border-color:rgba(125,249,194,.22);border-bottom-right-radius:7px;box-shadow:0 10px 24px rgba(46,154,113,.18)}
.bubble.in{background:linear-gradient(135deg,var(--chat-in),rgba(125,249,194,.045));color:var(--text);align-self:flex-start;border-bottom-left-radius:7px;border-color:rgba(125,249,194,.16)}
body[data-theme="light"] .bubble.out{background:linear-gradient(135deg,#32866b,#6f5a9b);border-color:rgba(49,126,98,.30);box-shadow:0 10px 24px rgba(64,49,105,.14)}
body[data-theme="light"] .bubble.in{background:linear-gradient(135deg,rgba(249,246,252,.88),rgba(223,241,233,.78));color:#18131f;border-color:rgba(91,67,135,.20);box-shadow:0 8px 22px rgba(65,52,92,.08)}
.bubble.pbm{background:rgba(22,26,34,.96)!important;color:#dff9ee;border:1px solid rgba(125,249,194,.18)}
body[data-theme="light"] .bubble.pbm{background:rgba(233,227,242,.97)!important;color:#2a2540}
.bubble-text{word-break:break-word}
.bubble-time{font-size:10.5px;opacity:.82;margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:inherit}
body[data-theme="light"] .bubble.in .bubble-time{color:rgba(31,25,43,.62)}
body[data-theme="light"] .bubble.out .bubble-time{color:rgba(255,255,255,.82)}
.eye-indicator{padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;border:1px solid rgba(255,255,255,.18);line-height:1}
.eye-indicator.read{background:rgba(125,249,194,.14);color:#075b33;border-color:rgba(125,249,194,.3)}
.eye-indicator.unread{background:rgba(255,255,255,.08);color:rgba(255,255,255,.9)}
body[data-theme="light"] .eye-indicator.unread{color:rgba(23,20,31,.90);border-color:rgba(64,56,88,.16)}
.del-btn{background:none;border:none;cursor:pointer;font-size:11px;color:rgba(255,100,100,.7);padding:0 2px}
.bubble-media{margin-top:8px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.bubble-media img,.bubble-media video{display:block;max-width:100%;max-height:240px}
.openable-image{display:block;cursor:pointer}
.attachment-card-btn{display:flex;align-items:center;gap:10px;width:100%;padding:10px;background:rgba(255,255,255,.04);border-radius:14px;border:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;margin-top:8px}
body[data-theme="light"] .attachment-card-btn{background:rgba(222,215,234,.82);border-color:rgba(90,75,128,.18)}
.file-icon{font-size:18px}
.file-meta{font-size:12px;text-align:left}
.voice-bubble{display:flex;align-items:center;gap:10px}
.play-btn{width:32px;height:32px;border-radius:50%;background:#07120c;border:none;color:var(--accent);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body[data-theme="light"] .play-btn{background:#3e3556;color:#fff}
.bubble.in .play-btn{background:var(--accent);color:var(--accent-text)}
.vw{width:3px;border-radius:2px;background:rgba(125,249,194,.55);display:inline-block}
.input-area{background:var(--bottom-nav);padding:8px 12px;flex-shrink:0;border-top:1px solid var(--line);padding-bottom:calc(8px + env(safe-area-inset-bottom));backdrop-filter:blur(18px)}
.input-row{display:flex;align-items:flex-end;gap:8px}
.msg-textarea{flex:1;background:var(--input-bg);border:1px solid var(--input-border);border-radius:18px;padding:11px 14px;color:var(--text);font-size:14px;font-family:inherit;resize:none;outline:none;max-height:120px;min-height:42px}
.msg-textarea:focus{border-color:rgba(125,249,194,.45)}
.circle-btn{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send-btn{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text);font-size:18px;font-weight:800}
.icon-btn{background:rgba(255,255,255,.06);border:1px solid var(--input-border);color:var(--toggle-text);font-size:18px}
body[data-theme="light"] .icon-btn{background:rgba(221,214,234,.92);border-color:rgba(90,75,128,.32)}
.icon-btn.recording{background:rgba(255,107,107,.18);border-color:#ff6b6b;color:#ff6b6b;animation:pulse .8s ease-in-out infinite}
.voice-preview-bar{display:none;align-items:center;gap:6px;padding:6px 0;flex-wrap:wrap}
.voice-preview-bar.show{display:flex}
.quick-replies{display:flex;gap:6px;margin-top:6px;overflow-x:auto;padding-bottom:2px}
.qr{font-size:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--input-border);color:var(--muted);cursor:pointer;white-space:nowrap}
body[data-theme="light"] .qr{background:rgba(223,216,235,.84);border-color:rgba(90,75,128,.24)}
.keep-row{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--muted)}
.emoji-panel{display:none;padding:10px 12px;border-top:1px solid var(--line)}
.emoji-panel.open{display:block}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emoji-chip{font-size:22px;text-align:center;cursor:pointer;padding:5px 0;border-radius:8px}
.emoji-chip:active{background:rgba(255,255,255,.1)}
.section-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:0 20px 10px}
.to-input,.request-msg-input,.profile-input,.schedule-input{width:calc(100% - 40px);margin:0 20px 12px;padding:14px 16px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:14px;color:var(--text);font-size:15px;outline:none;font-family:inherit;display:block}
.compose-box,.voice-compose,.profile-section{margin:0 20px 16px;border-radius:18px;padding:14px}
.compose-textarea{width:100%;background:none;border:none;color:var(--text);font-size:16px;font-family:inherit;resize:none;outline:none;min-height:90px}
.compose-footer{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.compose-send{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text);border:none;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:800;cursor:pointer}
.action-btn{width:calc(100% - 40px);padding:14px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;margin:0 20px 12px;border:1px solid var(--input-border);display:block;text-align:center}
.action-btn.green{background:rgba(125,249,194,.08);color:var(--accent);border-color:rgba(125,249,194,.16)}
body[data-theme="light"] .action-btn.green{background:rgba(221,214,234,.96);color:#1f6f57;border-color:rgba(47,139,108,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.action-btn.neutral{background:rgba(255,255,255,.05);color:var(--toggle-text)}
body[data-theme="light"] .action-btn.neutral{background:rgba(221,214,234,.88);border-color:rgba(90,75,128,.28)}
.voice-record-big{width:72px;height:72px;border-radius:50%;background:rgba(255,107,107,.15);border:2px solid rgba(255,107,107,.3);color:#ff6b6b;font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.voice-record-big.recording{background:rgba(255,107,107,.28);animation:pulse .8s ease-in-out infinite}
.voice-hint{font-size:12px;color:var(--muted);text-align:center}
.voice-preview-row{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;flex-wrap:wrap}
.mini-btn{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--input-border);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer}
body[data-theme="light"] .mini-btn{background:rgba(221,214,234,.88);border-color:rgba(90,75,128,.28)}
.mini-btn.green{background:rgba(125,249,194,.12);color:var(--accent);border-color:rgba(125,249,194,.2)}
body[data-theme="light"] .mini-btn.green{background:rgba(221,214,234,.96);color:#1f6f57;border-color:rgba(47,139,108,.34)}
.mini-btn.red{background:rgba(255,107,107,.12);color:#ff7a7a;border-color:rgba(255,107,107,.2)}
.contact-saved-item,.sos-contact,.found-user-card,.service-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:14px;margin:0 20px 10px;border:1px solid var(--line);gap:10px}
body[data-theme="light"] .contact-saved-item,body[data-theme="light"] .sos-contact,body[data-theme="light"] .found-user-card,body[data-theme="light"] .service-card{background:rgba(230,223,241,.88);border-color:rgba(90,75,128,.22)}
.contact-card{display:block;padding:14px}
.contact-card-top{display:flex;align-items:flex-start;gap:12px}
.contact-card-main{flex:1;min-width:0}
.contact-card-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.contact-saved-name,.sos-cname{font-size:14px;font-weight:700;color:var(--text)}
.sos-crel{font-size:11px;color:var(--muted);margin-top:2px}
.beepa-num{font-size:11px;color:rgba(47,139,108,.92);margin-top:4px;cursor:pointer;font-weight:700}
.copy-chip{display:inline-block;margin-top:6px;padding:5px 10px;border-radius:999px;background:rgba(125,249,194,.12);border:1px solid rgba(125,249,194,.2);color:var(--accent);font-size:11px;font-weight:700;cursor:pointer}
body[data-theme="light"] .copy-chip{background:rgba(221,214,234,.94);border-color:rgba(47,139,108,.26)}
.contact-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.contact-beep-btn,.contact-call-btn,.sos-alert-btn{background:rgba(125,249,194,.1);color:var(--accent);border:1px solid rgba(125,249,194,.2);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;font-weight:800}
body[data-theme="light"] .contact-beep-btn,body[data-theme="light"] .contact-call-btn,body[data-theme="light"] .sos-alert-btn{background:rgba(221,214,234,.98);color:#1f6f57;border-color:rgba(47,139,108,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.sos-add{border:1px dashed var(--input-border);border-radius:12px;padding:14px;text-align:center;color:var(--soft);font-size:13px;cursor:pointer;margin:12px 20px 0}
.tab-bar{display:flex;border-bottom:1px solid var(--line);flex-shrink:0;gap:8px;padding:0 12px 10px}
.tab-btn{flex:1;padding:10px;background:none;border:1px solid transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;border-radius:12px}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
body[data-theme="light"] .tab-btn.active{background:rgba(221,214,234,.92);border-color:rgba(90,75,128,.22);color:#1f6f57}
.call-log-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:14px;margin:0 20px 10px;border:1px solid var(--line);gap:10px}
body[data-theme="light"] .call-log-card{background:rgba(230,223,241,.88)}
.missed-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,107,107,.06);border-radius:14px;margin:0 20px 10px;border:1px solid rgba(255,107,107,.12)}
.profile-hero{display:flex;align-items:center;gap:14px}
.profile-avatar-large{width:72px;height:72px;border-radius:50%;overflow:hidden;background:rgba(125,249,194,.12);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:24px;font-weight:800;border:1px solid rgba(125,249,194,.15)}
.profile-avatar-large img{width:100%;height:100%;object-fit:cover}
.profile-section-title{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.profile-btn{width:100%;padding:12px;background:rgba(125,249,194,.1);color:var(--accent);border:1px solid rgba(125,249,194,.2);border-radius:12px;font-size:14px;font-weight:700;cursor:pointer}
body[data-theme="light"] .profile-btn{background:rgba(221,214,234,.94);border-color:rgba(47,139,108,.32);color:#1f6f57;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.profile-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:10px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.toggle-label{font-size:13px;color:var(--toggle-text);font-weight:700}
.toggle-note{font-size:11px;color:var(--muted)}
.toggle{width:46px;height:26px;background:rgba(255,255,255,.15);border-radius:13px;position:relative;cursor:pointer;transition:background .2s}
body[data-theme="light"] .toggle{background:#d7d0e5;box-shadow:inset 0 0 0 1px rgba(90,75,128,.22)}
.toggle.on{background:var(--accent)}
body[data-theme="light"] .toggle.on{background:#29a06f}
.toggle-knob{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:transform .2s}
.toggle.on .toggle-knob{transform:translateX(20px)}
.install-banner{display:none;margin:0 20px 16px;border-radius:18px;padding:14px;background:rgba(125,249,194,.06);border:1px solid rgba(125,249,194,.15)}
.install-banner.show{display:block}
.call-overlay{position:fixed;inset:0;background:radial-gradient(circle at top,#19362e 0%,#0b0c10 70%);z-index:2000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
body[data-theme="light"] .call-overlay{background:radial-gradient(circle at top,#dceee7 0%,#e6ddec 52%,#c9bfda 100%)}
.call-overlay.show{display:flex}
.call-overlay.minimized{inset:auto 12px calc(76px + env(safe-area-inset-bottom)) 12px;min-height:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:10px 12px;border-radius:20px;background:linear-gradient(135deg,rgba(24,35,31,.96),rgba(44,35,29,.96));border:1px solid rgba(125,249,194,.20);box-shadow:0 16px 38px rgba(0,0,0,.34);backdrop-filter:blur(18px)}
body[data-theme="light"] .call-overlay.minimized{background:linear-gradient(135deg,rgba(210,236,222,.98),rgba(216,205,232,.98));border-color:rgba(73,126,100,.26);box-shadow:0 14px 30px rgba(75,58,112,.18)}
body[data-theme="green"] .call-overlay.minimized{background:linear-gradient(135deg,rgba(9,33,24,.98),rgba(31,49,35,.98));border-color:rgba(141,255,208,.24)}
.call-overlay.minimized .call-avatar,.call-overlay.minimized .call-video-wrap,.call-overlay.minimized .call-debug{display:none!important}
.call-overlay.minimized .call-name{font-size:13px;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-overlay.minimized .call-status{font-size:11px;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-overlay.minimized .call-timer{font-size:12px;padding:4px 8px}
.call-overlay.minimized .call-btns{margin-top:0;gap:6px;margin-left:auto}
.call-overlay.minimized .call-btn{width:38px;height:38px;font-size:16px}
.call-overlay.minimized .call-chip{display:none}
.call-avatar{width:110px;height:110px;border-radius:50%;background:rgba(125,249,194,.15);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:var(--accent);border:2px solid rgba(125,249,194,.3);overflow:hidden;box-shadow:0 0 0 12px rgba(125,249,194,.05)}
.call-avatar img{width:100%;height:100%;object-fit:cover}
.call-name{font-size:24px;font-weight:700;color:var(--text)}
.call-status{font-size:14px;color:var(--muted)}
.call-timer{font-size:18px;color:#c9ffe8;font-weight:850;background:rgba(39,34,30,.92);border:1px solid rgba(125,249,194,.22);border-radius:999px;padding:6px 14px;display:inline-block;box-shadow:0 8px 22px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.18)}
body[data-theme="light"] .call-timer{color:#3f2d68;background:rgba(198,231,215,.94);border-color:rgba(70,139,110,.28);box-shadow:0 8px 22px rgba(75,58,112,.14)}
body[data-theme="green"] .call-timer{color:#d8fff0;background:rgba(16,49,39,.92);border-color:rgba(141,255,208,.34)}
.call-btns{display:flex;gap:18px;margin-top:8px}
.call-btn{width:64px;height:64px;border-radius:50%;border:none;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.call-btn.end{background:#ff6b6b;color:#fff}
.call-btn.mute{background:rgba(255,255,255,.1);color:var(--text)}
body[data-theme="light"] .call-btn.mute{background:rgba(111,96,145,.16)}
.call-btn.accept{background:var(--accent);color:var(--accent-text)}
.call-btn.speaker{background:rgba(125,249,194,.12);color:var(--accent);border:1px solid rgba(125,249,194,.18)}
body[data-theme="light"] .call-btn.accept,body[data-theme="light"] .call-btn.speaker{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.call-video-wrap{width:100%;max-width:420px;height:260px;border-radius:24px;overflow:hidden;border:1px solid rgba(125,249,194,.18);background:rgba(0,0,0,.35);position:relative;display:none}
.call-video-wrap.show{display:block}
.call-remote-video,.call-local-video{position:absolute;object-fit:cover;background:#000}
.call-remote-video{inset:0;width:100%;height:100%}
.call-local-video{width:110px;height:150px;right:12px;bottom:12px;border-radius:18px;border:1px solid rgba(255,255,255,.18)}
.call-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:11px;font-weight:800}
.call-minimize-btn{position:absolute;top:14px;right:14px;border:1px solid rgba(125,249,194,.22);background:rgba(18,28,24,.72);color:var(--accent);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900;cursor:pointer}
body[data-theme="light"] .call-minimize-btn{background:rgba(198,231,215,.9);color:#3f2d68;border-color:rgba(70,139,110,.28)}
.call-overlay.minimized .call-minimize-btn{position:static;order:-1;flex-shrink:0;padding:6px 9px;background:rgba(125,249,194,.12)}
.call-debug{display:none;width:min(420px,92vw);padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:11px;line-height:1.6}
.call-debug.show{display:none}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.show{display:flex}
.modal{background:#12161d;border-radius:20px;padding:24px;width:100%;max-width:340px;border:1px solid rgba(125,249,194,.22)}
body[data-theme="light"] .modal{background:#f1edf7;border-color:rgba(64,56,88,.14)}
.modal-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.modal-body{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.modal-btns{display:flex;gap:10px}
.modal-btn{flex:1;padding:12px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;border:none}
.modal-btn.safe{background:var(--accent);color:var(--accent-text)}
.profile-btn[disabled]{opacity:.72;cursor:default}
@media (max-width:430px){
  .chat-actions{width:100%;justify-content:flex-end;margin-left:0;padding-top:2px}
}
.modal-btn.help{background:#ff6b6b;color:#fff}
.modal-btn.cancel{background:rgba(255,255,255,.07);color:var(--muted)}
body[data-theme="light"] .modal-btn.cancel{background:rgba(221,214,234,.82)}
.media-viewer{background:rgba(8,10,14,.98);border:1px solid rgba(255,255,255,.08);border-radius:22px;width:100%;max-width:460px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column}
body[data-theme="light"] .media-viewer{background:#f4f0fa;border-color:rgba(90,75,128,.16)}
.media-viewer-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.media-viewer-title{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-viewer-actions{display:flex;gap:8px;flex-shrink:0}
.media-close-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--input-border);background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
body[data-theme="light"] .media-close-btn{background:rgba(221,214,234,.92)}
.media-viewer-body{padding:16px;overflow:auto}
.media-preview-wrap{display:flex;align-items:center;justify-content:center;min-height:220px}
.media-preview-wrap img,.media-preview-wrap video,.media-preview-wrap iframe{max-width:100%;max-height:62vh;border-radius:16px;display:block}
.media-preview-wrap .zoomable-media{cursor:zoom-in;transition:transform .18s ease;transform-origin:center}
.media-preview-wrap .zoomable-media.zoomed{max-height:none;max-width:none;width:auto;height:auto;transform:scale(1.65);cursor:zoom-out}
.media-preview-wrap audio{width:100%}
.media-file-note{font-size:13px;color:var(--muted);line-height:1.7;text-align:center}
.media-folder-tabs{display:flex;gap:8px;overflow-x:auto;padding:10px 14px;border-bottom:1px solid var(--line)}
.media-folder-tabs button{border:1px solid var(--line);background:var(--toggle-shell);color:var(--toggle-text);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.media-folder-tabs button.active{background:var(--accent);color:var(--accent-text);border-color:transparent}
.notifications-list{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
.notification-card{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,var(--card-top),var(--card-bottom));border:1px solid var(--line);cursor:pointer}
.notification-card.unread{border-color:rgba(125,249,194,.28);box-shadow:inset 3px 0 0 var(--accent)}
.notification-type{min-width:56px;color:var(--accent);font-size:11px;font-weight:900;text-transform:uppercase}
.notification-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.notification-main strong{font-size:13px;color:var(--text)}
.notification-main span{font-size:12px;color:var(--toggle-text);line-height:1.45}
.notification-main small{font-size:10px;color:var(--muted)}
.nav-badge{position:absolute;top:4px;right:12px}
.load-more-notifications{width:100%;border:1px solid var(--line);background:var(--toggle-shell);color:var(--toggle-text);border-radius:14px;padding:12px;font-weight:900}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#11161d;color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;border:1px solid rgba(125,249,194,.3);z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center}
body[data-theme="light"] .toast{background:#f8f5fc;color:#17141f;border-color:rgba(64,56,88,.18)}
.toast.show{opacity:1}
.toast.error{border-color:rgba(255,107,107,.4);color:#ff7a7a}
.toast.urgent{background:#ff6b6b;color:#fff;border-color:#ff6b6b}
.hidden{display:none!important}
.saved-lines{margin:0 20px 12px}
.saved-line{font-size:11px;color:var(--muted);line-height:1.6}
.file-input-native{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.premium-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border:1px solid var(--line)}
.premium-pill.on{background:rgba(125,249,194,.14);color:var(--accent);border-color:rgba(125,249,194,.25)}
.premium-pill.off{background:rgba(255,255,255,.06);color:var(--muted)}
body[data-theme="light"] .premium-pill.off{background:rgba(221,214,234,.80)}
.premium-note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:10px}
.premium-feature-list{display:grid;gap:8px;margin-top:12px}
.premium-feature{font-size:12px;color:var(--toggle-text);padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
body[data-theme="light"] .premium-feature{background:rgba(224,217,236,.80)}
.premium-price{font-size:24px;font-weight:800;color:var(--accent);margin:6px 0 2px}
.premium-methods{font-size:11px;color:var(--muted);line-height:1.6}
.profile-tab-wrap{display:flex;padding:0 20px 16px;gap:8px;position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg-mid) 0%,rgba(15,19,24,.97) 70%,rgba(15,19,24,.86) 100%)}
body[data-theme="light"] .profile-tab-wrap{background:linear-gradient(180deg,#ece6f4 0%,rgba(236,230,244,.96) 70%,rgba(236,230,244,.84) 100%)}
.profile-tab-btn{flex:1;padding:12px 14px;border-radius:14px;border:1px solid var(--input-border);background:rgba(255,255,255,.04);color:var(--muted);font-size:13px;font-weight:700;cursor:pointer}
body[data-theme="light"] .profile-tab-btn{background:rgba(221,214,234,.80);border-color:rgba(90,75,128,.24)}
.profile-tab-btn.active{background:rgba(125,249,194,.12);color:var(--accent);border-color:rgba(125,249,194,.2)}
body[data-theme="light"] .profile-tab-btn.active{background:rgba(221,214,234,.98);color:#1f6f57;border-color:rgba(47,139,108,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.40)}
.profile-pane{display:none}
.profile-pane.show{display:block}
.wallet-card{margin:0 20px 16px;border-radius:16px;padding:18px;background:linear-gradient(180deg,rgba(125,249,194,.10),rgba(18,27,31,.88));border:1px solid rgba(125,249,194,.15);box-shadow:0 14px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.03)}
body[data-theme="light"] .wallet-card{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(224,217,236,.82));border-color:rgba(47,139,108,.16)}
.wallet-balance{font-size:34px;font-weight:850;color:var(--accent);letter-spacing:0}
.wallet-sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6;max-width:680px}
.wallet-grid{display:grid;gap:8px;margin-top:14px}
.wallet-chip{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--toggle-text)}
.wallet-chip:last-child{border-bottom:none}
.wallet-chip strong{color:var(--text);font-size:13px;font-weight:800}
body[data-theme="light"] .wallet-chip strong{color:#17141f}
.support-grid,.beep-pay-grid,.beep-pay-flow{display:grid;gap:10px}
.support-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.beep-pay-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.support-card,.beep-pay-card,.beep-pay-tile{padding:13px 0;border-bottom:1px solid var(--line);background:none;border-radius:0;box-shadow:none;font-size:12px;color:var(--toggle-text);line-height:1.55}
.support-card:last-child,.beep-pay-card:last-child,.beep-pay-tile:last-child{border-bottom:none}
.support-card strong,.beep-pay-card strong,.beep-pay-tile strong{display:block;color:var(--text);font-size:13px;margin-bottom:4px}
body[data-theme="light"] .support-card strong,body[data-theme="light"] .beep-pay-card strong,body[data-theme="light"] .beep-pay-tile strong{color:#17141f}
.support-actions,.beep-pay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.mini-profile-btn{padding:10px 14px;border-radius:12px;background:rgba(125,249,194,.1);color:var(--accent);border:1px solid rgba(125,249,194,.18);font-size:12px;font-weight:800;cursor:pointer}
body[data-theme="light"] .mini-profile-btn{background:rgba(221,214,234,.96);color:#1f6f57;border-color:rgba(47,139,108,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.mini-profile-btn.alt{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--input-border)}
body[data-theme="light"] .mini-profile-btn.alt{background:rgba(224,217,236,.86)}
.beep-pay-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;border-bottom:1px solid rgba(125,249,194,.14);padding-bottom:14px;margin-bottom:14px}
.beep-pay-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(125,249,194,.10);border:1px solid rgba(125,249,194,.18);color:var(--accent);font-size:11px;font-weight:800}
.beep-pay-flow{grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:paystep}
.beep-pay-step{position:relative;padding:12px 12px 12px 34px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--line);font-size:12px;color:var(--toggle-text);line-height:1.5}
.beep-pay-step:before{counter-increment:paystep;content:counter(paystep);position:absolute;left:10px;top:12px;width:16px;height:16px;border-radius:999px;background:var(--accent);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}
body[data-theme="light"] .beep-pay-step{background:rgba(255,255,255,.46);border-color:rgba(90,75,128,.14)}
.beep-pay-step span{display:none}
.beep-pay-earnings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:4px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.beep-pay-stat{padding:12px;background:rgba(255,255,255,.045)}
body[data-theme="light"] .beep-pay-stat{background:rgba(255,255,255,.48)}
.beep-pay-stat-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.beep-pay-stat-value{font-size:20px;font-weight:800;color:var(--text)}
.beep-pay-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:12px}
@media (max-width:430px){
  .beep-pay-flow,.beep-pay-earnings{grid-template-columns:1fr}
}
.update-banner{position:fixed;left:14px;right:14px;top:14px;z-index:60;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(125,249,194,.16),rgba(10,16,18,.96));border:1px solid rgba(125,249,194,.22);box-shadow:0 18px 36px rgba(0,0,0,.28);transform:translateY(-140%);opacity:0;pointer-events:none;transition:transform .28s ease,opacity .28s ease}
.update-banner.show{transform:translateY(0);opacity:1;pointer-events:auto}
.update-banner-copy{flex:1;min-width:0}
.update-banner-title{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:4px}
.update-banner-text{font-size:12px;color:var(--text);line-height:1.55}
.update-banner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.update-banner-dismiss{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 0 0}
body[data-theme="light"] .update-banner{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(224,217,236,.96));border-color:rgba(47,139,108,.18)}
.hidden-chip{background:rgba(255,177,74,.12);color:#ffcf7c;border:1px solid rgba(255,177,74,.22);border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800}
.section-caption{font-size:12px;color:var(--soft);margin:0 20px 12px;line-height:1.6}
.hidden-toggle-wrap{margin:18px 20px 10px}
.hidden-toggle-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:14px;border:1px solid var(--input-border);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-size:13px;font-weight:800}
body[data-theme="light"] .hidden-toggle-btn{background:rgba(221,214,234,.90);border-color:rgba(90,75,128,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36)}
.hidden-toggle-left{display:flex;align-items:center;gap:10px}
.hidden-toggle-count{min-width:22px;height:22px;padding:0 8px;border-radius:999px;background:rgba(255,177,74,.14);border:1px solid rgba(255,177,74,.26);color:#c98b28;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.pin-row{position:relative;margin:0 20px 12px}
.pin-row .profile-input{width:100%;margin:0;padding-right:52px}
.pin-peek{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px}
.attachment-confirm-card{width:100%;max-width:370px;border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(123,99,170,.22),rgba(125,249,194,.10)), #12161d;border:1px solid rgba(125,249,194,.20)}
body[data-theme="light"] .attachment-confirm-card{background:linear-gradient(180deg,rgba(185,171,217,.45),rgba(227,247,238,.92));border-color:rgba(90,75,128,.18)}
.attachment-preview-box{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:12px;margin:14px 0}
.attachment-preview-box img{width:100%;max-height:220px;object-fit:cover;border-radius:14px;display:block;margin-bottom:10px}
.attachment-preview-name{font-size:13px;font-weight:800;color:var(--text)}
.attachment-preview-meta{font-size:11px;color:var(--muted);margin-top:4px}
.attachment-actions{display:flex;gap:10px}
.attachment-bubble-btn{flex:1;border:none;border-radius:999px;padding:12px 14px;font-size:14px;font-weight:800;cursor:pointer}
.attachment-bubble-btn.yes{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text)}
.attachment-bubble-btn.no{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--input-border)}
body[data-theme="light"] .attachment-bubble-btn.no{background:rgba(221,214,234,.90)}
.hidden-pin-grid{display:grid;gap:10px}
.security-note{font-size:12px;color:var(--muted);line-height:1.6;margin:0 20px 12px}
.call-choice-card{width:100%;max-width:320px;border-radius:24px;padding:18px;background:linear-gradient(180deg,rgba(123,99,170,.22),rgba(125,249,194,.10)), #12161d;border:1px solid rgba(125,249,194,.20)}
body[data-theme="light"] .call-choice-card{background:linear-gradient(180deg,rgba(185,171,217,.45),rgba(227,247,238,.92));border-color:rgba(90,75,128,.18)}
.call-choice-actions{display:grid;gap:10px;margin-top:14px}
.call-choice-btn{width:100%;border:none;border-radius:18px;padding:14px 16px;font-size:14px;font-weight:800;cursor:pointer}
.call-choice-btn.voice{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--input-border)}
.call-choice-btn.video{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:var(--accent-text)}
body[data-theme="light"] .call-choice-btn.voice{background:rgba(221,214,234,.90)}
.accordion{margin:0 20px 16px;border-radius:18px;overflow:hidden}
.accordion-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:rgba(255,255,255,.04);border:none;color:var(--text);cursor:pointer;text-align:left;font-size:14px;font-weight:800}
body[data-theme="light"] .accordion-head{background:rgba(221,214,234,.84)}
.accordion-head span:last-child{font-size:16px;color:var(--muted)}
.accordion-body{display:none;padding:0 0 16px}
.accordion.open .accordion-body{display:block}
.accordion.open .accordion-head{border-bottom:1px solid var(--line)}
.deactivate-note{font-size:12px;color:#ffb6b6;line-height:1.7;margin:0 20px 12px}
.deactivate-btn{background:rgba(255,107,107,.10)!important;color:#ff7a7a!important;border-color:rgba(255,107,107,.25)!important}
@media (min-width:1100px){
  body.desktop-web{justify-content:stretch;padding:24px}
  body.desktop-web #app.desktop-shell{
    width:min(1440px,100%);
    max-width:none;
    height:calc(100vh - 48px);
    height:calc(100dvh - 48px);
    display:grid;
    grid-template-columns:minmax(340px,390px) minmax(0,1fr);
    gap:18px;
    align-items:stretch;
  }
  body.desktop-web #app.desktop-shell>.screen{display:none}
  body.desktop-web #app.desktop-shell>.screen.show.desktop-primary,
  body.desktop-web #app.desktop-shell>.screen.show.desktop-secondary{
    display:flex;
    min-height:0;
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    background:linear-gradient(180deg,var(--card-top),var(--card-bottom));
    backdrop-filter:blur(20px);
  }
  body.desktop-web #app.desktop-shell>.screen.show.desktop-primary{grid-column:1}
  body.desktop-web #app.desktop-shell>.screen.show.desktop-secondary{grid-column:2}
  body.desktop-web #app.desktop-shell>#inbox .bottom-nav,
  body.desktop-web #app.desktop-shell>#inbox .fab{display:none}
  body.desktop-web #app.desktop-shell>#inbox .desktop-quick-nav{
    display:flex;
    gap:8px;
    padding:12px 16px 4px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.03);
  }
  body[data-theme="light"].desktop-web #app.desktop-shell>#inbox .desktop-quick-nav{
    background:rgba(111,96,145,.05);
  }
  body.desktop-web #app.desktop-shell>#inbox .desktop-quick-nav .chip-btn{
    padding:8px 12px;
  }
  body.desktop-web #app.desktop-shell>#inbox .desktop-quick-nav .chip-btn.active{
    background:rgba(125,249,194,.14);
    color:var(--accent);
    border-color:rgba(125,249,194,.28);
  }
  body[data-theme="light"].desktop-web #app.desktop-shell>#inbox .desktop-quick-nav .chip-btn.active{
    background:rgba(111,96,145,.14);
    color:#1d6a52;
    border-color:rgba(90,75,128,.28);
  }
  body.desktop-web #app.desktop-shell>#inbox .app-header,
  body.desktop-web #app.desktop-shell>.screen.show.desktop-secondary .chat-header{padding:18px 20px}
  body.desktop-web #app.desktop-shell>#inbox #inbox-list{padding-bottom:24px}
  body.desktop-web #app.desktop-shell>.screen.show.desktop-secondary .back-btn{display:none}
  body.desktop-web #app.desktop-shell>.screen.show.desktop-secondary .desktop-close-chat-btn{display:flex}
  body.desktop-web #app.desktop-shell>#chat.desktop-empty .input-area,
  body.desktop-web #app.desktop-shell>#chat.desktop-empty .emoji-panel{display:none}
  body.desktop-web #app.desktop-shell>#chat.desktop-empty .messages{
    justify-content:center;
    align-items:center;
    padding:36px;
  }
  body.desktop-web #app.desktop-shell>#chat.desktop-empty .auto-delete-notice{display:none}
  body.desktop-web .desktop-chat-placeholder{
    max-width:460px;
    text-align:center;
    padding:28px 24px;
    border-radius:24px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
  }
  body.desktop-web .desktop-chat-placeholder-title{
    font-size:26px;
    font-weight:800;
    color:var(--text);
    margin-bottom:10px;
    letter-spacing:-.4px;
  }
  body.desktop-web .desktop-chat-placeholder-copy{
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
  }
  body.desktop-web .contact-item:hover{background:rgba(255,255,255,.04)}
  body[data-theme="light"].desktop-web .contact-item:hover{background:rgba(111,96,145,.08)}
}

body[data-theme="green"]{--bg-top:#173d31;--bg-mid:#0f231d;--bg-low:#07120f;--bg-base:#030806;--panel:#092019;--text:#f4fff9;--muted:rgba(226,255,240,.72);--soft:rgba(226,255,240,.55);--line:rgba(125,249,194,.16);--card-top:rgba(125,249,194,.09);--card-bottom:rgba(0,0,0,.16);--accent:#8dffd0;--accent-2:#2fc484;--accent-text:#04110b;--input-bg:rgba(125,249,194,.08);--input-border:rgba(125,249,194,.22);--app-header:rgba(5,25,18,.86);--bottom-nav:rgba(5,25,18,.9);--chat-in:rgba(14,48,38,.97);--chat-out-top:#a3ffda;--chat-out-bottom:#38d695;--chat-out-text:#03140d;--toggle-shell:rgba(125,249,194,.1);--toggle-text:#ecfff6}
.chat-taskbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.retention-select{height:34px;border-radius:999px;border:1px solid var(--input-border);background:var(--toggle-shell);color:var(--toggle-text);font-size:12px;font-weight:800;padding:0 8px;max-width:92px}.reply-bar,.typing-indicator{align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:14px;background:var(--toggle-shell);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:800}.reply-bar button{margin-left:auto;border:0;background:transparent;color:var(--text);font-size:18px;cursor:pointer}.typing-indicator span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:beepdot 1s infinite ease-in-out}.typing-indicator span:nth-child(2){animation-delay:.15s}.typing-indicator span:nth-child(3){animation-delay:.3s}@keyframes beepdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}.day-separator{align-self:center;border:1px solid var(--line);background:var(--toggle-shell);color:var(--toggle-text);border-radius:999px;padding:7px 12px;margin:8px 0;font-size:12px;font-weight:900;cursor:pointer}.bubble.folded{display:none}.reply-context{font-size:11px;color:var(--muted);border-left:2px solid var(--accent);padding-left:8px;margin-bottom:6px}.reply-fold{margin:4px 0 8px 20px;max-width:86%;align-self:flex-start;color:var(--muted)}.reply-fold summary{cursor:pointer;font-size:11px;font-weight:900;color:var(--accent);padding:4px 0}.reply-fold-body{display:flex;flex-direction:column;gap:4px}@media(max-width:560px){.chat-header{align-items:flex-start}.chat-title{min-width:0;max-width:42%}.chat-taskbar{max-width:48%;gap:4px}.retention-select{max-width:78px;font-size:11px}.chat-taskbar .chip-btn,.chat-taskbar .theme-icon-btn{width:34px;height:34px;padding:0;justify-content:center}.chat-taskbar .chip-btn.red{font-size:10px}}
.day-separator{position:sticky;top:0;z-index:2;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.reply-context{border-radius:10px;background:rgba(125,249,194,.08);padding:8px 10px;margin-bottom:7px}
.reply-fold{border:1px solid var(--line);border-radius:12px;background:rgba(125,249,194,.05);padding:4px 10px}
.reaction-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.reaction-row button{border:1px solid var(--line);background:var(--toggle-shell);color:var(--toggle-text);border-radius:999px;padding:4px 8px;font-size:11px;font-weight:800;cursor:pointer}
.reaction-row span{font-size:11px;color:var(--muted);font-weight:800}

/* v2.0.9 chat chrome cleanup */
.chat-overflow-btn,.chat-overflow-menu{display:none}
.chat-header{
  background:linear-gradient(115deg,rgba(32,51,43,.94),rgba(73,58,85,.82),rgba(74,54,37,.86),rgba(22,61,48,.92));
  background-size:260% 260%;
  animation:beepaChromeShift 9s ease-in-out infinite;
  border-bottom-color:rgba(141,255,208,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}
body[data-theme="light"] .chat-header{
  background:linear-gradient(115deg,rgba(208,238,221,.94),rgba(220,208,238,.88),rgba(218,199,179,.84),rgba(196,231,213,.92));
  background-size:260% 260%;
}
.bottom-nav{
  background:linear-gradient(115deg,rgba(20,38,31,.96),rgba(58,45,70,.94),rgba(54,40,29,.94),rgba(12,45,34,.96));
  background-size:260% 260%;
  animation:beepaChromeShift 10s ease-in-out infinite;
}
body[data-theme="light"] .bottom-nav{
  background:linear-gradient(115deg,rgba(210,237,223,.96),rgba(222,211,238,.94),rgba(220,201,182,.92),rgba(198,232,214,.96));
  background-size:260% 260%;
}
@keyframes beepaChromeShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.chat-actions .chip-btn.red,.chat-actions .theme-icon-btn{display:none!important}
.chat-actions .desktop-close-chat-btn{display:none}
body.desktop-web .chat-actions .desktop-close-chat-btn{display:flex}
.input-row{
  background:linear-gradient(115deg,rgba(28,49,42,.30),rgba(95,72,111,.20),rgba(97,70,44,.18),rgba(35,96,75,.22));
  background-size:260% 260%;
  animation:beepaChromeShift 11s ease-in-out infinite;
  border:1px solid rgba(141,255,208,.16);
  border-radius:28px;
  padding:6px;
}
.msg-textarea{min-height:50px;max-height:180px}
.input-row .circle-btn{background:rgba(255,255,255,.07)}
@media(max-width:560px){
  .chat-header{align-items:center;gap:8px;padding:8px 12px;position:relative}
  .chat-title{flex:1 1 auto!important;min-width:0!important;max-width:none!important}
  .chat-name,.chat-sub{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .chat-overflow-btn{display:flex;width:36px;height:36px;border-radius:999px;border:1px solid rgba(141,255,208,.20);background:rgba(40,34,48,.34);color:var(--text);align-items:center;justify-content:center;font-size:22px;font-weight:900;flex:0 0 36px}
  .chat-overflow-menu{position:absolute;right:12px;top:58px;z-index:50;min-width:190px;padding:10px;border-radius:18px;background:linear-gradient(135deg,rgba(23,40,34,.98),rgba(67,51,76,.98),rgba(66,48,35,.98));border:1px solid rgba(141,255,208,.20);box-shadow:0 18px 38px rgba(0,0,0,.32);display:none;gap:8px;flex-direction:column}
  .chat-overflow-menu.show{display:flex}
  .chat-overflow-menu .chip-btn,.chat-overflow-menu .retention-select{width:100%!important;max-width:none!important;height:38px!important;justify-content:center}
  .chat-taskbar{width:0!important;max-width:0!important;height:0!important;margin:0!important;padding:0!important;display:block!important;overflow:visible!important}
  .chat-taskbar::-webkit-scrollbar{display:none}
  .chat-taskbar .retention-select,.chat-taskbar .chip-btn:not(:first-of-type),.chat-taskbar .theme-icon-btn,.chat-taskbar .desktop-close-chat-btn{display:none!important}
  .chat-taskbar .chip-btn:first-of-type{display:flex!important;position:fixed;right:16px;bottom:calc(112px + env(safe-area-inset-bottom));z-index:42;width:52px!important;height:52px!important;border-radius:999px!important;padding:0!important;align-items:center;justify-content:center;box-shadow:0 14px 34px rgba(0,0,0,.28)}
  .input-area{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .input-row{align-items:center;border-radius:24px}
  .msg-textarea{min-height:54px;font-size:15px}
  .quick-replies{margin-top:7px}
}
.chat-link{color:var(--accent);font-weight:800;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.chat-link:active,.chat-link:hover{color:var(--accent-2)}
.media-folder-overlay{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5);z-index:80}
.media-folder-overlay.show{display:flex}
.media-folder-panel{width:min(720px,100%);max-height:78vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px}
.media-folder-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--text)}
.media-folder-head button{border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer}
.media-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.media-folder-item{border:1px solid var(--line);background:var(--toggle-shell);color:var(--text);border-radius:12px;overflow:hidden;text-align:left;padding:0}
.media-folder-item button{width:100%;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:0}
.media-folder-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.media-folder-item span,.media-folder-item strong{display:block;padding:8px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-folder-item.file{padding:12px}
.media-folder-actions{display:flex;gap:6px;padding:0 8px 8px}
.media-folder-actions button{border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;text-align:center;background:var(--panel)}
.media-folder-stats{color:var(--muted);font-weight:800}
/* v2.0.9-beta composer repair: keep typing space clear, tools collapsed */
.composer-tools-menu{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px 0;
}
.composer-tools-menu.show{
  display:flex;
}
.composer-tools-menu .circle-btn{
  width:auto;
  min-width:58px;
  height:38px;
  border-radius:999px;
  padding:0 12px;
  font-size:13px;
}
.composer-tools-toggle{
  flex:0 0 44px;
}
.input-row #voice-btn,
.input-row label[for="chat-file-input"],
.input-row button[onclick="sendPleaseBeepMe()"],
.input-row button[onclick="toggleEmojiPanel()"]{
  display:none !important;
}
.input-row .msg-textarea{
  flex:1 1 auto;
  min-width:0;
  min-height:58px;
  max-height:180px;
  line-height:1.35;
  white-space:pre-wrap;
}
.input-row .send-btn{
  flex:0 0 52px;
  width:52px;
  min-width:52px;
}
@media(max-width:700px){
  .input-row{
    gap:8px;
    padding:8px 10px;
  }
  .chat-taskbar .chip-btn:first-of-type{
    position:static !important;
    display:none !important;
  }
  .screen .content{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }
}

.notification-card{
  cursor:pointer;
}
.notification-detail{
  margin-top:8px;
  display:grid;
  gap:8px;
}
.notification-quote,
.notification-reply{
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:14px;
  padding:9px 10px;
  background:color-mix(in srgb,var(--panel) 80%,var(--accent-2) 20%);
  color:var(--text);
}
.notification-reply{
  background:color-mix(in srgb,var(--panel) 78%,var(--accent) 22%);
}
.notification-detail button{
  justify-self:start;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:7px 12px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--text);
  font-weight:800;
}