/* ─────────────────────────────────────────────────────────────────────
   editor-v2.css — Forum editor (Floating Contextual)

   Design principles:
   - Quiet at rest: no permanent format toolbar, generous whitespace.
   - Expressive on demand: format actions live in a floating bubble that
     appears above the user's text selection (Medium / Notion / Linear).
   - A single discreet rail at the bottom keeps insert actions
     (image, sticker, draw, poll, mic, video) one tap away.
   - One accent (lime) used sparingly. No gradients, no vivid hues.

   Scope: every selector is anchored on `.editor-v2` so the look is
   opt-in and never bleeds into legacy chrome (.chat-input-bar,
   .editor-toolbar-compact, .wysiwyg-container that isn't .editor-v2).

   Tokens: --bg-surface, --bg-surface-alt, --border-color,
           --text-main, --text-muted,
           --accent-primary, --accent-text,
           --accent-glow, --accent-glow-soft, --accent-highlight,
           --accent-success, --quote-bg, --focus-ring-color
   ───────────────────────────────────────────────────────────────────── */

/* =====================================================================
   COMMON — viewport-toggled visibility helpers
   ===================================================================== */

.editor-v2 .editor-v2-desktop-only,
.editor-v2 .editor-v2-mobile-only {
  display: none;
}

/* The legacy markup writes display:none inline via `style` and toggles it
   back to "flex" via JS. This rule re-asserts flex layout when the bar is
   actually visible — checking the inline style attribute would be brittle,
   so we rely on the sibling JS toggling `display:flex`. */
.editor-v2 #reply-context-bar[style*="display: flex"],
.editor-v2 #reply-context-bar[style*="display:flex"] {
  display: flex !important;
}

/* The format/quote toolbar groups are surfaced through the floating
   bubble now. They stay in the DOM (handlers are still wired to them)
   but become visually inert, only flashing back via the bubble. */
.editor-v2 .ev2-toolbar-group[data-group="format"],
.editor-v2 .ev2-toolbar-group[data-group="quote"] {
  display: none !important;
}

/* =====================================================================
   DESKTOP (≥ 768px)
   ===================================================================== */

