*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*:focus{outline:none}
*:focus-visible{outline:2px solid rgba(124,90,252,.7);outline-offset:2px;border-radius:4px}
[data-theme="light"] *:focus-visible{outline-color:rgba(90,72,200,.65)}
:root{
  --bg:       #07070f;
  --s1:       #0d0d1c;
  --s2:       #12122a;
  --s3:       #181830;
  --s4:       #1f1f3a;
  --border:   rgba(255,255,255,.07);
  --border2:  rgba(124,90,252,.18);
  --accent:   #7c5afc;
  --accent-h: #9478ff;
  --glow:     rgba(124,90,252,.25);
  --grad:     linear-gradient(135deg,#7c5afc 0%,#b47aff 100%);
  --t1:       #eeeef2;
  --t2:       #8888a8;
  --t3:       #6a6a90;
  --green:    #3dd68c;
  --red:      #f87171;
  --radius:   16px;
  --radius-lg:22px;
  --tr:       .18s cubic-bezier(.4,0,.2,1);
  --font:     -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --glass:    rgba(8,8,18,.38);
  --glass2:   rgba(14,14,32,.48);
  --glass-hi: rgba(255,255,255,.09);
  --blur:     blur(44px) saturate(220%) brightness(1.04);
}
[data-theme="light"]{
  --bg:       #eef0f8;
  --s1:       rgba(255,255,255,.82);
  --s2:       rgba(245,246,251,.9);
  --s3:       rgba(236,238,246,.85);
  --s4:       rgba(226,229,240,.9);
  --border:   rgba(0,0,0,.08);
  --border2:  rgba(90,72,200,.18);
  --accent:   #5a48c8;
  --accent-h: #7060e0;
  --glow:     rgba(90,72,200,.2);
  --grad:     linear-gradient(135deg,#5a48c8 0%,#8b78f5 100%);
  --t1:       #1a1a2e;
  --t2:       #555580;
  --t3:       #a0a0c0;
  --green:    #18a06a;
  --red:      #e04040;
  --glass:    rgba(255,255,255,.42);
  --glass2:   rgba(255,255,255,.52);
  --glass-hi: rgba(255,255,255,.6);
}
[data-theme="dracula-mint"]{
  --bg:       #13141f;
  --s1:       #1e1f2e;
  --s2:       #24253a;
  --s3:       #2a2b42;
  --s4:       #303250;
  --border:   rgba(255,255,255,.07);
  --border2:  rgba(62,210,130,.22);
  --accent:   #2ec07a;
  --accent-h: #38d48a;
  --glow:     rgba(46,192,122,.22);
  --grad:     linear-gradient(135deg,#2ec07a 0%,#5dd8c8 100%);
  --t1:       #f8f8f2;
  --t2:       #8292a2;
  --t3:       #6a6d82;
  --green:    #2ec07a;
  --red:      #ff5555;
  --glass:    rgba(16,17,28,.4);
  --glass2:   rgba(24,25,40,.5);
  --glass-hi: rgba(255,255,255,.07);
}
html{height:100%;overflow:hidden;touch-action:manipulation;background-color:var(--bg)}
body{height:100%;width:100%;position:fixed;overflow:hidden;overscroll-behavior:none;font-family:var(--font);background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;touch-action:manipulation}
input,textarea,select,button{-webkit-tap-highlight-color:transparent}
input::-webkit-validation-bubble{display:none!important}
input::-webkit-validation-bubble-message{display:none!important}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 30% 0%,rgba(124,90,252,.07),transparent 60%),radial-gradient(ellipse 60% 60% at 80% 100%,rgba(124,90,252,.04),transparent 60%);pointer-events:none;z-index:0}
#app{height:100%;position:relative;z-index:1}
::selection{background:rgba(124,90,252,.28)}
input,button,textarea{font-family:var(--font)}
button,a{touch-action:manipulation;user-select:none;-webkit-user-select:none}
svg{flex-shrink:0}

.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;transform:translateY(6px)}
.screen.active{opacity:1;pointer-events:auto;transform:translateY(0)}

#screen-auth{background:var(--bg);display:flex;align-items:center;justify-content:center;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
#screen-auth::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(124,90,252,.13) 0%,transparent 70%);pointer-events:none}
#screen-auth::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 40% at 20% 80%,rgba(98,214,147,.05) 0%,transparent 60%);pointer-events:none}

.auth-wrap{width:100%;max-width:370px;padding:32px 28px 28px;background:rgba(255,255,255,.07);backdrop-filter:blur(60px) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(60px) saturate(200%) brightness(1.08);border:1px solid rgba(255,255,255,.15);border-radius:32px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 40px 100px rgba(0,0,0,.45),0 8px 32px rgba(0,0,0,.25);position:relative;overflow:hidden;margin:16px}
.auth-wrap::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 50%);pointer-events:none;z-index:0}
.auth-wrap::after{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);z-index:0}
.auth-wrap>*{position:relative;z-index:1}

.auth-icon{width:56px;height:56px;margin:0 auto 24px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 8px rgba(124,90,252,.12),0 16px 48px var(--glow);user-select:none;-webkit-user-select:none}

.float-field{position:relative;margin-bottom:10px}
.float-field input{width:100%;padding:22px 14px 8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;color:var(--t1);font-size:14px;outline:none;transition:border-color var(--tr),box-shadow var(--tr),background var(--tr);box-sizing:border-box}
.float-field input::placeholder{color:transparent}
.pw-field input{padding-right:42px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;display:flex;align-items:center;transition:color var(--tr)}
.pw-eye:hover{color:var(--t1)}
.pw-gen-row{display:flex;gap:8px;margin-bottom:10px}
.btn-gen-pw{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;padding:9px 16px!important;font-size:12.5px!important;font-weight:500!important;cursor:pointer;border:none;color:rgba(255,255,255,.75)!important;white-space:nowrap;flex-shrink:0;width:auto!important;height:auto!important;border-radius:99px!important;background:rgba(255,255,255,.09)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.15)!important}
.btn-gen-pw:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.float-field input:focus{border-color:rgba(124,90,252,.55);box-shadow:0 0 0 3px rgba(124,90,252,.12);background:rgba(255,255,255,.1)}
.float-field label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:rgba(255,255,255,.45);pointer-events:none;transition:all .18s ease;transform-origin:left top;white-space:nowrap}
.float-field input:focus~label,.float-field input:not(:placeholder-shown)~label{top:10px;transform:translateY(0) scale(.78);color:rgba(124,90,252,.8);font-weight:500}
[data-theme="light"] .float-field input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .float-field input:focus{background:rgba(0,0,0,.06);border-color:rgba(90,72,200,.45)}
[data-theme="light"] .float-field label{color:rgba(0,0,0,.45)}
[data-theme="light"] .btn-gen-pw{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.12)!important;color:rgba(0,0,0,.65)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(0,0,0,.06)!important}
[data-theme="light"] .btn-gen-pw:hover{background:rgba(0,0,0,.1)!important;color:rgba(0,0,0,.85)!important}
[data-theme="light"] .float-field input:focus~label,[data-theme="light"] .float-field input:not(:placeholder-shown)~label{color:rgba(90,72,200,.75)}

