/* ========================================================================
   RBS' Estimation Poker — styles.css (consolidated from latest IST)
   - English-only comments
   - Desktop unchanged
   - Mobile (≤768px): participant row becomes two-line, actions on line 2
   - Vote chips row and result row are centered (stacked)
   ===================================================================== */

/* ---------- Theme tokens ------------------------------------------------ */
:root{
  --bg:#1e1e1e; --text:#d4d4d4; --text-strong:#fff; --text-dim:#aeb3bb;
  --panel:#2d2d30; --panel-2:#3c3c3c; --panel-2-hover:#47494d; --panel-hover:#34363a; --border:#3c3c3c;
  --accent:#007acc; --accent-strong:#005a9e;
  --ok:#4caf50; --ok-border:#81c784; --warn:#ffd54f; --danger:#ef4444;
  --shadow:0 6px 16px rgba(0,0,0,.25);
  --radius:12px; --radius-sm:8px;
  --h-input:44px; --h-button:44px; --gap:12px; --gap-sm:8px;

  --footer-h:68px;
  --cta-offset:8px;

  /* Cards */
  --card-min-desktop:46px; --card-max-desktop:84px;
  --card-min-mobile:40px; --card-max-mobile:72px;

  /* Lists */
  --icon-col-width:1.5rem;

  /* Chips */
  --vote-chip-width:5ch;

  /* Inactive */
  --inactive-fg:#8c949f;

  /* Inputs (dark) */
  --field-bg:#1f2937;
  --field-border:rgba(255,255,255,.16);
  --field-fg:#e5e7eb;
  --field-placeholder:rgba(255,255,255,.45);
  --field-focus:#60a5fa;

  /* Header controls */
  --hamburger-right:12px; --hamburger-top:10px; --hamburger-size:40px;
  --header-gap:10px; /* fixed visual gap to hamburger */
  --hc-height:36px; --hc-pad:4px; --hc-gap:4px; --hc-seg-size:28px;
  --hc-active-ring:1px; --hc-active-ring-color:rgba(255,255,255,0.45);
  --hc-nudge-y:1px;
}
:root[data-theme="light"]{
  --bg:#f6f7f9; --text:#1f2937; --text-strong:#111827; --text-dim:#374151;
  --panel:#fff; --panel-2:#eef2f7; --panel-2-hover:#e7ebf2; --panel-hover:#f7f8fb; --border:#e5e7eb;
  --accent:#2563eb; --accent-strong:#1d4ed8;
  --shadow:0 10px 24px rgba(0,0,0,.08);

  --chip-special-bg:#eaf2ff; --chip-special-border:#cfe0ff; --chip-special-text:#0b1220;

  --switch-off-track:#d2d6de; --switch-off-border:#b8bec9;

  --inactive-fg:#9ca3af;

  --field-bg:#fff; --field-border:rgba(0,0,0,.20);
  --field-fg:#111827; --field-placeholder:#8b8b8b; --field-focus:#3b82f6;
}

/* ---------- Base --------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:Consolas,monospace;
  margin:0; padding:2rem; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--footer-h);
}
button,input,select,textarea{font:inherit;color:inherit}
body.menu-open{overflow:hidden}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.container{max-width:800px;margin:0 auto;padding:1rem}
h1{color:var(--text-strong);margin-bottom:2rem;font-size:1.1rem}
h2{color:var(--text-strong);margin:1.2rem 0 .8rem;font-size:.98rem}
strong{color:var(--text-strong)}
.app-title{display:flex;align-items:center;gap:.5rem;justify-content:flex-start}
.app-title .logo{border-radius:6px;vertical-align:middle}
.page-landing .app-title{justify-content:center;text-align:center}
@media (max-width:560px){.app-title{justify-content:center;text-align:center}}

/* Header info */
.main-info{display:grid;grid-template-columns:max-content 1fr;column-gap:10px;row-gap:6px;align-items:center;margin-bottom:1.2rem}
.main-info dt{margin:0;grid-column:1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.main-info dd{margin:0;grid-column:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-with-actions{display:inline-flex;align-items:center;gap:6px}
.room-with-actions .icon-button{margin-left:10px}

/* ---------- Topic row ---------------------------------------------------- */
.topic-row{display:grid;grid-template-columns:max-content 1fr max-content;gap:8px 10px;align-items:center;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;margin:1.2rem 0 1rem}
.topic-label{white-space:nowrap;color:var(--text-strong)}
.topic-text{display:inline-block;color:var(--text);padding:.15rem .45rem;border-radius:6px;background:var(--panel);border:1px solid var(--border);min-height:26px;line-height:1.3;font-size:.92rem}
.topic-text a{color:inherit;text-decoration:none}
.topic-text a:hover{text-decoration:underline}
.topic-actions{display:flex;align-items:center;gap:6px}

/* Optional edit block */
.topic-edit{display:grid;grid-template-columns:1fr max-content;gap:8px;align-items:center;margin:1.2rem 0 1rem;padding:8px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px}
.topic-input{height:36px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:0 .75rem}

/* #topicRow specific (ellipsis hint) */
#topicRow{display:flex;align-items:center;gap:.5rem}
#topicRow .topic-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topicOverflowHint.topic-more-btn{flex:0 0 auto;background:transparent;border:0;padding:0;margin-left:.25rem;font:inherit;font-size:.9em;line-height:1;opacity:.8;cursor:help;text-decoration:underline dotted}
#topicOverflowHint.topic-more-btn:hover{opacity:1}

/* ---------- Menu trigger ------------------------------------------------- */
.menu-button{
  position:fixed;top:12px;right:12px;z-index:1100;height:40px;width:40px;border:1px solid var(--border);
  border-radius:12px;background:var(--panel);color:var(--text-strong);cursor:pointer;box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:transform 120ms,background 180ms,border-color 180ms,box-shadow 180ms;-webkit-tap-highlight-color:transparent
}
.menu-button:hover{background:var(--panel-hover);border-color:#4a4a4a}
.menu-button:active{transform:translateY(1px) scale(.98)}

/* ---------- Menu overlay & panel ---------------------------------------- */
.hidden{display:none !important}
.menu-overlay{position:fixed;inset:0;z-index:1090}
.menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(1px);padding-bottom:env(safe-area-inset-bottom)}
:root[data-theme="light"] .menu-backdrop{background:rgba(0,0,0,.25)}
.menu-panel{
  position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:min(440px,calc(100vw - 24px));
  max-height:calc(100dvh - (max(12px,env(safe-area-inset-top)) + 12px));overflow-y:auto;overflow-x:hidden;
  background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.35);
  padding:12px 12px calc(14px + env(safe-area-inset-bottom));animation:slideIn 180ms ease both
}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.menu-panel fieldset{border:0;padding:0;margin:0;min-inline-size:auto}
.menu-header{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:20}
.menu-header h3{margin:0;font-size:1rem;color:var(--text-strong)}
.menu-section{display:flex;flex-direction:column;gap:10px;padding:8px 4px 10px}
.section-title{margin:6px 8px 6px;font-weight:600;font-size:.9rem;opacity:.85;color:var(--text-strong)}

/* Closed overlay must not paint at all */
#appMenuOverlay[hidden],
#appMenuOverlay.is-hidden,
#appMenuOverlay[aria-hidden="true"]{display:none !important;pointer-events:none !important}

/* Menu rows */
.menu-item{
  display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--panel-2);
  border:1px solid var(--border);cursor:pointer;text-align:left;font-size:.9rem;color:var(--text);
  transition:background 180ms,border-color 180ms,box-shadow 180ms
}
.menu-item:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.menu-item.disabled{opacity:.55;cursor:not-allowed}
.menu-item .mi-icon{font-size:18px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif}

