/* ==========================================================================
   RelixChat 2.7 — RelixPremium, R✦, gifts, stickers, payments
   Heavy effects (animated gradients, blur, glow) are off under body.fx-off
   (Premium page toggle, or "Анимации" off) and for prefers-reduced-motion.
   ========================================================================== */

/* ---------------------------------------------------------------- Premium themes
   Full palettes on top of the dark theme. Same specificity as body.theme-dark,
   declared later, so they win only while the class is present. */
body.pt-midnight {
  --bg: #070b18; --bg-2: #0a1020; --panel: #0d1428; --panel-2: #121b34; --panel-3: #1a2544;
  --hover: rgba(140, 170, 255, .06); --line: rgba(140, 170, 255, .09); --line-2: rgba(140, 170, 255, .16);
  --text: #e6ecff; --text-2: #9aa7cc; --text-3: #66739a;
  --bubble-in: #131d38; --bubble-out: linear-gradient(135deg, #3b5bdb, #5f3dc4); --bubble-out-solid: #4263eb;
  --chat-bg: #060a16; --pattern: rgba(140, 170, 255, .035);
}
body.pt-aurora {
  --bg: #07130f; --bg-2: #0a1814; --panel: #0e1d19; --panel-2: #132823; --panel-3: #1b352f;
  --hover: rgba(99, 230, 190, .06); --line: rgba(99, 230, 190, .09); --line-2: rgba(99, 230, 190, .16);
  --text: #e3fbf3; --text-2: #97c9b9; --text-3: #5f8f80;
  --bubble-in: #12251f; --bubble-out: linear-gradient(135deg, #0ca678, #1c7ed6 60%, #9c36b5); --bubble-out-solid: #12b886;
  --chat-bg: #06110d; --pattern: rgba(99, 230, 190, .035);
}
body.pt-aurora .chat-body {
  background-image: radial-gradient(ellipse at 10% -10%, rgba(18, 184, 134, .22), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(132, 94, 247, .18), transparent 50%), radial-gradient(var(--pattern) 1.2px, transparent 1.3px);
  background-size: 200% 200%, 200% 200%, 22px 22px;
  animation: auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift { from { background-position: 0% 0%, 100% 0%, 0 0; } to { background-position: 60% 30%, 40% 20%, 0 0; } }
body.pt-obsidian {
  --bg: #000; --bg-2: #050505; --panel: #0a0a0b; --panel-2: #111113; --panel-3: #1a1a1d;
  --hover: rgba(255, 255, 255, .05); --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .12);
  --text: #f1f1f3; --text-2: #a3a3ab; --text-3: #6b6b73;
  --bubble-in: #141416; --bubble-out: linear-gradient(135deg, #2b2b31, #3a3a42); --bubble-out-solid: #34343b;
  --chat-bg: #000; --pattern: rgba(255, 255, 255, .02);
}
body.pt-neon {
  --bg: #0b0714; --bg-2: #100a1c; --panel: #140d22; --panel-2: #1c1230; --panel-3: #261a40;
  --hover: rgba(255, 0, 170, .07); --line: rgba(0, 240, 255, .12); --line-2: rgba(255, 0, 170, .22);
  --text: #f5ecff; --text-2: #b9a5d8; --text-3: #7c6a9c;
  --bubble-in: #1b1030; --bubble-out: linear-gradient(135deg, #f72585, #7209b7 55%, #4cc9f0); --bubble-out-solid: #b5179e;
  --chat-bg: #07040e; --pattern: rgba(76, 201, 240, .05);
}
body.pt-neon .msg-row.out .bubble { box-shadow: 0 0 14px rgba(247, 37, 133, .35); }
body.pt-neon .msg-row.in .bubble { box-shadow: inset 0 0 0 1px rgba(76, 201, 240, .25); }
body.pt-glass {
  --bg: #0d1016; --bg-2: #121620; --panel: rgba(28, 33, 45, .72); --panel-2: rgba(40, 46, 62, .6); --panel-3: rgba(58, 66, 88, .55);
  --hover: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .18);
  --text: #eef2fb; --text-2: #aab3c7; --text-3: #717b92;
  --bubble-in: rgba(255, 255, 255, .09); --bubble-out: linear-gradient(135deg, rgba(var(--accent-rgb), .85), rgba(59, 130, 246, .75)); --bubble-out-solid: rgb(var(--accent-rgb));
  --chat-bg: #0b0e14; --pattern: rgba(255, 255, 255, .03);
}
body.pt-glass { background: radial-gradient(circle at 15% 10%, rgba(var(--accent-rgb), .25), transparent 40%), radial-gradient(circle at 85% 90%, rgba(34, 211, 238, .18), transparent 40%), #0b0e14; }
body.pt-glass #sidebar, body.pt-glass .pane-header, body.pt-glass .composer, body.pt-glass .s-card, body.pt-glass .me-card { backdrop-filter: blur(18px) saturate(1.3); }
body.pt-glass .msg-row.in .bubble { backdrop-filter: blur(10px); }
/* heavy effects off: no animation, no blur, no glow (glass falls back to solid panels) */
body.fx-off.pt-aurora .chat-body { animation: none; }
body.fx-off.pt-neon .msg-row .bubble { box-shadow: none; }
body.fx-off.pt-glass #sidebar, body.fx-off.pt-glass .pane-header, body.fx-off.pt-glass .composer, body.fx-off.pt-glass .s-card, body.fx-off.pt-glass .me-card, body.fx-off.pt-glass .msg-row .bubble { backdrop-filter: none; }
body.fx-off.pt-glass { --panel: #1c212d; --panel-2: #262c3b; --bubble-in: #232938; }
@media (prefers-reduced-motion: reduce) { body.pt-aurora .chat-body { animation: none; } }

/* ---------------------------------------------------------------- chat themes */
body.ct-plain .chat-body { background-image: none; }
body.ct-nebula .chat-body { background-image: radial-gradient(circle at 20% 20%, rgba(151, 117, 250, .25), transparent 45%), radial-gradient(circle at 80% 70%, rgba(247, 131, 172, .18), transparent 45%); }
body.ct-sunset .chat-body { background-image: linear-gradient(180deg, rgba(255, 146, 43, .18), rgba(240, 101, 149, .14) 55%, transparent); }
body.ct-forest .chat-body { background-image: radial-gradient(circle at 10% 90%, rgba(55, 178, 77, .22), transparent 50%), radial-gradient(circle at 90% 10%, rgba(12, 166, 120, .14), transparent 45%); }
body.ct-ocean .chat-body { background-image: linear-gradient(200deg, rgba(34, 139, 230, .22), rgba(21, 170, 191, .12) 60%, transparent); }
body.ct-candy .chat-body { background-image: radial-gradient(circle at 25% 25%, rgba(255, 135, 135, .2), transparent 40%), radial-gradient(circle at 75% 75%, rgba(116, 192, 252, .2), transparent 40%); }
body.ct-mono .chat-body { background-image: repeating-linear-gradient(45deg, var(--pattern) 0 2px, transparent 2px 14px); }

/* ---------------------------------------------------------------- badges */
.premium-badge { display: inline-flex; color: #a26bff; margin-left: 3px; flex-shrink: 0; }
.premium-badge .ic { fill: currentColor; }
.emoji-status { margin-left: 4px; font-size: .95em; line-height: 1; flex-shrink: 0; display: inline-block; }
.emoji-status.anim { animation: esFloat 2.4s ease-in-out infinite; }
@keyframes esFloat { 50% { transform: translateY(-2px) rotate(-6deg); } }
body.fx-off .emoji-status.anim { animation: none; }
.list-item.active .premium-badge { color: #fff; }

/* ---------------------------------------------------------------- Premium page */
.premium-hero { text-align: center; padding: 26px 16px 22px; margin-bottom: 18px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #5f3dc4, #a26bff 55%, #f06595); position: relative; overflow: hidden; }
.premium-hero:not(.on) { background: linear-gradient(135deg, #343a52, #545b7a); }
.premium-hero h2 { font-size: 1.5em; margin: 8px 0 4px; }
.premium-hero p { opacity: .9; }
.ph-star { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.ph-star .ic { fill: #fff; }
.premium-hero.on::after { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .18), transparent 30%); animation: spin 9s linear infinite; pointer-events: none; }
body.fx-off .premium-hero.on::after { display: none; }
.feature-list { padding: 6px 0; }
.feature { display: flex; gap: 14px; padding: 10px 16px; align-items: flex-start; }
.feature .f-ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #a26bff; background: rgba(162, 107, 255, .14); }
.feature b { display: block; font-size: .95em; }
.feature span { font-size: .85em; color: var(--text-2); }
.s-group.locked .ptheme-cards { opacity: .55; }
.ptheme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ptheme-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); text-align: left; transition: border-color .15s; }
.ptheme-card i { display: block; height: 58px; border-radius: 11px; background: var(--panel-3); }
.ptheme-card span { font-weight: 700; font-size: .9em; padding: 0 2px; }
.ptheme-card small { color: var(--text-3); font-size: .74em; padding: 0 2px; }
.ptheme-card.active { border-color: var(--accent); }
.ptheme-card.none i { background: repeating-linear-gradient(45deg, var(--panel-2) 0 6px, var(--panel-3) 6px 12px); }
.pt-prev-midnight i { background: linear-gradient(135deg, #070b18 40%, #3b5bdb); }
.pt-prev-aurora i { background: linear-gradient(135deg, #07130f, #0ca678 50%, #9c36b5); }
.pt-prev-obsidian i { background: linear-gradient(135deg, #000 60%, #3a3a42); }
.pt-prev-neon i { background: linear-gradient(135deg, #0b0714, #f72585 55%, #4cc9f0); }
.pt-prev-glass i { background: linear-gradient(135deg, rgba(124, 108, 255, .7), rgba(34, 211, 238, .5)); }

/* ---------------------------------------------------------------- products / payments */
.products { display: flex; flex-direction: column; gap: 10px; }
.product-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); }
.pc-main { flex: 1; min-width: 0; }
.pc-main b { display: block; }
.pc-main span { font-size: .84em; color: var(--text-2); }
.pc-buy { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pc-price { font-weight: 800; white-space: nowrap; }
.btn.loading { opacity: .6; pointer-events: none; }
.pay-error { text-align: center; padding: 10px 6px 4px; color: var(--text-2); }
.pay-error .ic { color: var(--warn); margin-bottom: 10px; }
.pay-error p { color: var(--text); font-size: 1.02em; line-height: 1.45; }
@media (max-width: 480px) {
  .product-card { flex-wrap: wrap; }
  .pc-buy { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------- wallet */
.wallet-hero { text-align: center; padding: 24px 16px; border-radius: 22px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(245, 165, 36, .2), rgba(var(--accent-rgb), .18)); border: 1px solid var(--line); }
.wallet-hero > span { color: var(--text-2); font-size: .9em; }
.wallet-hero b { display: block; font-size: 2.3em; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 14px; }
.wh-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tx-amount { font-weight: 800; white-space: nowrap; font-size: .92em; }
.tx-amount.in { color: var(--success); }
.tx-amount.out { color: var(--text); }

/* ---------------------------------------------------------------- gift art */
.gift-art { --s: 72px; width: var(--s); height: var(--s); border-radius: 26%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(145deg, var(--g1), var(--g2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.gift-art .ga-motif { font-size: calc(var(--s) * .56); line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); }
.gift-art svg { width: 78%; height: 78%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.gift-art.r-rare { box-shadow: inset 0 0 0 2px rgba(79, 140, 255, .7); }
.gift-art.r-super_rare { box-shadow: inset 0 0 0 2px rgba(162, 107, 255, .8), 0 0 12px rgba(162, 107, 255, .25); }
.gift-art.r-legendary { box-shadow: inset 0 0 0 2px rgba(245, 165, 36, .9), 0 0 16px rgba(245, 165, 36, .3); }
.gift-art.r-limited { box-shadow: inset 0 0 0 2px rgba(255, 77, 109, .9), 0 0 18px rgba(255, 77, 109, .3); }
/* legendary: moving shine; limited: rotating halo — both switchable */
.gift-art.r-legendary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-100%); animation: giftShine 3.2s ease-in-out infinite; }
.gift-art.r-limited::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .35), transparent 35%); animation: spin 6s linear infinite; }
.gift-art.r-limited svg { position: relative; }
@keyframes giftShine { 60%, 100% { transform: translateX(100%); } }
body.fx-off .gift-art::after, body.fx-off .gift-art::before { display: none; }
@media (prefers-reduced-motion: reduce) { .gift-art::after, .gift-art::before { animation: none; display: none; } }
.rarity-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: .72em; font-weight: 800; letter-spacing: .02em;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); white-space: nowrap; }
.serial { font-family: var(--mono); font-size: .8em; color: var(--text-2); font-weight: 700; }

/* ---------------------------------------------------------------- gift cards / grids */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.gift-grid.profile { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.gift-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  text-align: center; transition: transform .15s, border-color .15s; min-width: 0; }
.gift-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.gift-card b { font-size: .86em; line-height: 1.25; overflow-wrap: anywhere; }
.gc-price { font-weight: 800; font-size: .84em; color: var(--accent); }
.gc-sub { font-size: .74em; color: var(--text-2); line-height: 1.3; }
.gc-supply { font-size: .7em; color: #ff4d6d; font-weight: 700; }
.gc-flag { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; }
.gc-flag.muted { background: var(--panel-3); color: var(--text-2); left: 8px; right: auto; }
.gift-card.sold { opacity: .55; }
.gift-card.hidden-gift .gift-art { filter: grayscale(.6); }

.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.sh-balance span { display: block; font-size: .8em; color: var(--text-2); }
.sh-balance b { font-size: 1.3em; }
.shop-to { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 8px; }
.shop-to > div { flex: 1; min-width: 0; }
.shop-to span { display: block; font-size: .78em; color: var(--text-2); }
.shop-to .st-ic { display: flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text-2); }
.shop-chips, .coll-bar .chips { padding: 6px 0 10px; }
.coll-bar { display: flex; align-items: center; gap: 8px; }
.coll-bar .chips { flex: 1; min-width: 0; }
.coll-bar .s-select { flex-shrink: 0; }
.coll-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 18px; }
.coll-stats > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; text-align: center; }
.coll-stats b { display: block; font-size: 1.25em; }
.coll-stats span { font-size: .72em; color: var(--text-2); }
.featured-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.fr-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.fr-btns { display: flex; }
.fr-btns .icon-btn[disabled] { opacity: .3; pointer-events: none; }

/* gift details dialog */
.gift-dlg .dlg { max-width: 400px; }
.gift-details { text-align: center; }
.gift-details .gift-art.big { margin: 4px auto 12px; }
.gift-details h3 { font-size: 1.25em; }
.gift-details p { color: var(--text-2); margin: 8px 0 12px; line-height: 1.45; }
.gd-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.gd-msg { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 8px; text-align: left; font-style: italic; }
.gd-table { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; text-align: left; font-size: .9em; background: var(--panel-2); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.gd-table span { color: var(--text-2); }
.gd-table b { font-weight: 600; overflow-wrap: anywhere; }
.gd-table .mono { font-family: var(--mono); font-size: .82em; }
.gift-details textarea { width: 100%; margin-top: 4px; }

/* gift message bubble */
.bubble.gift-bubble { padding: 12px 14px 8px; min-width: 200px; }
.b-gift { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; text-align: center; }
.bg-title { font-weight: 800; }
.bg-sub { display: flex; gap: 8px; align-items: center; font-size: .82em; }
.bg-note { font-size: .78em; opacity: .75; }
.msg-row.out .bg-sub .rarity-chip { color: #fff; background: rgba(255, 255, 255, .2); }
.msg-row.out .serial { color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- profile decoration */
.profile-top.pbg { border-radius: 22px; margin-bottom: 8px; padding-top: 6px; }
.pbg-aurora { background: linear-gradient(135deg, rgba(18, 184, 134, .35), rgba(132, 94, 247, .35)); }
.pbg-sunset { background: linear-gradient(135deg, rgba(255, 146, 43, .4), rgba(240, 101, 149, .35)); }
.pbg-ocean { background: linear-gradient(135deg, rgba(34, 139, 230, .4), rgba(21, 170, 191, .3)); }
.pbg-nebula { background: radial-gradient(circle at 30% 30%, rgba(151, 117, 250, .5), transparent 60%), radial-gradient(circle at 70% 70%, rgba(247, 131, 172, .4), transparent 60%); }
.pbg-forest { background: linear-gradient(135deg, rgba(47, 158, 68, .4), rgba(12, 166, 120, .3)); }
.pbg-gold { background: linear-gradient(135deg, rgba(245, 159, 0, .45), rgba(255, 224, 102, .25)); }
.pbg-rose { background: linear-gradient(135deg, rgba(230, 73, 128, .4), rgba(252, 194, 215, .3)); }
.pbg-mint { background: linear-gradient(135deg, rgba(56, 217, 169, .4), rgba(195, 250, 232, .25)); }
.pbg-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pbg-pick { width: 56px; height: 40px; border-radius: 10px; border: 2px solid transparent; font-size: .75em; color: var(--text-2); background-color: var(--panel-2); }
.pbg-pick.active { border-color: var(--accent); }
.swatch.none { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.emoji-status-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.emoji-status-row .input { width: 70px; text-align: center; }
.es-pick { width: 34px; height: 34px; border-radius: 10px; background: var(--panel-2); font-size: 1.1em; }
.track.profile-track { background: rgba(162, 107, 255, .08); }
.icon-btn.on { color: #a26bff; }
.icon-btn.on .ic { fill: currentColor; }

/* ---------------------------------------------------------------- stickers */
.bubble.sticker-only { background: transparent !important; box-shadow: none !important; padding: 0; }
.bubble.sticker-only .b-meta { position: static; display: inline-flex; margin-top: 2px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; }
.b-sticker { cursor: pointer; }
.b-sticker img { display: block; width: 160px; height: 160px; object-fit: contain; }
@media (max-width: 480px) { .b-sticker img { width: 128px; height: 128px; } }
.ep-st-tab { margin-left: auto; color: var(--text-2); }
.emoji-pop.stickers .ep-st-tab { color: var(--accent); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.st-grid button, .st-grid span { aspect-ratio: 1; border-radius: 10px; padding: 4px; display: flex; align-items: center; justify-content: center; }
.st-grid button:hover { background: var(--hover); }
.st-grid img { width: 100%; height: 100%; object-fit: contain; }
.st-grid.big { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); max-height: 50vh; overflow-y: auto; }
.st-foot { display: flex; justify-content: center; padding: 8px 0 4px; }
.pack-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: var(--text-2); }
.pack-icon img { width: 100%; height: 100%; object-fit: contain; }
.pack-view p { color: var(--text-2); margin-bottom: 10px; }
.pv-meta { display: flex; align-items: center; gap: 4px; font-size: .85em; color: var(--text-2); margin-bottom: 8px; }
.st-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.st-cell, .st-add { position: relative; aspect-ratio: 1; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.st-cell img { width: 80%; height: 80%; object-fit: contain; }
.st-cell.icon { border-color: var(--accent); }
.st-cell i { position: absolute; left: 6px; bottom: 4px; font-style: normal; font-size: .9em; }
.st-del, .st-icon { position: absolute; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); color: var(--text); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.st-del { right: 4px; }
.st-icon { left: 4px; }
.st-cell:hover .st-del, .st-cell:hover .st-icon { opacity: 1; }
@media (hover: none) { .st-del, .st-icon { opacity: 1; } }
.st-add { flex-direction: column; gap: 4px; color: var(--accent); border-style: dashed; font-size: .85em; font-weight: 600; }
.notice { padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; background: var(--panel-2); }
.notice.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ---------------------------------------------------------------- pinned messages (several) */
.pb-lines { display: flex; flex-direction: column; gap: 2px; align-self: stretch; flex-shrink: 0; width: 3px; }
.pb-lines i { flex: 1; border-radius: 3px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pb-lines i.on { background: var(--accent); }

/* ---------------------------------------------------------------- channel analytics */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.bar i { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.bar span { font-size: .68em; color: var(--text-3); }