:root {
  --bg-dark:#1e1f22;--bg-mid:#2b2d31;--bg-light:#313338;
  --bg-hover:#35373c;--bg-active:#404249;
  --accent:#5865f2;--accent-h:#4752c4;
  --text:#dbdee1;--muted:#949ba4;--bright:#f2f3f5;
  --danger:#da373c;--success:#23a55a;--warn:#f0b232;--border:#3f4147;
  --msg-hover:rgba(255,255,255,.07);--radius:8px;--radius-sm:4px;
  --avatar-radius:50%;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg-dark);color:var(--text);font-size:14px;}

/* -- Auth -- */
#auth-screen{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5865f2,#3c45a5);}
.auth-box{background:var(--bg-mid);border-radius:16px;padding:40px;width:100%;max-width:440px;box-shadow:0 8px 32px rgba(0,0,0,.4);}
.auth-box h1{color:var(--bright);font-size:1.5rem;text-align:center;margin-bottom:4px;font-weight:700;}
.auth-box .tagline{color:var(--muted);text-align:center;margin-bottom:24px;font-size:.9rem;}
.auth-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--bg-dark);border-radius:var(--radius);padding:4px;}
.auth-tab{flex:1;padding:10px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:.95rem;cursor:pointer;font-family:inherit;transition:all .15s;}
.auth-tab.active{background:var(--accent);color:#fff;font-weight:600;}
.auth-error{background:rgba(218,55,60,.15);border:1px solid rgba(218,55,60,.4);color:#f87171;border-radius:var(--radius-sm);padding:10px 14px;font-size:.9rem;margin-bottom:14px;display:none;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;padding:10px 14px;background:var(--bg-dark);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;outline:none;font-family:inherit;transition:border-color .15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.btn-primary{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;}
.btn-primary:hover{background:var(--accent-h);}

/* -- Layout -- */
#app{display:flex;height:100vh;overflow:hidden;}
#sidebar{width:240px;min-width:240px;background:var(--bg-mid);display:flex;flex-direction:column;overflow:hidden;}
.sidebar-header{padding:14px 12px;font-size:.95rem;font-weight:700;color:var(--bright);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;}
.channel-section{flex:1;overflow-y:auto;padding:8px 0;}
.channel-section::-webkit-scrollbar{width:4px;}
.channel-section::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.section-label{padding:14px 12px 4px;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:space-between;user-select:none;}
.section-arrow{margin-right:4px;font-size:.6rem;}
.section-arrow .ui-icon{vertical-align:middle;}
.add-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1.1rem;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;font-family:inherit;}
.add-btn:hover{color:var(--bright);}
.channel-item{display:flex;align-items:center;gap:5px;padding:5px 14px;margin:1px 6px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);font-size:.88rem;position:relative;}
.channel-item:hover{background:var(--bg-hover);color:var(--text);}
.channel-item.active{background:var(--bg-active);color:var(--bright);font-weight:500;}
.channel-item .hash{font-size:1rem;flex-shrink:0;}
.channel-item .ch-name-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-item{display:flex;align-items:center;gap:8px;padding:4px 14px;margin:1px 6px;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);font-size:.88rem;position:relative;}
.dm-item:hover{background:var(--bg-hover);color:var(--text);}
.dm-item.active{background:var(--bg-active);color:var(--bright);font-weight:500;}
.dm-item .dm-avatar{width:28px;height:28px;border-radius:var(--avatar-radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;color:#fff;overflow:hidden;flex-shrink:0;}
.dm-item .dm-avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--avatar-radius);}
.sidebar-footer{padding:6px 8px;background:var(--bg-dark);display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);flex-shrink:0;}
.avatar{width:32px;height:32px;border-radius:var(--avatar-radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;color:#fff;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:var(--avatar-radius);}
.my-status-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg-dark);}
.status-online{background:var(--success);}
.status-away{background:var(--warn);}
.status-dnd{background:var(--danger);}
.status-offline,.status-invisible{background:var(--muted);}
.user-info{flex:1;min-width:0;}
.user-info .name{font-size:.82rem;font-weight:600;color:var(--bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-info .tag{font-size:.7rem;color:var(--muted);}
.icon-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:4px;font-size:.9rem;flex-shrink:0;font-family:inherit;transition:color .15s;}
.icon-btn:hover{color:var(--bright);}

/* -- Main -- */
#main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-light);}
.channel-header{height:48px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--bg-light);display:flex;align-items:center;gap:0;flex-shrink:0;box-shadow:0 1px 0 rgba(0,0,0,.2);}
.channel-header .icon-btn{padding:4px 6px;}
/* Channel name + topic truncate with an ellipsis instead of wrapping to multiple
   lines. In a flex row, ellipsis needs overflow:hidden + min-width:0. The name
   keeps its content width but caps; the topic absorbs the remaining space. */
#ch-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%;flex-shrink:0;}
#ch-topic{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1;}
.no-channel-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:12px;text-align:center;padding:32px;}
.no-channel-placeholder h2{color:var(--bright);font-size:1.3rem;}
.no-channel-placeholder p{font-size:.9rem;line-height:1.5;}

/* -- Messages -- */
.messages-container{flex:1;min-height:0;overflow-y:auto;padding-bottom:8px;display:flex;flex-direction:column-reverse;overflow-anchor:none;}
.messages-container::-webkit-scrollbar{width:4px;}
.messages-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.msg-group{padding:2px 16px;position:relative;}
.msg-group:hover{background:var(--msg-hover);}
.msg-group.first{padding-top:14px;margin-top:4px;}
.msg-body{margin-left:62px;}
.msg-header{display:flex;align-items:baseline;gap:6px;margin-bottom:1px;}
.msg-author{font-size:.875rem;font-weight:600;color:var(--bright);}
.msg-author.role-admin{color:var(--warn);}
.msg-time{font-size:.7rem;color:var(--muted);}
.msg-time-side{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:.65rem;color:transparent;width:40px;text-align:center;}
.msg-group:hover .msg-time-side{color:var(--muted);}
.msg-content{font-size:.9rem;color:var(--text);line-height:1.55;word-break:break-word;}
.msg-content.edited::after{content:' (edited)';font-size:.7rem;color:var(--muted);}
/* Reply quote on a posted message -- Discord-style spine connecting the quoted
   line up to the avatar of the message below it. Lives inside .msg-body
   (margin-left:62px); the avatar center sits at x=36px from the group edge, i.e.
   -26px from the body's left edge. */