/* Language inline row (menu) */
.lang-inline{display:flex;align-items:center;gap:8px}
.flag-split{position:relative;display:inline-block;width:24px;height:16px;overflow:hidden;border-radius:3px;border:1px solid var(--border)}
.flag-split .flag{position:absolute;inset:-.5px;width:calc(100% + 1px);height:calc(100% + 1px);object-fit:cover}
.flag-split .flag-b{z-index:1;-webkit-mask-image:linear-gradient(135deg,transparent 49.5%,black 50%);mask-image:linear-gradient(135deg,transparent 49.5%,black 50%)}
@supports not (mask-image:linear-gradient(#000,#000)){.flag-split .flag-b{clip-path:polygon(100% 0,100% 100%,0 100%)}}

/* Choice pills */
.menu-choice{display:flex;flex-wrap:wrap;gap:8px}
.choice-btn{display:flex;align-items:center;gap:8px;justify-content:center;padding:10px 12px;height:34px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);cursor:pointer;font-size:.9rem;color:var(--text);transition:background 180ms,border-color 180ms,box-shadow 180ms}
.choice-btn .mi-icon{font-size:18px;line-height:1}
.choice-btn:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.choice-btn.active,.choice-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.20)}

/* Sequence radios */
.menu-choice.vertical{flex-direction:column;gap:6px}
.radio-row{display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:36px;border-radius:10px;background:var(--panel-2);border:1px solid var(--border);user-select:none;transition:background 180ms,border-color 180ms,box-shadow 180ms;font-size:.9rem;white-space:nowrap;overflow:hidden}
.radio-row input[type="radio"]{width:16px;height:16px;accent-color:var(--accent);margin:0;flex:0 0 auto}
.radio-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.radio-row:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.radio-row.disabled{opacity:.55;cursor:not-allowed}
.radio-row:has(input[type="radio"]:checked){border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.20);background:color-mix(in srgb,var(--panel-2) 84%, var(--accent) 16%)}

/* Switches */
.menu-item.switch{grid-template-columns:28px 1fr max-content}
.switch-text{display:flex;gap:6px;align-items:baseline;min-width:0;white-space:nowrap}
.switch-control{
  -webkit-appearance:none;appearance:none;width:42px;height:24px;border-radius:999px;background:var(--switch-off-track);
  border:1px solid var(--switch-off-border);position:relative;cursor:pointer;transition:background 160ms,border-color 160ms,box-shadow 160ms
}
.switch-control::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform 160ms ease
}
.switch-control:checked,.switch-control[aria-checked="true"]{background:var(--accent);border-color:var(--accent-strong);box-shadow:0 0 0 2px rgba(0,122,204,.20)}
.switch-control:checked::after,.switch-control[aria-checked="true"]::after{transform:translateX(18px)}
.switch-control:disabled{opacity:.6;cursor:not-allowed}

/* Danger CTA inside menu */
#closeRoomBtn.menu-item.danger{
  display:grid;grid-template-columns:28px 1fr;align-items:center;
  background:rgba(255,70,70,.10);border-color:rgba(255,70,70,.25);color:#fecaca;
}
#closeRoomBtn.menu-item.danger:hover{border-color:rgba(255,70,70,.45);box-shadow:0 0 0 2px rgba(239,68,68,.18)}
#closeRoomBtn.menu-item.danger .mi-icon{font-size:18px;line-height:1}
#closeRoomBtn .truncate-1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Icon button -------------------------------------------------- */
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--panel-2);color:var(--text);border:1px solid var(--border);cursor:pointer;transition:background 180ms,border-color 180ms,transform 120ms,box-shadow 180ms;-webkit-tap-highlight-color:transparent;font-size:16px;line-height:1}
.icon-button:hover{background:var(--panel-2-hover);border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,122,204,.12)}
.icon-button:active{transform:translateY(1px) scale(.98)}
:root[data-theme="light"] .icon-button:hover{box-shadow:0 0 0 2px rgba(37,99,235,.12)}

