/* dg-fan.css — fan subscriptions (phase 8): the #dgFan sheet (a creator's tiers / my tiers), the locked subscriber-only
   card, the "Subscribers" badge, the 2nd header's Subscribe pill. */
.dg-fan-sheet { max-width: 520px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 86vh; font-family: Inter, system-ui, sans-serif; }
.dg-fan-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #EFF3F4; font: 700 17px Inter, system-ui, sans-serif; }
.dg-fan-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; }
[data-fan-body] { padding: 14px 16px 18px; overflow-y: auto; }
.dg-fan-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dg-fan-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.dg-fan-who span { display: flex; flex-direction: column; }
.dg-fan-who b { font-size: 16px; } .dg-fan-who small { color: #536471; font-size: 13px; }
.dg-fan-tiers { display: grid; gap: 10px; }
.dg-fan-tier { border: 1px solid #CFD9DE; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.dg-fan-tier.cur { border-color: #E21B2D; box-shadow: 0 0 0 1px #E21B2D inset; }
.dg-fan-tier b { font-size: 16px; }
.dg-fan-tier strong { font: 800 22px Inter, system-ui, sans-serif; color: #E21B2D; }
.dg-fan-tier strong small { font-size: 13px; font-weight: 600; color: #536471; }
.dg-fan-tier p { margin: 0; color: #0F1419; font-size: 14px; line-height: 1.45; white-space: pre-line; }
.dg-fan-tag { align-self: flex-start; background: #FDECEE; color: #E21B2D; font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.dg-fan-btn { align-self: flex-start; border: 0; border-radius: 8px; background: #E21B2D; color: #fff; font: 700 14px Inter, system-ui, sans-serif; padding: 9px 16px; cursor: pointer; }
.dg-fan-btn:disabled { opacity: .5; }
.dg-fan-btn.ghost { background: transparent; color: #0F1419; border: 1px solid #CFD9DE; }
.dg-fan-btn.ghost.red { color: #E21B2D; border-color: rgba(226, 27, 45, .35); }
.dg-fan-accept { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: #536471; line-height: 1.4; }
.dg-fan-accept input { margin-top: 2px; accent-color: #E21B2D; }
.dg-fan-msg { color: #536471; font-size: 14px; margin: 10px 0 0; }
.dg-fan-msg a { color: #E21B2D; font-weight: 700; }
.dg-fan-note { color: #536471; font-size: 13px; line-height: 1.45; margin: 6px 0 10px; }
.dg-fan-cur { display: flex; flex-direction: column; gap: 6px; background: #FFF6F7; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.dg-fan-cur small { color: #536471; }
.dg-fan-edit { border: 1px solid #EFF3F4; border-radius: 12px; padding: 10px; margin-bottom: 10px; display: grid; gap: 8px; }
.dg-fan-edit input, .dg-fan-edit textarea { border: 1px solid #CFD9DE; border-radius: 8px; padding: 8px 10px; font: 14px Inter, system-ui, sans-serif; width: 100%; box-sizing: border-box; }
.dg-fan-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dg-fan-row span { margin-right: auto; font-size: 13px; color: #536471; }
.dg-fan-h4 { margin: 14px 0 6px; font-size: 15px; }
.dg-fan-fans { list-style: none; margin: 0; padding: 0; }
.dg-fan-fans a { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: inherit; }
.dg-fan-fans img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.dg-fan-fans span { display: flex; flex-direction: column; } .dg-fan-fans small { color: #536471; font-size: 12px; }
.dg-fan-wait { height: 44px; border-radius: 10px; background: linear-gradient(90deg, #EEF1F4, #F7F9FA, #EEF1F4); background-size: 200% 100%; animation: dgfanw 1.2s infinite linear; list-style: none; }
@keyframes dgfanw { to { background-position: -200% 0; } }
/* the locked card + the badge + the pill */
.dg-locked { margin: 10px 14px 4px; padding: 28px 16px; border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #1a0b2e, #5a0f3f); color: #fff; }
.dg-locked-ic { font-size: 30px; }
.dg-locked b { font: 700 17px Inter, system-ui, sans-serif; }
.dg-locked small { color: #E7E9EA; font-size: 13px; }
.dg-locked-btn { margin-top: 6px; background: #E21B2D; color: #fff !important; border-radius: 8px; padding: 9px 18px; font: 700 14px Inter, system-ui, sans-serif; text-decoration: none; }
.dg-subs { margin-left: 6px; background: #FFF4CC; color: #7A5B00; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.dg-ppill-fan.on { background: #FDECEE; color: #E21B2D; }
.dg-fan-edit label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #536471; }
/* super comments (phase 8): the ⚡ of the field, its amounts, the comment highlighted */
.dg-super-btn { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #FFF4CC; font-size: 16px; cursor: pointer; }
.dg-super-on .dg-super-btn { background: #FFD600; }
.dg-super-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 2px 44px; font-size: 13px; }
.dg-super-row[hidden] { display: none; }
.dg-super-row span { font-weight: 700; color: #7A5B00; }
.dg-super-row button { border: 1px solid #E5C200; background: #fff; border-radius: 999px; padding: 4px 12px; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
.dg-super-row button.on { background: #FFD600; }
.dg-super-row input { width: 80px; border: 1px solid #CFD9DE; border-radius: 999px; padding: 4px 10px; font: 13px Inter, system-ui, sans-serif; }
.dg-super-row small { flex-basis: 100%; color: #536471; }
.dg-super-on button[type=submit] { background: #E5A800 !important; }
.dg-super-tag { display: inline-block; background: #FFD600; color: #0F1419; font: 800 11px Inter, system-ui, sans-serif; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
/* Super Chat on every card (phase 8): the DGC button of the quick field, its amounts, the highest Super Chat first on the
   comment line (DGC gold background), the comments' filter All / Super Chats */
.dg-cm-input { flex-wrap: wrap; }
.dg-sc-btn { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #FFF4CC; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dg-sc-on .dg-sc-btn, .dg-super-on .dg-super-btn { background: #FFD600; box-shadow: 0 0 0 2px #E5A800; }
.dg-super-btn { display: grid; place-items: center; padding: 0; }
.dg-sc-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 2px 42px; font-size: 13px; }
.dg-sc-row[hidden] { display: none; }
.dg-sc-row span { font-weight: 700; color: #7A5B00; }
.dg-sc-row button { border: 1px solid #E5C200; background: #fff; border-radius: 999px; padding: 4px 12px; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; }
.dg-sc-row button.on { background: #FFD600; }
.dg-sc-row input { width: 80px; border: 1px solid #CFD9DE; border-radius: 999px; padding: 4px 10px; font: 13px Inter, system-ui, sans-serif; }
.dg-sc-row small { flex-basis: 100%; color: #536471; }
.dg-sc-tag, .dg-super-tag { display: inline-flex; align-items: center; gap: 4px; background: #FFD600; color: #0F1419; font: 800 11px Inter, system-ui, sans-serif; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.dg-cm-filter { display: flex; gap: 6px; padding: 6px 0 8px; }
.dg-cm-filter button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #CFD9DE; background: #fff; border-radius: 999px; padding: 5px 12px; font: 700 13px Inter, system-ui, sans-serif; cursor: pointer; color: #0F1419; }
.dg-cm-filter button.on { background: #0F1419; color: #fff; border-color: #0F1419; }
.dg-sc-gift { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; font-size: 16px; line-height: 20px; }
.dg-sc-tag b { font-weight: 800; }
.ogapoll-cm-actions .cm-del { display: inline-flex; align-items: center; opacity: .55; }
.ogapoll-cm-actions .cm-del:hover { opacity: 1; }
/* the comment's delete: the icon in Duegho's red (a mask: the SVG's shape, our colour) */
.cm-del-ic { display: inline-block; width: 13px; height: 16px; background: #E21B2D; -webkit-mask: url('/images/poll/card/delete.svg') center / contain no-repeat; mask: url('/images/poll/card/delete.svg') center / contain no-repeat; }
.ogapoll-cm-actions .cm-del { opacity: 1; }
/* the dGift attached to a comment field (as MyOga's Super Chat composer): above the field, × multiplier = total */
.dg-sc-pick { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 8px 6px 10px; border-radius: 12px; background: linear-gradient(90deg, #FFF3B8, #FFFBE6); border: 1px solid #F2D45C; font: 600 13px Inter, system-ui, sans-serif; color: #0F1419; }
.dg-sc-pick .dg-sc-gift { width: 24px; height: 24px; }
.dg-sc-pick b { font-weight: 700; } .dg-sc-pick em { font-style: normal; font-weight: 800; color: #7A5B00; margin-left: auto; }
.dg-sc-total { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.dg-sc-x { border: 0; background: rgba(0, 0, 0, .08); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.dg-sc-on button[type=submit] { color: #B8860B !important; font-weight: 800; }
/* the dGifts box's action (Ajouter / Envoyer): its own width, less side padding (owner 2026-10-26) */
#dgGiftSheet .ogagp-action { min-width: 0; padding-left: 14px; padding-right: 14px; }
/* the quantity: just wide enough for 4 digits */
#dgGiftSheet .ogagp-qty { width: 72px; padding: 0 6px; gap: 2px; }

/* a Super Chat's head (owner 2026-10-26): name (cut with … when space is missing) · time · the badge [gift] N [DGC] in the
   top-right corner — ALWAYS one line; no "Super Chat" word (it is the same everywhere) */
.ogapoll-cm-item.super .ogapoll-cm-meta, .dg-cm-head { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.ogapoll-cm-item.super .ogapoll-cm-meta > a, .dg-cm-head .dg-cm-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ogapoll-cm-item.super .ogapoll-cm-meta > a b { white-space: nowrap; }
.ogapoll-cm-item.super .ogapoll-cm-time, .ogapoll-cm-item.super .ogapoll-cm-badge, .dg-cm-head .dg-cm-time { flex: none; white-space: nowrap; }
.dg-cm-head .dg-cm-time { font-size: 12px; color: #536471; }
.ogapoll-cm-item.super .dg-sc-tag, .dg-cm-head .dg-sc-tag { margin: 0 0 0 auto; flex: none; gap: 3px; }
.dg-sc-tag b { font-weight: 800; }
.ogapoll-cm-item.super .ogapoll-cm-body { min-width: 0; flex: 1; }
.dg-cm-row.dg-cm-super > div { flex: 1; min-width: 0; }
.dg-cm-row.dg-cm-super .dg-cm-bubble { display: block; }
/* the colours by amount (YouTube's Super Chat tiers): the card's tint, its border, the badge */
.sc-t1 { --sc: #1E88E5; --sc-bg: #E8F2FD; --sc-ink: #fff; }
.sc-t2 { --sc: #00B8D4; --sc-bg: #E0F8FC; --sc-ink: #fff; }
.sc-t3 { --sc: #00BFA5; --sc-bg: #E0F7F3; --sc-ink: #fff; }
.sc-t4 { --sc: #FFCA28; --sc-bg: #FFF7DC; --sc-ink: #0F1419; }
.sc-t5 { --sc: #F57C00; --sc-bg: #FFEEDD; --sc-ink: #fff; }
.sc-t6 { --sc: #E91E63; --sc-bg: #FDE4EE; --sc-ink: #fff; }
.sc-t7 { --sc: #E21B2D; --sc-bg: #E21B2D; --sc-ink: #fff; }
[class*="sc-t"] .dg-sc-tag { background: var(--sc); color: var(--sc-ink); }
/* a comment's ⋯ and its menu (copy, pin, report) */
.ogapoll-cm-actions .cm-more { border: 0; background: none; color: #536471; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; letter-spacing: 1px; }
.cm-menu { position: fixed; z-index: 3500; min-width: 170px; max-width: 260px; background: #fff; border-radius: 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .18); padding: 6px 0; font-family: Inter, system-ui, sans-serif; }
.cm-menu[hidden] { display: none; }
.cm-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 16px; font: 14px Inter, system-ui, sans-serif; color: #0F1419; cursor: pointer; }
.cm-menu button:hover { background: #F7F9FA; }
.cm-menu button.red { color: #E21B2D; }
.cm-menu-h { display: block; padding: 6px 16px; font-size: 13px; color: #536471; }
.cm-menu-ok { margin: 0; padding: 10px 16px; font-size: 14px; color: #0F1419; }
/* the comment's ⋮ (vertical: less room), the cards' own icon in the comment's grey */
.cm-more-ic { display: inline-block; width: 4px; height: 15px; background: #536471; -webkit-mask: url('/images/poll/card/post-menu.svg') center / contain no-repeat; mask: url('/images/poll/card/post-menu.svg') center / contain no-repeat; vertical-align: middle; }
.ogapoll-cm-actions .cm-more { padding: 2px 6px; letter-spacing: 0; }
/* Super Chats (owner 2026-10-26: always on top, so colours side by side were too much): a white card like a comment, a thin
   left border in the tier's colour, the badge [gift] N [DGC] in that colour — the same in Tous, Super Chats and on the cards */
.ogapoll-cm-item.super[class*="sc-t"] { background: #fff; border: 1px solid #EFF3F4; border-left: 3px solid var(--sc); border-radius: 12px; padding: 8px; margin-bottom: 6px; }
.dg-cm-row.dg-cm-super[class*="sc-t"] .dg-cm-bubble { border-left: 3px solid var(--sc); }

/* a poll card's comment line (harmonised poll card): no Super Chat on a poll (it is a post's paid comment) */
.dg-cm-input[data-tt="poll"] .dg-sc-btn { display: none; }

/* a Super Chat's details (a tap on it) */
[data-sc]:not(button) { cursor: pointer; }
.dg-sci-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(15, 20, 25, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dg-sci { position: relative; width: min(380px, 100%); background: #fff; border-radius: 16px; padding: 20px; border-top: 4px solid var(--sc, #1E88E5); font-family: Inter, system-ui, sans-serif; color: #0F1419; }
.dg-sci-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1; color: #536471; cursor: pointer; }
.dg-sci-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dg-sci-head > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dg-sci-head b { font-size: 17px; }
.dg-sci-pic { width: 56px; height: 56px; object-fit: contain; font-size: 40px; line-height: 56px; text-align: center; flex: none; }
.dg-sci-text { margin: 4px 0 12px; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.dg-sci dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.dg-sci dt { color: #536471; } .dg-sci dd { margin: 0; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 4px; }