/* Alpha Messenger — Multi-theme Design v19 - Failed message retry */
:root, [data-theme="dark"] {
  --bg-primary: #050506;
  --bg-secondary: #0d0f11;
  --bg-tertiary: #13161a;
  --bg-elevated: #1a1e26;
  --bg-hover: #212632;
  --accent-primary: #ff0033;
  --accent-secondary: #ff1f4a;
  --accent-fade: rgba(255,0,51,0.14);
  --text-primary: #f5f7fa;
  --text-secondary: #b0b6c2;
  --text-tertiary: #77808c;
  --text-muted: #4a505c;
  --border-primary: #1a1d23;
  --border-secondary: #23272f;
  --border-focus: #ff00334d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 22px rgba(0, 0, 0, 0.5);
  --avatar-default: #1a1d23;
}

[data-theme="modern-dark"] {
  --bg-primary: #2b2d31;
  --bg-secondary: #1e1f22;
  --bg-tertiary: #313338;
  --bg-elevated: #383a40;
  --bg-hover: #404249;
  --accent-primary: #5865f2;
  --accent-secondary: #7289da;
  --accent-fade: rgba(88,101,242,0.15);
  --text-primary: #f2f3f5;
  --text-secondary: #b5bac1;
  --text-tertiary: #949ba4;
  --text-muted: #4e5058;
  --border-primary: #1e1f22;
  --border-secondary: #26272b;
  --border-focus: #5865f280;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
  --avatar-default: #313338;
}

[data-theme="black"] {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #141414;
  --bg-elevated: #1c1c1c;
  --bg-hover: #242424;
  --accent-primary: #ff0033;
  --accent-secondary: #ff1f4a;
  --accent-fade: rgba(255,0,51,0.12);
  --text-primary: #ffffff;
  --text-secondary: #a8a8a8;
  --text-tertiary: #707070;
  --text-muted: #404040;
  --border-primary: #0f0f0f;
  --border-secondary: #1a1a1a;
  --border-focus: #ff003350;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.8);
  --avatar-default: #141414;
}

[data-theme="white"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7fa;
  --bg-tertiary: #e9ecef;
  --bg-elevated: #ffffff;
  --bg-hover: #e3e7ec;
  --accent-primary: #0066ff;
  --accent-secondary: #3385ff;
  --accent-fade: rgba(0,102,255,0.1);
  --text-primary: #1a1d23;
  --text-secondary: #3d4451;
  --text-tertiary: #6c757d;
  --text-muted: #9aa3b0;
  --border-primary: #e0e4e8;
  --border-secondary: #d1d6dc;
  --border-focus: #0066ff80;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.16);
  --avatar-default: #d6dce4;
}

:root {
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms cubic-bezier(.4,.2,.2,1);
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --sidebar-width: 330px;
  --chat-accent: var(--accent-primary);
  --chat-accent-secondary: var(--accent-secondary);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;position:relative;transition:background var(--transition-slow)}