.tabs{display:flex;gap:3px;padding:4px;background:rgba(255,255,255,.05);border-radius:12px;border:1px solid var(--border);margin-bottom:20px}
.tab{flex:1;padding:9px 12px;border:none;background:none;color:rgba(255,255,255,.5);font-size:13.5px;font-weight:500;cursor:pointer;border-radius:9px;transition:all var(--tr)}
[data-theme="light"] .tab{color:rgba(0,0,0,.45)}
.tab.active{background:rgba(255,255,255,.1);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.tab-content{display:none}.tab-content.active{display:flex;flex-direction:column;gap:10px}

.field input{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:12px;color:var(--t1);font-size:14px;outline:none;transition:border-color var(--tr),box-shadow var(--tr),background var(--tr)}
.field input:focus{border-color:rgba(124,90,252,.5);box-shadow:0 0 0 3px rgba(124,90,252,.1);background:rgba(255,255,255,.09)}
.field input::placeholder{color:var(--t3)}
.field-error{color:var(--red);font-size:12.5px;min-height:16px;text-align:center;margin-top:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--tr);user-select:none;letter-spacing:.01em}
.btn-primary{width:100%;background:var(--grad);color:#fff;box-shadow:0 4px 20px var(--glow);margin-top:4px}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px var(--glow)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 10px var(--glow)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--t2);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,.09);color:var(--t1)}
.btn-danger{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.btn-danger:hover{background:rgba(248,113,113,.18)}
.btn-icon-sm{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--t2);border-radius:10px;cursor:pointer;transition:all var(--tr);flex-shrink:0}
.btn-icon-sm:hover{background:rgba(255,255,255,.08);color:var(--t1)}
.btn-icon-sm:active{background:rgba(255,255,255,.05)}
.sidebar-actions .btn-icon-sm{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.08),0 2px 12px rgba(0,0,0,.18);position:relative;overflow:hidden}
.sidebar-actions .btn-icon-sm::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,transparent 50%);pointer-events:none;border-radius:inherit}
.sidebar-actions .btn-icon-sm svg{position:relative;z-index:1}
.sidebar-actions .btn-icon-sm:active{transform:scale(.92);background:rgba(255,255,255,.18);color:rgba(255,255,255,.75)}
[data-theme="light"] .sidebar-actions .btn-icon-sm{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 8px rgba(0,0,0,.07)}
[data-theme="light"] .sidebar-actions .btn-icon-sm:active{background:rgba(0,0,0,.1);color:rgba(0,0,0,.65)}

#screen-messenger{align-items:stretch;justify-content:stretch}

.messenger{display:flex;height:100%;width:100%;overflow:hidden}

.sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid rgba(255,255,255,.08);position:relative;overflow:clip}
[data-theme="light"] .sidebar{border-right-color:rgba(0,0,0,.1)}
[data-theme="light"] .sidebar-notice{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
.sidebar-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--s4) transparent}
.sidebar-body::-webkit-scrollbar{width:3px}.sidebar-body::-webkit-scrollbar-thumb{background:var(--s4);border-radius:4px}
.sidebar::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.06) 0%,transparent 50%);pointer-events:none;z-index:0}
.sidebar>*{position:relative;z-index:1}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 14px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;user-select:none;-webkit-user-select:none}
.sidebar-notice{flex-shrink:0;margin:10px 12px 12px;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sidebar-notice span{display:block;font-size:11.5px;line-height:1.5;color:var(--t2);font-style:italic;text-align:center;user-select:none;-webkit-user-select:none}
.sidebar-brand{font-size:16px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.2px;user-select:none;-webkit-user-select:none}
.sidebar-brand-icon{width:34px;height:34px;flex-shrink:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sidebar-brand-icon img{width:34px;height:34px;display:block;border-radius:9px;object-fit:cover;pointer-events:none}
.sidebar-actions{display:flex;gap:8px}

.settings-panel{background:rgba(255,255,255,.02);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.06);padding:12px 16px;display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.settings-id-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.08);border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.settings-id-label{font-size:10px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.7px;flex-shrink:0}
.settings-id-value{font-size:10.5px;color:rgba(160,130,255,.95);font-family:'SF Mono',ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.btn-copy-sm{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:rgba(255,255,255,.14);color:rgba(255,255,255,.7);border-radius:6px;cursor:pointer;transition:all var(--tr);flex-shrink:0}
.btn-copy-sm:hover{background:var(--accent);color:#fff}
.settings-theme-row{display:flex;gap:8px;padding:2px 0 6px}
.theme-card{flex:1;border:1.5px solid var(--border);border-radius:14px;padding:0 0 8px;background:rgba(255,255,255,.04);cursor:pointer;transition:all var(--tr);overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:7px}
.theme-card:hover{transform:scale(1.04);background:rgba(255,255,255,.07)}
.theme-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 4px 16px var(--glow)}
.theme-card span{font-size:11px;color:var(--t2);font-weight:500;pointer-events:none}
.theme-card.active span{color:var(--accent)}
.theme-preview{width:100%;height:34px;display:flex;overflow:hidden;border-radius:10px 10px 0 0;pointer-events:none}
.tp-left{width:38%;height:100%}
.tp-right{flex:1;height:100%}
.theme-card-default .tp-left{background:#0d0d1c}
.theme-card-default .tp-right{background:#07070f}
.theme-card-light .tp-left{background:#fff}
.theme-card-light .tp-right{background:#eef0f8}
.theme-card-mint .tp-left{background:#1e1f2e}
.theme-card-mint .tp-right{background:#13141f}
[data-theme="light"] .theme-card{border-color:rgba(0,0,0,.12)}
[data-theme="light"] .theme-card-mint{border-color:rgba(30,31,46,.3)}
.settings-actions{display:flex;flex-direction:column;gap:2px}
.settings-btn{display:flex;align-items:center;gap:9px;padding:9px 10px;border:none;background:none;color:var(--t1);font-size:13px;font-weight:500;cursor:pointer;border-radius:10px;transition:all var(--tr);text-align:left;width:100%}
.settings-btn-danger{color:var(--red)}
@media(hover:hover){
  .settings-btn:hover{background:rgba(255,255,255,.07);color:var(--t1)}
  .settings-btn-danger:hover{background:rgba(248,113,113,.08);color:var(--red)}
  [data-theme="light"] .settings-btn:hover{background:rgba(0,0,0,.05)}
  .conv-item:hover{background:rgba(255,255,255,.05)}
  [data-theme="light"] .conv-item:hover{background:rgba(0,0,0,.04)}
}

.requests-section{border-bottom:1px solid var(--border);flex-shrink:0}
.section-label{display:flex;align-items:center;gap:8px;padding:8px 16px;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;user-select:none;-webkit-user-select:none}
.req-badge{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;line-height:1.4}
.request-item{display:flex;align-items:center;gap:10px;padding:8px 16px}
.request-avatar{width:32px;height:32px;border-radius:50%;background:var(--s3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:rgba(124,90,252,.9);text-transform:uppercase;flex-shrink:0}
.request-name{flex:1;font-size:13.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.request-actions{display:flex;gap:4px}
.btn-accept,.btn-reject{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:7px;cursor:pointer;transition:all var(--tr);font-size:14px;font-weight:700}
.btn-accept{background:rgba(61,214,140,.12);color:var(--green)}.btn-accept:hover{background:rgba(61,214,140,.22)}
.btn-reject{background:rgba(248,113,113,.1);color:var(--red)}.btn-reject:hover{background:rgba(248,113,113,.2)}

.conv-list{flex:1;scrollbar-width:thin;scrollbar-color:var(--s4) transparent}
.conv-list::-webkit-scrollbar{width:3px}.conv-list::-webkit-scrollbar-thumb{background:var(--s4);border-radius:4px}
.empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100px;gap:6px;color:var(--t3);font-size:13px}
.conv-wrap{position:relative;overflow:hidden}
.conv-item-pin-reveal{position:absolute;left:0;top:0;bottom:0;width:72px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(124,90,252,.9),rgba(90,56,220,.95));transform:translateX(-72px);transition:none;pointer-events:none;z-index:0}
.conv-item-pin-reveal svg{color:#fff}
.conv-item{display:flex;align-items:center;gap:11px;padding:11px 16px;cursor:pointer;transition:background var(--tr),transform .22s cubic-bezier(.25,1,.5,1);position:relative;user-select:none;z-index:1;background:transparent}
.conv-item.active{background:rgba(124,90,252,.1)}
.conv-time-row{display:flex;align-items:center;gap:4px}
.conv-pin-inline{color:var(--accent);opacity:.8;line-height:0;flex-shrink:0;display:inline-flex;align-items:center}
.conv-pin-only{opacity:.65}
.conv-pin-separator{height:1px;background:rgba(255,255,255,.06);margin:0}
[data-theme="light"] .conv-pin-separator{background:rgba(0,0,0,.06)}
.conv-ctx-menu{position:fixed;z-index:9999;min-width:150px;border-radius:14px;overflow:hidden;background:rgba(28,24,48,.95);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.1);animation:fadeIn .1s ease;user-select:none}
.conv-ctx-item{display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:13.5px;color:rgba(255,255,255,.85);cursor:pointer;transition:background .12s;white-space:nowrap}
.conv-ctx-item:hover{background:rgba(255,255,255,.08)}
.conv-ctx-item:active{background:rgba(255,255,255,.14)}
[data-theme="light"] .conv-ctx-menu{background:rgba(248,248,252,.97);border-color:rgba(0,0,0,.1);box-shadow:0 8px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.9)}
[data-theme="light"] .conv-ctx-item{color:rgba(0,0,0,.8)}
[data-theme="light"] .conv-ctx-item:hover{background:rgba(0,0,0,.05)}
.conv-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--s3),var(--s4));display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:rgba(180,150,255,.85);flex-shrink:0;text-transform:uppercase;border:1px solid var(--border)}
.conv-avatar-group{border-radius:14px;background:linear-gradient(135deg,rgba(124,90,252,.2),rgba(124,90,252,.08))}
.conv-info{flex:1;min-width:0}
.conv-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1);user-select:none;-webkit-user-select:none}
.conv-preview{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;user-select:none;-webkit-user-select:none}
.conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.conv-time{font-size:11px;color:var(--t3);user-select:none;-webkit-user-select:none}
.unread-badge{min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.online-dot{position:absolute;left:46px;bottom:10px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--s1);box-shadow:0 0 6px rgba(61,214,140,.5)}

.chat-area{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0;position:relative;overflow:hidden}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t3)}
.chat-empty-icon{width:64px;height:64px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;margin-bottom:4px;opacity:.5}
.chat-empty p{font-size:14px}
.chat-active{display:flex;flex-direction:column;height:100%;position:relative}

