/* ──────────────────────────────────────────────────────────────────────────
   tools.yushki — chat (Discord-grade). Layered on theme.css; reuses its palette
   tokens. Scoped to chat-only classes so nothing else is affected.
   ────────────────────────────────────────────────────────────────────────── */

/* small avatars (theme.css ships sm/md/xl only) */
.avatar.xs{width:22px;height:22px;font-size:10px}
.avatar.reply{width:16px;height:16px;font-size:8px}
.avatar.msg{width:40px;height:40px;font-size:15px}

/* ── pane layout: channel header + scroll + composer ── */
/* height chain: the scroll region's flex ancestors all need min-height:0, or .chat-msgs
   grows to its full content height (pushing the composer off-screen) instead of scrolling */
.chat-pane{display:flex;flex-direction:column;min-height:0}
.chat-pane .chat{position:relative;min-height:0}
.chat-pane .chat-msgs{min-height:0;overflow-x:hidden}
.chat-pane .typing,.chat-pane .composer-wrap{flex-shrink:0}
.chat-head{display:flex;align-items:center;gap:8px;height:48px;flex-shrink:0;padding:0 16px;border-bottom:1px solid var(--border);background:var(--bg-panel)}
.chead-title{display:flex;align-items:center;gap:6px;min-width:0}
.chead-hash{color:var(--text-faint);font-size:21px;font-weight:400;line-height:1}
.chead-name{color:var(--text-bright);font-weight:700;font-size:15px;white-space:nowrap}
.chead-title .pdot{margin-left:-13px;margin-top:10px;align-self:flex-start}
.chead-topic{color:var(--text-faint);font-size:13px;padding-left:11px;margin-left:5px;border-left:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46%}
.chead-sp{flex:1}
.chead-btn{width:32px;height:32px;border:0;background:transparent;border-radius:7px;color:var(--text-dim);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chead-btn:hover{background:var(--bg-hover);color:var(--text-bright)}
.chead-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
/* Mobile-only header controls — one bar: ☰ app menu · channel picker · notif · more */
.chead-global,.chead-pick,.chead-notif,.chead-more,.chead-chevron{display:none}
.chead-title-desk{display:flex}

/* ── sidebar: search, groups, presence, unread/mention ── */
.chan-search{padding:8px 10px 6px}
.chan-search input{width:100%;background:var(--bg-base);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:7px 10px;font-size:13px}
.chan-search input:focus{outline:none;border-color:var(--border-light)}
.ch-group-head,.dm-head{display:flex;align-items:center;justify-content:space-between;padding-right:6px}
.ch-group-head .tproj,.dm-head .tproj{padding-right:0}
.dm-add{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dm-add:hover{background:var(--bg-hover);color:var(--text-bright);border-color:var(--border-light)}
.dm-empty{color:var(--text-faint);font-size:12px;padding:4px 10px 8px}
.chan.dm{gap:7px}
.chan.dm .avatar{margin-left:-1px}
.chan .cname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chan.has-unread .cname{color:var(--text-bright);font-weight:600}
.chan.muted{opacity:.5}.chan.muted.has-unread .cname{font-weight:400}
.mute-ic{font-size:10px;margin-left:4px;opacity:.7;flex-shrink:0}
.pdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--bg-panel)}
.pdot.online{background:var(--success)}.pdot.away{background:var(--warning)}.pdot.offline{background:#5a5a5a}
.chan.dm .pdot{margin-left:-13px;margin-top:11px;align-self:flex-start}
.unread-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--text-bright);flex-shrink:0}
.badge-mention{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:100px;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.rail-badge.mention{background:var(--danger);color:#fff}
.rail-item{position:relative}
.rail-dot{position:absolute;top:7px;right:13px;width:9px;height:9px;border-radius:50%;background:var(--text-bright);box-shadow:0 0 0 2px var(--bg-panel)}

/* ── messages ── */
.cm{position:relative}
.cm-main{min-width:0;flex:1}
.chat-msgs .cm:hover{background:rgba(255,255,255,.022);border-radius:5px}
/* continuation rows: empty 40px gutter keeps text aligned; time fades in on hover */
.cm.cont{margin-top:-9px}
.cm-gutter{width:40px;flex-shrink:0;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:3px}
.cm-ts{font-size:9px;color:var(--text-faint);line-height:1.3;white-space:nowrap;opacity:0;transition:opacity .1s}
.cm.cont:hover .cm-ts{opacity:.85}
/* header proportions — Discord-faithful */
.chat-msgs .cm{align-items:flex-start}
.chat-msgs .cm > .avatar.msg{margin-top:2px}
.chat-msgs .cm-h{align-items:baseline;gap:8px}
.chat-msgs .cm-name{font-size:15px;font-weight:600;line-height:20px;cursor:pointer}
.chat-msgs .cm-name:hover{text-decoration:underline}
.chat-msgs .cm-time{font-size:12px}
.chat-msgs .cm-text{font-size:15px;line-height:1.42}
.bot-tag{font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:4px;background:rgba(184,146,79,.18);color:var(--accent);text-transform:uppercase;white-space:nowrap}
.pin-flag{font-size:10px;margin-left:4px;opacity:.75}
/* mention highlight on a row that pings me */
.cm.ping{background:rgba(216,168,127,.09);border-radius:5px;box-shadow:inset 2px 0 0 var(--accent)}
.cm.ping:hover{background:rgba(216,168,127,.12)}

.cm-acts{position:absolute;top:-12px;right:8px;display:none;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:8px;padding:2px;box-shadow:var(--shadow-sm);z-index:5}
.cm:hover .cm-acts{display:flex}
.cm-act{width:28px;height:26px;border:0;background:transparent;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1;color:var(--text-dim)}
.cm-act:hover{background:var(--bg-hover);color:var(--text-bright)}
.edited{font-size:11px;color:var(--text-faint)}
/* translation affordance: a subtle inline "Translated · show original" toggle */
.tr-toggle{display:inline-block;margin-left:7px;padding:0;border:0;background:transparent;font-size:11px;color:var(--text-faint);cursor:pointer;vertical-align:baseline;line-height:1}
.tr-toggle::before{content:"🌐";margin-right:3px;font-size:10px;opacity:.8}
.tr-toggle:hover{color:var(--accent);text-decoration:underline}
.cm.deleted{transition:opacity .35s ease,transform .35s ease}
.cm.deleted.vanish{opacity:0;transform:translateX(-10px)}
.cm.deleted .cm-text.tomb{color:var(--text-faint);font-style:italic;font-size:13px}

/* ── reply reference (above a reply) + curved spine connector ── */
.cm.has-reply{flex-wrap:wrap;column-gap:12px;row-gap:1px}
.reply-ref{flex:0 0 100%;display:flex;align-items:center;gap:6px;min-width:0;padding-left:52px;position:relative;font-size:13.5px;color:var(--text-dim);height:19px;cursor:pointer}
.reply-ref .avatar{flex-shrink:0}
.reply-name{color:var(--text-bright);font-weight:500;flex-shrink:0}
.reply-x{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.reply-ref:hover .reply-x{opacity:1}
.reply-ref.deleted{color:var(--text-faint);font-style:italic;cursor:default}
.reply-ico{flex-shrink:0}
.reply-spine{position:absolute;left:19px;top:9px;bottom:-7px;width:26px;border-left:2px solid var(--border-light);border-top:2px solid var(--border-light);border-top-left-radius:8px;pointer-events:none}

/* ── markdown ── */
.cm-text .md-p{display:block}
.cm-text .md-p+.md-p{margin-top:.32em}
.cm-text b{font-weight:700;color:var(--text-bright)}
.md-h{font-weight:700;color:var(--text-bright);margin:3px 0 1px}
.md-h1{font-size:1.4em}.md-h2{font-size:1.22em}.md-h3{font-size:1.07em}
.md-sub{font-size:.82em;color:var(--text-faint)}
.md-list{margin:2px 0;padding-left:22px}.md-list li{margin:1px 0}
.bq{border-left:3px solid var(--border-light);padding:1px 0 1px 10px;margin:2px 0;color:var(--text-dim)}
.ic{background:var(--bg-base);border:1px solid var(--border);border-radius:4px;padding:1px 4px;font-family:var(--font-mono);font-size:.86em}
.cb{background:var(--bg-base);border:1px solid var(--border);border-radius:6px;padding:8px 11px;margin:4px 0;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.45;color:var(--text-bright);max-width:100%}
.cb code{font-family:inherit;white-space:pre}
.spoiler{background:#100f0d;color:transparent;border-radius:4px;cursor:pointer;padding:0 3px;transition:background .12s}
.spoiler:not(.revealed) *{visibility:hidden}
.spoiler.revealed{background:rgba(255,255,255,.07);color:inherit;cursor:auto}
.ln{color:var(--teal);text-decoration:none;word-break:break-word}
.ln:hover{text-decoration:underline}
.emoji{font-size:1.2em;line-height:1;vertical-align:-2px}
.cm-text.jumbo .emoji{font-size:2.6em;vertical-align:middle}
.mention{color:var(--accent);background:var(--accent-glow);border-radius:4px;padding:0 3px;font-weight:500;cursor:pointer;white-space:nowrap}
.mention:hover{background:var(--accent);color:#1c1611}
.mention.mention-all{color:var(--accent-2)}

/* ── attachments ── */
.atts{display:flex;flex-direction:column;gap:6px;margin-top:6px;max-width:min(560px,100%)}
.att-grid{display:grid;gap:4px;border-radius:8px;max-width:100%}
.att-grid.one{display:block;max-width:100%}
.att-grid.one .att-cell{display:block;position:relative;max-width:100%}
.att-grid.two,.att-grid.three,.att-grid.quad{grid-template-columns:1fr 1fr;max-width:min(420px,100%)}
.att-grid.two .att-cell,.att-grid.three .att-cell,.att-grid.quad .att-cell{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;background:var(--bg-base)}
.att-grid.two .att-img,.att-grid.three .att-img,.att-grid.quad .att-img{width:100%;height:100%;object-fit:cover}
.att-img{display:block;border-radius:6px;cursor:pointer;max-width:100%}
.att-img.att-solo,.att-grid.one .att-img{max-width:min(440px,100%);max-height:340px;width:auto;height:auto}
.gif-badge{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;pointer-events:none}
.more-tile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:#fff;font-size:22px;font-weight:700;pointer-events:none}
.att-video video{max-width:min(440px,100%);max-height:340px;border-radius:8px;background:#000;display:block}
.att-video{position:relative;align-self:flex-start;width:fit-content;max-width:100%}
/* one-click save button on media (images/gifs/videos); revealed on hover, always shown on touch */
.att-dl,.att-copy{position:absolute;top:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:6px;font-size:14px;line-height:1;text-decoration:none;opacity:0;transition:opacity .12s,background .12s;z-index:3;cursor:pointer}
.att-dl{right:6px} .att-copy{right:40px}
.att-cell:hover .att-dl,.att-cell:hover .att-copy,.att-video:hover .att-dl{opacity:1}
.att-dl:hover,.att-copy:hover{background:rgba(0,0,0,.85);color:#fff}
@media (hover:none){.att-dl,.att-copy{opacity:1}}
.lb-copy{position:fixed;bottom:48px;right:22px;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:6px 11px;font-size:12.5px;cursor:pointer}
.lb-copy:hover{background:rgba(0,0,0,.78)}
/* forwarded-message origin label */
.cm-fwd{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-faint);margin-bottom:2px}
.att-audio{display:flex;flex-direction:column;gap:5px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:9px 11px;max-width:380px}
.att-aud-name{font-size:12px;color:var(--text-dim)}
.att-audio audio{width:340px;max-width:100%;height:34px}
.att-file{display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:10px 12px;max-width:380px;text-decoration:none;color:var(--text)}
.att-file:hover{border-color:var(--border-light);background:var(--bg-hover)}
.att-file-ic{font-size:24px}
.att-file-meta{flex:1;min-width:0}
.att-file-name{display:block;font-size:13px;color:var(--teal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-file-size{font-size:11px;color:var(--text-faint)}
.att-file-dl{color:var(--text-dim);font-size:15px}

/* ── lightbox ── */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;animation:lbin .12s ease}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-stage{max-width:92vw;max-height:86vh;display:flex}
.lb-stage img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.lb-close{position:fixed;top:18px;right:22px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:20px;cursor:pointer}
.lb-close:hover{background:rgba(0,0,0,.7)}
.lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:32px;cursor:pointer;line-height:1}
.lb-nav:hover{background:rgba(0,0,0,.7)}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-count{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:4px 12px;border-radius:100px}
.lb-open{position:fixed;bottom:20px;right:22px;color:#cfc8be;font-size:12px;text-decoration:none}
.lb-open:hover{color:#fff;text-decoration:underline}

/* ── reactions ── */
.reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.react{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:100px;cursor:pointer;background:var(--bg-elevated);border:1px solid var(--border);font-size:13px;line-height:1.4;transition:background .12s,border-color .12s}
.react:hover{background:var(--bg-hover);border-color:var(--border-light)}
.react .rx-e{font-size:14px;display:inline-flex;align-items:center}
.react .rx-e .ce-emoji{height:18px;width:auto;vertical-align:middle;margin:0}
.react b{font-size:12px;font-weight:700;color:var(--text-dim)}
.react.mine{background:var(--accent-glow);border-color:var(--accent-dark)}
.react.mine b{color:var(--accent)}
.react.react-add{padding:2px 7px;color:var(--text-faint);opacity:0}
.cm:hover .react.react-add{opacity:1}
.react-pop{position:fixed;z-index:200;display:flex;gap:2px;padding:5px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:10px;box-shadow:var(--shadow-md)}
.react-pop button{width:34px;height:34px;border:0;background:transparent;border-radius:7px;cursor:pointer;font-size:19px;transition:transform .1s}
.react-pop button:hover{background:var(--bg-hover);transform:scale(1.18)}
.react-pop .rp-more{font-size:16px;color:var(--text-dim)}

/* ── inline edit ── */
.edit-box{width:100%;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text);padding:8px 10px;min-height:38px;max-height:240px;resize:vertical;font-size:14px;font-family:inherit}
.edit-actions{display:flex;align-items:center;gap:8px;margin-top:6px}
.edit-hint{font-size:11px;color:var(--text-faint)}
.confirm-quote{margin-top:8px;padding:8px 10px;background:var(--bg-base);border-left:3px solid var(--border-light);border-radius:4px;color:var(--text-dim);font-size:13px;max-height:90px;overflow:hidden;white-space:pre-wrap;word-break:break-word}

/* ── dividers + history affordances ── */
.day-div{display:flex;align-items:center;margin:16px 0 6px}
.day-div::before,.day-div::after{content:"";flex:1;height:1px;background:var(--border)}
.day-div span{padding:0 12px;font-size:11px;font-weight:600;color:var(--text-faint)}
.unread-div{display:flex;align-items:center;margin:4px 0}
.unread-div::before{content:"";flex:1;height:1px;background:var(--danger)}
.unread-div span{padding:1px 8px;font-size:10px;font-weight:700;color:var(--danger);letter-spacing:.6px}
.load-older{text-align:center;color:var(--text-faint);font-size:12px;padding:10px}
.chan-start{padding:16px 4px 8px;color:var(--text-faint);font-size:13px}

/* ── typing ── */
.typing{height:0;overflow:hidden;color:var(--text-dim);font-size:12px;padding:0 18px;transition:height .12s}
.typing.on{height:20px;padding-bottom:2px}

/* ── composer ── */
.composer-wrap{position:relative;border-top:1px solid var(--border);padding:8px 18px 16px}
.reply-bar{display:none;align-items:center;justify-content:space-between;background:var(--bg-elevated);border:1px solid var(--border);border-bottom:0;border-radius:9px 9px 0 0;padding:6px 12px;font-size:13px;color:var(--text-dim);margin-bottom:-1px;position:relative;z-index:1}
.reply-bar.on{display:flex}
.rb-label b{color:var(--text-bright)}
.rb-x{border:0;background:transparent;color:var(--text-dim);cursor:pointer;font-size:13px}
.rb-x:hover{color:var(--text-bright)}
.attach-tray{display:none;flex-wrap:wrap;gap:8px;padding:10px;background:var(--bg-elevated);border:1px solid var(--border);border-bottom:0;border-radius:9px 9px 0 0;margin-bottom:-1px}
.attach-tray.on{display:flex}
.tray-item{position:relative;width:96px;border-radius:8px;background:var(--bg-base);border:1px solid var(--border);padding:6px}
.tray-item img{width:100%;height:62px;object-fit:cover;border-radius:5px;display:block}
.tray-file{height:62px;display:flex;align-items:center;justify-content:center;font-size:28px}
.tray-name{font-size:10px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.tray-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-light);color:var(--text);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.tray-item.err{border-color:var(--danger)}
.tray-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);border-radius:8px}
.tray-spin::after{content:"";width:18px;height:18px;border:2px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.composer{display:flex;align-items:flex-end;gap:6px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:5px 8px}
.composer:focus-within{border-color:var(--border-light)}
/* single-line height == the 32px button row, so the bottom-aligned buttons line up
   with the text instead of sitting below it */
.composer textarea{flex:1;background:transparent;border:0;color:var(--text);font-size:15px;line-height:20px;padding:6px 4px;max-height:200px;min-height:32px;resize:none;font-family:inherit}
.composer textarea:focus{outline:none}
.comp-btn{width:32px;height:32px;border:0;background:transparent;border-radius:8px;color:var(--text-dim);font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;line-height:1}
.comp-btn:hover{background:var(--bg-hover);color:var(--text-bright)}
/* attach "+" — an SVG plus (perfectly centred + bold; a text glyph sat optically high) */
.comp-add{color:var(--text-dim)}
.comp-add svg{display:block}
.comp-add:hover{color:var(--accent);background:var(--bg-hover)}
/* GIF picker trigger — an outlined badge, Discord-style */
.comp-gif{width:auto;min-width:36px;padding:0 7px;font-size:11px;font-weight:800;letter-spacing:.4px;border:1.5px solid var(--text-faint);color:var(--text-dim);border-radius:7px}
.comp-gif:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.comp-send{flex-shrink:0;height:32px;align-self:center}
/* On desktop, Enter sends — the Send button is dead weight, so hide it on mouse devices
   (like Discord) and keep it only on touch, where there's no reliable Enter-to-send. */
@media (hover: hover) and (pointer: fine) { .comp-send{display:none} }
/* custom (animated) emoji rendered inline in messages + pickers */
.ce-emoji{height:1.45em;width:auto;vertical-align:-0.3em;margin:0 1px;object-fit:contain}
.cm-text.jumbo .ce-emoji{height:2.4em;vertical-align:-0.5em}
/* goblins are 32px pixel-art emojis — render at a clean, crisp 2x in messages
   (scoped via the :goblin_…: alt the renderer emits; picker imgs use empty alt) */
.ce-emoji[alt^=":goblin_"]{height:2.9em;vertical-align:-0.85em;image-rendering:pixelated}
.cm-text.jumbo .ce-emoji[alt^=":goblin_"]{height:4.8em;vertical-align:-1.4em}
.ep-e img.ce-emoji,.ep-e .ce-emoji{height:24px;vertical-align:middle}
.drop-hint{display:none;position:absolute;inset:6px;border:2px dashed var(--accent);border-radius:12px;background:rgba(216,168,127,.08);z-index:30;align-items:center;justify-content:center;color:var(--accent);font-weight:600;pointer-events:none}
.drop-hint.on{display:flex}

/* ── autocomplete (@ / :) ── */
.ac-pop{position:absolute;left:18px;right:18px;bottom:100%;margin-bottom:6px;max-height:260px;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:10px;box-shadow:var(--shadow-md);z-index:40;padding:6px}
.ac-pop[hidden]{display:none}
.ac-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:14px}
.ac-item.sel{background:var(--bg-hover)}
.ac-em{width:22px;text-align:center;font-size:18px;flex-shrink:0}
.ac-lbl{color:var(--text-bright)}
.ac-sub{color:var(--text-faint);font-size:12px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── emoji picker ── */
.emoji-picker{position:fixed;z-index:300;width:340px;height:396px;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
.ep-search{padding:8px}
.ep-search input{width:100%;background:var(--bg-base);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:7px 10px;font-size:13px}
.ep-search input:focus{outline:none;border-color:var(--border-light)}
.ep-cats{display:flex;gap:2px;padding:0 8px 6px;border-bottom:1px solid var(--border);overflow-x:auto}
.ep-cat{width:30px;height:30px;border:0;background:transparent;border-radius:6px;cursor:pointer;font-size:17px;flex-shrink:0;opacity:.75}
.ep-cat:hover,.ep-cat.on{background:var(--bg-hover);opacity:1}
.ep-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:8px;align-content:start}
.ep-e{width:100%;aspect-ratio:1;border:0;background:transparent;border-radius:6px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:transform .08s}
.ep-e:hover{background:var(--bg-hover);transform:scale(1.18)}
.ep-empty{grid-column:1/-1;text-align:center;color:var(--text-faint);font-size:13px;padding:24px}
.ep-cat img.ce-emoji{height:20px;width:20px;object-fit:contain;vertical-align:middle}

/* ── GIF picker ── */
.gif-picker{position:fixed;z-index:300;width:360px;height:430px;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}
.gp-search{padding:8px}
.gp-search input{width:100%;background:var(--bg-base);border:1px solid var(--border);border-radius:7px;color:var(--text);padding:7px 10px;font-size:13px}
.gp-search input:focus{outline:none;border-color:var(--border-light)}
.gp-cats{display:flex;gap:4px;padding:0 8px 6px;border-bottom:1px solid var(--border);overflow-x:auto}
.gp-cat{flex-shrink:0;border:0;background:transparent;color:var(--text-dim);border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.gp-cat:hover,.gp-cat.on{background:var(--bg-hover);color:var(--text-bright)}
.gp-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;align-content:start}
.gp-item{border:0;background:var(--bg-base);border-radius:8px;cursor:pointer;overflow:hidden;padding:0;aspect-ratio:16/10;display:flex}
.gp-item img{width:100%;height:100%;object-fit:cover;transition:transform .12s}
.gp-item:hover img{transform:scale(1.06)}
.gp-empty{grid-column:1/-1;text-align:center;color:var(--text-faint);font-size:13px;padding:24px;line-height:1.5}

/* ── admin chat-asset manager ── */
.ca-add .form-row{display:flex;gap:10px} .ca-add .form-row>div{flex:1}
.ca-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);margin:6px 0}
.ca-grid{display:flex;flex-wrap:wrap;gap:8px}
.ca-item{display:flex;align-items:center;gap:7px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:5px 8px;font-size:12px;color:var(--text-dim)}
.ca-item img{height:22px;width:auto;max-width:48px;object-fit:contain;border-radius:3px}
.ca-item.ca-gif img{height:34px;max-width:64px;object-fit:cover}
.ca-del{border:0;background:transparent;color:var(--text-faint);cursor:pointer;font-size:12px;padding:2px 5px;border-radius:4px}
.ca-del:hover{color:var(--danger);background:var(--bg-hover)}

/* ── right-click context menu ── */
.ctx-menu{position:fixed;z-index:500;min-width:190px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:8px;box-shadow:var(--shadow-lg);padding:5px}
.ctx-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:5px;cursor:pointer;font-size:13.5px;color:var(--text);position:relative}
.ctx-item:hover{background:var(--accent);color:#1c1611}
.ctx-item.danger{color:var(--danger)}
.ctx-item.danger:hover{background:var(--danger);color:#fff}
.ctx-item.disabled{color:var(--text-faint);cursor:default;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
.ctx-item.disabled:hover{background:transparent;color:var(--text-faint)}
.ctx-ic{width:18px;text-align:center;font-size:13px;flex-shrink:0}
.ctx-lbl{flex:1;white-space:nowrap}
.ctx-hint,.ctx-arrow{color:var(--text-faint);font-size:12px;margin-left:auto}
.ctx-item:hover .ctx-hint,.ctx-item:hover .ctx-arrow{color:inherit}
.ctx-sep{height:1px;background:var(--border);margin:4px 6px}
.ctx-sub{position:absolute;left:100%;top:-6px;margin-left:3px}

/* ── pins panel ── */
.pins-panel{position:fixed;z-index:300;width:360px;max-height:60vh;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:10px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden}
.pp-head{padding:12px 14px;font-weight:700;color:var(--text-bright);border-bottom:1px solid var(--border);font-size:14px}
.pp-body{overflow-y:auto;padding:6px}
.pp-item{display:flex;gap:8px;padding:9px;border-radius:8px;cursor:pointer;position:relative}
.pp-item:hover{background:var(--bg-hover)}
.pp-main{min-width:0;flex:1}
.pp-meta{font-size:12px;color:var(--text-faint)}
.pp-meta b{color:var(--text-bright)}
.pp-text{font-size:13px;color:var(--text);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.pp-unpin{position:absolute;top:8px;right:8px;border:0;background:transparent;color:var(--text-faint);cursor:pointer;opacity:0;font-size:12px}
.pp-item:hover .pp-unpin{opacity:1}
.pp-empty{padding:26px 16px;text-align:center;color:var(--text-faint);font-size:13px;line-height:1.6}
.pp-empty span{font-size:12px;opacity:.8}

/* ── message search panel ── */
.search-panel{position:absolute;top:0;right:0;width:min(420px,92%);height:100%;background:var(--bg-panel);border-left:1px solid var(--border);z-index:35;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.3)}
.sp-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text-dim);display:flex;align-items:center;justify-content:space-between;gap:8px}
.sp-close{border:0;background:transparent;color:var(--text-dim);cursor:pointer;font-size:14px}
.sp-body{flex:1;overflow-y:auto;padding:6px}
.sp-item{padding:9px;border-radius:8px;cursor:pointer}
.sp-item:hover{background:var(--bg-hover)}
.sp-meta{font-size:12px;color:var(--text-faint)}
.sp-meta b{color:var(--text-bright)}
.sp-text{font-size:13.5px;color:var(--text);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.sp-empty{padding:26px;text-align:center;color:var(--text-faint)}

/* ── DM picker modal ── */
.dm-search{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);padding:9px 12px;margin-bottom:10px;font-size:14px}
.dm-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
.dm-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);cursor:pointer}
.dm-row:hover{background:var(--bg-hover)}
.dm-row .pdot{margin-left:-15px;margin-top:13px;align-self:flex-start}
.dm-row-main{flex:1;min-width:0}
.dm-row-name{color:var(--text-bright);font-weight:600;font-size:14px}
.dm-row-sub{color:var(--text-faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── mobile ── */
@media(max-width:720px){
  .chat-head{
    padding:var(--safe-top) max(10px,var(--safe-right)) 0 max(10px,var(--safe-left));
    min-height:calc(52px + var(--safe-top));height:auto;box-sizing:border-box;
    gap:6px;background:var(--bg-surface);align-items:center;
  }
  .composer-wrap{padding:8px max(12px,var(--safe-right)) max(12px,calc(8px + var(--safe-bottom))) max(12px,var(--safe-left))}
  html[data-display="standalone"] .composer-wrap{padding-bottom:8px}
  .chead-global{display:inline-flex;flex-shrink:0}
  .chead-pick{
    display:flex;align-items:center;gap:4px;min-width:0;flex:1;
    border:1px solid var(--border);border-radius:8px;background:var(--bg-elevated);
    padding:6px 10px;cursor:pointer;color:inherit;font:inherit;text-align:left;
  }
  .chead-pick .chead-title{min-width:0;overflow:hidden}
  .chead-pick .chead-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .chead-chevron{display:inline;flex-shrink:0;color:var(--text-faint);font-size:11px}
  .chead-title-desk{display:none}
  .chead-act-desk{display:none!important}
  .chead-notif,.chead-more{display:inline-flex}
  .chead-sp{display:none}
  .chead-topic{display:none}
}
@media(max-width:760px){
  .chat-msgs{padding:12px 12px 18px}
  .att-grid.two,.att-grid.three,.att-grid.quad{max-width:100%}
  .att-img.att-solo,.att-grid.one .att-img{max-height:min(340px,55vh)}
  .search-panel{width:100%}
}