[data-theme="dark"] body{background:
 radial-gradient(circle at 22% 18%,rgba(255,0,51,0.10),transparent 60%),
 radial-gradient(circle at 80% 85%,rgba(255,31,74,0.07),transparent 65%),
 linear-gradient(145deg,#050506 0%,#09090b 55%,#0b0c10 100%)}

[data-theme="modern-dark"] body{background:
 radial-gradient(circle at 25% 20%,rgba(88,101,242,0.15),transparent 65%),
 radial-gradient(circle at 75% 80%,rgba(114,137,218,0.12),transparent 70%),
 linear-gradient(145deg,#2b2d31 0%,#1e1f22 50%,#1a1b1e 100%)}

[data-theme="black"] body{background:#000000}

[data-theme="white"] body{background:
 radial-gradient(circle at 25% 20%,rgba(0,102,255,0.05),transparent 70%),
 radial-gradient(circle at 75% 80%,rgba(51,133,255,0.04),transparent 75%),
 linear-gradient(145deg,#ffffff 0%,#f8f9fa 100%)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}
/* Layout */
.app-shell{flex:1;display:flex;min-height:0;height:100vh;isolation:isolate;opacity:0;animation:appFadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s forwards}
@keyframes appFadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;box-shadow:var(--shadow-md);position:relative;z-index:10;animation:slideInLeft 0.5s cubic-bezier(0.16,1,0.3,1) 0.3s backwards}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
.chat-pane{animation:slideInRight 0.5s cubic-bezier(0.16,1,0.3,1) 0.4s backwards}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:var(--space-16) var(--space-20);gap:var(--space-16);border-bottom:1px solid var(--border-primary)}
.hamburger-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-size:1.5rem;cursor:pointer;transition:background var(--transition-fast)}
.hamburger-btn:hover{background:var(--bg-hover)}
.hamburger-btn:active{transform:scale(.95)}
.sidebar-actions{display:flex;align-items:center;gap:var(--space-12)}
.action-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--accent-primary);border:none;border-radius:var(--radius-full);color:#fff;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}
.action-btn svg{stroke:#fff}
.action-btn:hover{background:var(--accent-secondary)}
.action-btn:active{transform:scale(.93)}
.avatar-btn{width:38px;height:38px;border:none;border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;letter-spacing:.5px;position:relative;transition:background var(--transition-fast),color var(--transition-fast)}
.avatar-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.sidebar-search{padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--border-primary)}
.sidebar-search input{width:100%;padding:0.65rem 0.9rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-full);color:var(--text-primary);font-size:0.85rem;outline:none;transition:all var(--transition-fast)}
.sidebar-search input::placeholder{color:var(--text-muted)}
.sidebar-search input:focus{background:var(--bg-elevated);border-color:var(--border-focus)}
.sidebar-footer{padding:var(--space-12) var(--space-16);border-top:1px solid var(--border-primary);font-size:.65rem;color:var(--text-tertiary)}
/* Sidebar tabs */
.sidebar-tabs{display:flex;border-bottom:1px solid var(--border-primary);background:var(--bg-secondary)}
.sidebar-tab{flex:1;padding:0.7rem 0.5rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);position:relative}
.sidebar-tab:hover{color:var(--text-secondary);background:rgba(255,255,255,0.02)}
.sidebar-tab.active{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.tab-badge{display:inline-block;min-width:18px;height:18px;padding:0 5px;margin-left:4px;background:var(--accent-primary);border-radius:10px;font-size:0.65rem;line-height:18px;text-align:center;vertical-align:middle}
.sidebar-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sidebar-panel{display:none;flex:1;overflow-y:auto;overflow-x:hidden}
.sidebar-panel.active{display:flex;flex-direction:column}
.chat-list{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;background:linear-gradient(180deg,var(--bg-secondary),var(--bg-secondary) 60%,var(--bg-secondary) 60%,var(--bg-secondary));}
.friends-list,.requests-list{flex:1;overflow-y:auto;padding:var(--space-8) 0}
.requests-toggle-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);position:sticky;top:0;z-index:10}
.requests-title{font-size:0.85rem;font-weight:600;color:var(--text-primary);transition:opacity 0.3s ease}
.requests-toggle-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.requests-toggle-btn:hover{background:var(--bg-hover);border-color:var(--accent-primary);color:var(--accent-primary)}
.requests-toggle-btn:active{transform:scale(0.95)}
.requests-toggle-btn .rotate-icon{transition:transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)}
.requests-toggle-btn.spinning .rotate-icon{animation:spin360 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)}
.requests-list.fading{opacity:0.3;pointer-events:none;transition:opacity 0.3s ease}
@keyframes spin360{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.friend-item,.request-item{display:flex;align-items:center;gap:var(--space-12);padding:0.75rem var(--space-16);cursor:pointer;border-bottom:1px solid var(--border-primary);transition:background var(--transition-fast)}
.friend-item:hover{background:var(--bg-tertiary)}
.friend-item .chat-avatar{width:42px;height:42px}
.friend-info{flex:1;min-width:0}
.friend-name{font-size:0.85rem;font-weight:600;color:var(--text-primary)}
.friend-username{font-size:0.7rem;color:var(--text-tertiary)}
.friend-actions{display:flex;gap:var(--space-8)}
.friend-action-btn{padding:0.4rem 0.75rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);font-size:0.7rem;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.friend-action-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.friend-action-btn.primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}
.friend-action-btn.primary:hover{background:var(--accent-secondary)}
.chat-item{display:flex;align-items:center;gap:var(--space-12);padding:0.7rem var(--space-16);cursor:pointer;position:relative;transition:all var(--transition-fast);border-bottom:1px solid var(--border-primary);animation:slideInLeft 0.3s ease}
.chat-item:hover{background:var(--bg-tertiary)}
.chat-item.active{background:var(--bg-elevated);border-left:3px solid var(--accent-primary)}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.chat-avatar{width:44px;height:44px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#fff;flex-shrink:0;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);transition:transform 0.2s ease}
.chat-item:hover .chat-avatar{transform:scale(1.08)}
.chat-avatar.online::after{content:'';position:absolute;bottom:3px;right:3px;width:12px;height:12px;background:#00d26a;border:2px solid var(--bg-secondary);border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,0.4)}
.chat-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-item-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.chat-item-title{font-size:0.85rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-time{font-size:0.65rem;color:var(--text-tertiary);flex-shrink:0}
.chat-item-last{font-size:0.7rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item-unread{min-width:18px;height:18px;padding:0 6px;background:var(--accent-primary);border-radius:10px;font-size:0.65rem;font-weight:600;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,0.12)}
.chat-pane{flex:1;display:flex;flex-direction:column;background:var(--bg-primary);position:relative;overflow:hidden}
.chat-pane::before{content:'';position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle at 30% 32%,rgba(255,0,70,0.10),transparent 60%),
 radial-gradient(circle at 70% 68%,rgba(255,30,80,0.08),transparent 62%),
 linear-gradient(120deg,rgba(255,0,51,0.08),transparent 35%),
 linear-gradient(300deg,rgba(255,0,51,0.07),transparent 40%);
 mix-blend-mode:screen;opacity:.55}
.chat-pane::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,0.02) 0 2px,transparent 2px 8px);opacity:.12;pointer-events:none}
.chat-header{padding:var(--space-16) var(--space-24);background:linear-gradient(135deg,var(--bg-secondary) 0%,#0f1013 100%);border-bottom:1px solid var(--border-primary);align-items:center;gap:var(--space-16);display:flex;position:relative}
.chat-header::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,70,0.12),transparent 55%);opacity:.35;pointer-events:none}
.hidden{display:none!important}
.chat-header-left{display:flex;align-items:center;gap:var(--space-16);min-width:0}
.back-btn{display:none;flex-shrink:0}
.chat-header-avatar{width:42px;height:42px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:600;color:#fff;flex-shrink:0}
.chat-header-meta{display:flex;flex-direction:column;min-width:0}
.chat-header-name{font-size:0.95rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-header-status{font-size:0.65rem;color:var(--text-tertiary);margin-top:2px}
.chat-header-actions{display:flex;align-items:center;gap:var(--space-12)}
.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.icon-btn svg{stroke:currentColor;transition:transform 0.2s ease}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-primary);transform:translateY(-1px)}
.icon-btn:hover svg{transform:scale(1.1)}
.icon-btn:active{transform:scale(0.95) translateY(0)}
.icon-btn.small{width:34px;height:34px}
.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-8);scroll-behavior:smooth}
.empty-state{margin:auto;text-align:center;color:var(--text-tertiary);max-width:360px;animation:fadeIn .35s ease}
.empty-state h3{margin:0 0 var(--space-8);font-size:1.05rem;font-weight:600;color:var(--text-secondary)}
.empty-state p{font-size:0.8rem;line-height:1.5;color:var(--text-muted)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.message{max-width:66%;display:flex;gap:var(--space-8);animation:msgIn .25s var(--transition-slow);will-change:transform}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.message.incoming{align-self:flex-start}
.message.outgoing{align-self:flex-end;flex-direction:row-reverse}
.message-avatar{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600;color:#fff;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.message-content{display:flex;flex-direction:column;gap:4px;min-width:0}
.message-bubble{padding:0.55rem 0.8rem;border-radius:var(--radius-sm);font-size:0.85rem;line-height:1.35;word-wrap:break-word;position:relative;max-width:460px}
.message.incoming .message-bubble{background:#2f3136;color:#ffffff;border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md);box-shadow:0 1px 2px rgba(0,0,0,0.1);border:none}
.message.outgoing .message-bubble{background:#0084ff;color:#ffffff;border-radius:var(--radius-md) 0 var(--radius-md) var(--radius-md);box-shadow:0 1px 2px rgba(0,132,255,0.3);border:none}
.message-bubble:hover{transform:translateY(-1px);transition:all .18s ease}
.message-file{margin-top:0.35rem;padding:0.6rem 0.8rem;background:rgba(0,0,0,0.15);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s ease;border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:0.5rem}
.message-file .file-icon{flex-shrink:0;opacity:0.85}
.message-file:hover{background:rgba(0,0,0,0.25);border-color:rgba(255,255,255,0.2);transform:translateX(2px)}
.message.incoming .message-file{background:rgba(255,255,255,0.05);border:1px solid var(--border-secondary)}
.message.incoming .message-file:hover{background:rgba(255,255,255,0.1)}
.message-voice{margin-top:0.35rem;padding:0.7rem 0.9rem;background:rgba(0,0,0,0.15);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:0.7rem;min-width:280px}
.message-voice-play-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.15);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all 0.2s ease;flex-shrink:0}
.message-voice-play-btn:hover{background:rgba(255,255,255,0.25);transform:scale(1.05)}
.message-voice-play-btn svg{width:14px;height:14px}
.message-voice-waveform{flex:1;display:flex;align-items:center;gap:2px;height:32px;cursor:pointer}
.message-voice-waveform-bar{width:3px;background:rgba(255,255,255,0.4);border-radius:2px;transition:all 0.15s ease}
.message-voice-waveform-bar.active{background:#fff}
.message-voice-waveform-bar:hover{background:rgba(255,255,255,0.7)}
.message-voice-time{font-size:0.75rem;color:rgba(255,255,255,0.7);font-weight:500;min-width:40px;text-align:right;flex-shrink:0}
.message.incoming .message-voice{background:rgba(255,255,255,0.05);border-color:var(--border-secondary)}
.message.incoming .message-voice-play-btn{background:rgba(0,0,0,0.1);color:var(--text-primary)}
.message.incoming .message-voice-play-btn:hover{background:rgba(0,0,0,0.15)}
.message.incoming .message-voice-waveform-bar{background:rgba(0,0,0,0.2)}
.message.incoming .message-voice-waveform-bar.active{background:var(--accent-primary)}
.message.incoming .message-voice-time{color:var(--text-secondary)}
.message-meta{font-size:0.65rem;color:var(--text-tertiary);display:flex;align-items:center;gap:0.25rem}
.message.incoming .message-meta{padding-left:0.25rem}
.message.outgoing .message-meta{justify-content:flex-end;padding-right:0.25rem}
.message-failed .message-bubble{background:#dc3545!important;border:1px solid #c82333!important}
.message-error{color:#ff4444;font-weight:600;font-size:0.7rem}
.retry-btn{background:transparent;border:1px solid #ff4444;color:#ff4444;padding:0.15rem 0.4rem;border-radius:var(--radius-sm);font-size:0.65rem;cursor:pointer;transition:all 0.2s ease;margin-left:0.3rem}
.retry-btn:hover{background:#ff4444;color:#fff}
.message-sending .message-bubble{opacity:0.6}
.composer{display:flex;gap:var(--space-12);padding:var(--space-16) var(--space-24);background:var(--bg-secondary);border-top:1px solid var(--border-primary);align-items:flex-end}
.composer-attach-btn{min-height:42px;width:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-xl);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}
.composer-attach-btn svg{transition:transform 0.2s ease}
.composer-attach-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}
.composer-attach-btn:hover svg{transform:rotate(-15deg) scale(1.1)}
.composer-attach-btn:active{transform:scale(0.95)}
.composer-voice-btn{min-height:42px;width:48px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-xl);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}
.composer-voice-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}
.composer-voice-btn.recording{background:#ff0033;color:#fff;border-color:#ff0033;animation:recordingPulse 1.5s ease-in-out infinite}
@keyframes recordingPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,0,51,0.7)}50%{box-shadow:0 0 0 8px rgba(255,0,51,0)}}
.voice-recording-ui{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-20);background:var(--bg-secondary);border-top:1px solid var(--border-primary)}
.voice-recording-ui.hidden{display:none}
.voice-waveform-preview{flex:1;display:flex;align-items:center;gap:2px;height:40px}
.voice-waveform-bar{width:2px;background:var(--accent-primary);border-radius:2px;transition:height 0.08s ease}
/* Canvas waveform container (replaces frequent DOM reflow) */
.voice-waveform-canvas{width:100%;height:40px;display:block}