/* ---------- Forms / landing --------------------------------------------- */
.landing-container{display:flex;flex-direction:column;align-items:center;min-height:90vh;padding:2rem;text-align:center;margin-top:6vh}
.join-form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.form-row{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px}
.form-field{width:100%}
.landing-container .join-form .form-row:first-of-type{margin-top:10px}

/* Inputs */
input[type="text"],input[type="search"],input[type="email"],input[type="url"],
input[type="password"],input[type="number"],input[type="tel"],
textarea,select{
  display:block;width:100%;
  height:auto;min-height:var(--h-input);
  padding:.55rem .75rem;border-radius:10px;
  background:var(--field-bg); color:var(--field-fg);
  border:1px solid var(--field-border);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.05);
  -webkit-appearance:none; appearance:none;
  transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s;
}
input::placeholder,textarea::placeholder{color:var(--field-placeholder)}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--field-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--field-focus) 35%, transparent);
}
input[disabled],textarea[disabled],select[disabled],
input[readonly],textarea[readonly]{opacity:.7;cursor:not-allowed}

/* Safari/iOS autofill & tap highlights */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--field-fg);
  -webkit-box-shadow:0 0 0 1000px var(--field-bg) inset;
  transition:background-color 9999s ease-out 0s;
}
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
}

/* ---------- Buttons ------------------------------------------------------ */
.button{margin-top:1.2rem;height:var(--h-button);padding:0 1.2rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-size:1rem;transition:transform 120ms,filter 180ms,box-shadow 180ms,background 180ms;box-shadow:var(--shadow)}
.button:hover{background:var(--accent-strong);filter:brightness(1.04)}
.button:active{transform:translateY(1px) scale(.985)}
.button:disabled{opacity:.6;cursor:not-allowed}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
button.shake{animation:shake .4s}

/* ---------- Cards -------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--card-min-desktop), var(--card-max-desktop)));gap:8px;margin:1rem 0}
.card-grid.fixed4{grid-template-columns:repeat(4,minmax(var(--card-min-desktop),var(--card-max-desktop)))}
.card-grid button{
  display:inline-block;padding:.55rem .6rem;margin:.35rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;cursor:pointer;
  transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;
  font-size:clamp(1.05rem,2.2vw,1.3rem);text-align:center;color:var(--text);position:relative;aspect-ratio:5/3
}
.card-grid button:hover{background:var(--panel-hover);transform:translateY(-1px);box-shadow:0 0 10px rgba(0,122,204,.35);border-color:#4a4a4a}
button.selected{background:#163a52 !important;color:#fff !important;font-weight:bold;border:2px solid rgba(0,122,204,.6);box-shadow:0 0 0 4px rgba(0,122,204,.22),0 0 12px rgba(0,122,204,.35);transform:scale(1.03)}
.card-grid .grid-break{grid-column:1 / -1;height:0;pointer-events:none}
.card-grid .checkmark{display:none !important}
.card-grid button:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(35%);background:var(--panel-2);border-color:var(--border);box-shadow:none;transform:none !important}
.card-grid button:disabled:hover{background:var(--panel-2);border-color:var(--border);box-shadow:none;transform:none}

/* ---------- Participants (shared) --------------------------------------- */
ul{list-style:none;padding:0;margin:0}
li{margin-bottom:.4rem;line-height:1.5;font-size:1rem}

/* Mobile-only actions container is hidden by default (desktop) */
#liveParticipantList .participant-row .row-actions{display:none}

#liveParticipantList .participant-row{
  display:grid;
  grid-template-columns:var(--icon-col-width) 1fr 1fr;
  align-items:center; column-gap:.4rem;
  margin-bottom:.4rem; padding:6px 8px;
  border-bottom:1px solid var(--border); border-radius:6px;
}
#liveParticipantList .participant-row.is-host{background:rgba(0,122,204,.08);outline:1px solid rgba(0,122,204,.22)}
:root[data-theme="light"] #liveParticipantList .participant-row.is-host{background:#e8f1ff;outline-color:rgba(37,99,235,.35)}

.participant-icon{width:var(--icon-col-width);display:inline-flex;justify-content:center;align-items:center;line-height:1}
.participant-icon.host{font-size:1.1rem}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--text)}

#liveParticipantList li.disconnected{color:var(--inactive-fg)}
#liveParticipantList li.disconnected .name{color:var(--inactive-fg)}
#liveParticipantList li.disconnected .participant-icon{opacity:.85}

/* Right column base */
.row-right{display:flex;align-items:center;gap:10px;min-height:1.8rem}
.row-right > .row-action:first-of-type{margin-left:auto}
.row-right :where(.vote-chip,.mini-chip,.status-icon) ~ .row-action:first-of-type{margin-left:auto}

/* Status icons */
.status-icon{font-size:1rem;line-height:1;display:inline-flex;align-items:center}
.status-icon.done{color:var(--ok);filter:drop-shadow(0 0 2px rgba(76,175,80,.6))}
.status-icon.pending{color:var(--warn);opacity:.95}

/* Spectator as outlined chip */
#liveParticipantList .status-icon.spectator{
  display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vote-chip-width);
  padding:.15rem .35rem;border-radius:8px;background:transparent;color:var(--text-dim);
  border:1.5px solid rgba(148,163,184,.35);box-shadow:none;line-height:1.2
}
:root[data-theme="light"] #liveParticipantList .status-icon.spectator{
  border-color:var(--chip-special-border,#cfe0ff); color:var(--chip-special-text,#0b1220);
}