.chat-header{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:8px 12px 10px;background:transparent;border:none;z-index:20;gap:8px}

.glass-pill{display:flex;align-items:center;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);border:1px solid rgba(255,255,255,.18);border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 4px 28px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.08);position:relative;overflow:hidden;flex-shrink:0}
.glass-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,transparent 50%);pointer-events:none;border-radius:inherit;z-index:0}
.glass-pill>*{position:relative;z-index:1}

.glass-pill-btn{width:40px;height:40px;justify-content:center;border:none;cursor:pointer;color:rgba(255,255,255,.85);transition:background var(--tr);padding:0;touch-action:manipulation;-webkit-text-fill-color:initial}
.glass-pill-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.glass-pill-btn:active{background:rgba(255,255,255,.2)}
.back-btn{display:none}

.chat-name-pill{padding:8px 18px;flex-direction:column;gap:1px;align-items:center;position:absolute;left:50%;transform:translateX(-50%);max-width:55vw;user-select:none;-webkit-user-select:none}
.chat-name-pill h3{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;color:var(--t1)}
.status-text{font-size:10.5px;color:rgba(255,255,255,.45);line-height:1;display:block;user-select:none;-webkit-user-select:none}
.status-text.online{color:var(--green)}
.status-text.typing{color:rgba(255,255,255,.7);animation:typing-pulse 1.2s ease-in-out infinite}
.status-text.reconnecting{color:rgba(180,160,255,.8);animation:typing-pulse 1.2s ease-in-out infinite}

.chat-actions-pill{padding:4px 6px;gap:0;margin-left:auto}
.glass-icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:rgba(255,255,255,.75);border-radius:99px;cursor:pointer;transition:all var(--tr);flex-shrink:0;touch-action:manipulation;-webkit-text-fill-color:initial}
.glass-icon-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.glass-icon-btn:active{background:rgba(255,255,255,.22)}
.btn-call-start{color:var(--green)!important}
.btn-call-start.in-call{color:var(--red)!important;animation:callRing2 1s ease infinite}

.messages-area{flex:1;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 68px) 14px 84px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin;scrollbar-color:var(--s3) transparent;position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow-anchor:none}
.messages-area::-webkit-scrollbar{width:3px}.messages-area::-webkit-scrollbar-thumb{background:var(--s3);border-radius:4px}

.msg-spacer{flex:1;min-height:0}

.msg{max-width:68%;padding:9px 13px;font-size:14px;line-height:1.55;word-break:break-word;overflow-wrap:break-word;transition:transform .15s ease, filter .2s ease, opacity .2s ease;touch-action:manipulation;position:relative;user-select:none;-webkit-user-select:none}
.msg.msg-new{animation:msgIn .24s cubic-bezier(.4,0,.2,1)}
.msg.pressing{transform:scale(.93)!important;transition:transform .45s cubic-bezier(.25,.46,.45,.94)!important}
.messages-area.msg-selected .msg,.messages-area.msg-selected .msg-date-sep,.messages-area.msg-selected .msg-system{filter:blur(6px);opacity:.4;pointer-events:none;user-select:none;-webkit-user-select:none;transition:filter .18s ease,opacity .18s ease}
.messages-area.msg-selected .msg.ctx-selected{filter:none;opacity:1;pointer-events:auto;user-select:text;-webkit-user-select:text;z-index:250;position:relative;touch-action:manipulation}
#chat-active.msg-ctx-active .chat-header{filter:blur(5px);opacity:.45;pointer-events:none;transition:filter .18s ease,opacity .18s ease}
#chat-active.msg-ctx-active .chat-footer{filter:blur(5px);opacity:.45;pointer-events:none;transition:filter .18s ease,opacity .18s ease}
#chat-active.msg-ctx-active .reply-bar{filter:blur(5px);opacity:.45;pointer-events:none;transition:filter .18s ease,opacity .18s ease}
#chat-active.msg-ctx-active #btn-scroll-down{display:none}
#msg-ctx-overlay{position:fixed;inset:0;z-index:200;background:transparent}
#msg-ctx-overlay.hidden{display:none}
.msg img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none;display:block}
.img-tap-wrap{display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer}
.msg-ctx-btn{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes chatEnter{from{transform:translateX(30px)}to{transform:none}}
@keyframes chatLeave{from{transform:none}to{transform:translateX(100%)}}
@media(max-width:640px){.chat-entering{animation:chatEnter .22s cubic-bezier(.4,0,.2,1) both}.chat-leaving{animation:chatLeave .2s cubic-bezier(.4,0,1,1) both}}
@keyframes convItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.conv-item.conv-item-in{animation:convItemIn .22s cubic-bezier(.4,0,.2,1) both}

.msg-own{
  align-self:flex-end;
  background:rgba(124,90,252,.16);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(124,90,252,.22);
  border-top:1px solid rgba(180,150,255,.2);
  border-radius:18px 18px 5px 18px;
  color:var(--t1);
  box-shadow:inset 0 1px 0 rgba(180,150,255,.14),0 4px 16px rgba(124,90,252,.08);
}

.msg-other{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.12);
  border-radius:18px 18px 18px 5px;
  color:var(--t1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.08);
}