@media (min-width: 768px) {
  .editor-v2 .editor-v2-desktop-only { display: flex; }

  /* Container — quiet at rest, lime ring on focus-within */
  .editor-v2.fixed-reply-form,
  .editor-v2.wysiwyg-container,
  .editor-v2 .wysiwyg-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .editor-v2:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-glow-soft);
  }

  /* The "toolbar" element is now the bottom INSERT RAIL.
     Order is overridden so it sits below the editor zone. */
  .editor-v2 .ev2-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    order: 99; /* push rail under the editor regardless of source order */
  }
  .editor-v2 .ev2-toolbar::-webkit-scrollbar { display: none; }

  .editor-v2 .ev2-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .editor-v2 .ev2-sep {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 4px;
    flex-shrink: 0;
    opacity: 0.6;
  }

  /* Insert-rail icon buttons — flat, 32×32 */
  .editor-v2 .ev2-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .editor-v2 .ev2-btn:hover  { background: var(--accent-highlight); color: var(--text-main); }
  .editor-v2 .ev2-btn:active { transform: scale(0.94); }
  .editor-v2 .ev2-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring-color, var(--accent-primary));
  }
  .editor-v2 .ev2-btn[aria-pressed="true"],
  .editor-v2 .ev2-btn.fmt-active {
    background: var(--accent-glow-soft);
    color: var(--accent-text);
  }
  .editor-v2 .ev2-btn-accent { color: var(--accent-text); }
  .editor-v2 .ev2-btn-accent:hover {
    background: var(--accent-glow-soft);
    color: var(--accent-text);
  }

  /* The flex-arranged container is the editor row. Make sure it sits
     above the rail and gets the proper padding. */
  .editor-v2 {
    display: flex;
    flex-direction: column;
  }

  /* Reply context bar / poll indicator / sticker picker stay above the
     editor row. The toolbar (insert rail) is forced last via order:99. */
  .editor-v2 #reply-context-bar { order: 1; }
  .editor-v2 #poll-indicator    { order: 2; }
  .editor-v2 #sticker-picker    { order: 3; }
  .editor-v2 .ev2-editor-row    { order: 10; }

  /* Editor zone — generous typography, lime caret, no border.
     WYSIWYG parity with .post-content (rendered post):
       • horizontal padding 15px = .post 16px − 1px wrapper border
       • font-size 15px, letter-spacing 0.2px = .post-content metrics
       • max-width 700px = .post-content readability cap
     so the wrap point lands on the same character in both contexts. */
  .editor-v2 #editor-zone,
  .editor-v2 .ev2-editor {
    padding: 12px 15px;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.2px;
    color: var(--text-main);
    background: transparent;
    border: none;
    outline: none;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    caret-color: var(--accent-primary);
    width: auto;
    max-width: 700px;
    border-radius: 0;
    position: relative;
  }

  /* Reply mode: 1 line min, scroll past ~5 lines */
  .editor-v2--reply #editor-zone {
    min-height: 44px;
    max-height: 140px;
  }

  /* Standard (topic creation): roomy long-form. Horizontal padding
     stays at 15px (see #editor-zone above) so the wrap point matches
     the rendered post — only vertical padding/typography differ. */
  .editor-v2--standard #editor-zone {
    min-height: 220px;
    max-height: none;
    padding: 18px 15px;
    font-size: 15px;
    line-height: 1.65;
  }

  /* Show the placeholder when the editor is visually empty. Browsers leave
     a stray <br> or <div><br></div> after Backspace, so we cover all the
     common shapes — none of them should suppress the hint. */
  .editor-v2 #editor-zone:empty:before,
  .editor-v2 #editor-zone:has(> br:only-child):before,
  .editor-v2 #editor-zone:has(> div:only-child > br:only-child):before {
    content: attr(placeholder);
    color: var(--text-muted);
    opacity: 0.6;
    pointer-events: none;
  }

  .editor-v2 .ev2-editor-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  /* Send button — lives at the right end of the insert rail */
  .editor-v2 .ev2-send {
    background: var(--accent-primary);
    color: #1a2810;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    box-shadow: 0 2px 10px var(--accent-glow);
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.15s ease;
  }
  .editor-v2 .ev2-toolbar-spacer { flex: 1 1 auto; min-width: 8px; }
  .editor-v2 .ev2-toolbar-hint {
    font-family: ui-monospace, Menlo, monospace;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    margin-right: 8px;
    opacity: 0.7;
  }
  @media (max-width: 1023px) {
    .editor-v2 .ev2-toolbar-hint { display: none; }
  }
  .editor-v2 .ev2-send:hover  { filter: brightness(1.05); }
  .editor-v2 .ev2-send:active { transform: scale(0.96); }
  .editor-v2 .ev2-send i      { font-size: 12px; }

  /* Icon-only variant for the desktop "send" button — just an arrow. */
  .editor-v2 .ev2-send.ev2-send-icon {
    padding: 0;
    width: 32px;
    justify-content: center;
    gap: 0;
  }
  .editor-v2 .ev2-send.ev2-send-icon i { font-size: 13px; }

  .editor-v2 #sticker-picker {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-alt);
    border-radius: 0;
    margin: 0;
  }

  .editor-v2 #poll-indicator {
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    padding: 8px 12px !important;
    background: var(--bg-surface-alt) !important;
    color: var(--accent-success);
    font-size: 13px;
  }

  .editor-v2 #reply-context-bar {
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--accent-primary) !important;
    background: var(--quote-bg) !important;
    padding: 10px 16px !important;
  }

  .editor-v2 .ev2-mobile-bar { display: none; }
}

/* =====================================================================
   MOBILE (< 768px)
   ===================================================================== */