/* Vote chips */
.vote-chip{
  display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vote-chip-width);
  padding:.15rem .35rem;border-radius:8px;background:#185a33;color:#fff;font-weight:700;
  border:2px solid #2b7a4a;box-shadow:0 0 6px rgba(24,90,51,.45);font-size:.95rem;line-height:1.2;text-align:center;
  font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);animation:chipIn 220ms ease forwards
}
.vote-chip.special{background:#2a2f3a;border-color:#475569;box-shadow:none;color:#cbd5e1}
:root[data-theme="light"] .vote-chip.special{background:var(--chip-special-bg);border-color:var(--chip-special-border);color:var(--chip-special-text)}
@keyframes chipIn{to{opacity:1;transform:translateY(0)}}
.vote-chip.outlier{box-shadow:0 0 0 3px rgba(255,213,79,.22), inset 0 0 0 1px rgba(255,213,79,.55)}
:root[data-theme="light"] .vote-chip.outlier{box-shadow:0 0 0 3px rgba(255,213,79,.28), inset 0 0 0 1px rgba(234,179,8,.55)}
.vote-chip.empty{background:transparent;border:2px solid #475569;color:#cbd5e1;box-shadow:none;font-weight:600}
:root[data-theme="light"] .vote-chip.empty{border-color:#cfe0ff;color:#0b1220}

/* Mini outline chip */
.mini-chip{
  display:inline-flex;align-items:center;justify-content:center;inline-size:var(--vote-chip-width);
  height:1.6rem;padding:.15rem .35rem;border-radius:8px;background:transparent;border:1.5px solid rgba(148,163,184,.35);
  color:var(--text-dim);font-weight:700;font-size:.95rem;line-height:1.2;font-variant-numeric:tabular-nums;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
}
:root[data-theme="light"] .mini-chip{border-color:var(--chip-special-border,#cfe0ff);color:var(--chip-special-text,#0b1220)}
.mini-chip.done{border-color:rgba(34,197,94,.45);color:var(--ok)}
.mini-chip.pending{border-color:rgba(234,179,8,.45)}

/* Heat-colored chips */
.vote-chip.heat{
  --_h: var(--chip-heat-h,120);
  border-color:hsl(var(--_h) 75% 55%); color:hsl(var(--_h) 85% 62%);
  background:color-mix(in oklab, hsl(var(--_h) 80% 50%) 14%, transparent);
}
@supports not (color-mix(in oklab, white, black)){.vote-chip.heat{background:transparent}}
@media (prefers-color-scheme: light){
  .vote-chip,.participant-row .mini-chip{color:#0f172a;font-weight:600}
  .vote-chip.heat{
    --_h: var(--chip-heat-h,120);
    color:#0f172a;border-color:hsl(var(--_h) 72% 42%);
    background:color-mix(in oklab, hsl(var(--_h) 80% 58%) 36%, white);
    box-shadow:inset 0 0 0 1px hsl(var(--_h) 50% 34% / .25);
  }
}
@supports not (color-mix(in oklab, white, black)){
  @media (prefers-color-scheme: light){.vote-chip.heat{background:hsl(var(--_h) 90% 90%)}}
}
html.light .vote-chip, body.light .vote-chip,
:root[data-theme="light"] .vote-chip{color:#0f172a;font-weight:600}
html.light .vote-chip.heat, body.light .vote-chip.heat,
:root[data-theme="light"] .vote-chip.heat{
  --_h: var(--chip-heat-h,120);
  color:#0f172a;border-color:hsl(var(--_h) 72% 42%);
  background:color-mix(in oklab, hsl(var(--_h) 80% 58%) 36%, white);
  box-shadow:inset 0 0 0 1px hsl(var(--_h) 50% 34% / .25);
}
@supports not (color-mix(in oklab, white, black)){
  html.light .vote-chip.heat, body.light .vote-chip.heat,
  :root[data-theme="light"] .vote-chip.heat{background:hsl(var(--_h) 90% 90%)}
}
/* Prevent re-animation while revealed */
.no-chip-anim .vote-chip{animation:none;opacity:1;transform:none}

/* ---------- Results & vote chips rows (centered) ------------------------- */
/* Center the results row itself */
#resultRow{
  display:flex;justify-content:center;align-items:baseline;gap:.35rem .6rem;
  flex-wrap:nowrap;text-align:center;min-height:1.6rem;margin-inline:auto
}
#resultRow #resultLabel,#resultRow #averageVote,#resultRow #medianWrap,#resultRow #rangeWrap{white-space:nowrap}
#resultRow .sep{opacity:.6;margin:0 .45rem}
@media (max-width:640px){
  #resultRow{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem .5rem;min-height:2rem}
  #resultRow .sep{display:none}
  #medianWrap,#rangeWrap{flex:0 0 100%;text-align:center}
}
/* Center any revealed vote chips container (id/name agnostic) */
.chips-row,#voteChips,#voteChipsRow,#revealedChips,#revealedChipsRow,#votesRow{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
  margin:.5rem auto .25rem auto;text-align:center;
}

/* Consensus & average label centered */
.pre-vote{margin-top:2.2rem}
.average-label{font-size:1rem;margin-top:1rem;display:flex;justify-content:center;gap:.35rem;text-align:center}
.average-label #averageVote{font-size:.85rem;font-weight:600;opacity:0;animation:avgIn 240ms ease forwards}
@keyframes avgIn{to{opacity:1}}
.average-label.consensus{color:var(--ok);font-weight:700}
.average-label.consensus #averageVote{font-weight:800}
.consensus-row{white-space:nowrap;display:flex;justify-content:center;text-align:center}
.consensus-row.is-consensus .value{animation:pulseOnce .5s ease}
@keyframes pulseOnce{0%{transform:scale(.96);filter:brightness(1.05)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.average-label .stat{margin-left:.25rem}.average-label .sep{opacity:.6;margin:0 .35rem}

/* Reserve space even when hidden */
#resultRow.is-hidden{visibility:hidden}

/* ---------- Toast -------------------------------------------------------- */
.toast{position:fixed;top:20px;right:20px;background:rgba(51,51,51,.95);color:#fff;padding:12px 20px;border-radius:10px;z-index:9999;font-size:14px;box-shadow:var(--shadow);transform:translateY(-10px);opacity:0;animation:fadein 220ms ease forwards,fadeout 400ms ease 2400ms forwards}
@keyframes fadein{to{opacity:.95;transform:translateY(0)}}@keyframes fadeout{to{opacity:0}}

/* ---------- QR overlay --------------------------------------------------- */
.qr-overlay{position:fixed;inset:0;z-index:1200}
.qr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
:root[data-theme="light"] .qr-backdrop{background:rgba(0,0,0,.35)}
.qr-dialog{position:absolute;inset:0;margin:auto;width:min(92vw,420px);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:12px;max-height:92vh;display:grid;grid-template-rows:auto 1fr auto;animation:slideIn 180ms ease both}
.qr-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 8px;border-bottom:1px solid var(--border)}
.qr-header h3{margin:0;font-size:1rem;color:var(--text-strong)}
.qr-close{border:1px solid var(--border);background:var(--panel-2);border-radius:8px;width:34px;height:34px;cursor:pointer}
.qr-body{display:grid;place-items:center;padding:16px}
.qr-actions{display:flex;justify-content:flex-end;gap:8px}
#qrCanvas{image-rendering:pixelated;width:320px;height:320px;border-radius:10px;background:#fff}
@media (prefers-reduced-motion:reduce){.menu-panel,.qr-dialog{animation:none}}

/* ---------- Footer & sticky CTA spacing --------------------------------- */
.app-footer{position:fixed;left:0;right:0;bottom:0;background:var(--panel);color:var(--text-dim);border-top:1px solid var(--border);text-align:center;padding:8px 12px;font-size:.82rem;line-height:1.2;z-index:4;-webkit-user-select:none;user-select:none}
.app-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.container{padding-bottom:max(24px, calc(var(--footer-h) + 48px))}
@media (max-width:600px){
  .app-footer{font-size:.62rem;padding:6px 10px;margin-top:50px}
  body{padding-bottom:calc(var(--footer-h) + 72px)}
  #revealButton,#resetButton{
    position:fixed;left:16px;right:16px;
    bottom:calc(var(--cta-offset) + var(--footer-h) + env(safe-area-inset-bottom));
    z-index:20;box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .container{padding-bottom:calc(var(--footer-h) + 120px)}
}
@supports (-webkit-touch-callout:none){.app-footer{font-size:.58rem}}

/* ---------- Utilities ---------------------------------------------------- */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.truncate-1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.no-horizontal-scroll{overflow-x:hidden}
.topic-row.editable{cursor:pointer}
.topic-row.editable:hover{background:rgba(148,163,184,.08);border-radius:6px}

/* ---------- Knowledge bites --------------------------------------------- */
.knowledge-bites{
  margin-top:5.25rem;
  padding-bottom:max(24px, calc(var(--footer-h) + var(--cta-offset, 8px) + env(safe-area-inset-bottom)));
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding-inline:12px; padding-block:10px;
}
.container .knowledge-bites{padding-bottom:8px}
@media (max-width:600px){.container .knowledge-bites{padding-bottom:12px}}
.knowledge-bites > h2{margin:.25rem 0 .5rem;font-size:.95rem;color:var(--text-strong);text-align:center}
.kb{border:1px solid var(--border);border-radius:10px;background:var(--panel-2);margin:8px 0;overflow:clip}
.kb > summary{display:flex;align-items:baseline;gap:.5rem;padding:8px 10px;cursor:pointer;list-style:none}
.kb > summary::-webkit-details-marker{display:none}
.kb-title{font-size:.80rem;font-weight:600;color:var(--text-strong)}
.kb-preview{font-size:.80rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-body{padding:8px 10px 10px;font-size:.75rem;line-height:1.45;color:var(--text)}
.kb-body ul{margin:.25rem 0 0 .9rem;padding:0}
.kb-body li{margin:.25rem 0;font-size:.75rem}
.kb:hover{border-color:var(--accent)}
.kb[open] > summary{background:var(--panel-2-hover)}

/* ---------- Header controls (language pill) ------------------------------ */
.header-controls{
  position:fixed;
  top:calc(var(--hamburger-top) + (var(--hamburger-size) - var(--hc-height)) / 2 + var(--hc-nudge-y));
  right:calc(var(--hamburger-right) + var(--hamburger-size) + var(--header-gap));
  display:flex;align-items:center;gap:10px;z-index:90;pointer-events:auto;
}
.hc-group{
  display:inline-flex;align-items:center;height:var(--hc-height);
  padding:var(--hc-pad);gap:var(--hc-gap);border-radius:9999px;
  background:var(--surface-2, rgba(255,255,255,0.08));
  border:1px solid var(--border-1, rgba(255,255,255,0.12));
  box-shadow:var(--shadow-1, 0 2px 8px rgba(0,0,0,0.2));
}
.hc-group .seg{
  display:inline-flex;align-items:center;justify-content:center;width:var(--hc-seg-size);height:var(--hc-seg-size);
  border:0;border-radius:9999px;background:transparent;color:inherit;cursor:pointer;user-select:none;padding:0;line-height:1;
}
.hc-group .seg:hover{background:var(--surface-3, rgba(255,255,255,0.10))}
.hc-group .seg[aria-pressed="true"], .hc-group .seg.active{
  background:var(--surface-3, rgba(255,255,255,0.12));
  box-shadow:inset 0 0 0 var(--hc-active-ring) var(--hc-active-ring-color), inset 0 0 0 9999px rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.35);
}
.flag-pair{position:relative;width:20px;height:20px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-1, rgba(255,255,255,0.18))}
.flag-pair .flag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flag-pair .flag-a{-webkit-mask-image:linear-gradient(135deg,#000 0 49%,transparent 51% 100%);mask-image:linear-gradient(135deg,#000 0 49%,transparent 51% 100%)}
.flag-pair .flag-b{-webkit-mask-image:linear-gradient(135deg,transparent 0 49%,#000 51% 100%);mask-image:linear-gradient(135deg,transparent 0 49%,#000 51% 100%)}

/* Compact: ≤420px (always show both segments, keep pill look) */
@media (max-width:420px){
  :root{--hamburger-size:36px;--header-gap:6px;--hc-height:34px;--hc-seg-size:26px;--hc-gap:3px;--hc-nudge-y:1px}
  .header-controls .hc-group{padding:4px;gap:var(--hc-gap)}
  #hcLang .seg[aria-pressed="false"]{display:inline-flex}
}

/* Desktop/tablet slight nudge */
@media (min-width:421px){ :root{--hc-nudge-y:1px} }

/* ---------- Specials palette (menu) ------------------------------------- */
#rowSpecialsPick{
  margin-top:.25rem;overflow:hidden;transition:max-height .24s ease, opacity .18s ease;
  max-height:0;opacity:.35;pointer-events:none;
}
#rowSpecialsPick[hidden]{display:block}
#rowSpecialsPick[aria-hidden="false"]{max-height:120px;opacity:1;pointer-events:auto}
#rowSpecialsPick .specials-icons{
  display:flex;gap:.5rem;padding:.5rem 0 .25rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center;
}
#rowSpecialsPick .spc{
  appearance:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:20px;line-height:1;
  border:1px solid var(--spc-brd, rgba(128,128,128,.35));background:var(--spc-bg, rgba(128,128,128,.12));
  user-select:none;cursor:pointer;transition:transform .06s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}
#rowSpecialsPick .spc:hover{transform:translateY(-1px)}
#rowSpecialsPick .spc.on,#rowSpecialsPick .spc[aria-pressed="true"]{
  background:var(--spc-active-bg, rgba(0,120,255,.16));
  border-color:var(--spc-active-brd, rgba(0,120,255,.55));
  box-shadow:inset 0 0 0 2px var(--spc-active-brd, rgba(0,120,255,.55));
}
#rowSpecialsPick.disabled{opacity:.6}
#rowSpecialsPick.disabled .spc{cursor:not-allowed}
:root{--spc-bg:rgba(0,0,0,.08);--spc-brd:rgba(0,0,0,.18);--spc-active-bg:rgba(0,120,255,.16);--spc-active-brd:rgba(0,120,255,.55)}
@media (prefers-color-scheme: dark){
  :root{--spc-bg:rgba(255,255,255,.08);--spc-brd:rgba(255,255,255,.16);--spc-active-bg:rgba(0,140,255,.22);--spc-active-brd:rgba(0,140,255,.75)}
}
:root[data-theme="dark"]{
  --spc-bg:rgba(255,255,255,.08);--spc-brd:rgba(255,255,255,.16);--spc-active-bg:rgba(0,140,255,.22);--spc-active-brd:rgba(0,140,255,.75)
}
#rowSpecials.has-expand{align-items:start}
#rowSpecials .mi-icon{grid-row:1;grid-column:1}
#rowSpecials .switch-text{grid-row:1;grid-column:2}
#rowSpecials .switch-control{grid-row:1;grid-column:3}
#rowSpecials #rowSpecialsPick{grid-row:2;grid-column:1 / -1;margin:6px 0 0 0;padding:0;border:0}
#rowSpecials #rowSpecialsPick[hidden]{display:none !important}
#rowSpecials .specials-icons{display:flex;flex-wrap:wrap;gap:6px;align-items:center;overflow-x:hidden}
#rowSpecials .specials-icons .spc{display:inline-flex;justify-content:center;align-items:center;width:34px;height:34px;padding:0;border-radius:8px;line-height:1}
#rowSpecials .specials-icons .spc .ico{display:block;font-size:18px;line-height:1}
#rowSpecials .specials-icons .spc:focus{outline-offset:2px}

/* ---------- Desktop-only actions styling -------------------------------- */
@media (min-width:769px){
  #liveParticipantList .row-right{gap:8px;min-height:1.6rem;white-space:nowrap;align-items:center}
  #liveParticipantList .row-right > .row-action:first-of-type{margin-left:auto}
  #liveParticipantList .row-right .row-action{
    display:inline-flex;align-items:baseline;background:transparent;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  }
  #liveParticipantList .row-right .row-action .ra-icon{display:none}
  #liveParticipantList .row-right .row-action .ra-label{
    font-size:.82rem;line-height:1.2;font-weight:600;color:var(--text-dim);
    text-decoration:none;border-bottom:1px dotted transparent;white-space:nowrap;
  }
  #liveParticipantList .row-right .row-action.spectator,
  #liveParticipantList .row-right .row-action.kick{
    border-left:1px solid var(--sep-color, rgba(255,255,255,.45));padding-left:.44rem;
  }
  :root[data-theme="light"] #liveParticipantList .row-right .row-action.spectator,
  :root[data-theme="light"] #liveParticipantList .row-right .row-action.kick{border-left-color:rgba(0,0,0,.35)}
  #liveParticipantList .row-right .row-action:hover .ra-label,
  #liveParticipantList .row-right .row-action:focus-visible .ra-label{color:var(--text-strong);border-bottom-color:currentColor}
  #liveParticipantList .row-right .row-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  #liveParticipantList .row-right .row-action.kick .ra-label{color:#fca5a5}
  #liveParticipantList .row-right .row-action.kick:hover .ra-label,
  #liveParticipantList .row-right .row-action.kick:focus-visible .ra-label{color:#f87171}
  #liveParticipantList .row-right .row-action:disabled .ra-label{opacity:.55;border-bottom-color:transparent;cursor:not-allowed}
  /* Ensure the cloned mobile container stays hidden on desktop */
  #liveParticipantList .participant-row .row-actions{display:none !important}
}

/* ---------- Mobile: Participants (single, consolidated block) ------------ */
@media (max-width:768px){
  /* Two-row grid per participant:
     row 1: icon | name | chip
     row 2: actions (right-aligned, text links) */
  #liveParticipantList .participant-row{
    display:grid;
    grid-template-columns: var(--icon-col-width) minmax(0,1fr) auto;
    grid-template-rows: auto auto;
    column-gap:10px; row-gap:6px;
    align-items:center; padding:8px 12px;
  }

  /* placements for row 1 */
  #liveParticipantList .participant-row .participant-icon{grid-column:1;grid-row:1}
  #liveParticipantList .participant-row .name{
    grid-column:2;grid-row:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:22px;align-self:center;
  }
  #liveParticipantList .participant-row .row-right{
    grid-column:3;grid-row:1;
    display:flex !important;align-items:center;gap:8px;
  }
  /* only chip/status on row 1 */
  #liveParticipantList .participant-row .row-right .row-action{display:none !important}

  /* row 2: cloned actions container (right aligned) */
  #liveParticipantList .participant-row .row-actions{
    grid-column:1 / -1;grid-row:2;
    display:flex !important;justify-content:flex-end;align-items:center;
    gap:10px;margin-top:4px;margin-bottom:2px;
    font-size:13px;line-height:1.25;
  }
  #liveParticipantList .participant-row .row-actions .row-action{
    appearance:none;background:transparent;border:0;box-shadow:none;
    padding:2px 4px;border-radius:4px;color:var(--text-dim);cursor:pointer;
  }
  #liveParticipantList .participant-row .row-actions .row-action:hover{text-decoration:underline}
  #liveParticipantList .participant-row .row-actions .row-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #liveParticipantList .participant-row .row-actions .row-action.kick{color:var(--danger)}
}

