/* Bantertalks chat widget — variable-driven, light + dark themes.
   --accent / --accent-2 are set per-chatbox by the owner (applied from JS). */
:root{
  --accent:#0d9488; --accent-2:#0f766e; --danger:#e90052;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Archivo',var(--font);

  /* light theme */
  --bg:linear-gradient(180deg,#fbfcfe,#f4f6f9);
  --text:#161b22; --muted:#5d6675;
  --surface:#ffffff;
  --panel:rgba(255,255,255,.78); --panel-2:rgba(255,255,255,.94);
  --hover:rgba(17,24,39,.05);
  --border:rgba(17,24,39,.10); --border-2:rgba(17,24,39,.18);
  --head-bg:rgba(255,255,255,.66);
  --pin:#fff4c2; --pin-edge:#f0d878; --pin-text:#9a7b00;
  --shadow:0 16px 40px -18px rgba(20,32,70,.3), inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-sm:0 8px 22px -12px rgba(20,32,70,.28);
  --pip-gold:#f5b301;
}
[data-theme="dark"]{
  --bg:linear-gradient(180deg,#171a21,#101218);
  --text:#e7ebf2; --muted:#9aa4b6;
  --surface:#232834;
  --panel:rgba(38,43,55,.82); --panel-2:rgba(46,52,67,.96);
  --hover:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.20);
  --head-bg:rgba(26,30,39,.72);
  --pin:#3a3320; --pin-edge:#5d5024; --pin-text:#f2dd9a;
  --shadow:0 16px 40px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-sm:0 8px 22px -12px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text); font-size:14px; line-height:1.45;
  background:var(--bg); -webkit-font-smoothing:antialiased; overflow:hidden; transition:background .25s,color .25s;
}
button{font-family:inherit; color:inherit}
a{color:var(--accent)}

.chat{display:flex; flex-direction:column; height:100%; position:relative}

/* header */
.c-head{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--head-bg);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--border); box-shadow:0 4px 18px -14px rgba(20,32,70,.4)}
.c-title{flex:1; min-width:0}
.c-title h1{font-family:var(--display); font-weight:900; font-size:17px; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-title p{font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.c-head-actions{display:flex; gap:8px; flex:none}
.icon-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border-2); background:var(--panel); font-weight:700; font-size:13px; color:var(--text); transition:.15s}
.icon-btn:hover{background:var(--surface); transform:translateY(-1px)}
.icon-btn .ic{font-size:14px}

/* pinned */
.pinned{margin:8px; padding:10px 38px 10px 12px; position:relative; border-radius:12px; color:var(--text);
  background:var(--pin); border:1px solid var(--pin-edge); box-shadow:var(--shadow-sm); font-size:13px}
.pinned::before{content:"📌 PINNED"; display:block; font-size:9px; font-weight:800; letter-spacing:.6px; color:var(--pin-text); margin-bottom:3px}
.pinned .pin-who{font-weight:800}
.pinned .pin-unpin{position:absolute; top:8px; right:10px; cursor:pointer; border:0; background:none; color:var(--pin-text); font-weight:800; font-size:12px}