@media (max-width: 767.98px) {

  .editor-v2--reply .editor-v2-mobile-only { display: flex; }
  .editor-v2--reply .ev2-toolbar { display: none; }

  /* Safety net — if a rendering path or older cached partial omits the
     `editor-v2--reply` modifier, the mobile chips would default to
     `display:none` (line 28). Make sure any `.editor-v2 .ev2-chips` is
     visible on mobile so every user gets the same single-line bar. */
  .editor-v2 .ev2-chips { display: flex !important; }

  /* Standard mode (topic creation) keeps the desktop layout on mobile */
  .editor-v2--standard .editor-v2-mobile-only { display: none !important; }
  .editor-v2--standard .editor-v2-desktop-only { display: flex; }

  .editor-v2--standard.wysiwyg-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
  }
  .editor-v2--standard .ev2-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-surface-alt);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    flex-wrap: wrap;
  }
  .editor-v2--standard #editor-zone {
    min-height: 220px;
    padding: 16px 15px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    background: transparent;
    border: none;
    outline: none;
  }

  /* Reply: fixed bottom bar */
  .editor-v2--reply.fixed-reply-form {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .editor-v2--reply .ev2-editor-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
  }

  /* Mobile insert rail: keep mobile chips above editor row */
  .editor-v2--reply .ev2-chips {
    order: 0;
  }

  .editor-v2--reply .ev2-plus-btn,
  .editor-v2--reply .ev2-mic-btn {
    display: none !important;
  }

  .editor-v2--reply .ev2-editor-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    position: relative;
  }

  .editor-v2--reply #editor-zone {
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;
    max-height: 160px;
    border-radius: 18px;
    background: var(--bg-surface-alt);
    border: 1.5px solid var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-glow-soft);
    padding: 11px 16px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-main);
    outline: none;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    caret-color: var(--accent-primary);
    box-sizing: border-box;
    margin: 0;
    position: relative;
  }
  .editor-v2--reply #editor-zone:empty:before,
  .editor-v2--reply #editor-zone:has(> br:only-child):before,
  .editor-v2--reply #editor-zone:has(> div:only-child > br:only-child):before {
    content: attr(placeholder);
    color: var(--text-muted);
    opacity: 0.6;
    pointer-events: none;
  }

  /* Circular mobile send */
  .editor-v2--reply .ev2-send-mobile {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    color: #1a2810;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 0;
    box-shadow: 0 4px 14px var(--accent-glow);
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
    align-self: flex-end;
    margin-bottom: 2px;
  }
  .editor-v2--reply .ev2-send-mobile:hover  { filter: brightness(1.05); }
  .editor-v2--reply .ev2-send-mobile:active { transform: scale(0.92); }

  /* Mobile chips bar — flatter, less candy. Always visible, scroll-x. */
  .editor-v2--reply .ev2-chips {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px;
    scroll-padding-left: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .editor-v2--reply .ev2-chips::-webkit-scrollbar { display: none; }

  .editor-v2--reply .ev2-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease;
  }
  .editor-v2--reply .ev2-chip i {
    font-size: 13px;
    color: var(--text-muted);
  }
  .editor-v2--reply .ev2-chip:hover {
    background: var(--accent-highlight);
    border-color: var(--accent-primary);
    color: var(--text-main);
  }
  .editor-v2--reply .ev2-chip:active { transform: scale(0.96); }
  .editor-v2--reply .ev2-chip.is-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #1a2810;
  }
  .editor-v2--reply .ev2-chip.is-active i { color: #1a2810; }

  .editor-v2--reply #reply-context-bar,
  .editor-v2--reply #poll-indicator { margin-bottom: 6px !important; }

  .editor-v2--reply #sticker-picker {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 8px;
  }
}

/* =====================================================================
   FLOATING BUBBLE — appears above the user's text selection.
   Lives at document.body root (position: fixed) so it escapes any
   scroll/overflow ancestor.
   ===================================================================== */

.ev2-bubble {
  position: fixed;
  z-index: 10050;
  display: none;
  align-items: center;
  gap: 2px;
  background: #0c0f15;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 5px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
              0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  pointer-events: none;
  color: #e6ecf2;
  user-select: none;
  -webkit-user-select: none;
}

.ev2-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Arrow indicator pointing at the selection.
   data-placement="top"    → arrow under bubble, pointing down
   data-placement="bottom" → arrow above bubble, pointing up */
.ev2-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  pointer-events: none;
}
.ev2-bubble[data-placement="top"]::after {
  bottom: -6px;
  border-top: 6px solid #0c0f15;
}
.ev2-bubble[data-placement="bottom"]::after {
  top: -6px;
  border-bottom: 6px solid #0c0f15;
}

.ev2-bubble-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.ev2-bubble-btn:hover {
  background: var(--accent-highlight);
  color: #fff;
}
.ev2-bubble-btn:active { transform: scale(0.94); }
.ev2-bubble-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-color, var(--accent-primary));
}
.ev2-bubble-btn[aria-pressed="true"],
.ev2-bubble-btn.is-active {
  background: var(--accent-glow-soft);
  color: var(--accent-text);
}
.ev2-bubble-btn svg { display: block; }

.ev2-bubble-sep {
  width: 1px;
  height: 18px;
  background: var(--border-color);
  margin: 0 4px;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.6;
}

/* Color dot — a circle filled with var(--dot) */
.ev2-bubble-color {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--dot, #a8c545);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  margin: 0 1px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.ev2-bubble-color:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.ev2-bubble-color:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-color, var(--accent-primary));
}