/* ---------- Header controls micro-polish -------------------------------- */
.header-controls .hc-group .seg{line-height:0}



/* === Desktop centering for results line + deck grid ====================== */
/* Keep mobile as-is; only >=768px gets the centering tweaks */
@media (min-width: 768px){

  /* Center the result line under the participant list */
  #resultRow{
    /* shrink to content so auto margins can center it */
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    justify-content: center !important; /* if it's flex already */
  }

  /* Center the card grid as a block and the cards inside each track */
  .card-grid{
    /* make the grid shrink-wrap to its tracks instead of stretching full width */
    width: max-content;
    max-width: 100%;
    margin-inline: auto;            /* centers inside any block/flex parent */

    /* if the grid ever gets wider, keep tracks/cards visually centered */
    justify-content: center !important;   /* center tracks within the grid */
    justify-items: center !important;     /* center each card in its track */
  }

  /* fixed-layout variant gets the same treatment */
  .card-grid.fixed4{
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    justify-content: center !important;
    justify-items: center !important;
  }
}

/* Fallback for older engines that don't support max-content well */
@supports not (width: max-content){
  @media (min-width: 768px){
    .card-grid,
    .card-grid.fixed4{
      display: inline-grid;      /* shrink-wrap via inline formatting */
      margin-inline: auto;       /* center the inline-grid block */
    }
    #resultRow{ display: inline-flex; margin-inline: auto; }
  }
}