.msg-own.chain-mid  {border-radius:18px 5px 5px 18px;margin-top:2px}
.msg-own.chain-last {border-radius:18px 5px 18px 18px;margin-top:2px}
.msg-other.chain-mid  {border-radius:5px 18px 18px 5px;margin-top:2px}
.msg-other.chain-last {border-radius:5px 18px 18px 18px;margin-top:2px}

.msg-system{align-self:center;font-size:11.5px;color:var(--t3);padding:4px 12px;background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:99px;border:1px solid var(--border);margin:4px 0}
.msg-date-sep{align-self:center;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);padding:5px 14px;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);border-radius:99px;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 4px 28px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.08);margin:10px 0 6px;position:relative;overflow:hidden;flex-shrink:0;user-select:none;-webkit-user-select:none;letter-spacing:.01em}
.msg-date-sep::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,transparent 50%);pointer-events:none;border-radius:inherit;z-index:0}
.msg-date-sep span{position:relative;z-index:1}
[data-theme="light"] .msg-date-sep{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.08)}
[data-theme="light"] .msg-date-sep::before{background:linear-gradient(140deg,rgba(255,255,255,.75) 0%,transparent 55%)}

.msg-sender{font-size:11.5px;font-weight:600;color:rgba(180,150,255,.8);margin-bottom:3px}

.msg-text{white-space:pre-wrap}
.msg-time{font-size:10.5px;color:var(--t3);margin-top:4px;text-align:right;opacity:.7;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:flex-end;gap:3px}
.msg-own .msg-time{color:rgba(196,181,253,.5)}
.msg-tick{display:inline-flex;align-items:center;flex-shrink:0;opacity:.6}
.msg-tick.read{color:#62d693;opacity:1}

.msg-image{max-width:280px;max-height:320px;border-radius:10px;display:block;cursor:pointer;object-fit:cover;transition:opacity var(--tr)}
.msg-image:hover{opacity:.88}

.msg-reply-quote{padding:5px 10px;margin-bottom:6px;border-left:2px solid var(--accent);background:rgba(124,90,252,.07);border-radius:0 8px 8px 0;cursor:pointer;font-size:12.5px}
.rq-sender{font-weight:600;color:rgba(180,150,255,.8);display:block;margin-bottom:2px;font-size:12px}
.rq-text{color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.msg-link{color:rgba(180,150,255,.9);text-decoration:underline;text-decoration-color:rgba(180,150,255,.3);text-underline-offset:2px;word-break:break-all;transition:color var(--tr),text-decoration-color var(--tr)}
.msg-link:hover{color:#c4b5fd;text-decoration-color:rgba(196,181,253,.6)}

.typing-indicator{position:sticky;bottom:4px;align-self:flex-start;pointer-events:none;z-index:2;margin-top:4px}
.typing-indicator.hidden{display:none}
.typing-bubble{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;background:var(--glass2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border);border-radius:18px;font-size:12px;color:var(--t2);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.typing-dots{display:flex;gap:4px;align-items:center}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--t3);animation:bounce .9s ease infinite}
.typing-dots span:nth-child(2){animation-delay:.18s}
.typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes typing-pulse{0%,100%{opacity:.7}50%{opacity:1}}

.reply-bar{user-select:none;-webkit-user-select:none;position:absolute;bottom:80px;left:12px;right:12px;display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(18,10,36,.72);backdrop-filter:blur(32px) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(32px) saturate(200%) brightness(1.08);border:1px solid rgba(124,90,252,.28);border-radius:20px;z-index:9;box-shadow:0 8px 32px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12)}
.reply-bar.hidden{display:none}
.reply-bar.hidden{display:none}
.reply-bar-accent{width:3px;height:36px;background:var(--accent);border-radius:3px;flex-shrink:0}
.reply-preview{flex:1;min-width:0}
.reply-sender{font-size:12px;font-weight:600;color:rgba(180,150,255,.9);display:block}
.reply-text{font-size:12px;color:var(--t2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chat-footer{position:absolute;bottom:0;left:0;right:0;padding:8px 12px 16px;background:transparent;border:none;box-shadow:none;z-index:10}
.footer-row{display:flex;align-items:flex-end;gap:8px;background:transparent;border:none;padding:0;overflow:visible}
.footer-row.hidden{display:none}
.attach-preview{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:8px 12px;border-radius:18px;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(44px) saturate(200%) brightness(1.08);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 18px rgba(0,0,0,.18);position:relative;overflow:hidden;animation:attach-in .22s cubic-bezier(.34,1.56,.64,1)}
.attach-preview::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 60%);pointer-events:none;border-radius:inherit}
.attach-preview.hidden{display:none}
@keyframes attach-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.attach-preview-thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6)}
.attach-preview-thumb img{width:100%;height:100%;object-fit:cover}
.attach-preview-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attach-preview-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach-preview-size{font-size:11px;color:var(--text-secondary)}
.attach-preview-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.65);cursor:pointer;flex-shrink:0;transition:background .15s;touch-action:manipulation}
.attach-preview-close:hover{background:rgba(255,255,255,.22)}

.footer-pill-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.18);color:rgba(255,255,255,.65);cursor:pointer;transition:all var(--tr);touch-action:manipulation;position:relative;overflow:hidden}
.footer-pill-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.15) 0%,transparent 55%);pointer-events:none;border-radius:inherit}
.footer-pill-btn svg{position:relative;z-index:1}
.footer-pill-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.footer-pill-btn:active{background:rgba(255,255,255,.22);transform:scale(.95)}

.footer-pill-send{background:var(--grad);border-color:rgba(124,90,252,.3);color:#fff;box-shadow:none}
.footer-pill-send:hover{transform:scale(1.06)}
.footer-pill-send:active{transform:scale(.95)}
.footer-pill-send:disabled{opacity:.35;cursor:not-allowed;transform:none;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);box-shadow:none}

.btn-mic-active{background:rgba(248,113,113,.18)!important;border-color:rgba(248,113,113,.3)!important;color:var(--red)!important}