/* Skeleton loader for chat messages to prevent flicker */
.messages-skeleton{animation:fadeIn 0.15s}
.msg-skel{display:flex;margin:8px 0}
.msg-skel .bubble{width:55%;max-width:420px;height:32px;background:#2f3136;border-radius:18px;opacity:.35;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.55}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.voice-timer{font-size:0.9rem;color:var(--text-primary);font-weight:500;min-width:60px}
.voice-cancel-btn,.voice-send-btn{min-height:36px;padding:0 1rem;border-radius:var(--radius-md);border:none;cursor:pointer;font-size:0.85rem;font-weight:500;transition:all 0.2s ease}
.voice-cancel-btn{background:var(--bg-tertiary);color:var(--text-secondary)}
.voice-cancel-btn:hover{background:var(--bg-hover)}
.voice-send-btn{background:var(--accent-primary);color:#fff}
.voice-send-btn:hover{background:var(--accent-secondary)}
.composer textarea{flex:1;padding:0.7rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-xl);color:var(--text-primary);font-size:0.85rem;line-height:1.45;resize:none;min-height:42px;max-height:160px;outline:none;transition:all var(--transition-fast);font-family:inherit}
.composer textarea::placeholder{color:var(--text-muted)}
.composer textarea:focus{background:var(--bg-elevated);border-color:var(--border-focus)}
.typing-indicator{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-20);animation:fadeIn 0.3s ease}
.typing-indicator.hidden{display:none}
.typing-avatar{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:600;color:#fff;flex-shrink:0}
.typing-dots{display:flex;gap:4px;padding:0.6rem 0.9rem;background:var(--bg-tertiary);border-radius:var(--radius-lg)}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:typingDot 1.4s infinite ease-in-out both}
.typing-dots span:nth-child(1){animation-delay:-0.32s}
.typing-dots span:nth-child(2){animation-delay:-0.16s}
@keyframes typingDot{0%,80%,100%{opacity:0.3;transform:scale(0.8)}40%{opacity:1;transform:scale(1.1)}}
.attached-file-preview{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-20);background:var(--bg-secondary);border-top:1px solid var(--border-primary);animation:slideUp 0.2s ease-out}
.attached-file-preview.hidden{display:none}
.attached-file-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:var(--radius-md);color:var(--text-secondary)}
.attached-file-info{flex:1;min-width:0}
.attached-file-name{font-size:0.85rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.attached-file-size{font-size:0.7rem;color:var(--text-tertiary)}
.attached-file-actions{display:flex;gap:var(--space-8)}
.attached-file-action{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.attached-file-action:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent-primary);transform:translateY(-1px)}
.attached-file-action:active{transform:scale(0.95)}
.scroll-to-bottom{position:absolute;bottom:90px;right:var(--space-24);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--accent-primary);border:none;border-radius:var(--radius-full);color:#fff;box-shadow:var(--shadow-md);cursor:pointer;transition:all var(--transition-fast);z-index:10}
.scroll-to-bottom:hover{background:var(--accent-secondary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.scroll-to-bottom:active{transform:translateY(0)}
.scroll-to-bottom.hidden{display:none}
.btn-send{width:48px;min-height:42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border:none;border-radius:var(--radius-xl);color:#fff;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(0,0,0,0.2);flex-shrink:0}
.btn-send .send-icon{transition:transform 0.3s ease}
.btn-send:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.btn-send:hover .send-icon{transform:translate(3px, -3px) rotate(-10deg)}
.btn-send:active{transform:scale(.94) translateY(0);box-shadow:0 2px 6px rgba(0,0,0,0.2)}
body.bright-bg .btn-send{background:linear-gradient(135deg,var(--chat-accent),var(--accent-secondary))}
body.bright-bg .btn-send:hover{filter:brightness(1.15)}
.auth-overlay{position:fixed;inset:0;background:radial-gradient(circle at 35% 20%,rgba(255,0,51,0.18),transparent 60%),rgba(5,5,6,0.95);backdrop-filter:blur(30px);display:flex;align-items:center;justify-content:center;z-index:1000}
.auth-card{position:relative;width:min(480px,94%);background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);padding:2.6rem 2.2rem;box-shadow:var(--shadow-lg);overflow:hidden}
.auth-brand{text-align:center;margin-bottom:var(--space-32)}
.auth-brand h1{margin:0 0 var(--space-8);font-size:1.55rem;font-weight:600;color:var(--text-primary)}
.auth-brand .subtitle{margin:0;font-size:0.75rem;color:var(--text-tertiary);font-weight:400}
.brand-logo{font-size:1.3rem;font-weight:700;margin-bottom:var(--space-12);color:var(--text-primary);transition:color var(--transition-fast)}
[data-theme="dark"] .brand-logo,[data-theme="modern-dark"] .brand-logo,[data-theme="black"] .brand-logo{color:#ffffff}
[data-theme="white"] .brand-logo{color:#000000}
.auth-form h2{font-size:1.05rem;font-weight:600;margin:0 0 var(--space-24);color:var(--text-primary)}
.form-group{margin-bottom:var(--space-16);display:flex;flex-direction:column;gap:var(--space-8)}
.form-group label{font-size:0.65rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-tertiary)}
.form-group label input[type="radio"]{margin-right:0.5rem}
.form-group label:has(input[type="radio"]){font-size:0.85rem;text-transform:none;letter-spacing:normal;display:flex;align-items:center;padding:0.75rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}
.form-group label:has(input[type="radio"]:checked){background:var(--bg-elevated);border-color:var(--accent-primary);color:var(--text-primary)}
.form-group input{padding:0.75rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.85rem;outline:none;transition:all var(--transition-fast)}
.form-group input:focus{background:var(--bg-elevated);border-color:var(--border-focus)}
.form-hint{font-size:0.7rem;color:var(--text-tertiary);margin-top:-4px}
.password-group{position:relative}
.password-input-wrapper{position:relative;display:flex;align-items:center}
.password-input-wrapper input{flex:1;padding-right:3rem}
.password-toggle{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0.5rem;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:color var(--transition-fast)}
.password-toggle:hover{color:var(--text-primary)}
.password-toggle svg{pointer-events:none}
.password-match-hint{font-size:0.7rem;margin-top:4px}
.password-match-hint.match{color:#43e97b}
.password-match-hint.no-match{color:#ff0033}
.btn-primary{width:100%;padding:0.85rem 1rem;background:var(--accent-primary);border:none;border-radius:var(--radius-md);color:#fff;font-weight:600;font-size:0.85rem;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary:hover{background:var(--accent-secondary)}
.btn-primary:active{transform:scale(.97)}
.btn-primary.slim{width:auto;padding:0.6rem 1rem;font-size:0.75rem}
.btn-accent{padding:0.7rem 1.2rem;background:var(--accent-primary);border:none;border-radius:var(--radius-md);color:#fff;font-weight:600;font-size:0.8rem;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}
.btn-accent:hover{background:var(--accent-secondary)}
.btn-accent:active{transform:scale(.97)}
.btn-secondary{padding:0.7rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-weight:500;font-size:0.75rem;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-danger{width:100%;padding:0.85rem 1rem;background:transparent;border:2px solid #dc2626;border-radius:var(--radius-md);color:#dc2626;font-weight:600;font-size:0.85rem;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-danger:hover{background:#dc2626;color:#fff}
.btn-danger:active{transform:scale(.97)}
.btn-link{background:none;border:none;color:var(--accent-primary);font-size:0.875rem;font-weight:500;cursor:pointer;padding:0.5rem 0.75rem;text-decoration:none;transition:color 0.2s ease,transform 0.1s ease;display:inline-block}
.btn-link:hover{color:var(--accent-secondary);text-decoration:underline}
.btn-link:active{transform:scale(0.95)}
#registerFields.hidden{display:none}
#verificationFields{display:none}
#verificationFields.show{display:block}
/* Email verification section styles - smooth animation */
.verification-section{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.verification-section.active{
  max-height: 400px;
  opacity: 1;
  margin-top: var(--space-16);
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease 0.1s,
              margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.verification-hint-text{
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
  text-align: center;
  line-height: 1.5;
}
.verification-hint-text strong{
  color: var(--accent-primary);
  font-weight: 600;
  word-break: break-word;
}
#registerVerificationCode{
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.4em;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  outline: none;
  transition: all var(--transition-fast);
}
#registerVerificationCode:focus{
  background: var(--bg-elevated);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-fade);
}
#registerVerificationCode::placeholder{
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: normal;
  font-family: inherit;
  font-weight: normal;
}
.verification-actions{
  display: flex;
  flex-direction: row;
  gap: var(--space-12);
  justify-content: center;
  margin-top: var(--space-12);
  flex-wrap: wrap;
}
.verification-actions .btn-link{
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
}
#registerCooldownHint{
  display: block;
  text-align: center;
  margin-top: var(--space-8);
  color: var(--text-tertiary);
  font-size: 0.7rem;
  min-height: 1em;
}
/* Smooth transitions for form elements */
.auth-form h2{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#registerFields{
  transition: opacity 0.3s ease;
}
#registerFields.disabled{
  pointer-events: none;
}
#registerFields.disabled input{
  opacity: 0.6;
  cursor: not-allowed;
}
#registerSubmitBtn, #registerSwitchLink{
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-link{margin-top:var(--space-16);text-align:center;font-size:0.75rem;color:var(--text-secondary)}
.switch-link a{color:var(--accent-primary);font-weight:600;text-decoration:none;transition:color var(--transition-fast)}
.switch-link a:hover{color:var(--accent-secondary);text-decoration:underline}
.auth-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auth-decor::before,.auth-decor::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:0.16;background:radial-gradient(circle,var(--accent-primary),transparent 70%)}
.auth-decor::before{width:220px;height:220px;top:-110px;right:-110px}
.auth-decor::after{width:190px;height:190px;bottom:-90px;left:-90px}
/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(10px);z-index:10000;opacity:0;transition:opacity 0.3s ease;pointer-events:auto}
.modal.hidden{display:none;pointer-events:none;opacity:0}
.modal-verification{background:linear-gradient(135deg,rgba(220,38,38,0.15) 0%,rgba(127,29,29,0.25) 50%,rgba(0,0,0,0.6) 100%);backdrop-filter:blur(12px)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-content{width:min(420px,92%);background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);padding:1.4rem 1.3rem;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--space-16);max-height:90vh;overflow:hidden;opacity:0;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.16,1,0.3,1);pointer-events:auto;position:relative}
.modal-content.large{width:min(920px,96%);max-height:85vh;padding:1.5rem 0;display:flex;flex-direction:column;gap:0;overflow:hidden;pointer-events:auto}
.modal-content.large > h3{padding:0 2rem;margin:0 0 var(--space-16) 0}
.modal-content.large .settings-tabs{margin:0 2rem var(--space-12) 2rem}
.modal-content.large .settings-content{padding:0 2rem}
.modal-content.large .modal-actions{padding:0 2rem;margin-top:var(--space-12)}
.modal-content h3{margin:0 0 var(--space-16) 0;font-size:1rem;font-weight:600;color:var(--text-primary);flex-shrink:0}
.modal-hint{margin:0;font-size:0.75rem;color:var(--text-tertiary);line-height:1.4}
.form-row{display:flex;gap:var(--space-12)}
.form-row input{flex:1;padding:0.7rem 0.9rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.8rem;outline:none;transition:all var(--transition-fast)}
.form-row input:focus{background:var(--bg-elevated);border-color:var(--border-focus)}
.user-results{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.user-result{display:flex;align-items:center;justify-content:space-between;padding:0.55rem 0.7rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:0.75rem;color:var(--text-secondary);transition:background var(--transition-fast),border-color var(--transition-fast)}
.user-result:hover{background:var(--bg-hover);border-color:var(--border-focus);color:var(--text-primary)}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-12);margin-top:var(--space-8)}
/* Settings Modal */
.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-primary);margin-bottom:var(--space-12);padding-bottom:0;flex-shrink:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{flex:0 0 auto;padding:0.65rem 0.8rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-tertiary);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
/* Removed abbreviation spans support */
.settings-tab:hover{color:var(--text-secondary)}
.settings-tab.active{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.settings-content{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:0.5rem}
.settings-content::-webkit-scrollbar{width:8px}
.settings-content::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}
.settings-content::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px;transition:background var(--transition-fast)}
.settings-content::-webkit-scrollbar-thumb:hover{background:var(--bg-hover)}
.settings-panel{display:none;flex-direction:column;gap:var(--space-20);padding-bottom:var(--space-16)}
.settings-panel.active{display:flex}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-12);margin-top:var(--space-12);flex-shrink:0}
.settings-group{display:flex;flex-direction:column;gap:var(--space-8)}
.settings-label{font-size:0.75rem;font-weight:600;color:var(--text-primary)}
.settings-input{padding:0.75rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.8rem;outline:none;transition:all var(--transition-fast)}
.settings-input:focus{background:var(--bg-elevated);border-color:var(--border-focus)}
.custom-select{position:relative;width:100%}
.custom-select-trigger{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1rem;
  background:var(--bg-tertiary);
  border:1px solid var(--border-secondary);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
  transition:all var(--transition-fast);
  user-select:none
}
.custom-select-trigger:hover{background:var(--bg-hover);border-color:var(--accent-primary)}
.custom-select-trigger svg{transition:transform 0.3s ease;color:var(--text-tertiary)}
.custom-select.open .custom-select-trigger{border-color:var(--accent-primary);background:var(--bg-elevated)}
.custom-select.open .custom-select-trigger svg{transform:rotate(180deg)}
.custom-select-options{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--bg-elevated);
  border:1px solid var(--border-secondary);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index:1000
}
.custom-select.open .custom-select-options{max-height:200px;opacity:1}
.custom-select-option{
  padding:0.75rem 1rem;
  color:var(--text-secondary);
  font-size:0.85rem;
  cursor:pointer;
  transition:all var(--transition-fast);
  border-bottom:1px solid var(--border-primary)
}
.custom-select-option:last-child{border-bottom:none}
.custom-select-option:hover{background:var(--bg-hover);color:var(--text-primary)}
.custom-select-option.active{background:var(--accent-fade);color:var(--accent-primary);font-weight:600}
.settings-select{
  padding:0.75rem 2.5rem 0.75rem 1rem;
  background:var(--bg-tertiary) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 0.75rem center;
  background-size:16px;
  border:1px solid var(--border-secondary);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:0.85rem;
  font-weight:500;
  outline:none;
  cursor:pointer;
  appearance:none;
  transition:all var(--transition-fast);
  box-shadow:0 1px 3px rgba(0,0,0,0.1)
}
.settings-select:hover{background-color:var(--bg-hover);border-color:var(--accent-primary)}
.settings-select:focus{background-color:var(--bg-elevated);border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-fade)}
.settings-slider{width:100%;height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-primary);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}
.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.settings-slider::-moz-range-thumb{width:18px;height:18px;background:var(--accent-primary);border:none;border-radius:50%;cursor:pointer;transition:transform var(--transition-fast)}
.settings-slider::-moz-range-thumb:hover{transform:scale(1.15)}
.settings-value{font-size:0.75rem;color:var(--text-secondary);margin-top:var(--space-4)}
.settings-hint{display:block;font-size:0.7rem;color:var(--text-tertiary);margin-top:var(--space-4)}
.settings-toggle{display:flex;align-items:center;gap:var(--space-12);cursor:pointer;padding:0.5rem 0}
.settings-toggle input[type="checkbox"]{position:absolute;opacity:0;pointer-events:none}
.toggle-slider{position:relative;width:48px;height:26px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-full);transition:all var(--transition-fast)}
.toggle-slider::before{content:'';position:absolute;width:18px;height:18px;top:3px;left:4px;background:var(--text-muted);border-radius:50%;transition:all var(--transition-fast)}
.settings-toggle input:checked + .toggle-slider{background:var(--accent-primary);border-color:var(--accent-primary)}
.settings-toggle input:checked + .toggle-slider::before{transform:translateX(22px);background:#fff}
.toggle-label{font-size:0.8rem;color:var(--text-secondary);flex:1}
.toggle-label-group{display:flex;flex-direction:column;gap:0.25rem;flex:1}
.toggle-hint{font-size:0.75rem;color:var(--text-tertiary);font-weight:400}
.settings-info-box{font-size:0.85rem;color:var(--text-secondary)}

/* Dropdown */
.dropdown{position:fixed;width:290px;background:var(--bg-elevated);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);padding:0.85rem 0;box-shadow:0 12px 48px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:0.5rem;z-index:1000;animation:dropdownIn .25s cubic-bezier(0.34, 1.56, 0.64, 1)}
@keyframes dropdownIn{from{opacity:0;transform:scale(.92) translateY(-12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.dropdown-header{display:flex;align-items:center;gap:var(--space-12);padding:0.75rem 1.2rem 0.85rem;border-bottom:1px solid var(--border-primary);margin-bottom:0.3rem}
.dropdown-avatar{width:52px;height:52px;border-radius:var(--radius-full);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:var(--text-primary);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06),0 2px 8px rgba(0,0,0,0.25);position:relative;cursor:pointer;overflow:visible}
.dropdown-avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-full)}
.dropdown-avatar:hover .avatar-upload-overlay{opacity:1}
.avatar-upload-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.2s;pointer-events:none}
.avatar-upload-overlay svg{width:20px;height:20px;color:#fff}
.dropdown-user{display:flex;flex-direction:column;gap:3px;min-width:0}
.dropdown-username{font-size:0.9rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-email{font-size:0.72rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown-section{display:flex;flex-direction:column;padding:0.25rem 0.4rem}
.dropdown-item{background:none;border:none;text-align:left;padding:0.7rem 1rem;font-size:0.82rem;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:var(--space-12);transition:all var(--transition-fast);position:relative;width:100%;border-radius:var(--radius-sm)}
.dropdown-item svg{flex-shrink:0;stroke:currentColor;opacity:0.85}
.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.dropdown-item:hover svg{opacity:1}
.dropdown-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--accent-primary);border-radius:0 4px 4px 0;transition:height var(--transition-fast)}
.dropdown-item:hover::before{height:70%}
.dropdown-item:active{transform:scale(0.98)}
#securitySettingsBtn{color:var(--accent-primary);font-weight:500}
#securitySettingsBtn svg{stroke:var(--accent-primary)}
#securitySettingsBtn:hover::before{background:var(--accent-secondary)}
.dropdown-divider{height:1px;background:var(--border-primary);margin:0.4rem 0.8rem}
/* Theme toggle visual state */
body.bright-bg .chat-pane::before{opacity:.75}
body.bright-bg .chat-pane::after{opacity:.18}
body.bright-bg .message.outgoing .message-bubble{filter:saturate(1.15)}

/* Search bar */
.search-bar{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-24);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);animation:slideDown 0.2s ease-out;transform-origin:top}
.search-bar.hidden{animation:slideUp 0.15s ease-in;opacity:0;height:0;padding:0;overflow:hidden}
.search-bar input{flex:1;padding:0.7rem 1rem;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-lg);color:var(--text-primary);font-size:0.85rem;outline:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
.search-bar input:focus{background:var(--bg-elevated);border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.1);transform:scale(1.01)}
.search-bar input::placeholder{color:var(--text-tertiary);transition:color 0.2s}
.search-bar input:focus::placeholder{color:var(--text-secondary)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}