/* Palette popover (8 colors, 4×2 grid) */
.ev2-bubble-palette-grid {
  z-index: 10051;
  background: #0c0f15;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 22px);
  gap: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
              0 4px 12px rgba(0, 0, 0, 0.3);
  animation: ev2-palette-in 150ms ease-out;
}
@keyframes ev2-palette-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Mobile bubble adaptations */
@media (max-width: 767.98px) {
  .ev2-bubble {
    padding: 6px 8px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    max-width: min(calc(100vw - 24px), 320px);
    gap: 4px;
  }
  .ev2-bubble-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }
  /* On mobile, give color dots a comfy 36px hit-area but keep the
     visible disc small so the bubble stays compact. */
  .ev2-bubble-color {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    position: relative;
  }
  .ev2-bubble-color::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--dot, #a8c545);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .ev2-bubble-palette-grid {
    grid-template-columns: repeat(4, 28px);
    gap: 6px;
  }
}

/* =====================================================================
   SUBMIT STATE — disable visible send buttons when the hidden
   #chat-send-btn is busy / disabled.
   ===================================================================== */
.editor-v2:has(#chat-send-btn[disabled]) .ev2-send,
.editor-v2:has(#chat-send-btn[aria-busy="true"]) .ev2-send {
  opacity: 0.55;
  pointer-events: none;
  filter: saturate(0.7);
}

/* =====================================================================
   ACCESSIBILITY — focus rings everywhere
   ===================================================================== */
.editor-v2 .ev2-chip:focus-visible,
.editor-v2 .ev2-plus-btn:focus-visible,
.editor-v2 .ev2-mic-btn:focus-visible,
.editor-v2 .ev2-send-mobile:focus-visible,
.editor-v2 .ev2-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring-color, var(--accent-primary));
}

.editor-v2 #editor-zone:focus-visible { outline: none; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .editor-v2 *,
  .editor-v2 *::before,
  .editor-v2 *::after,
  .ev2-bubble,
  .ev2-bubble *,
  .ev2-bubble-palette-grid {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =====================================================================
   THEME OVERRIDE GUARD
   --------------------------------------------------------------------
   Existing themed rules (e.g. realm "poirier" + theme "deep-ether") set
   `#editor-zone.editor-content { min-height: 180px !important; max-height
   60vh !important; padding: 20px 24px !important }` with specificity
   (0,1,3,1). To beat that *and* the !important we must reach at least
   (0,1,3,2). We do that by chaining the two classes that exist on the
   element: .editor-content AND .ev2-editor.
   ===================================================================== */

/* DESKTOP REPLY: 1 line at rest (44px), grows to ~5 lines (140px), then scrolls.
   Padding 15px + font-size 15px + letter-spacing 0.2px mirror .post-content
   so the wrap point matches between editor and rendered post. */
@media (min-width: 768px) {
  html body .editor-v2--reply #editor-zone.editor-content.ev2-editor {
    min-height: 44px !important;
    max-height: 140px !important;
    height: auto !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.2px !important;
    overflow-y: auto !important;
  }
}

/* MOBILE REPLY: always-expanded textarea (chips above, send beside). */
@media (max-width: 767.98px) {
  html body .editor-v2--reply #editor-zone.editor-content.ev2-editor {
    min-height: 44px !important;
    max-height: 160px !important;
    height: auto !important;
    padding: 11px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    overflow-y: auto !important;
  }
}

/* DESKTOP STANDARD (topic creation/edit): keep the roomy long-form area.
   Same metrics as .post-content (font-size 15px, letter-spacing 0.2px,
   padding 15px horizontal) so wrap is identical post-publication. */
@media (min-width: 768px) {
  html body .editor-v2--standard #editor-zone.editor-content.ev2-editor {
    min-height: 220px !important;
    max-height: none !important;
    padding: 18px 15px !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.2px !important;
  }
}

/* =====================================================================
   STICKER CHIP — was previously tagged `.mobile-sticker-btn`, which is
   the legacy `.chat-actions` button class. Inheriting that name forced
   the chip to a 44×44 circle (`width:44px; border-radius:50%`) via the
   rules at 3-components.css:22477 / 26740, which clipped the label to
   "Stick" and broke the icon. The chip uses `.ev2-chip-sticker` now,
   so it picks up the same look as Photo / Vocal / Dessin / Sondage.
   ===================================================================== */
.editor-v2 .ev2-chip.ev2-chip-sticker {
  min-width: max-content;
}