.input-wrap{flex:1;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);border:1px solid rgba(255,255,255,.18);border-radius:28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.18);position:relative;overflow:hidden;transition:border-color var(--tr),box-shadow var(--tr)}
.input-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.12) 0%,transparent 55%);pointer-events:none;border-radius:inherit}
.input-wrap:focus-within{border-color:rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.18)}
#input-message{display:block;width:100%;padding:10px 16px;background:none;border:none;color:var(--t1);font-size:15px;outline:none;resize:none;overflow-y:auto;-webkit-overflow-scrolling:touch;line-height:1.5;min-height:44px;max-height:200px;box-sizing:border-box;font-family:inherit;transition:height .08s ease;position:relative;z-index:1}
#input-message::placeholder{color:rgba(255,255,255,.3)}

.footer-recording{align-items:center}
.footer-rec-pill{display:flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);border:1px solid rgba(255,255,255,.18);border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 20px rgba(0,0,0,.18);position:relative;overflow:hidden}
.footer-rec-pill::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.12) 0%,transparent 55%);pointer-events:none}
.rec-pulse{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0;animation:recPulse 1s ease infinite}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.rec-label{font-size:13px;color:var(--red);font-weight:500}
.rec-timer{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums;min-width:32px}

.voice-msg{display:flex;align-items:center;gap:10px;min-width:210px;max-width:290px;padding:4px 2px}
.voice-play{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all var(--tr);position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 10px rgba(0,0,0,.2)}
.voice-play::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.18) 0%,transparent 55%);border-radius:inherit;pointer-events:none}
.voice-play svg{position:relative;z-index:1}
.voice-play:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.voice-play:active{transform:scale(.92)}
.msg-other .voice-play{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}

.voice-progress{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.voice-wave{display:flex;align-items:center;gap:2px;height:32px;cursor:pointer;padding:2px 0}
.voice-bar{flex:1;border-radius:2px;background:rgba(255,255,255,.22);transition:background .08s linear;min-width:2px;max-width:4px}
.voice-bar.active{background:rgba(255,255,255,.85)}
.msg-other .voice-bar{background:rgba(255,255,255,.15)}
.msg-other .voice-bar.active{background:rgba(255,255,255,.65)}
.voice-dur{font-size:11px;color:rgba(255,255,255,.38);font-variant-numeric:tabular-nums;line-height:1;padding:0;margin-top:2px}
.msg-other .voice-dur{color:rgba(255,255,255,.35)}

.file-attach{display:flex;align-items:center;gap:10px;min-width:180px;max-width:260px;padding:2px 0}
.file-attach.file-attach-video{min-width:unset;max-width:unset}
.file-attach.file-attach-video{display:inline-block;padding:0;vertical-align:top}
.video-thumb-wrap{position:relative;cursor:pointer;border-radius:inherit;overflow:hidden;background:#111;width:240px;height:135px}
.video-thumb-canvas{display:block}
.msg.msg-has-video{padding:0;overflow:hidden;display:inline-flex;flex-shrink:0;align-self:flex-end}
.msg.msg-has-video.msg-other{align-self:flex-start}
.msg.msg-has-video .msg-time{position:absolute;bottom:6px;right:8px;margin:0;background:rgba(0,0,0,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:8px;padding:2px 7px;color:rgba(255,255,255,.9)!important;opacity:1!important}
.msg.msg-has-video .msg-tick{color:rgba(255,255,255,.75)!important}
.msg.msg-has-video .msg-tick.read{color:#62d693!important;opacity:1!important}
.file-attach.file-attach-video{flex-shrink:0}
.video-thumb-wrap{flex-shrink:0}
.video-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.video-play-btn{width:54px;height:54px;border-radius:50%;background:rgba(0,0,0,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.35);padding-left:3px}
.video-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center}
.video-modal.hidden{display:none}
.video-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.92)}
.video-modal-player{position:relative;z-index:1;max-width:92vw;max-height:82vh;border-radius:12px;outline:none}
.video-modal-close{position:absolute;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.file-icon-box{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.msg-own .file-icon-box{background:rgba(255,255,255,.12)}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.file-size{font-size:11px;color:var(--t3);margin-top:2px}
.msg-own .file-size{color:rgba(255,255,255,.4)}
.file-dl{width:30px;height:30px;border-radius:8px;border:none;background:rgba(255,255,255,.08);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr);flex-shrink:0}
.file-dl:hover{background:var(--accent);color:#fff;transform:scale(1.05)}
.msg-own .file-dl{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.msg-own .file-dl:hover{background:rgba(255,255,255,.28);color:#fff}

.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(4,4,10,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(env(safe-area-inset-bottom, 0px) + 20px);z-index:100;animation:fadeIn .15s ease}
@media (min-height:500px){.modal-overlay{align-items:center;padding:20px}}
.modal-overlay.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--glass2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:20px;width:100%;max-width:380px;max-height:calc(100svh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch;animation:slideUp .15s ease;box-shadow:0 32px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);position:relative}
.modal::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 55%);pointer-events:none}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-sm{max-width:300px}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-header h3{font-size:16px;font-weight:600}
.modal-desc{font-size:13px;color:var(--t2);margin-bottom:12px}
.modal .field{margin-bottom:10px}
.confirm-text{font-size:14px;color:var(--t2);line-height:1.5;margin-bottom:18px;text-align:center;padding-top:4px}
.modal-actions{display:flex;gap:8px;justify-content:center}
.modal-actions .btn{min-width:88px;flex:1;max-width:160px}

.member-checks{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow-y:auto;margin-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
.member-check{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;cursor:pointer;transition:background var(--tr)}
.member-check:hover{background:rgba(255,255,255,.07)}
.member-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.member-check span{font-size:13.5px;font-weight:500}

.members-list{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--s3) transparent}
.member-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-radius:10px;transition:background var(--tr)}
.member-row:hover{background:rgba(255,255,255,.07)}
.member-av{width:32px;height:32px;border-radius:50%;background:var(--s4);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:rgba(180,150,255,.8);text-transform:uppercase;flex-shrink:0}
.member-name{flex:1;font-size:13.5px;font-weight:500}
.member-role{font-size:11px;color:rgba(124,90,252,.8);background:rgba(124,90,252,.1);padding:2px 8px;border-radius:99px;border:1px solid rgba(124,90,252,.2)}
.btn-kick{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:rgba(248,113,113,.1);color:var(--red);border-radius:7px;cursor:pointer;transition:all var(--tr);font-size:12px;font-weight:700}
.btn-kick:hover{background:rgba(248,113,113,.22)}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:200;cursor:zoom-out;animation:fadeIn .15s ease;touch-action:none;user-select:none;-webkit-user-select:none}
.lightbox.hidden{display:none}
.lightbox img{max-width:94vw;max-height:94vh;border-radius:var(--radius);object-fit:contain;box-shadow:0 0 60px rgba(0,0,0,.8);transform-origin:center center;will-change:transform;touch-action:none;cursor:zoom-in}