/* Avatar upload */
.avatar-upload-area{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);padding:var(--space-16) 0}
.avatar-preview{width:128px;height:128px;border-radius:var(--radius-full);overflow:hidden;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;border:2px solid var(--border-secondary)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-placeholder{font-size:0.75rem;color:var(--text-tertiary);text-align:center;padding:1rem}
.avatar-crop-container{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:var(--space-12)}
.avatar-crop-container canvas{max-width:100%;height:auto;border-radius:var(--radius-md);background:var(--bg-tertiary);cursor:move;touch-action:none}
.crop-controls{width:100%;display:flex;flex-direction:column;gap:var(--space-8)}
.crop-control-item{display:flex;align-items:center;gap:var(--space-8);color:var(--text-secondary)}
.crop-control-item input[type="range"]{flex:1;height:4px;border-radius:2px;background:var(--bg-tertiary);outline:none;-webkit-appearance:none;appearance:none}
.crop-control-item input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer}
.crop-control-item input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent-primary);cursor:pointer;border:none}
.avatar-source-buttons{display:flex;gap:var(--space-8);width:100%;max-width:300px}
.avatar-source-buttons button{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-8)}
.avatar-error{color:#ff4444;background:rgba(255,68,68,0.1);padding:var(--space-12);border-radius:var(--radius-md);font-size:0.85rem;text-align:center;width:100%;max-width:400px}

/* Message actions */
.message-actions{position:absolute;top:0;right:0;transform:translateX(calc(100% + 8px));display:none;gap:4px;background:var(--bg-elevated);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);padding:4px;box-shadow:var(--shadow-md)}
.message:hover .message-actions{display:flex}
.message-action-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);font-size:0.75rem;cursor:pointer;border-radius:var(--radius-xs);transition:all var(--transition-fast)}
.message-action-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.message.edited .message-meta::after{content:' (изменено)';opacity:.6;font-size:.6rem}