/* === Center result line + deck on desktop; resilient to flex/ids/classes === */
@media (min-width: 768px){

  /* result line (supports id + class) */
  #resultRow,
  .result-row{
    width: max-content;          /* shrink-wrap to content */
    max-width: 100%;
    margin-left: auto;           /* center via auto margins */
    margin-right: auto;
    text-align: center;
    justify-content: center !important;  /* if it's a flex row */
    flex: 0 0 auto;              /* don't stretch if parent is flex */
    align-self: center;          /* center within flex parent */
  }

  /* deck grid (supports class .card-grid and id #cardGrid) */
  .card-grid,
  #cardGrid{
    width: max-content;          /* grid shrinks to its tracks */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    /* when grid has spare room, keep tracks/cards visually centered */
    justify-content: center !important;
    justify-items: center !important;

    /* if parent is a flex container, prevent “fill the row” stretching */
    flex: 0 0 auto;
    align-self: center;
  }
}

/* Fallback for engines without max-content */
@supports not (width: max-content){
  @media (min-width: 768px){
    #resultRow, .result-row{ display: inline-flex; margin-inline: auto; }
    .card-grid, #cardGrid{ display: inline-grid; margin-inline: auto; }
  }
}



/* ==== Center result row + deck on desktop (resilient) =================== */
@media (min-width: 768px){

  /* Result line (support id and class) */
  #resultRow,
  .result-row{
    /* shrink to intrinsic width, then center as a block */
    width: fit-content !important;     /* fallback-friendly vs max-content */
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* if parent is flex/grid, don't stretch */
    flex: 0 0 auto !important;
    justify-self: center !important;
    align-self: center !important;

    /* if it's a flex container itself, center its contents */
    justify-content: center !important;
    text-align: center;
  }

  /* Deck (support class and id) */
  .card-grid,
  #cardGrid{
    width: fit-content !important;     /* grid shrinks to its tracks */
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* neutralize parent layout influence */
    flex: 0 0 auto !important;
    justify-self: center !important;
    align-self: center !important;

    /* center cards inside the grid when there is extra space */
    justify-content: center !important;
    justify-items: center !important;
  }
}