.call-overlay{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,#1a0a3a 0%,#0d0720 45%,#07050f 100%);animation:fadeIn .25s ease;overflow:hidden}
.call-overlay.hidden{display:none}
.call-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 55% at 50% 15%,rgba(124,90,252,.25) 0%,transparent 70%);pointer-events:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.call-fs-top{display:flex;flex-direction:column;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 60px) 24px 0;flex:1;justify-content:center;position:relative}
.call-fs-bottom{padding:0 40px calc(env(safe-area-inset-bottom,0px) + 52px);display:flex;flex-direction:column;align-items:center}
.call-fs-btn-wrap{display:flex;gap:32px;align-items:center;justify-content:center}

.call-avatar{width:100px;height:100px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;color:#fff;text-transform:uppercase;box-shadow:0 0 0 10px rgba(124,90,252,.12),0 0 0 20px rgba(124,90,252,.06),0 20px 56px var(--glow)}
.call-name{font-size:30px;font-weight:700;color:#fff;letter-spacing:-.4px;text-align:center;margin-top:8px}
.call-label{font-size:15px;color:rgba(255,255,255,.5);text-align:center}
.call-timer{font-size:22px;font-weight:300;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums;letter-spacing:.5px;min-height:30px;line-height:1;margin-top:4px}

.call-btn{width:66px;height:66px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr);color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.call-btn-accept{background:#22c55e;box-shadow:0 4px 28px rgba(34,197,94,.5)}
.call-btn-accept:hover{background:#16a34a;transform:scale(1.08)}
.call-btn-end{background:var(--red);box-shadow:0 4px 28px rgba(248,113,113,.5)}
.call-btn-end:hover{background:#ef4444;transform:scale(1.08)}
.call-btn-mute,.call-btn-speaker{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.call-btn-mute:hover,.call-btn-speaker:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.call-btn-mute.muted{background:rgba(248,113,113,.25);border-color:rgba(248,113,113,.4);color:var(--red)}
.call-btn-speaker.on{background:rgba(61,214,140,.2);border-color:rgba(61,214,140,.4);color:var(--green)}

.call-btn-minimize{position:absolute;top:16px;right:20px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr)}
.call-btn-minimize:hover{background:rgba(255,255,255,.2);color:#fff}

[data-theme="light"] .call-overlay{background:linear-gradient(160deg,#ede8ff 0%,#ddd4ff 45%,#ccc0f8 100%)}
[data-theme="light"] .call-overlay::before{background:radial-gradient(ellipse 90% 55% at 50% 15%,rgba(124,90,252,.2) 0%,transparent 70%)}
[data-theme="light"] .call-name{color:#1a0a3a}
[data-theme="light"] .call-label{color:rgba(26,10,58,.45)}
[data-theme="light"] .call-timer{color:rgba(26,10,58,.5)}
[data-theme="light"] .call-btn-mute,[data-theme="light"] .call-btn-speaker{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.15);color:rgba(26,10,58,.75)}
[data-theme="light"] .call-btn-mute.muted{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.45);color:#dc2626}
[data-theme="light"] .call-btn-speaker.on{background:rgba(22,163,74,.15);border-color:rgba(22,163,74,.45);color:#16a34a}
[data-theme="light"] .call-btn-minimize{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.12);color:rgba(26,10,58,.5)}
[data-theme="dracula-mint"] .call-overlay{background:linear-gradient(160deg,#0e2118 0%,#091510 45%,#050f08 100%)}
[data-theme="dracula-mint"] .call-overlay::before{background:radial-gradient(ellipse 90% 55% at 50% 15%,rgba(98,214,147,.2) 0%,transparent 70%)}
[data-theme="dracula-mint"] .call-avatar{background:linear-gradient(135deg,#62d693,#2aab6a);box-shadow:0 0 0 10px rgba(98,214,147,.1),0 0 0 20px rgba(98,214,147,.05),0 20px 56px rgba(98,214,147,.3)}

.call-mini{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;background:var(--glass2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border);border-top:1px solid rgba(255,255,255,.12);border-radius:99px;box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 var(--glass-hi);animation:fadeIn .2s ease;white-space:nowrap}
.call-mini.hidden{display:none}
.call-mini-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0;animation:recPulse 1.5s ease infinite}
.call-mini-name{font-size:13px;font-weight:600;color:var(--t1)}
.call-mini-timer{font-size:13px;color:var(--t3);font-variant-numeric:tabular-nums;min-width:32px}
.call-mini-btn{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--tr);flex-shrink:0}
.call-mini-btn:hover{background:rgba(255,255,255,.18);color:var(--t1)}
.call-mini-btn-end{background:rgba(248,113,113,.2);color:var(--red)}
.call-mini-btn-end:hover{background:rgba(248,113,113,.35)}

#call-incoming .call-avatar{animation:callRing 1.2s ease infinite}
@keyframes callRing{0%,100%{box-shadow:0 0 0 0 rgba(124,90,252,.6)}60%{box-shadow:0 0 0 16px rgba(124,90,252,0)}}

.btn-call-start:hover{background:rgba(61,214,140,.12)!important}
@keyframes callRing2{0%,100%{opacity:1}50%{opacity:.4}}

.reconnect-bar{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(150px + 50%);transform:translateX(-50%);z-index:9999;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;background:rgba(30,20,60,.9);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.13);border-radius:99px;color:rgba(255,255,255,.85);font-size:13px;font-weight:500;letter-spacing:.01em;user-select:none;-webkit-user-select:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.4);pointer-events:none}
.reconnect-spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:rgba(255,255,255,.8);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
[data-theme="light"] .reconnect-bar{background:rgba(240,236,255,.96);border-color:rgba(0,0,0,.12);color:rgba(50,40,100,.85)}
[data-theme="light"] .reconnect-spinner{border-color:rgba(100,80,200,.2);border-top-color:rgba(90,72,200,.8)}

.toast{position:fixed;bottom:var(--toast-bottom,28px);left:50%;transform:translateX(-50%) translateY(14px) scale(.94);background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.92);padding:10px 20px;border-radius:99px;font-size:13px;font-weight:500;z-index:400;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 4px 28px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.08)}
.toast::before{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.16) 0%,transparent 50%);pointer-events:none;border-radius:inherit}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.error{border-color:rgba(248,113,113,.4);color:#fca5a5}
.toast.success{border-color:rgba(61,214,140,.35);color:#6ee7b7}
[data-theme="light"] .toast{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.08)}
[data-theme="light"] .toast::before{background:linear-gradient(140deg,rgba(255,255,255,.75) 0%,transparent 55%)}
[data-theme="light"] .toast.error{border-color:rgba(220,38,38,.25);color:#dc2626}
[data-theme="light"] .toast.success{border-color:rgba(22,163,74,.25);color:#16a34a}

@media(max-width:640px){
  .reconnect-bar{left:50%}
  .sidebar{width:100%;position:absolute;inset:0;z-index:10}
  .chat-area{position:absolute;inset:0;display:none!important}
  .messenger.chat-open .sidebar{display:none!important}
  .messenger.chat-open .chat-area{display:flex!important}
  .messenger.chat-closing .chat-area{display:flex!important;z-index:11;background:transparent!important}
  .messenger.chat-closing .sidebar{display:flex!important}
  .back-btn{display:flex!important}
  .msg{max-width:85%}

  .footer-pill-btn{width:46px;height:46px}
  .footer-pill-btn svg{width:20px;height:20px}
  .glass-icon-btn{width:36px;height:36px}
  .glass-pill-btn{width:42px;height:42px}
  #input-message{font-size:16px;padding:10px 14px}
  .chat-footer{padding:8px 10px 30px}
  .messages-area{padding:calc(env(safe-area-inset-top,0px) + 72px) 10px 106px}
  .reply-bar{bottom:87px}
  #chat-active:has(.reply-bar:not(.hidden)) .scroll-down-btn{bottom:149px}
  .sidebar-header{padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px}
  .conv-avatar{width:46px;height:46px;font-size:17px}
  .online-dot{left:50px;bottom:10px}
  .call-btn{width:62px;height:62px}
  .call-mini{top:10px;max-width:calc(100vw - 32px)}
}

[data-theme="light"] .glass-pill{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.08)}
[data-theme="light"] .glass-pill::before{background:linear-gradient(140deg,rgba(255,255,255,.75) 0%,transparent 55%)}
[data-theme="light"] .glass-icon-btn{color:rgba(0,0,0,.5)}
[data-theme="light"] .glass-icon-btn:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.75)}
[data-theme="light"] .glass-pill-btn{color:rgba(0,0,0,.55)}
[data-theme="light"] .glass-pill-btn:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.8)}
[data-theme="light"] .status-text{color:rgba(0,0,0,.38)}
[data-theme="light"] .status-text.online{color:var(--green)}
[data-theme="light"] .status-text.typing{color:rgba(0,0,0,.6)}
[data-theme="light"] .status-text.reconnecting{color:rgba(90,72,200,.75)}
[data-theme="light"] .chat-name-pill h3{color:var(--t1)}
[data-theme="light"] .footer-pill-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 20px rgba(0,0,0,.06);color:rgba(0,0,0,.45)}
[data-theme="light"] .footer-pill-btn::before{background:linear-gradient(140deg,rgba(255,255,255,.7) 0%,transparent 55%)}
[data-theme="light"] .footer-pill-btn:hover{background:rgba(0,0,0,.09);color:rgba(0,0,0,.7)}
[data-theme="light"] .footer-pill-send{background:var(--grad)!important;color:#fff!important;border-color:rgba(90,72,200,.3)!important}
[data-theme="light"] .input-wrap{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 20px rgba(0,0,0,.06)}
[data-theme="light"] .input-wrap::before{background:linear-gradient(140deg,rgba(255,255,255,.7) 0%,transparent 55%)}
[data-theme="light"] .input-wrap:focus-within{border-color:rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 20px rgba(0,0,0,.06)}
[data-theme="light"] #input-message::placeholder{color:rgba(0,0,0,.28)}
[data-theme="light"] .footer-rec-pill{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 20px rgba(0,0,0,.06)}
[data-theme="light"] .attach-preview{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 20px rgba(0,0,0,.06)}
[data-theme="light"] .attach-preview::before{background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,transparent 60%)}
[data-theme="light"] .attach-preview-close{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.5)}
[data-theme="light"] .settings-id-row{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .settings-id-label{color:rgba(0,0,0,.4)}
[data-theme="light"] .settings-id-value{color:rgba(90,60,200,.85)}
[data-theme="light"] .btn-copy-sm{background:rgba(0,0,0,.07);color:rgba(0,0,0,.5)}
[data-theme="light"] .modal{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08);box-shadow:0 32px 80px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.98)}
[data-theme="light"] .modal::before{background:linear-gradient(135deg,rgba(255,255,255,.7) 0%,transparent 55%)}
[data-theme="light"] .modal-overlay{background:rgba(200,205,220,.55)}
[data-theme="light"] .btn-ghost{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:var(--t1)}
[data-theme="light"] .btn-ghost:hover{background:rgba(0,0,0,.08);color:var(--t1)}
[data-theme="light"] .btn-danger{background:rgba(224,64,64,.08);border-color:rgba(224,64,64,.2)}
[data-theme="light"] .confirm-text{color:var(--t1)}
[data-theme="light"] .msg-other{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="light"] .msg-own{background:rgba(90,72,200,.07);border-color:rgba(90,72,200,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="light"] .msg-link{color:var(--accent)}
[data-theme="light"] .msg-link:hover{color:var(--accent-h)}
[data-theme="light"] .voice-play{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.06)}
[data-theme="light"] .voice-play:hover{background:rgba(0,0,0,.11);color:rgba(0,0,0,.85)}
[data-theme="light"] .msg-own .voice-play{background:rgba(90,72,200,.1);border-color:rgba(90,72,200,.2);color:var(--accent)}
[data-theme="light"] .msg-own .voice-play:hover{background:rgba(90,72,200,.18)}
[data-theme="light"] .voice-bar{background:rgba(0,0,0,.15)}
[data-theme="light"] .voice-bar.active{background:rgba(0,0,0,.55)}
[data-theme="light"] .msg-own .voice-bar{background:rgba(90,72,200,.2)}
[data-theme="light"] .msg-own .voice-bar.active{background:var(--accent)}
[data-theme="light"] .voice-dur{color:rgba(0,0,0,.38)}
[data-theme="light"] .msg-own .voice-dur{color:rgba(90,72,200,.55)}
[data-theme="light"] .typing-bubble{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.07)}
[data-theme="light"] .reply-bar{background:rgba(245,243,255,.88);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border-color:rgba(90,72,200,.25);box-shadow:0 8px 32px rgba(90,72,200,.1),inset 0 1px 0 rgba(255,255,255,.95)}
[data-theme="light"] .conv-item.active{background:rgba(90,72,200,.09)}
[data-theme="light"] .member-check:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .member-row:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .msg-time{color:rgba(0,0,0,.38);opacity:1}
[data-theme="light"] .msg-own .msg-time{color:rgba(90,72,200,.45)}
[data-theme="light"] .msg-tick{opacity:.5}
[data-theme="light"] .msg-tick.read{color:#16a34a;opacity:1}
.file-caption-preview{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:13px;color:var(--t2);word-break:break-all}
.file-caption-preview img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0}
[data-theme="light"] .file-caption-preview{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}