/* Slide-out Menu */
.slide-menu{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;pointer-events:none}
.slide-menu.active{pointer-events:auto}
.slide-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);opacity:0;transition:opacity var(--transition-base)}
.slide-menu.active .slide-menu-overlay{opacity:1}
.slide-menu-content{position:absolute;top:0;left:0;width:300px;height:100%;background:var(--bg-secondary);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;transform:translateX(-100%);transition:transform var(--transition-slow)}
.slide-menu.active .slide-menu-content{transform:translateX(0)}
.slide-menu-header{padding:var(--space-20);border-bottom:1px solid var(--border-primary);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12)}
.slide-menu-profile{display:flex;align-items:center;gap:var(--space-12);flex:1}
.slide-menu-avatar{width:48px;height:48px;border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1rem;position:relative;cursor:pointer;overflow:visible}
.slide-menu-avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-full)}
.slide-menu-avatar:hover .avatar-upload-overlay{opacity:1}
.slide-menu-info{flex:1;min-width:0}
.slide-menu-name{font-weight:600;font-size:0.95rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-menu-username{font-size:0.8rem;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slide-menu-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:1.2rem;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);flex-shrink:0}
.slide-menu-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.slide-menu-nav{flex:1;overflow-y:auto;padding:var(--space-12) 0}
.slide-menu-item{width:100%;display:flex;align-items:center;gap:var(--space-16);padding:var(--space-16) var(--space-20);background:transparent;border:none;color:var(--text-primary);font-size:0.95rem;cursor:pointer;transition:background var(--transition-fast);text-align:left}
.slide-menu-item:hover{background:var(--bg-hover)}
.slide-menu-item:active{background:var(--bg-tertiary)}
.slide-menu-icon{width:24px;display:flex;align-items:center;justify-content:center}
.slide-menu-icon svg{stroke:currentColor}
.slide-menu-divider{height:1px;background:var(--border-primary);margin:var(--space-12) 0}