.reply-ref{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:2px;margin-left:6px;font-size:.8rem;color:var(--muted);cursor:pointer;line-height:1.1;min-width:0;}
.reply-ref:hover .reply-ref-name,.reply-ref:hover .reply-ref-text{color:var(--text);}
.reply-ref-spine{position:absolute;left:-48px;width:42px;top:50%;bottom:-4px;border-left:2px solid #4e5058;border-top:2px solid #4e5058;border-top-left-radius:8px;pointer-events:none;}
.msg-group.has-reply .avatar-lg{top:34px;}
.reply-ref-av{width:16px;height:16px;border-radius:var(--avatar-radius);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.reply-ref-av img{width:100%;height:100%;object-fit:cover;}
.reply-ref-initials{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;}
.reply-ref-name{font-weight:500;color:#b5bac1;flex-shrink:0;}
.reply-ref-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* Composer "replying to" bar -- slim, attached to the top of the input. */
.reply-bar{display:flex;align-items:center;gap:8px;padding:7px 14px;margin:0 12px;background:var(--bg-hover);border-radius:8px 8px 0 0;border-bottom:1px solid var(--bg-dark);font-size:.82rem;color:var(--muted);}
.reply-bar-icon{flex-shrink:0;}
.reply-bar-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reply-bar-name{color:var(--bright);font-weight:600;}
.reply-bar-cancel{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.15rem;line-height:1;padding:0 2px;flex-shrink:0;border-radius:4px;}
.reply-bar-cancel:hover{color:var(--bright);}
.day-sep{text-align:center;margin:16px 0 8px;position:relative;display:flex;align-items:center;}
.day-sep::before,.day-sep::after{content:'';flex:1;height:1px;background:var(--border);}
.day-sep span{padding:0 12px;font-size:.72rem;color:var(--muted);white-space:nowrap;}
.avatar-lg{width:40px;height:40px;border-radius:var(--avatar-radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#fff;position:absolute;left:16px;top:14px;overflow:hidden;flex-shrink:0;}
.avatar-lg img{width:100%;height:100%;object-fit:cover;border-radius:var(--avatar-radius);}

/* -- Input -- */
.chat-input-area{padding:0 16px 20px;flex-shrink:0;}
.input-box{background:var(--bg-hover);border-radius:var(--radius);border:2px solid transparent;display:flex;align-items:flex-end;gap:4px;padding:0 10px;}
.input-wrapper{flex:1;position:relative;}
#msg-input{display:block;width:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:.9375rem;padding:11px 4px;resize:none;max-height:180px;min-height:42px;font-family:inherit;line-height:1.5;}
#msg-input::placeholder{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* -- Scrollbar global -- */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* -- Upload -- */
.upload-progress{padding:6px 10px;background:var(--bg-dark);border-top:1px solid var(--border);}
.upload-progress-inner{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);}
.upload-progress-bar-wrap{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.upload-progress-bar{height:100%;background:var(--accent);border-radius:3px;width:0%;transition:width .1s;}
.upload-cancel-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:2px 4px;border-radius:3px;font-family:inherit;}
.upload-cancel-btn:hover{color:var(--bright);background:var(--bg-hover);}
.file-preview{display:none;padding:8px 10px 4px;gap:6px;flex-wrap:wrap;}
.file-preview.show{display:flex;}
.file-thumb{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 8px;font-size:.82rem;color:var(--muted);}
.file-thumb .remove-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;padding:0 2px;font-family:inherit;}
.file-thumb .remove-btn:hover{color:var(--danger);}
.input-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;border-radius:4px;font-size:1.1rem;flex-shrink:0;line-height:1;font-family:inherit;
  height:42px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;}
#gif-btn{font-weight:700;font-size:1.05rem;letter-spacing:.01em;min-width:32px;padding:0 6px;}
.input-btn:hover{color:var(--bright);}

/* -- GIF hover play -- */
img.gif-auto{animation-play-state:paused;}
.msg-content img[src$=".gif"]{cursor:pointer;}

/* -- Message actions -- */
.msg-group{position:relative;}
.msg-actions{display:none;position:absolute;right:8px;top:4px;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 4px;gap:2px;align-items:center;z-index:10;}
.msg-group:hover .msg-actions{display:flex;}
.msg-action-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:4px 6px;border-radius:3px;line-height:1;font-family:inherit;}
.msg-action-btn:hover{background:var(--bg-hover);color:var(--bright);}

/* -- Reactions -- */
.msg-reactions{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;margin-left:62px;}
.reaction-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;background:rgba(88,101,242,.1);border:1px solid rgba(88,101,242,.3);border-radius:var(--radius);font-size:.88rem;cursor:pointer;color:var(--text);transition:all .1s;position:relative;}
.reaction-btn:hover{background:rgba(88,101,242,.2);border-color:var(--accent);}
.reaction-btn.reacted{background:rgba(88,101,242,.25);border-color:var(--accent);color:var(--bright);}
.reaction-btn .rx-cnt{font-size:.82rem;font-weight:600;color:var(--muted);}
.reaction-btn.reacted .rx-cnt{color:var(--bright);}
.rx-tooltip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--bright);font-size:.75rem;padding:5px 9px;border-radius:var(--radius-sm);white-space:normal;text-align:center;line-height:1.4;pointer-events:none;border:1px solid var(--border);z-index:60;max-width:220px;}
.reaction-btn:hover .rx-tooltip{display:block;}
.reaction-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;background:transparent;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;color:var(--muted);font-size:.85rem;transition:all .1s;font-family:inherit;}
.reaction-add:hover{background:var(--bg-hover);border-color:var(--border);color:var(--bright);}

/* -- Emoji picker -- */
.emoji-picker{position:fixed;width:320px;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;display:none;overflow:hidden;}
.emoji-picker.show{display:block;}
.emoji-picker-search{padding:8px;border-bottom:1px solid var(--border);}
.emoji-picker-search input{width:100%;background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:6px 10px;font-size:.85rem;outline:none;font-family:inherit;}
.emoji-picker-grid{display:flex;flex-wrap:wrap;gap:2px;padding:8px;max-height:200px;overflow-y:auto;}
.emoji-picker-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;font-size:1.2rem;}
.emoji-picker-item:hover{background:var(--bg-hover);}

/* -- Inline edit -- */
.msg-edit-wrap{margin-top:2px;}
.msg-edit-input{width:100%;background:var(--bg-dark);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--text);padding:6px 8px;font-size:.9rem;outline:none;resize:none;font-family:inherit;line-height:1.5;}
.msg-edit-actions{display:flex;gap:6px;margin-top:4px;font-size:.78rem;color:var(--muted);}
.msg-edit-actions a{cursor:pointer;color:var(--accent);}
.msg-edit-actions a:hover{text-decoration:underline;}