.msg-ctx{position:fixed;z-index:310;background:rgba(18,10,36,.88);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.13);min-width:140px;pointer-events:auto;animation:ctxIn .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes ctxIn{from{opacity:0;transform:scale(.88) translateY(-6px)}to{opacity:1;transform:none}}
.scroll-down-btn{position:absolute;bottom:88px;right:13px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);backdrop-filter:blur(44px) saturate(220%) brightness(1.06);-webkit-backdrop-filter:blur(44px) saturate(220%) brightness(1.06);color:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.1),0 4px 28px rgba(0,0,0,.22);z-index:20;transition:opacity .2s,transform .2s;animation:fadeIn .15s ease;overflow:hidden;position:absolute}
.scroll-down-btn.hidden{display:none}
[data-theme="light"] .scroll-down-btn{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.08)}
.msg-ctx-btn{display:flex;align-items:center;gap:9px;width:100%;padding:11px 15px;background:none;border:none;color:var(--t1);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .1s;text-align:left}
.msg-ctx-btn:hover,.msg-ctx-btn:active{background:rgba(255,255,255,.1)}
.msg-ctx-btn+.msg-ctx-btn{border-top:1px solid rgba(255,255,255,.07)}
[data-theme="light"] .msg-ctx{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.1);box-shadow:0 12px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.98)}
[data-theme="light"] .msg-ctx-btn{color:var(--t1)}
[data-theme="light"] .msg-ctx-btn:hover{background:rgba(0,0,0,.05)}
[data-theme="light"] .msg-ctx-btn+.msg-ctx-btn{border-top-color:rgba(0,0,0,.07)}
.msg-ctx-readers{display:flex;align-items:center;gap:9px;width:100%;padding:10px 15px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--t3);pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-ctx-readers svg{opacity:.55;flex-shrink:0}
[data-theme="light"] .msg-ctx-readers{border-top-color:rgba(0,0,0,.07)}