/* Theme Modal */
.theme-options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16);margin:var(--space-20) 0}
.theme-option{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:var(--space-16);background:var(--bg-tertiary);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-align:center}
.theme-option:hover{background:var(--bg-elevated);border-color:var(--accent-primary)}
.theme-option.active{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-fade)}
.theme-option span:first-of-type{font-weight:600;font-size:0.95rem;color:var(--text-primary)}
.theme-desc{font-size:0.75rem;color:var(--text-tertiary)}
.theme-preview{width:100%;height:60px;border-radius:var(--radius-sm);margin-bottom:var(--space-8);position:relative;overflow:hidden}
.theme-preview-dark{background:linear-gradient(135deg,#050506 0%,#13161a 100%);border:1px solid #ff0033}
.theme-preview-modern{background:linear-gradient(135deg,#1e1f22 0%,#313338 100%);border:1px solid #5865f2}
.theme-preview-black{background:linear-gradient(135deg,#000000 0%,#141414 100%);border:1px solid #ff0033}
.theme-preview-white{background:linear-gradient(135deg,#ffffff 0%,#e9ecef 100%);border:1px solid #0066ff}

/* Responsive */
@media (max-width:1080px){:root{--sidebar-width:300px}}
@media (max-width:860px){:root{--sidebar-width:280px}.chat-header{padding:var(--space-12) var(--space-16)}.messages{padding:var(--space-16)}.composer{padding:var(--space-12) var(--space-16)}}
@media (max-width:768px){
  .app-shell{position:relative}
  .sidebar{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;transition:transform var(--transition-normal)}
  .chat-pane{position:absolute;left:0;top:0;width:100%;height:100%;z-index:90;transform:translateX(100%);transition:transform var(--transition-normal)}
  .app-shell.chat-active .sidebar{transform:translateX(-100%)}
  .app-shell.chat-active .chat-pane{transform:translateX(0)}
  .chat-header-left{gap:var(--space-8)}
  .back-btn{display:flex !important}
  .messages{padding:var(--space-12)}
  .message{max-width:85%}
  .scroll-to-bottom{bottom:80px;right:var(--space-16)}
  .search-bar{padding:var(--space-10) var(--space-16)}
  .search-bar input{padding:0.6rem 0.85rem;font-size:0.82rem}
}
@media (max-width:480px){
  .brand-logo{font-size:1.15rem}
  .action-btn,.avatar-btn{width:34px;height:34px}
  .chat-header-avatar{width:36px;height:36px}
  .chat-header-name{font-size:0.85rem}
  .chat-header-status{font-size:0.7rem}
  .messages{padding:var(--space-8)}
  .message{max-width:90%}
  .message-bubble{padding:0.6rem 0.8rem;font-size:0.82rem}
  .composer{padding:var(--space-8) var(--space-12)}
  .composer textarea{font-size:0.8rem;min-height:38px}
  .btn-send{width:38px;height:38px;font-size:0.95rem}
  .auth-card{padding:2rem 1.4rem}
  .scroll-to-bottom{width:40px;height:40px;bottom:70px;right:var(--space-12)}
  .typing-indicator{padding:var(--space-8) var(--space-12)}
}

/* Font Size Settings */
body[data-font-size="small"]{font-size:13px}
body[data-font-size="small"] .message-text{font-size:0.92rem}
body[data-font-size="small"] .chat-item-title{font-size:0.82rem}
body[data-font-size="small"] .chat-item-last{font-size:0.68rem}
body[data-font-size="medium"]{font-size:14px}
body[data-font-size="large"]{font-size:15px}
body[data-font-size="large"] .message-text{font-size:1.08rem}
body[data-font-size="large"] .chat-item-title{font-size:0.92rem}
body[data-font-size="large"] .chat-item-last{font-size:0.78rem}

/* Animations Disabled */
body[data-animations="false"] *,
body[data-animations="false"] *::before,
body[data-animations="false"] *::after{
  animation-duration:0s !important;
  transition-duration:0s !important;
}

/* White theme improvements */
[data-theme="white"] .message.incoming .message-bubble{background:#e4e6eb;border:none;color:#1a1d23;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
[data-theme="white"] .message.outgoing .message-bubble{background:#0084ff;color:#ffffff;box-shadow:0 1px 2px rgba(0,132,255,0.2)}
[data-theme="white"] .chat-item:hover{background:#f0f2f5}
[data-theme="white"] .chat-item.active{background:#e9ecef;box-shadow:inset 3px 0 0 var(--accent-primary)}
[data-theme="white"] .composer{background:#ffffff;border-top-color:#e0e4e8}
[data-theme="white"] .composer textarea{background:#f5f7fa;border-color:#d1d6dc}
[data-theme="white"] .composer textarea:focus{background:#ffffff;border-color:var(--accent-primary)}
[data-theme="white"] .composer-attach-btn{background:#f5f7fa;border-color:#d1d6dc}
[data-theme="white"] .composer-attach-btn:hover{background:#e9ecef;border-color:var(--accent-primary)}
[data-theme="white"] .sidebar{background:#ffffff;border-right-color:#e0e4e8}
[data-theme="white"] .chat-header{background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border-bottom-color:#e0e4e8}

/* ===== Notification System ===== */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}

.notification {
  pointer-events: all;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-show {
  opacity: 1;
  transform: translateX(0);
}

.notification-exit {
  opacity: 0;
  transform: translateX(100%);
}

.notification-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.notification-success .notification-icon {
  background: #10b981;
  color: white;
}

.notification-error .notification-icon {
  background: #ef4444;
  color: white;
}

.notification-warning .notification-icon {
  background: #f59e0b;
  color: white;
}

.notification-info .notification-icon {
  background: var(--accent-primary);
  color: white;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-message {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.notification-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  font-size: 18px;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}

.notification-close:hover {
  color: var(--text-primary);
}

/* Modal dialogs */
.notification-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.notification-modal-show {
  opacity: 1;
}

.notification-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.notification-modal-content {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-modal-show .notification-modal-content {
  transform: scale(1);
}

.notification-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-fade);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  margin: 0 auto 16px;
}

.notification-modal-message {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 24px;
}

.notification-modal-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 24px;
  outline: none;
  transition: border-color 0.2s;
}

.notification-modal-input:focus {
  border-color: var(--accent-primary);
}

.notification-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.notification-modal-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  outline: none;
}

.notification-modal-cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
}

.notification-modal-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.notification-modal-confirm {
  background: var(--accent-primary);
  color: white;
}

.notification-modal-confirm:hover {
  background: var(--accent-secondary);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .notification-container {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .notification {
    padding: 12px;
  }
  
  .notification-modal-content {
    padding: 20px;
  }
  
  /* Settings tabs mobile - smaller font and padding */
  .settings-tab {
    font-size: 0.7rem;
    padding: 0.55rem 0.7rem;
  }
  .modal-content.large { padding: 1rem 0; }
  .modal-content.large > h3{padding: 0 1rem;}
  .modal-content.large .settings-tabs{margin: 0 1rem var(--space-12) 1rem;}
  .modal-content.large .settings-content{padding: 0 1rem;}
  .modal-content.large .modal-actions{padding: 0 1rem;}
}

@media (max-width: 380px) {
  .settings-tab { font-size: 0.65rem; padding: 0.5rem 0.6rem; }
}
.slide-menu-avatar:not(:has(img)){color:#fff;background:#1a1a1a}
.avatar-btn{color:#fff;background:#1a1a1a}