/* -- File preview cards (v1 style) -- */
.fp-chip{display:inline-flex;flex-direction:column;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:140px;flex-shrink:0;}
.fp-thumb{width:140px;height:108px;background:var(--bg-dark);position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.fp-thumb img,.fp-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.fp-file-icon{font-size:2rem;color:var(--muted);}
.fp-name{font-size:.68rem;color:var(--muted);padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fp-actions{display:flex;border-top:1px solid var(--border);}
.fp-action{flex:1;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px 2px;font-size:.78rem;font-family:inherit;transition:all .1s;}
.fp-action:hover{background:var(--bg-hover);color:var(--bright);}
.fp-action.danger:hover{background:rgba(218,55,60,.12);color:var(--danger);}

/* -- GIF hover-play -- */
.gif-wrap{position:relative;display:inline-block;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;max-width:400px;line-height:0;margin-top:4px;}
.gif-wrap .gif-canvas{display:block;max-width:400px;max-height:300px;width:auto;height:auto;}
.gif-wrap .gif-img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
.gif-wrap:hover .gif-img{opacity:1;}
.fp-gif-meta{display:flex;flex-direction:column;gap:3px;padding:3px 4px;}
.fp-meta-input{background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.72rem;padding:2px 6px;width:100%;min-width:0;font-family:inherit;outline:none;}
.fp-meta-input:focus{border-color:var(--accent);}
.fp-meta-input::placeholder{color:var(--muted);}
.fp-nsfw-label{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--muted);padding:2px 4px;cursor:pointer;user-select:none;}
.fp-nsfw-label input{cursor:pointer;}

/* -- Admin -- */
.admin-tab{padding:7px 16px;cursor:pointer;font-size:.88rem;color:var(--muted);border-radius:var(--radius-sm);margin:1px 6px;transition:all .1s;}
.admin-tab:hover{background:var(--bg-hover);color:var(--text);}
.admin-tab.active{background:var(--bg-active);color:var(--bright);font-weight:500;}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.admin-table th{text-align:left;padding:6px 8px;color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);}
.admin-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);vertical-align:middle;}
.admin-table tr:hover td{background:var(--bg-hover);}
.admin-input{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:6px 10px;font-size:.88rem;outline:none;font-family:inherit;width:100%;}
.admin-input:focus{border-color:var(--accent);}
.admin-btn{background:var(--accent);border:none;color:#fff;border-radius:var(--radius-sm);padding:6px 14px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;}
.admin-btn:hover{background:var(--accent-h);}
.admin-btn-danger{background:var(--danger);}
.admin-btn-danger:hover{background:#b02a2d;}
.admin-section{margin-bottom:24px;}
.admin-section h3{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px;}
.admin-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.admin-label{font-size:.82rem;color:var(--muted);width:180px;flex-shrink:0;}

/* -- User settings / settings tabs -- */
.settings-tab{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:6px 14px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;font-size:.88rem;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.settings-tab:hover{color:var(--text);}
.settings-tab.active{color:var(--bright);border-bottom-color:var(--accent);font-weight:600;}
.avatar-upload-area{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.avatar-preview{width:64px;height:64px;border-radius:var(--avatar-radius);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;color:#fff;background:var(--bg-dark);}
.avatar-preview img{width:100%;height:100%;object-fit:cover;}
.avatar-upload-btn{background:var(--bg-hover);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:6px 12px;font-size:.82rem;cursor:pointer;font-family:inherit;transition:all .15s;}
.avatar-upload-btn:hover{background:var(--bg-active);color:var(--bright);}

/* -- Channel gear -- */
.ch-gear{display:none;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.75rem;padding:2px 4px;border-radius:3px;flex-shrink:0;font-family:inherit;}
.channel-item:hover .ch-gear{display:block;}
.member-gear{display:none;}
.dm-item:hover .member-gear{display:inline-flex;}
.ch-gear:hover{color:var(--bright);background:var(--bg-active);}

/* -- Admin badges -- */
.badge-admin{display:inline-block;background:rgba(88,101,242,.25);color:#8fa3f7;padding:1px 6px;border-radius:3px;font-size:.7rem;font-weight:700;margin-left:4px;}
.badge-ch-admin{display:inline-block;background:rgba(240,178,50,.2);color:var(--warn);padding:1px 6px;border-radius:3px;font-size:.7rem;font-weight:700;margin-left:4px;}

/* -- Modal action buttons (matching v1) -- */
.btn-cancel{padding:8px 18px;background:transparent;border:none;color:var(--text);cursor:pointer;font-size:.9rem;border-radius:var(--radius-sm);font-family:inherit;}
.btn-cancel:hover{text-decoration:underline;}
.btn-ok{padding:8px 18px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-ok:hover{background:var(--accent-h);}
.btn-danger{padding:8px 18px;background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit;}
.btn-danger:hover{background:#b02a2d;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap;}

/* -- Custom emoji -- */
.custom-emoji{width:22px;height:22px;vertical-align:middle;object-fit:contain;display:inline-block;background:transparent;}
.reaction-btn .rx-emoji img,.rx-custom-emoji{width:20px;height:20px;vertical-align:middle;object-fit:contain;background:transparent;}
.em-chip{display:flex;align-items:center;gap:6px;background:var(--bg-dark);border-radius:var(--radius-sm);padding:5px 8px;}
.em-chip img{width:24px;height:24px;object-fit:contain;background:transparent;}
.em-chip .em-name{color:var(--muted);font-size:.82rem;}
.em-chip .em-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.9rem;padding:0 2px;font-family:inherit;}
.em-chip .em-del:hover{color:var(--danger);}
.emoji-manager-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;margin-bottom:12px;}

/* -- Rx-picker sections -- */
.rx-section-label{padding:6px 8px 2px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.rx-grid{display:flex;flex-wrap:wrap;gap:1px;padding:0 4px 6px;}
.rx-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:1.15rem;position:relative;flex-shrink:0;}
.rx-btn:hover{background:var(--bg-hover);}
.rx-btn img{width:22px;height:22px;object-fit:contain;}
.rx-tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--bg-dark);color:var(--bright);font-size:.7rem;padding:3px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;border:1px solid var(--border);z-index:110;}
.rx-btn:hover .rx-tip{display:block;}

/* -- Ep-btn (message compose picker) -- */
.ep-btn{font-size:1.2rem;background:transparent;border:none;cursor:pointer;border-radius:4px;padding:3px;line-height:1;display:flex;align-items:center;justify-content:center;}
.ep-btn:hover{background:var(--bg-hover);}

/* -- UI Icons -- */
/* invert() only applied inside button contexts -- never globally to avoid affecting message images */
.ui-icon{display:inline-block;vertical-align:middle;object-fit:contain;pointer-events:none;filter:invert(1) opacity(0.5);}
/* Icon-set swap: a .ui-icon showing a SET image (not a Classic fallback) in a
   set whose invert flag is OFF is shown as-uploaded (no invert filter). Classic
   and fallback icons keep the default invert above. Scoped to set images only;
   preview surfaces are excluded from the swap pass so they're never tagged. */
body[data-iconset-noinvert] .ui-icon.is-setimg{filter:none !important;}
.header-btn:hover .ui-icon,.msg-action-btn:hover .ui-icon,.input-btn:hover .ui-icon,.header-btn.active .ui-icon{filter:invert(1) opacity(0.9);}
.icon-btn .ui-icon,
.msg-action-btn .ui-icon,
.ch-gear .ui-icon,
.channel-item .ui-icon,
#admin-btn .ui-icon,
#calendar-btn .ui-icon,
#notif-btn .ui-icon,
#sound-btn .ui-icon,
#voice-mute-btn .ui-icon,
#voice-deafen-btn .ui-icon,
#vc-mute-btn .ui-icon,
#vc-deafen-btn .ui-icon,
.voice-leave-btn .ui-icon { filter:invert(1) opacity(.6); transition:filter .15s; }
.reply-bar .reply-bar-icon { filter:invert(1) opacity(.7); }
.icon-btn:hover .ui-icon,
.input-btn:hover .ui-icon,
.msg-action-btn:hover .ui-icon,
.ch-gear:hover .ui-icon,
.channel-item:hover .ui-icon,
.channel-item.active .ui-icon,
#admin-btn:hover .ui-icon,
#emoji-btn:hover .ui-icon,
#poll-btn:hover .ui-icon,
#calendar-btn:hover .ui-icon,
#notif-btn:hover .ui-icon,
#notif-btn.active .ui-icon,
#sound-btn:hover .ui-icon,
#sound-btn.active .ui-icon,
#voice-mute-btn:hover .ui-icon,
#voice-deafen-btn:hover .ui-icon,
#vc-mute-btn:hover .ui-icon,
#vc-deafen-btn:hover .ui-icon,
.voice-leave-btn:hover .ui-icon { filter:invert(1) opacity(1); }

/* -- Polls -- */
.poll-card{background:var(--bg-dark);border:1px solid var(--border);border-radius:8px;padding:12px 16px 10px;max-width:460px;margin-top:4px}
.poll-question{font-size:.9rem;font-weight:700;color:var(--bright);margin-bottom:10px;line-height:1.3}
.poll-option{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:5px;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;transition:border-color .12s,background .12s;user-select:none}
.poll-option:hover{border-color:var(--accent);background:rgba(88,101,242,.07)}
.poll-option.selected{border-color:var(--accent);background:rgba(88,101,242,.15)}
.poll-option-indicator{width:16px;height:16px;border:2px solid var(--muted);border-radius:50%;flex-shrink:0;transition:all .12s}
.poll-option.selected .poll-option-indicator{border-color:var(--accent);background:var(--accent)}
.poll-option-multi .poll-option-indicator{border-radius:3px}
.poll-option-emoji{font-size:1rem;flex-shrink:0;min-width:18px;text-align:center}
.poll-option-text{flex:1;font-size:.875rem;color:var(--text)}
.poll-result-row{margin-bottom:7px}
.poll-result-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.poll-result-emoji{font-size:.95rem;flex-shrink:0;min-width:18px;text-align:center}
.poll-result-text{font-size:.875rem;color:var(--text);flex:1}
.poll-result-pct{font-size:.78rem;color:var(--muted);flex-shrink:0;min-width:32px;text-align:right}
.poll-result-bar-wrap{height:8px;background:var(--bg-hover);border-radius:4px;overflow:hidden}
.poll-result-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .4s ease}
.poll-result-row.my-vote .poll-result-bar{background:#3ba55d}
.poll-result-row.my-vote .poll-result-text{color:var(--bright);font-weight:600}
.poll-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);gap:8px}
.poll-footer-left{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}
.poll-footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.poll-vote-btn{padding:5px 16px;background:var(--accent);color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:.82rem;font-weight:600;font-family:inherit}
.poll-vote-btn:hover{background:var(--accent-h)}
.poll-show-results,.poll-remove-vote-btn{background:transparent;border:none;color:var(--muted);font-size:.82rem;cursor:pointer;padding:0;font-family:inherit}
.poll-show-results:hover,.poll-remove-vote-btn:hover{color:var(--bright);text-decoration:underline}
.poll-ended-tag{background:rgba(237,66,69,.12);color:#ed4245;padding:1px 7px;border-radius:3px;font-size:.72rem;font-weight:700}
.poll-end-btn,.poll-edit-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:3px;padding:1px 7px;font-size:.72rem;cursor:pointer;font-family:inherit}
.poll-end-btn:hover{color:#ed4245;border-color:#ed4245}
.poll-edit-btn:hover{color:var(--bright);border-color:var(--muted)}
.poll-answer-input-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.poll-answer-input-row input{flex:1;background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:7px 10px;font-size:.875rem;outline:none;font-family:inherit}
.poll-answer-input-row input:focus{border-color:var(--accent)}
.poll-answer-emoji-btn{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;cursor:pointer;font-size:.95rem;flex-shrink:0;color:var(--text);line-height:1;font-family:inherit}
.poll-answer-emoji-btn:hover{border-color:var(--accent)}
.poll-answer-del{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:4px;border-radius:3px;flex-shrink:0;font-family:inherit}
.poll-answer-del:hover{color:var(--danger)}

/* -- Calendar & Events -- */
.etab{flex:1;padding:6px 10px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;cursor:pointer;color:var(--muted);background:transparent;border:none;font-family:inherit;transition:background .1s,color .1s}
.etab.active{background:var(--bg-hover);color:var(--text)}
.etab:hover:not(.active){color:var(--text)}
.att-person{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.att-person:last-child{border-bottom:none}
.cal-event{font-size:.67rem;padding:1px 4px;border-radius:3px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;line-height:1.4;height:16px;box-sizing:border-box}
.cal-event:hover{filter:brightness(1.15)}

/* -- Voice -- */
.vc-tile{width:120px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:var(--bg-dark);border-radius:var(--radius);border:2px solid transparent;transition:border-color .15s}
.vc-tile.speaking{border-color:#3ba55d}
.vc-tile-avatar{width:72px;height:72px;border-radius:var(--avatar-radius);overflow:hidden;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vc-tile-name{font-size:.8rem;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vc-tile-muted{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:3px}

/* -- Notification toggle switch -- */
.notif-toggle-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.82rem;color:var(--text);user-select:none;white-space:nowrap}
.notif-toggle-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.notif-toggle-track{position:relative;display:inline-block;width:32px;height:18px;background:var(--bg-hover);border-radius:9px;border:1px solid var(--border);transition:background .15s,border-color .15s;flex-shrink:0}
.notif-toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:left .15s,background .15s}
.notif-toggle-label input:checked ~ .notif-toggle-track{background:var(--accent);border-color:var(--accent)}
.notif-toggle-label input:checked ~ .notif-toggle-track .notif-toggle-thumb{left:16px;background:#fff}

/* -- Link Previews -- */
.url-preview-wrap{margin-top:6px;max-width:480px}
.url-preview{display:flex;flex-direction:column;background:var(--bg-mid);border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;color:inherit;border-left:3px solid var(--accent);border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding-bottom:8px}
.url-preview-site{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;padding-top:4px}
.url-preview-title{font-size:.88rem;font-weight:600;color:var(--accent);text-decoration:none;margin-bottom:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.url-preview-desc{font-size:.8rem;color:var(--text);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:6px}
.url-preview-author{font-size:.82rem;color:var(--text);font-weight:500;margin-bottom:2px}
.url-preview-media{display:block;width:calc(100% - 16px);margin:0 8px;max-height:300px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer}
.url-preview-embed{display:block;width:calc(100% - 16px);margin:0 8px;aspect-ratio:16/9;border:none;border-radius:var(--radius-sm)}

/* -- Markdown & Mentions -- */
.mention{background:rgba(88,101,242,.25);color:var(--accent);border-radius:3px;padding:0 3px;font-weight:600;cursor:pointer}
.mention-me{background:rgba(250,168,26,.2);color:#f0b232}
.mention-everyone{background:rgba(250,168,26,.2);color:#f0b232}
.spoiler{background:var(--bg-active);color:transparent;border-radius:3px;cursor:pointer;padding:0 2px;transition:color .1s}
.spoiler.revealed{color:var(--text)}
.msg-group.mentioned{background:rgba(250,168,26,.07);border-left:2px solid rgba(250,168,26,.5)}
.msg-group.pinned{background:rgba(88,101,242,.07);border-left:2px solid rgba(88,101,242,.4)}
/* Pin panel and badge icons need inversion since they're not inside standard button selectors */
#pin-panel .ui-icon{filter:invert(1) opacity(.7)}
.pin-badge .ui-icon{filter:invert(1) opacity(.5)}
.pin-item-unpin .ui-icon{filter:invert(1) opacity(.6)}
.pin-item-unpin:hover .ui-icon{filter:invert(1) opacity(1)}
.pin-item:hover{background:var(--bg-hover)}
.mention-item{padding:6px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.88rem}
.mention-item:hover,.mention-item.active{background:var(--bg-hover)}
.mention-item-name{color:var(--bright);font-weight:500}
.mention-item-user{color:var(--muted);font-size:.78rem}

/* -- Silent indicator & spoiler button -- */
.silent-indicator{opacity:.6;vertical-align:middle;margin-left:4px;filter:invert(1)}
.fp-action.active{background:var(--accent);color:#fff}
.fp-action img.ui-icon{filter:invert(1) opacity(.7)}
.fp-action:hover img.ui-icon,.fp-action.active img.ui-icon{filter:invert(1) opacity(1)}

/* -- Image spoiler -- */
.img-spoiler.revealed .img-spoiler-blur{filter:none!important;transform:none!important}
.img-spoiler.revealed .img-spoiler-overlay{display:none!important}
.img-spoiler.revealed{cursor:default!important}

/* -- Unread bar -- */
.unread-bar{display:flex;align-items:center;gap:0;margin:8px 0;opacity:1;transition:opacity .3s}
.unread-bar::before,.unread-bar::after{content:'';flex:1;height:1px;background:#ed4245}
.unread-bar span{padding:0 10px;font-size:.72rem;font-weight:700;color:#ed4245;white-space:nowrap;letter-spacing:.04em}
.unread-bar.dismissed{opacity:0}

/* Search */
.search-result:hover{background:var(--bg-hover);}
.search-term{background:rgba(88,101,242,.35);color:var(--bright);border-radius:3px;padding:0 2px;}
/* Search-hit highlight: drop shadow appears instantly then fades to nothing over 3s.
   A keyframe animation (not a transition) gives us full control: frame 0 is the lit
   state, frame 100% is clear. The class is added after centering; animationend removes it. */
@keyframes search-hit-fade{
  0%{box-shadow:0 0 0 2px var(--accent), 0 0 16px 4px rgba(88,101,242,.55);background-color:rgba(88,101,242,.22);}
  100%{box-shadow:0 0 0 0 rgba(88,101,242,0), 0 0 0 0 rgba(88,101,242,0);background-color:rgba(88,101,242,0);}
}
.msg-group.search-hit{animation:search-hit-fade 3s ease-out forwards;}
/* The overlay search icon sits in a bare img, not an .icon-btn, so invert it explicitly */
#search-overlay .ui-icon{filter:invert(1) opacity(.7);}
#upload-overlay .ui-icon{filter:invert(1) opacity(.7);}
.upload-iconbtn:hover .ui-icon,.upload-iconbtn.active .ui-icon{filter:invert(1) opacity(1);}

/* Channel reorder: grab cursor for admin-draggable channel items */
.channel-item[draggable="true"]{cursor:grab;}
.channel-item[draggable="true"]:active{cursor:grabbing;}

/* -- Channel effects -- */
.fx-balloon{position:absolute;bottom:-60px;border-radius:50%;opacity:.9;
  animation-name:fx-balloon-rise;animation-timing-function:ease-in;animation-fill-mode:forwards;}
.fx-balloon::after{content:'';position:absolute;bottom:-8px;left:50%;width:1px;height:10px;background:rgba(255,255,255,.5);}
@keyframes fx-balloon-rise{
  0%{transform:translateY(0) translateX(0);opacity:.9;}
  50%{transform:translateY(-50vh) translateX(12px);}
  100%{transform:translateY(-105vh) translateX(-12px);opacity:0;}
}
.fx-laser{position:absolute;left:-30%;width:30%;height:3px;border-radius:2px;
  animation-name:fx-laser-sweep;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes fx-laser-sweep{
  0%{left:-30%;opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{left:130%;opacity:0;}
}
.fx-salute{position:absolute;top:38%;left:50%;transform:translateX(-50%);
  font-size:5rem;font-weight:700;color:var(--bright);display:flex;align-items:flex-end;
  text-shadow:0 2px 12px rgba(0,0,0,.6);animation:fx-salute-fade 2.6s ease-out forwards;}
.fx-salute .fx-salute-7{display:inline-block;transform-origin:bottom left;
  animation:fx-salute-arm 2.6s ease-in-out forwards;}
@keyframes fx-salute-arm{
  0%{transform:rotate(0deg);}
  25%{transform:rotate(-35deg) translateY(-6px);}
  55%{transform:rotate(-35deg) translateY(-6px);}
  100%{transform:rotate(0deg);}
}
@keyframes fx-salute-fade{
  0%{opacity:0;transform:translateX(-50%) scale(.7);}
  15%{opacity:1;transform:translateX(-50%) scale(1);}
  80%{opacity:1;}
  100%{opacity:0;}
}
/* Dramatic delete: characters fall and fade */
.fx-fallchar{display:inline-block;animation:fx-fall 1s ease-in forwards;}
@keyframes fx-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  100%{transform:translateY(120px) rotate(40deg);opacity:0;}
}
/* IRC-style /me action line */
.action-msg .msg-action-line{padding:2px 16px;color:var(--muted);font-style:italic;}
.action-msg .action-name{color:var(--bright);font-weight:600;font-style:normal;}

/* Toggle switches (channel animation settings) */
.anim-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.anim-toggle label[for]{margin:0;cursor:pointer;}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;inset:0;background:var(--bg-active);border-radius:22px;transition:background .15s;cursor:pointer;}
.switch .slider::before{content:'';position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider::before{transform:translateX(18px);}

/* Bulk upload: per-GIF metadata popover (collapsed by default, opens above the chip) */
.fp-chip{position:relative;}
.fp-meta-pop{display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius-sm);}

/* -- Upload staging modal -- */
.upload-thumb{width:150px;height:150px;border-radius:var(--radius);background:var(--bg-dark);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.upload-fileicon{width:64px;height:64px;border-radius:var(--radius);background:var(--bg-hover);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.upload-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--border);}
.upload-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:30px;border:1px solid var(--border);background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .12s;}
.upload-iconbtn:hover{background:var(--bg-hover);}
.upload-iconbtn.active{background:var(--accent);border-color:var(--accent);}
.upload-iconbtn.danger:hover{background:rgba(218,55,60,.15);border-color:var(--danger);}
.upload-navbtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.3rem;line-height:1;padding:0 4px;font-family:inherit;}
.upload-navbtn:hover{color:var(--bright);}
.upload-caption-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-dark);}
.upload-caption-row input{flex:1;min-width:0;background:var(--bg-mid);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.9rem;padding:8px 12px;font-family:inherit;outline:none;}
.upload-caption-row input:focus{border-color:var(--accent);}
.upload-send-btn{font-size:.88rem;padding:8px 20px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap;}
.upload-send-btn:hover{background:var(--accent-h);}
.upload-tags{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.upload-tag{font-size:.75rem;background:rgba(88,101,242,.2);color:var(--bright);padding:3px 8px;border-radius:12px;display:inline-flex;align-items:center;gap:5px;}
.upload-tag-x{cursor:pointer;color:var(--muted);font-weight:700;}
.upload-tag-x:hover{color:var(--danger);}
.upload-tag-input{background:none;border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:.75rem;padding:3px 8px;width:90px;font-family:inherit;outline:none;}
.upload-tag-input:focus{border-color:var(--accent);}

/* In-message file download card (Concept A) */
.file-card{display:inline-flex;align-items:center;gap:12px;width:320px;max-width:100%;background:var(--bg-mid);border:1px solid var(--border);border-radius:12px;padding:11px 13px;text-decoration:none;transition:box-shadow .12s,border-color .12s;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.file-card:hover{box-shadow:0 5px 16px rgba(0,0,0,.5);border-color:#5a5d64;}
.file-card-icon{width:38px;height:38px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-card-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.file-card-name{font-size:.85rem;font-weight:600;color:var(--bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-card-ext{font-size:.72rem;color:var(--muted);margin-top:2px;}
.file-card-dl{flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.file-card-icon .ui-icon{filter:invert(1);}
.file-card-dl .ui-icon{filter:invert(1) opacity(.55);}
.file-card:hover .file-card-dl .ui-icon{filter:invert(1) opacity(1);}

/* Multi-media gallery grid (Option A: uniform 2-column) + single message image */
.msg-img{max-width:400px;max-height:300px;border-radius:12px;display:block;cursor:pointer;}
.img-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:340px;max-width:100%;margin-top:4px;border-radius:12px;overflow:hidden;}
.img-grid-cell{position:relative;overflow:hidden;}
.img-grid-cell img,.img-grid-cell video{width:100%;height:108px;object-fit:cover;display:block;cursor:pointer;}
/* Odd item out: a final cell with no pair spans the full row. */
.img-grid-cell:last-child:nth-child(odd){grid-column:1/-1;}
.img-grid-cell:last-child:nth-child(odd) img,.img-grid-cell:last-child:nth-child(odd) video{height:140px;}
/* Animated cells use the hover-to-play gif-wrap, sized to fill the cell. */
.img-grid-cell .gif-wrap-cell{display:block;width:100%;height:108px;max-width:none;margin-top:0;border-radius:0;line-height:0;}
.img-grid-cell .gif-wrap-cell .gif-canvas{width:100%;height:108px;max-width:none;max-height:none;object-fit:cover;}
.img-grid-cell .gif-wrap-cell .gif-img{width:100%;height:108px;object-fit:cover;}
.img-grid-cell:last-child:nth-child(odd) .gif-wrap-cell,
.img-grid-cell:last-child:nth-child(odd) .gif-wrap-cell .gif-canvas,
.img-grid-cell:last-child:nth-child(odd) .gif-wrap-cell .gif-img{height:140px;}
/* Corner badge marks video (play) and animated (GIF) cells. */
.img-grid-badge{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;min-width:22px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;pointer-events:none;padding:0 6px;}
/* Spoiler cell: blurred media + SPOILER badge until clicked. */
.img-grid-cell-spoiler{cursor:pointer;}
.img-grid-cell-spoiler img,.img-grid-cell-spoiler video,.img-grid-cell-spoiler canvas{filter:blur(18px);transform:scale(1.15);}
.img-grid-cell-spoiler.revealed img,.img-grid-cell-spoiler.revealed video,.img-grid-cell-spoiler.revealed canvas{filter:none;transform:none;}
/* Keep an unrevealed spoiler gif static even on hover. */
.img-grid-cell-spoiler:not(.revealed) .gif-wrap:hover .gif-img{opacity:0;}
.img-grid-spoiler-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:20px;pointer-events:none;white-space:nowrap;}
.img-grid-cell-spoiler.revealed .img-grid-spoiler-badge{display:none;}

/* Grid cell hover "pop": zoom + dark veil + an enlarge affordance (CSS corner arrows).
   Applied to non-spoiler cells (and revealed ones via the cell still being hover-capable).
   The veil/affordance are pointer-events:none so clicks reach the media underneath. */
.img-grid-cell img,.img-grid-cell video,.img-grid-cell .gif-canvas,.img-grid-cell .gif-img{transition:transform .18s ease;}
.img-grid-cell:not(.img-grid-cell-spoiler):hover img,
.img-grid-cell:not(.img-grid-cell-spoiler):hover video,
.img-grid-cell:not(.img-grid-cell-spoiler):hover .gif-canvas,
.img-grid-cell:not(.img-grid-cell-spoiler):hover .gif-img{transform:scale(1.06);}
/* Keep an unrevealed spoiler's blur scale on hover (no zoom pop). */
.img-grid-cell-spoiler:not(.revealed):hover img,
.img-grid-cell-spoiler:not(.revealed):hover video,
.img-grid-cell-spoiler:not(.revealed):hover canvas{transform:scale(1.15);}
/* Veil */
.img-grid-cell:not(.img-grid-cell-spoiler)::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:1;}
.img-grid-cell:not(.img-grid-cell-spoiler):hover::before{opacity:1;}
/* Enlarge affordance: four corner brackets drawn in CSS, centered, fades in on hover. */
.img-grid-cell:not(.img-grid-cell-spoiler)::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:2;
  background:
    linear-gradient(#fff,#fff) 0 0/8px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 0/2px 8px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/8px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/2px 8px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/8px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/2px 8px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/8px 2px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/2px 8px no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));}
.img-grid-cell:not(.img-grid-cell-spoiler):hover::after{opacity:.95;transform:translate(-50%,-50%) scale(1);}
/* Badge sits above the veil; hide it on hover so the enlarge cue is unobstructed. */
.img-grid-badge{z-index:3;}
.img-grid-cell:hover .img-grid-badge{opacity:0;transition:opacity .15s ease;}

/* Read receipts: small avatar cluster hanging at the bottom-right of the last
   message each user has read (Element-style). */
.read-receipts{position:absolute;right:16px;bottom:2px;display:flex;align-items:center;gap:2px;pointer-events:auto;z-index:2;}
.read-receipt-av{width:22px;height:22px;border-radius:var(--avatar-radius);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:#fff;flex-shrink:0;}
.read-receipt-av img{width:100%;height:100%;object-fit:cover;display:block;}
.read-receipt-more{font-size:.66rem;color:var(--muted);background:var(--bg-mid);border-radius:10px;padding:0 6px;height:22px;line-height:22px;}
.dm-seen-icon{width:16px;height:16px;filter:invert(1) opacity(.55);display:block;}

/* GIF / media picker */
.gp-tab{flex:1;padding:8px;border:none;background:transparent;color:var(--muted);font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all .15s;}
.gp-tab.active{color:var(--bright);border-bottom-color:var(--accent);}
.gp-tab:hover{color:var(--text);}
.gp-close{display:none;background:transparent;border:none;color:var(--muted);font-size:1.2rem;line-height:1;padding:0 12px;cursor:pointer;font-family:inherit;}
#channel-view.gif-mode .gp-close{display:flex;align-items:center;}
#channel-view.emoji-mode #msg-emoji-picker .ep-close{display:flex;align-items:center;}

/* Reusable pill toggle: a compact segmented control for a small set of
   mutually-exclusive options. Preferred over text tabs / segmented buttons. */
.pill-toggle{display:inline-flex;background:var(--bg-dark);border-radius:14px;padding:2px;flex-shrink:0;}
.pill-seg{font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:12px;color:var(--muted);background:transparent;border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s;}
.pill-seg.on{background:var(--accent);color:#fff;}

/* In mobile picker mode, render the GIPHY/Local tabs as a pill toggle. The tab
   row holds the pill + close; the search row sits tight beneath it (no divider),
   forming a unified top control band. */
#channel-view.gif-mode #gif-picker .gp-tabs{
  border-bottom:none;align-items:center;gap:7px;padding:6px 8px 3px;background:transparent;border-radius:0;
}
#channel-view.gif-mode #gif-picker .gp-tab{
  flex:0 0 auto;padding:4px 12px;border-radius:12px;border-bottom:none !important;
  font-size:.72rem;font-weight:700;background:var(--bg-dark);color:var(--muted);
}
#channel-view.gif-mode #gif-picker .gp-tab.active{background:var(--accent);color:#fff;}
#channel-view.gif-mode #gif-picker .gp-close{margin-left:auto;}
#channel-view.gif-mode #gif-picker #gp-search-row{border-bottom:1px solid var(--border);padding:3px 8px 6px;}
#channel-view.gif-mode #gif-picker #gp-input{font-size:16px !important;}
/* Emoji picker mobile header: search + close band */
#channel-view.emoji-mode #msg-emoji-picker #ep-search{font-size:16px !important;}
@media (hover: none){ #rx-search{font-size:16px !important;} }
.gp-grid{display:flex;gap:6px;padding:8px;height:300px;overflow-y:auto;align-items:flex-start;}
.gp-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.gp-item{position:relative;width:100%;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:var(--bg-dark);line-height:0;}
.gp-item img,.gp-item video{width:100%;height:auto;display:block;}
.gp-item .gp-anim{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s;}
.gp-item:hover .gp-anim{opacity:1;}
.gp-item:hover{outline:2px solid var(--accent);}
.gp-nsfw-badge{position:absolute;top:4px;left:4px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:3px;line-height:1.4;}
.gp-empty,.gp-loading{width:100%;text-align:center;color:var(--muted);font-size:.85rem;padding:24px 12px;}
.gp-attr{padding:5px 8px;border-top:1px solid var(--border);font-size:.66rem;color:var(--muted);text-align:right;}

/* =================================================================== */
/* ===== RESPONSIVE: tablet (<=1024px) and phone (<=480px)       ===== */
/* ===== All rules below are media-gated. Desktop (>1024px) is   ===== */
/* ===== untouched. Touch fallbacks use class toggles set by JS. ===== */
/* =================================================================== */

/* Hamburger button: hidden by default (desktop), shown on mobile via media queries.
   Pure-CSS three-bar glyph so no icon asset is needed. */
.mobile-hamburger{display:none;flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:6px;border-radius:4px;align-items:center;justify-content:center;}
.hamburger-glyph,.hamburger-glyph::before,.hamburger-glyph::after{display:block;width:20px;height:2px;background:var(--muted);border-radius:2px;content:"";}
.hamburger-glyph{position:relative;}
.hamburger-glyph::before{position:absolute;top:-6px;left:0;}
.hamburger-glyph::after{position:absolute;top:6px;left:0;}
.mobile-hamburger:active .hamburger-glyph,.mobile-hamburger:active .hamburger-glyph::before,.mobile-hamburger:active .hamburger-glyph::after{background:var(--bright);}
.mobile-hamburger-nochannel{position:absolute;top:10px;left:10px;}

/* Drawer backdrop: dims the chat when the sidebar drawer is open (phone only). */
#sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199;}

/* Page lock (touch only): with the body fixed and non-scrollable, the mobile
   keyboard overlays the bottom instead of shoving/zooming the whole page. The
   app is already a fixed 100dvh shell with internal scroll regions, so this just
   removes any residual page scroll. Desktop is untouched (no hover:none). */
@media (hover: none) {
  html, body { position:fixed; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
}

/* Slide-in keyframe for the members overlay (used at tablet/phone widths). */
@keyframes members-slide-in{from{transform:translateX(100%);}to{transform:translateX(0);}}

/* Members backdrop: only meaningful when the panel is an overlay (<=1024px).
   On desktop the panel is an in-flow column, so the backdrop is force-hidden
   even though toggleMembers sets an inline display (the !important wins). */
#members-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:115;}
@media (min-width: 1025px){ #members-backdrop{display:none !important;} }

/* Mobile browser chrome (address bar / toolbars) is included in 100vh, which
   pushes the bottom of the app (compose bar, settings) underneath it. Dynamic
   viewport height accounts for the chrome. Applied at tablet+phone widths;
   on desktop dvh == vh so this is also safe, but we scope it to be conservative. */
@media (max-width: 1024px) {
  #app{height:100dvh;}
  #auth-screen{height:100dvh;}
}

/* Touch fallbacks for hover-only reveals. On devices that DO support hover
   (mouse/desktop) the original :hover rules in the base stylesheet still drive
   everything. The class-based rules here let JS show the same UI on tap. */
.msg-group.touch-actions-open .msg-actions{display:flex;}
.gif-wrap.gif-playing .gif-img{opacity:1;}
.gp-item.gp-previewing .gp-anim{opacity:1;}

/* Fit message media to the container so an oversized image/GIF never forces
   horizontal scrolling of the message list. The 400px desktop caps stay, but
   min() ensures they also never exceed the available width (matters on phones
   where 400px > viewport). Desktop is unaffected since 400px < column width. */
@media (max-width: 1024px) {
  .msg-img{max-width:min(400px,100%);}
  .gif-wrap{max-width:min(400px,100%);}
  .gif-wrap .gif-canvas{max-width:100%;}
}

/* v3 inline picker (touch). The page is locked (body fixed) so the keyboard can
   only overlay the bottom -- the page never scrolls/zooms/jumps. The picker fills
   from the top of the channel view down to the compose bar. The app header is
   hidden while a picker is open so the picker owns the screen. A combined top bar
   (pill toggle + search + close) is pinned at the top; the grid fills and scrolls
   below it. When the keyboard rises it covers the lower rows; the bar + top rows
   stay put because the page is frozen. Gated by .gif-mode/.emoji-mode (touch only). */
#channel-view.gif-mode #gif-picker,
#channel-view.emoji-mode #msg-emoji-picker{
  position:fixed !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:auto !important;height:auto !important;max-height:none !important;
  border-radius:0 !important;border:none !important;
  box-shadow:none !important;
  z-index:160 !important;display:flex !important;flex-direction:column;overflow:hidden;
}
/* Hide the app header + the message list while a picker owns the screen. */
#channel-view.gif-mode .channel-header,
#channel-view.emoji-mode .channel-header,
#channel-view.gif-mode .messages-container,
#channel-view.emoji-mode .messages-container{display:none !important;}
/* Grid fills and scrolls vertically below the top bar. */
#channel-view.gif-mode #gif-picker .gp-grid{flex:1;height:auto;}
#channel-view.emoji-mode #msg-emoji-picker #ep-grid{flex:1;max-height:none !important;overflow-y:auto;align-content:start;}
/* Search stays at the TOP (combined bar), not pushed to the bottom. */
#channel-view.gif-mode #gif-picker #gp-search-row{order:0;}
#channel-view.gif-mode #gif-picker #gp-attr{flex:0 0 auto;}

/* On touch devices (no hover), neutralize the hover-scale transforms on grid
   media so a tap doesn't leave them stuck mid-zoom. */
@media (hover: none) {
  .img-grid-cell:not(.img-grid-cell-spoiler):hover .gif-canvas,
  .img-grid-cell:not(.img-grid-cell-spoiler):hover .gif-img{transform:none;}
  /* No hover to reveal the member gear, so keep it visible on touch. */
  .member-gear{display:inline-flex;}
}

/* ============================ TABLET ============================ */
/* 481-1024px: keep the sidebar visible (desktop-like), but the members panel
   becomes an overlay rather than taking a fixed 240px column. */
@media (max-width: 1024px) {
  #members-panel{
    position:absolute;top:0;right:0;height:100%;z-index:120;
    box-shadow:-4px 0 16px rgba(0,0,0,.4);
    animation:members-slide-in .22s ease;
  }
  /* Slightly narrower sidebar to give chat more room on tablets */
  #sidebar{width:210px;min-width:210px;}
}

/* ============================ PHONE ============================ */
/* <=480px: sidebar becomes a slide-in drawer; chat goes full width;
   members panel and modals go full-screen. */
@media (max-width: 480px) {
  /* Sidebar as off-canvas drawer */
  #sidebar{
    position:fixed;top:0;left:0;height:100%;width:82vw;max-width:300px;min-width:0;
    transform:translateX(-100%);transition:transform .22s ease;z-index:200;
    box-shadow:2px 0 18px rgba(0,0,0,.5);
  }
  #app.sidebar-open #sidebar{transform:translateX(0);}
  #app.sidebar-open #sidebar-backdrop{display:block;}

  /* Chat takes the full viewport width */
  #main-content{width:100%;}

  /* Show the hamburger triggers */
  .mobile-hamburger{display:inline-flex;}
  .channel-header .mobile-hamburger{margin-right:4px;margin-left:-4px;}

  /* Members panel slides in from the right like a drawer (not full-screen),
     so it's clearly an overlay and consistent with the sidebar drawer. */
  #members-panel{
    width:82vw !important;max-width:300px;min-width:0 !important;
    position:fixed;top:0;right:0;height:100%;z-index:210;
    box-shadow:-2px 0 18px rgba(0,0,0,.5);
    animation:members-slide-in .22s ease;
  }

  /* Bigger tap targets in the header */
  .channel-header{height:52px;padding:0 8px;}
  .channel-header .icon-btn{padding:8px;}

  /* Compose bar: prevent iOS zoom-on-focus (needs >=16px), roomier touch area */
  #msg-input{font-size:16px;min-height:46px;}
  .input-btn{height:46px;}
  /* Clear the iOS home bar / bottom toolbar so the compose bar isn't tucked under it */
  .chat-input-area{padding-bottom:max(20px,env(safe-area-inset-bottom));}

  /* Modals keep their natural centered-window sizing (they already set
     max-width:96vw / max-height:90vh), matching v1. We only ensure they never
     get wider than the viewport with a small margin. */
  [id$="-modal"] > div{
    max-width:94vw !important;max-height:90vh !important;
  }

  /* Messages: a touch more horizontal room */
  .messages-container{padding-left:2px;padding-right:2px;}

  /* (GIF/emoji inline-panel rules moved out of this width query — they're gated
     by the .gif-mode/.emoji-mode classes that JS only adds on touch devices, so
     they also cover phone-landscape and touch tablets.) */

  /* Safe-area insets for notched phones */
  #sidebar{padding-top:env(safe-area-inset-top);}
  .channel-header{padding-left:max(8px,env(safe-area-inset-left));}
}

/* -- Themes tab (user settings) -- */
.us-sec-label{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.theme-sw{position:relative;border-radius:9px;overflow:hidden;border:2px solid transparent;background:var(--bg-dark);cursor:pointer;}
.theme-sw.sel{border-color:var(--accent);}
.theme-sw .sw-prev{height:58px;display:flex;}
.theme-sw .sw-side{width:26%;}
.theme-sw .sw-main{flex:1;padding:7px;display:flex;flex-direction:column;gap:4px;}
.theme-sw .ln{height:5px;border-radius:3px;}
.theme-sw .sw-foot{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;font-size:.74rem;font-weight:600;color:var(--bright);}
.theme-sw .sw-cur{font-size:.6rem;font-weight:700;color:var(--success);}
.theme-sw .hover-actions{position:absolute;top:5px;right:5px;display:none;gap:5px;}
.theme-sw:hover .hover-actions{display:flex;}
.theme-sw .ha{width:22px;height:22px;border-radius:5px;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;color:#fff;border:none;cursor:pointer;padding:0;}
.theme-sw .ha img{width:13px;height:13px;filter:invert(1);}
.theme-sw .ha.del img{filter:invert(36%) sepia(89%) saturate(2000%) hue-rotate(335deg);}
.theme-newcard{border:2px dashed var(--border);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);cursor:pointer;min-height:86px;font-size:.74rem;}
.theme-newcard .plus{font-size:22px;line-height:1;}
.iconset-row{display:flex;gap:10px;}
.iconset-opt{flex:1;border:2px solid transparent;background:var(--bg-dark);border-radius:9px;padding:9px;cursor:pointer;}
.iconset-opt.sel{border-color:var(--accent);}
.iconset-opt .nm{font-size:.72rem;font-weight:600;color:var(--bright);margin-bottom:7px;}
.iconset-opt .icns{display:flex;gap:9px;}
.iconset-opt .icns img{width:16px;height:16px;}

/* -- Theme effects (toggled by body classes when a theme enables them) -- */
body.fx-glow .channel-name, body.fx-glow #ch-name, body.fx-glow .msg-username,
body.fx-glow .section-label, body.fx-glow .channel-item.active{
  text-shadow:0 0 6px var(--accent), 0 0 2px var(--accent);
}
body.fx-input-shadow .input-box{
  box-shadow:0 -4px 22px rgba(0,0,0,.45), 0 -1px 6px rgba(0,0,0,.3);
}
body.fx-scanlines::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,var(--scanline-alpha,.18)) 0px, rgba(0,0,0,var(--scanline-alpha,.18)) 1px, transparent 1px, transparent var(--scanline-gap,3px));
}

/* -- Theme editor modal -- */
#theme-editor-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:210;align-items:center;justify-content:center;}
.te-win{width:560px;max-width:94vw;max-height:90vh;background:var(--bg-light);border:1px solid #15161a;border-radius:11px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.6);}
.te-head{background:var(--bg-mid);padding:11px 15px;border-bottom:1px solid var(--bg-dark);display:flex;align-items:center;gap:9px;flex-shrink:0;}
.te-head .te-title{font-size:.86rem;font-weight:700;color:var(--bright);}
.te-head .te-x{margin-left:auto;color:var(--muted);font-size:18px;cursor:pointer;background:none;border:none;}
.te-body{display:flex;min-height:0;flex:1;}
.te-ctrl{flex:1;padding:13px;border-right:1px solid var(--bg-dark);overflow-y:auto;}
.te-grp{margin-bottom:14px;}
.te-grp-t{font-size:.63rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 7px;}
.te-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:.77rem;gap:8px;}
.te-row label{color:var(--text);}
.te-color{display:flex;align-items:center;gap:6px;}
.te-color input[type=color]{width:26px;height:24px;border:none;background:none;padding:0;cursor:pointer;}
.te-color input[type=text]{background:var(--bg-dark);border:1px solid var(--border);border-radius:5px;padding:3px 7px;font-size:.72rem;color:var(--text);width:80px;font-family:inherit;}
.te-field{background:var(--bg-dark);border:1px solid var(--border);border-radius:5px;padding:5px 9px;font-size:.78rem;color:var(--text);width:100%;font-family:inherit;outline:none;}
.te-prev{width:190px;padding:13px;background:var(--bg-mid);display:flex;flex-direction:column;flex-shrink:0;}
.te-prev-l{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.te-mini{border-radius:7px;overflow:hidden;border:1px solid var(--bg-dark);height:150px;display:flex;}
.te-foot{display:flex;gap:7px;margin-top:auto;padding-top:11px;}
.te-btn{flex:1;text-align:center;font-size:.74rem;font-weight:700;padding:8px;border-radius:6px;cursor:pointer;border:none;font-family:inherit;}
.te-btn.save{background:var(--bg-active);color:var(--bright);}
.te-btn.apply{background:var(--accent);color:#fff;}

/* Mascot: brand identity, NOT a UI glyph. Deliberately exempt from icon-set
   swapping and the .ui-icon invert filter -- it lives at /brand/ and keeps its
   own colors no matter which icon set is selected. */
.mascot-icon{filter:none !important;}

/* -- Theme background images (per-area, with readability overlay) -- */
/* When a theme sets a background, --bg-image/-size/-position/-overlay are set on
   :root and the relevant body.bg-area-* classes are toggled. Each area paints the
   image and lays a darkening overlay (--bg-overlay alpha) above it but below content. */
body.bg-area-sidebar #sidebar,
body.bg-area-main #main-content,
body.bg-area-members #members-panel{
  background-image:var(--bg-image,none);
  background-size:var(--bg-size,cover);
  background-position:var(--bg-position,center);
  background-repeat:var(--bg-repeat,no-repeat);
  position:relative;
}
body.bg-area-sidebar #sidebar::before,
body.bg-area-main #main-content::before,
body.bg-area-members #members-panel::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(0,0,0,var(--bg-overlay,.4));
}
/* Keep real content above the overlay. */
body.bg-area-sidebar #sidebar > *,
body.bg-area-main #main-content > *,
body.bg-area-members #members-panel > *{position:relative;z-index:1;}

/* -- Admin icon-set manager -- */
.iconset-admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.iconset-card{position:relative;border-radius:9px;border:1px solid var(--bg-dark);background:var(--bg-dark);overflow:hidden;}
.iconset-card.locked{opacity:.85;}
.iconset-card .isc-prev{padding:11px;display:flex;gap:11px;justify-content:center;background:var(--bg-mid);}
.iconset-card .isc-prev img{width:19px;height:19px;}
.iconset-card .isc-foot{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:.76rem;font-weight:600;color:var(--bright);}
.iconset-card .isc-cnt{font-size:.62rem;color:var(--muted);font-weight:400;}
.iconset-card .isc-actions{position:absolute;top:6px;right:6px;display:none;gap:5px;}
.iconset-card:hover .isc-actions{display:flex;}
.iconset-card .isc-a{width:22px;height:22px;border-radius:5px;background:rgba(0,0,0,.7);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.iconset-card .isc-a img{width:13px;height:13px;filter:invert(1);}
.iconset-card .isc-a.del img{filter:invert(36%) sepia(89%) saturate(2000%) hue-rotate(335deg);}
.iconset-newcard{border:2px dashed var(--border);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--muted);cursor:pointer;min-height:84px;font-size:.74rem;}
.iconset-newcard .plus{font-size:22px;line-height:1;}

/* -- Icon-set editor modal -- */
#iconset-editor-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:220;align-items:center;justify-content:center;}
.ise-win{width:580px;max-width:94vw;max-height:90vh;background:var(--bg-light);border:1px solid #15161a;border-radius:11px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.6);}
.ise-body{padding:13px 15px;overflow-y:auto;}
.ise-toprow{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.ise-barrow{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.ise-slots{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;}
.ise-slot{position:relative;border:1px solid var(--bg-dark);border-radius:8px;background:var(--bg-dark);padding:8px 4px 5px;text-align:center;cursor:pointer;}
.ise-slot:hover{border-color:var(--accent);}
.ise-slot img{width:19px;height:19px;}
.ise-slot .ise-nm{font-size:.55rem;color:var(--muted);margin-top:4px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ise-slot .ise-tag{position:absolute;top:3px;right:3px;font-size:.5rem;font-weight:700;padding:0 3px;border-radius:3px;}
.ise-slot .ise-tag.set{background:var(--accent);color:#fff;}
.ise-slot .ise-tag.def{background:var(--bg-active);color:var(--muted);}
.ise-legend{display:flex;gap:14px;margin-top:11px;font-size:.66rem;color:var(--muted);align-items:center;}
.ise-legend .ise-sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px;}
.ise-legend .ise-sw.set{background:var(--accent);}
.ise-legend .ise-sw.def{background:var(--bg-active);}
.ise-foot{display:flex;gap:8px;margin-top:13px;justify-content:flex-end;}
.ise-foot .te-btn{flex:0 0 auto;padding:8px 16px;}