.call-btn-speaker{display:none}
@media (hover: none) {
  .btn-primary:hover{transform:none;box-shadow:0 6px 22px var(--glow)}
  .btn-ghost:hover,.btn-danger:hover,.btn-icon-sm:hover{background:initial;color:initial}
  .btn-copy-sm:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
  [data-theme="light"] .btn-copy-sm:hover{background:rgba(0,0,0,.07);color:rgba(0,0,0,.5)}
  .sidebar-actions .btn-icon-sm:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);transform:none}
  [data-theme="light"] .sidebar-actions .btn-icon-sm:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.65)}
  .theme-card:hover{transform:none;background:rgba(255,255,255,.04)}
  .settings-btn:hover{background:none;color:var(--t1)}
  .settings-btn-danger:hover{background:none;color:var(--red)}
  .btn-accept:hover{background:rgba(61,214,140,.12)}
  .btn-reject:hover{background:rgba(248,113,113,.1)}
  .glass-pill-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
  .glass-icon-btn:hover{background:none;color:rgba(255,255,255,.75)}
  .footer-pill-btn:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
  .footer-pill-send:hover{transform:none}
  .voice-play:hover{background:rgba(255,255,255,.12);transform:none}
  .msg-other .voice-play:hover{background:rgba(255,255,255,.08)}
  .file-dl:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.65);transform:none}
  .msg-own .file-dl:hover{background:rgba(255,255,255,.1)}
  .member-check:hover,.member-row:hover,.btn-kick:hover{background:none}
  .call-btn-accept:hover{background:#22c55e;transform:none}
  .call-btn-end:hover{background:var(--red);transform:none}
  .call-btn-mute:hover{background:rgba(255,255,255,.14);transform:none}
  .call-btn-mute.muted:hover{background:rgba(248,113,113,.25);color:var(--red);transform:none}
  .call-btn-speaker:hover{background:rgba(255,255,255,.14);transform:none}
  .call-btn-speaker.on:hover{background:rgba(61,214,140,.2);color:var(--green);transform:none}
  .call-btn-minimize:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
  .call-mini-btn:hover{background:none;color:initial}
  .call-mini-btn-end:hover{background:none}
  .btn-call-start:hover{background:none!important}
  .msg-ctx-btn:hover{background:none}
  .msg-link:hover{color:var(--accent);text-decoration-color:rgba(124,90,252,.5)}
  .msg-image:hover{opacity:1}
  [data-theme="light"] .glass-icon-btn:hover{background:none;color:rgba(0,0,0,.65)}
  [data-theme="light"] .glass-pill-btn:hover{background:rgba(0,0,0,.03);color:rgba(0,0,0,.7)}
  [data-theme="light"] .footer-pill-btn:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.6)}
  [data-theme="light"] .btn-ghost:hover{background:none;color:initial}
  [data-theme="light"] .voice-play:hover{background:rgba(0,0,0,.07);transform:none}
  [data-theme="light"] .msg-own .voice-play:hover{background:rgba(90,72,200,.1)}
  [data-theme="light"] .member-check:hover,[data-theme="light"] .member-row:hover{background:none}
  [data-theme="light"] .msg-ctx-btn:hover{background:none}
  [data-theme="light"] .msg-link:hover{color:var(--accent)}
}

.totp-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;color:var(--t1);font-size:22px;font-weight:600;letter-spacing:6px;text-align:center;outline:none;transition:border-color .15s;font-variant-numeric:tabular-nums}
.totp-input:focus{border-color:var(--accent)}
.totp-input-wrap{margin:10px 0}
[data-theme="light"] .totp-input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.85)}
[data-theme="light"] .totp-input:focus{border-color:rgba(90,72,200,.6)}

.auth-icon-totp{background:linear-gradient(135deg,rgba(124,90,252,.25),rgba(90,56,220,.18))}
.totp-verify-hint{font-size:13.5px;color:var(--t2);text-align:center;margin:6px 0 14px;line-height:1.45}
.btn-totp-back{background:none;border:none;color:var(--t3);font-size:13px;cursor:pointer;padding:8px 0 2px;width:100%;text-align:center;transition:color .15s}
.btn-totp-back:hover{color:var(--t2)}
#btn-totp-verify{margin-top:4px}

.settings-2fa{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px}
[data-theme="light"] .settings-2fa{border-bottom-color:rgba(0,0,0,.07)}
.settings-2fa-header{margin-bottom:8px}
.settings-2fa-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-radius:8px;padding:4px 2px;margin:-4px -2px;transition:background .15s}
@media (hover:hover){
  .settings-2fa-toggle:hover{background:rgba(255,255,255,.05)}
  [data-theme="light"] .settings-2fa-toggle:hover{background:rgba(0,0,0,.05)}
}
.tfa-chevron{color:var(--t3);flex-shrink:0;transition:transform .2s}
.settings-2fa-info{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--t1);user-select:none;-webkit-user-select:none}
.tfa-badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;letter-spacing:.02em}
.tfa-off{background:rgba(255,255,255,.08);color:var(--t3)}
.tfa-on{background:rgba(61,214,140,.18);color:#3dd68c}
[data-theme="light"] .tfa-off{background:rgba(0,0,0,.07);color:rgba(0,0,0,.4)}
.tfa-hint{font-size:12.5px;color:var(--t3);margin:8px 0 10px;line-height:1.45;user-select:none;-webkit-user-select:none}
.tfa-qr-wrap{position:relative;display:flex;justify-content:center;margin:10px auto;width:fit-content;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.tfa-qr{display:block;border-radius:14px;width:200px;max-width:200px;margin:0 auto}
.tfa-qr-loader{width:200px;height:200px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%);background-size:400% 100%;animation:qr-shimmer 1.4s ease infinite}
[data-theme="light"] .tfa-qr-loader{background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.06) 75%);background-size:400% 100%}
@keyframes qr-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.tfa-qr-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:11px;background:#fff;padding:4px;box-shadow:0 2px 12px rgba(0,0,0,.25);pointer-events:none;overflow:hidden}
.tfa-qr-logo img{width:100%;height:100%;display:block;border-radius:8px;object-fit:cover}
.tfa-secret-row{display:flex;align-items:center;gap:6px;margin:8px 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:7px 10px}
[data-theme="light"] .tfa-secret-row{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09)}
.tfa-secret-label{font-size:11px;color:var(--t3);flex-shrink:0;white-space:nowrap}
.tfa-secret-val{font-size:11px;font-family:monospace;color:var(--t1);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.03em}
.tfa-btns{display:flex;gap:8px;margin-top:10px}
.tfa-btns .btn{flex:1;padding:10px}
.tfa-btns .settings-btn{flex:1;text-align:center;justify-content:center}
.btn-sm{font-size:13px!important;padding:9px 12px!important}