:root{--bg: #0b0a1f;--sec-bg: #16152a;--text: #ffffff;--hint: #807e9c;--border-color: #25243d;--card-radius: 12px;--accent-primary: #4e8ce6;--danger: #ef4444;--success: #3ddc84}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}.card{background:var(--sec-bg);border-radius:var(--card-radius);border:1px solid var(--border-color);position:relative;overflow:hidden}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flex-center{display:flex;align-items:center;justify-content:center}h1,h2,h3,h4,p{margin:0}button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}.btn-primary{background:var(--accent-primary);color:#fff;padding:14px 20px;border-radius:12px;font-weight:600;width:100%;transition:opacity .2s,transform .1s;text-align:center}.btn-primary:active{opacity:.8;transform:scale(.98)}.custom-checkbox{position:relative;display:inline-block;width:44px;height:24px}.custom-checkbox input{opacity:0;width:0;height:0}.custom-checkbox span{position:absolute;cursor:pointer;inset:0;background-color:var(--sec-bg);border:1px solid var(--border-color);border-radius:24px;transition:.4s}.custom-checkbox span:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.4s}.custom-checkbox input:checked+span{background-color:var(--accent-primary);border-color:var(--accent-primary)}.custom-checkbox input:checked+span:before{transform:translate(20px)}.chat-row{display:flex;align-items:center;padding:12px 16px;background:var(--sec-bg);border-bottom:1px solid var(--border-color);cursor:pointer;transition:opacity .2s;margin:4px 16px;border-radius:var(--card-radius);position:relative;overflow:visible}.chat-row:active{opacity:.8}.chat-row.pinned{border-left:3px solid var(--accent-primary)}.chat-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:20px;flex-shrink:0;margin-right:14px;overflow:hidden}.chat-avatar img{width:100%;height:100%;object-fit:cover}.chat-row-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.chat-row-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.chat-row-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;display:flex;align-items:center;gap:4px}.chat-row-time{font-size:12px;color:var(--hint);flex-shrink:0;margin-left:8px}.chat-row-bottom{display:flex;justify-content:space-between;align-items:center}.chat-row-preview{font-size:14px;color:var(--hint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.chat-row-badges{display:flex;align-items:center;gap:4px;margin-left:8px}.chat-bg{background:var(--bg)}.date-separator{display:flex;justify-content:center;margin:12px 0}.date-separator span{background:var(--sec-bg);padding:4px 12px;border-radius:12px;font-size:12px;color:var(--hint);border:1px solid var(--border-color)}.message-bubble{width:100%}.bubble-in,.bubble-out{border-radius:14px;font-size:15px;line-height:1.4;word-wrap:break-word;position:relative;box-shadow:0 1px 2px #0003}.bubble-in{background:var(--sec-bg);color:var(--text);border:1px solid var(--border-color);border-bottom-left-radius:4px}.bubble-out{background:var(--accent-primary);color:#fff;border-bottom-right-radius:4px}.audio-player{display:flex;align-items:center;gap:12px;width:100%;min-width:220px}.audio-player-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;outline:none;cursor:pointer;margin:0;padding:0}.audio-player-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--thumb-color, #fff);border:2px solid #fff;cursor:pointer;box-shadow:0 1px 3px #0000004d}.audio-player-range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--thumb-color, #fff);border:2px solid #fff;cursor:pointer;box-shadow:0 1px 3px #0000004d}.audio-player-range:disabled{opacity:.5;cursor:not-allowed}.audio-player-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.audio-player-wave{width:150px}.audio-player-meta{font-size:11px;opacity:.8;margin-top:4px}.media-error{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--sec-bg);border:1px dashed var(--border-color);padding:20px;border-radius:12px;color:var(--hint);gap:8px;font-size:13px}.media-error button{color:var(--accent-primary);font-weight:500;margin-top:4px}.scroll-to-bottom{position:fixed;bottom:24px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--sec-bg);border:1px solid var(--border-color);color:var(--text);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;z-index:10;cursor:pointer}.video-note-container{position:relative;overflow:visible;border-radius:50%;background:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0 auto;cursor:pointer}.video-note-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;align-items:center;justify-content:center;border-radius:50%;pointer-events:none;opacity:1;transition:opacity .2s;z-index:2}.video-note-container.playing .video-note-overlay{opacity:0}.video-note-progress{position:absolute;top:-3px;left:-3px;width:calc(100% + 6px);height:calc(100% + 6px);pointer-events:none;transform:rotate(-90deg);z-index:3}.video-note-progress .track{fill:transparent;stroke:#fff3;stroke-width:3}.video-note-progress .fill{fill:transparent;stroke:var(--accent-primary, #3390ec);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .1s linear}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg)}.content-area{flex:1;overflow-y:auto;position:relative;display:flex;flex-direction:column}.bottom-nav{display:flex;justify-content:space-around;padding:10px 0;background:var(--bg);border-top:1px solid var(--border-color);padding-bottom:calc(10px + env(safe-area-inset-bottom,15px));flex-shrink:0}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--hint);font-size:11px;font-weight:500;transition:all .2s cubic-bezier(.25,.8,.25,1);transform:scale(.95)}.nav-item.active{color:var(--text);transform:scale(1)}.nav-item.active svg{color:var(--accent-primary)}.nav-item svg{width:24px;height:24px;transition:color .2s}.header{display:flex;align-items:center;padding:12px 16px;background:var(--bg);position:sticky;top:0;z-index:10}.spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-left-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--hint);flex:1;gap:12px}.empty-state svg{width:48px;height:48px;opacity:.3}