/* Fallback for very old engines without fit-content */
@supports not (width: fit-content){
  @media (min-width: 768px){
    #resultRow, .result-row{ display: inline-flex; margin-inline: auto; }
    .card-grid, #cardGrid{ display: inline-grid; margin-inline: auto; }
  }
}


/* === Desktop-only alignment fix: center participant chips with results === */
@media (min-width: 769px){
  /* Make the right column a 3-col grid so the chip can be truly centered
     while host actions stay flush-right. */
  #liveParticipantList .participant-row .row-right{
    display:grid;
    grid-template-columns: 1fr minmax(0,auto) 1fr;
    align-items:center;
    gap:10px; /* keep visual gap for actions */
  }

  /* Center the "chip" (or placeholder/status) in the middle column */
  #liveParticipantList .participant-row .row-right :where(.vote-chip,.mini-chip,.status-icon){
    grid-column:2;
    justify-self:center;
  }

  /* Keep action buttons in the far right */
  #liveParticipantList .participant-row .row-right .row-action{
    grid-column:3;
    justify-self:end;
    margin-left:0; /* override previous flex auto-push */
  }

  /* Align the results row to the same horizontal column as the chips */
  #resultRow{
    width: calc((100% - var(--icon-col-width)) / 2);
    margin-inline: 0; /* cancel earlier auto-centering */
    margin-left: calc(var(--icon-col-width) + ((100% - var(--icon-col-width)) / 2));
    margin-right: 0;
    justify-content: center;
  }
}