/* messages */
.messages{flex:1; overflow-y:auto; padding:6px 8px 10px; display:flex; flex-direction:column; gap:2px}
.messages::-webkit-scrollbar{width:9px}
.messages::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:8px}
.msg{display:flex; gap:9px; align-items:flex-start; padding:7px 10px; border-radius:10px; position:relative}
.avatar{flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; overflow:hidden; user-select:none; text-transform:uppercase; margin-top:1px; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
/* per-user identity styling (font face + size + body text colour) — applied to .body */
.body.f-serif{font-family:Georgia,'Times New Roman',serif}
.body.f-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.93em}
.body.f-rounded{font-family:'Comic Sans MS','Chalkboard SE','Comic Neue',cursive}
.body.s-small{font-size:12.5px}
.body.s-large{font-size:17px; line-height:1.4}
/* Discord-style reply header above a message body */
.msg-reply{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-bottom:3px; cursor:pointer; overflow:hidden; max-width:100%}
.msg-reply::before{content:""; width:14px; height:10px; border-left:2px solid var(--border-2); border-top:2px solid var(--border-2); border-top-left-radius:6px; flex:none; margin-left:2px}
.msg-reply .rt-name{font-weight:800; color:var(--text); flex:none}
.msg-reply .rt-body{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; opacity:.85}
.msg-reply:hover{color:var(--text)}
/* composer "Replying to …" accessory */
.reply-bar{display:flex; align-items:center; gap:8px; padding:6px 14px; margin:0 8px 4px; border-radius:10px; background:color-mix(in srgb,var(--accent) 14%, transparent); border:1px solid color-mix(in srgb,var(--accent) 26%, transparent); font-size:12.5px; color:var(--text)}
.reply-bar .rb-arrow{font-size:14px}
.reply-bar .rb-text{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.reply-bar .rb-text b{font-weight:800}
.reply-bar .rb-x{border:0; background:none; cursor:pointer; color:var(--muted); font-size:18px; line-height:1}
.reply-bar .rb-x:hover{color:var(--danger)}
.msg:hover{background:var(--hover)}
.msg.me{background:var(--hover); box-shadow:inset 3px 0 0 var(--accent)}
.msg-main{flex:1; min-width:0; word-wrap:break-word; overflow-wrap:anywhere}
.who{font-weight:800; margin-right:7px}
.who .shield{margin-right:4px}
.shield{display:inline-block; width:12px; height:14px; vertical-align:-2px;
  -webkit-mask:var(--shield-mask) center/contain no-repeat; mask:var(--shield-mask) center/contain no-repeat}
.shield.mod{background:var(--pip-gold)} .shield.admin{background:var(--accent)}
.body{color:var(--text)}
.mention{color:var(--accent); font-weight:700}
.mention.self{background:rgba(233,0,82,.16); color:var(--danger); border-radius:5px; padding:0 3px}
.msg-img{display:block; margin-top:6px; max-width:220px; max-height:180px; border-radius:10px; border:1px solid var(--border)}
.msg-side{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; opacity:.85}
.msg-ip{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums}
.msg-time{font-size:10px; color:var(--muted); white-space:nowrap}
.msg-tools{display:none; gap:4px; margin-top:2px}
.msg:hover .msg-tools{display:flex}
.tool{border:1px solid var(--border-2); background:var(--surface); border-radius:7px; width:22px; height:22px; cursor:pointer; display:grid; place-items:center; font-size:12px; color:var(--muted); line-height:1}
.tool:hover{color:#fff}
.tool.pin:hover{background:var(--accent); border-color:transparent}
.tool.del:hover{background:#6b7280; border-color:transparent}
.tool.ban:hover{background:var(--danger); border-color:transparent}
.tool.block:hover{background:#b80045; border-color:transparent}
.tool.quote:hover{background:var(--accent-2); border-color:transparent; color:#fff}

/* notice bar */
.notice-bar{margin:0 8px 6px; padding:8px 12px; border-radius:10px; font-size:12.5px; font-weight:600}
.notice-bar.error{background:rgba(233,0,82,.12); color:var(--danger); border:1px solid rgba(233,0,82,.3)}
.notice-bar.info{background:rgba(13,148,136,.14); color:#0a7a6e; border:1px solid rgba(13,148,136,.34)}

/* composer */
.composer{display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid var(--border);
  background:var(--head-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px)}
.comp-ic{width:36px; height:38px; border-radius:10px; border:1px solid var(--border-2); background:var(--panel); cursor:pointer; font-size:16px; color:var(--muted); flex:none}
.comp-ic:hover{background:var(--surface); color:var(--text)}
#msg-input{flex:1; min-width:0; height:38px; padding:0 14px; border-radius:10px; border:1px solid var(--border-2); background:var(--surface); font-size:14px; color:var(--text)}
#msg-input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.send-btn{height:38px; padding:0 18px; border-radius:10px; border:0; cursor:pointer; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 18px -8px var(--accent); flex:none}
.send-btn:hover{filter:brightness(1.06)}
.send-btn:disabled{opacity:.5; cursor:not-allowed}
.composer-foot{display:flex; justify-content:space-between; gap:10px; padding:4px 14px 8px; font-size:11px; color:var(--muted)}
.composer-foot .link{color:var(--accent); font-weight:700; cursor:pointer}
.foot-right{display:flex; align-items:center; gap:10px}
.powered{color:var(--muted) !important; font-weight:700; text-decoration:none}
.powered:hover{color:var(--accent) !important}
.foot-sound{border:0; background:none; cursor:pointer; padding:0 2px; font-size:14px; line-height:1; color:var(--muted)}
.foot-sound:hover{color:var(--accent)}
.foot-sound[aria-pressed="true"]{color:var(--accent)}
.img-preview{display:inline-flex; align-items:center; gap:6px; margin-right:auto; color:var(--accent); font-weight:700}
.img-preview button{border:0; background:none; color:var(--danger); cursor:pointer; font-weight:800}

/* people panel */
.panel{position:absolute; top:0; right:0; width:min(320px,86%); height:100%; z-index:30; background:var(--panel-2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-left:1px solid var(--border);
  box-shadow:-20px 0 50px -30px rgba(20,32,70,.5); display:flex; flex-direction:column}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.panel-head h2{font-family:var(--display); font-weight:800; font-size:18px}
.panel-x{border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:var(--muted)}
.people-filters{display:flex; gap:12px; flex-wrap:wrap; padding:12px 16px 6px; font-size:13px}
.people-filters label{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.people-sort{display:flex; align-items:center; gap:12px; padding:4px 16px 12px; font-size:13px; border-bottom:1px solid var(--border)}
.people-sort label{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.people-list{list-style:none; overflow-y:auto; flex:1; padding:6px}
.people-list li{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; font-weight:600}
.people-list li:hover{background:var(--hover)}
.people-list li .avatar{width:22px; height:22px; font-size:11px; flex:none; margin-top:0}
.people-list .pname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.people-list .pcount{font-size:11px; color:var(--muted); font-weight:700}

/* dropdown menu — scrollable so all items are reachable inside short iframes */
.menu{position:absolute; top:54px; right:12px; z-index:40; min-width:210px; max-height:calc(100vh - 64px); overflow-y:auto; overscroll-behavior:contain; padding:6px; background:var(--panel-2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.menu::-webkit-scrollbar{width:8px}
.menu::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:6px}
.menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 12px; border:0; background:none; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--text)}
.menu button:hover{background:var(--hover)}
.menu .sep{height:1px; background:var(--border); margin:5px 4px}
.menu .danger{color:var(--danger)}

/* emoji + color popovers */
.emoji-pop,.color-pop{position:absolute; bottom:62px; left:10px; z-index:40; padding:8px; border-radius:14px; background:var(--panel-2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--border); box-shadow:var(--shadow)}
.emoji-pop{display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-width:288px}
.emoji-pop button{font-size:20px; border:0; background:none; cursor:pointer; padding:4px; border-radius:8px}
.emoji-pop button:hover{background:var(--hover)}
/* "A" popover — quick style controls (name colour, text colour, font, size) */
.color-pop{display:flex; flex-direction:column; gap:10px; width:240px; max-width:calc(100vw - 20px)}
.color-pop .cp-sec{display:flex; flex-direction:column; gap:5px}
.color-pop .cp-lbl{font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.color-pop .cp-sw{display:flex; gap:5px; flex-wrap:wrap}
.color-pop .sw{width:22px; height:22px; border-radius:50%; cursor:pointer; border:2px solid var(--surface); box-shadow:0 2px 6px rgba(20,32,70,.3)}
.color-pop .sw.active{outline:2px solid var(--text); outline-offset:1px}
.color-pop .sw.default{background:repeating-conic-gradient(#ddd 0 90deg,#fff 0 180deg)}
.color-pop .cp-row{display:flex; gap:6px}
.color-pop .cp-sel{flex:1; padding:6px 8px; border-radius:8px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); font-size:12px; font-family:inherit; cursor:pointer}
.color-pop .cp-empty{padding:10px 4px; font-size:13px; color:var(--muted); font-weight:600; text-align:center; cursor:pointer}
.color-pop .cp-empty:hover{color:var(--accent)}

/* overlay + modal */
.overlay{position:absolute; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(15,20,35,.55)}
.modal-card{position:relative; width:min(440px,100%); max-height:92%; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 30px 70px -24px rgba(0,0,0,.5); padding:22px}
.modal-x{position:absolute; top:12px; right:14px; border:1px solid var(--border-2); background:var(--surface); width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; color:var(--muted)}
.modal-x:hover{background:var(--danger); color:#fff; border-color:transparent}
.modal-title{font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:-.5px; margin-bottom:14px; padding-right:30px}
.modal-body{display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:5px}
.field label{font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.field input,.field select,.field textarea{padding:10px 12px; border-radius:10px; border:1px solid var(--border-2); background:var(--surface); font-size:14px; font-family:inherit; color:var(--text)}
.field textarea{resize:vertical; min-height:64px}
.field .hint{font-size:11.5px; color:var(--muted); text-transform:none; letter-spacing:0; font-weight:500}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600}
.btn{padding:10px 18px; border-radius:10px; border:0; cursor:pointer; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 18px -8px var(--accent)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--surface); color:var(--text); box-shadow:none; border:1px solid var(--border-2)}
.btn.danger{background:linear-gradient(135deg,var(--danger),#b80045); box-shadow:0 8px 18px -8px rgba(233,0,82,.6)}
.btn.full{width:100%}
.btn.sm{padding:6px 12px; font-size:12.5px}
.tabs{display:flex; gap:6px; margin-bottom:6px}
.tabs button{flex:1; padding:9px; border-radius:10px; border:1px solid var(--border-2); background:var(--surface); cursor:pointer; font-weight:700; font-size:13px}
.tabs button.active{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent}
.form-err{color:var(--danger); font-size:12.5px; font-weight:600; min-height:1em}
.form-ok{color:#0a8a4a; font-size:12.5px; font-weight:600}
.swatches{display:flex; gap:8px; flex-wrap:wrap}
.swatches .sw{width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid var(--surface); box-shadow:0 2px 6px rgba(20,32,70,.3)}
.swatches .sw.active{outline:2px solid var(--text); outline-offset:1px}

/* admin list rows */
.list{display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto}
.list .item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel)}
.list .item .grow{flex:1; min-width:0}
.list .item .t-main{font-weight:700; font-size:13.5px; word-break:break-word}
.list .item .t-sub{font-size:11.5px; color:var(--muted)}
.badge{font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:3px 8px; border-radius:999px}
.badge.mod{background:rgba(245,179,1,.18); color:#9a7b00}
.badge.admin{background:rgba(233,0,82,.12); color:#b80045}
.badge.user{background:var(--hover); color:var(--muted)}
.badge.block{background:rgba(233,0,82,.12); color:#b80045}
.empty{text-align:center; color:var(--muted); padding:24px; font-size:13px}

/* flag emotes (premium World Cup pack) — inline image in message body */
.flag-emote{display:inline-block; vertical-align:-3px; height:18px; width:auto; margin:0 1px; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* flags picker popover — same surface treatment as .emoji-pop */
.flags-pop{position:absolute; bottom:62px; left:10px; z-index:40; padding:8px; border-radius:14px;
  background:var(--panel-2); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border); box-shadow:var(--shadow); width:288px; max-width:calc(100vw - 20px)}
/* flex-wrap (not grid) so wide-ratio flags (Qatar 11:28, Jordan/Uzbekistan 1:2)
   stay the same VISIBLE HEIGHT as 2:3 flags — variable widths look natural. */
.flags-pop .fp-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-height:240px; overflow-y:auto; padding:2px}
.flags-pop .fp-grid::-webkit-scrollbar{width:8px}
.flags-pop .fp-grid::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:6px}
.flags-pop .fp-item{border:0; background:none; cursor:pointer; padding:4px; border-radius:8px; display:inline-grid; place-items:center}
.flags-pop .fp-item:hover{background:var(--hover)}
.flags-pop .fp-item img{height:24px; width:auto; display:block; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.flags-pop .fp-foot{margin-top:6px; padding:6px 4px 2px; font-size:11.5px; color:var(--muted); font-weight:600; text-align:center}
.flags-pop .fp-foot b{color:var(--accent)}
/* paywall body (rendered inside the existing .overlay modal) */
.flag-paywall{display:flex; flex-direction:column; gap:14px; align-items:stretch}
.flag-paywall .fp-hero{display:flex; align-items:center; gap:14px}
.flag-paywall .fp-hero .fp-mark{width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; font-size:24px; flex:none; box-shadow:var(--shadow-sm)}
.flag-paywall .fp-hero h3{font-family:var(--display); font-weight:900; font-size:19px; letter-spacing:-.4px}
.flag-paywall .fp-hero p{font-size:13px; color:var(--muted)}
.flag-paywall .fp-preview{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--panel)}
.flag-paywall .fp-preview img{height:20px; width:auto; display:block; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.flag-paywall .fp-price{display:flex; align-items:baseline; justify-content:center; gap:8px; font-family:var(--display)}
.flag-paywall .fp-price b{font-weight:900; font-size:30px; color:var(--accent); letter-spacing:-1px}
.flag-paywall .fp-price span{font-size:13px; color:var(--muted); font-weight:700}
.flag-paywall .fp-tabs{display:flex; gap:10px; justify-content:center; font-size:13px; font-weight:700}
.flag-paywall .fp-tabs label{display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:7px 14px; border-radius:9px; background:var(--panel); border:1px solid var(--border)}
.flag-paywall .fp-tabs label:has(input:checked){background:color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color:var(--accent)}
.flag-paywall .fp-tabs input{cursor:pointer}
.flag-paywall .fp-tabs input:disabled{cursor:not-allowed; opacity:.5}
.flag-paywall .fp-recipient input{width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--border-2); background:var(--surface); color:var(--text); font-size:14px; font-family:inherit}
.flag-paywall .fp-recipient input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.flag-paywall .fp-paypal{min-height:46px}     /* PayPal button injects here */
.flag-paywall .fp-fineprint{font-size:11.5px; color:var(--muted); text-align:center}

/* @-mention autocomplete (composer) */
.mention-ac{position:absolute; bottom:84px; left:10px; right:10px; max-width:280px; z-index:42; padding:4px; border-radius:12px;
  background:var(--panel-2); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--border); box-shadow:var(--shadow);
  max-height:200px; overflow-y:auto; overscroll-behavior:contain}
.mention-ac::-webkit-scrollbar{width:8px}
.mention-ac::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:6px}
.mention-ac .ac-item{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:700}
.mention-ac .ac-item:hover, .mention-ac .ac-item.sel{background:var(--hover)}
.mention-ac .ac-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mention-ac .ac-tag{font-size:10px; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.4px}

/* mention toast + jump flash */
.mention-toast{position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:45; display:inline-flex; align-items:center; gap:8px;
  max-width:88%; padding:10px 15px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); text-align:left;
  background:var(--panel-2); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--border-2); box-shadow:var(--shadow);
  animation:mt-in .18s ease-out}
.mention-toast:hover{filter:brightness(1.05)}
.mention-toast .mt-ic{font-size:15px; flex:none}
.mention-toast .mt-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mention-toast .mt-jump{color:var(--accent); font-weight:800; flex:none}
@keyframes mt-in{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}
.msg.flash{animation:msg-flash 1.6s ease-out}
@keyframes msg-flash{0%{background:color-mix(in srgb,var(--accent) 30%,transparent)} 100%{background:transparent}}

@media(max-width:420px){ .c-title h1{font-size:15px} .send-btn{padding:0 13px} .comp-ic{width:34px} }