/* === Desktop: align participant vote chip exactly to page center === */
@media (min-width: 769px){
  /* reference box for absolute positioning */
  #liveParticipantList .participant-row{ position: relative; }

  /* place the chip on the exact page center line */
  #liveParticipantList .participant-row .row-right :where(.vote-chip,.mini-chip,.status-icon){
    position: absolute;           /* take it out of the flex flow */
    left: 50%;                    /* center of the whole row (incl. icon col) */
    transform: translateX(-50%);  /* align chip center to that line */
    pointer-events: none;         /* don't block clicks on Host/Spectator/Kick */
    z-index: 1;
  }

  /* keep host actions flush-right, unchanged behavior */
  #liveParticipantList .participant-row .row-right{
    display: flex; align-items: center; gap: 10px; min-height: 1.8rem;
  }
  #liveParticipantList .participant-row .row-right > .row-action:first-of-type{
    margin-left: auto;
  }
}


/* Specials: "Select all" text action — match host actions (dotted underline) */
#rowSpecialsPick :is(button:not(.spc):not([role="switch"]), a:not(.spc), .text-action){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 6px !important;       /* keep a small click area */
  border-radius: 0 !important;
  font-weight: 600;
  text-decoration: none !important;  /* no text decoration */
  display: inline-block;              /* ensure border-bottom renders nicely */
  border-bottom: 1px dotted transparent !important; /* dotted baseline (hidden) */
}

#rowSpecialsPick :is(button:not(.spc):not([role="switch"]), a:not(.spc), .text-action):hover{
  background: transparent !important;
  text-decoration: none !important;  /* stay consistent with host actions */
  border-bottom-color: currentColor !important; /* show dotted underline on hover */
}



/* === UI polish: Menu Toggles – switch aligned vertically === */
.menu-item.switch .switch-control::after {
  top: 3px !important;
}




/* Participants: long names may grow up to the chip (desktop only) */
@media (min-width: 769px){
  /* Let the left area (icon + name) take the remaining space */
  #liveParticipantList .participant-row .row-left{
    flex: 1 1 auto !important;
    min-width: 0 !important; /* required so text can actually shrink before ellipsis */
  }

  /* The name itself can grow; ellipsis only when it truly hits the chip */
  #liveParticipantList .participant-row .row-left .name{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important; /* remove any hard caps */
    white-space: nowrap;        /* keep single line */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep the right area (chip + actions) content-sized, unchanged */
  #liveParticipantList .participant-row .row-right{
    flex: 0 0 auto !important;
  }
}


/* Participant row: maximize name space on desktop (edge widths) */
@media (min-width: 769px){
  /* Reduce column gap a bit on narrow desktop; scales up on wide screens */
  #liveParticipantList .participant-row{
    column-gap: clamp(8px, 1.2vw, 16px);
  }

  /* Let the left column (icon + name) take all remaining space */
  #liveParticipantList .participant-row .row-left{
    flex: 1 1 auto !important;
    min-width: 0 !important;             /* critical for proper ellipsis */
  }
  #liveParticipantList .participant-row .row-left > *{
    min-width: 0 !important;             /* allow children to shrink */
  }

  /* Name element: single line, no hard caps, ellipsis only at real limit */
  #liveParticipantList .participant-row .row-left [class*="name"]{
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Right column stays content-sized; tighten internal spacing slightly */
  #liveParticipantList .participant-row .row-right{
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 12px);         /* a touch tighter near 770–900px */
    white-space: nowrap;                  /* keep actions on one line */
  }
  #liveParticipantList .participant-row .row-right .vote-chip{
    flex: 0 0 auto;                       /* chip never shrinks */
  }
  #liveParticipantList .participant-row .row-right .actions{
    white-space: nowrap;                  /* text actions never wrap */
  }
}