/*! JayWelaLa | AI guest management for every event | https://jaywelala.com
   Table Seating Planner tool: style.
   (c) 2026 JayWelaLa (jaywelala.com). All rights reserved.
   The name JayWelaLa, its logo, illustrations, texts and this code belong to JayWelaLa. */
/* Seating tool: header and brand come from signup.css, title and lead from info.css, tokens and buttons from base.css.
   Group and table colors are the user's own data colors (a small palette set in seating.js); the page itself stays white, black and red. */

.st {
  /* wide page: the map takes most of the screen */
  max-width: 120rem;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
  padding-block: 0 2rem;
  gap: 0.9rem;
}

.st-intro {
  text-align: center;
}

.st-title {
  margin-block-end: 0.5rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.st-intro .info__lead {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

/* ---------- icons ---------- */
.st-ico {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-ico--sm {
  width: 1rem;
  height: 1rem;
}

/* ---------- note ---------- */
.st-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 2px solid var(--black);
  border-inline-start: 6px solid var(--red);
  border-radius: 1rem;
  background: #f7f7f7;
  font-size: 0.92rem;
}

.st-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font: italic 800 0.95rem/1 Georgia, "Times New Roman", serif;
}

/* ---------- app frame: guests + map ---------- */
.st-app {
  display: grid;
  border: 2px solid var(--black);
  border-radius: 1.25rem;
  background: var(--white);
  overflow: clip;
  grid-template-areas: "stage" "side";
}

.st-side { grid-area: side; border-block-start: 2px solid var(--black); }
.st-stage { grid-area: stage; min-width: 0; }

@media (min-width: 62rem) {
  .st-app {
    grid-template-columns: 19rem minmax(0, 1fr);
    grid-template-areas: "side stage";
  }
  .st-side {
    border-block-start: 0;
    border-inline-end: 2px solid var(--black);
    max-height: 62rem;
  }
}

.st-side {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  padding: 0.9rem;
  background: #fafafa;
}

.st-side__head { display: grid; gap: 0.2rem; }

.st-panel__title {
  margin: 0;
  font: 800 1.15rem/1.3 var(--font-display);
}

.st-stats,
.st-hint,
.st-empty {
  margin: 0;
  font-size: 0.88rem;
}

.st-stage {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}

.st-hint { opacity: 0.8; padding-inline: 0.25rem; }

.st-status {
  min-height: 1.4em;
  margin: 0;
  padding-inline: 0.25rem;
  font-weight: 600;
}

.st-error {
  margin: 0;
  color: var(--red);
  font-weight: 600;
  font-size: 0.88rem;
}

.st-error:empty { display: none; }

.st-sub {
  margin: 0.2rem 0 0.1rem;
  font-weight: 700;
  font-size: 0.88rem;
}

/* ---------- inputs ---------- */
.st-input {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font: 500 0.92rem/1.2 var(--font-body);
}

.st-input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.st-input--num { width: 3.6rem; text-align: center; flex: none; padding-inline: 0.3rem; }
.st-select { appearance: auto; }

.st-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem;
  gap: 0.4rem;
}

.st-add__group { grid-column: 1 / -1; }
.st-add__btn { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }

.st-field {
  display: grid;
  gap: 0.35rem;
  margin-block-end: 0.7rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.st-field .st-input { font-weight: 500; }
.st-field__row { display: flex; align-items: center; gap: 0.4rem; }

.st-stepper { display: flex; align-items: center; gap: 0.35rem; }

.st-stepper__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
}

.st-stepper__btn:hover { background: var(--black); color: var(--white); }

.st-slider {
  display: grid;
  gap: 0.25rem;
  margin-block-end: 0.7rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.st-slider__row { display: flex; justify-content: space-between; }
.st-slider input { accent-color: var(--red); width: 100%; }

/* chips and buttons */
.st-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font: 600 0.82rem/1.2 var(--font-body);
  cursor: pointer;
}

.st-chip:hover { background: #f0f0f0; }
.st-chip[aria-pressed="true"] { background: var(--black); color: var(--white); }
.st-chip--ico { padding: 0.35rem 0.6rem; }

.st-dot {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--black);
  border-radius: 50%;
}

.st-groups { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.st-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.st-row--end { justify-content: space-between; margin-block-start: 0.4rem; }

.st-btn-ico { display: inline-flex; align-items: center; gap: 0.4rem; }

.st-danger { border-color: var(--red); background: var(--red); }
.st-danger:hover { background: var(--white); color: var(--red); }

/* ---------- guest list ---------- */
.st-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  align-content: start;
  flex: 1 1 8rem;
  min-height: 8rem;
  max-height: 32rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.st-list--small { flex: none; min-height: 0; max-height: 9rem; }

.st-guest {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  border: 2px solid transparent;
  border-radius: 0.8rem;
  background: var(--white);
  font-size: 0.88rem;
}

.st-guest:hover { border-color: var(--gray-line); }
.st-guest--on { border-color: var(--black); background: #f4f4f4; }

.st-guest label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.st-guest input[type="checkbox"] { accent-color: var(--red); width: 1.05rem; height: 1.05rem; flex: none; }

.st-guest__text { display: grid; min-width: 0; line-height: 1.25; }
.st-guest__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.st-guest__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; opacity: 0.7; }
.st-guest__sub--open { color: var(--red); opacity: 1; }

.st-gdot {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  cursor: pointer;
}

.st-gdot:hover { transform: scale(1.2); }

.st-dot {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--black);
  border-radius: 50%;
}

.st-badge {
  flex: none;
  padding: 0 0.45rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.st-x {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--black);
  font: 700 1.1rem/1 var(--font-body);
  cursor: pointer;
  opacity: 0;
}

.st-guest:hover .st-x,
.st-guest:focus-within .st-x { opacity: 1; }
@media (hover: none) { .st-x { opacity: 1; } }
.st-x:hover { background: var(--red); color: var(--white); }

/* side header, progress, add form */
.st-side__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.st-add-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
.st-add-toggle[aria-expanded="true"] { background: var(--white); color: var(--black); }

.st-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-line);
  overflow: hidden;
}

.st-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--red);
}

@media (prefers-reduced-motion: no-preference) {
  .st-progress span { transition: width 0.35s ease; }
}

.st-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.6rem;
  gap: 0.4rem;
  padding: 0.6rem;
  border: 2px solid var(--black);
  border-radius: 1rem;
  background: var(--white);
}

.st-add[hidden] { display: none; }
.st-add__group,
.st-add__actions { grid-column: 1 / -1; }

.st-searchbox { position: relative; }
.st-searchbox .st-ico { position: absolute; inset-inline-start: 0.8rem; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; }
.st-searchbox .st-input { padding-inline-start: 2.3rem; }

.st-chip__n {
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: #ececec;
  color: var(--black);
  font-size: 0.72rem;
}

.st-chip[aria-pressed="true"] .st-chip__n { background: var(--white); }

/* ---------- modern dropdown (replaces <select>) ---------- */
.st-dd { position: relative; }

.st-dd__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font: 600 0.92rem/1.2 var(--font-body);
  cursor: pointer;
}

.st-dd__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.st-dd__label { flex: 1; text-align: start; }
.st-dd__btn[aria-expanded="true"] .st-ico:last-child { rotate: 180deg; }

.st-dd__list {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  z-index: 30;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  border: 2px solid var(--black);
  border-radius: 1rem;
  background: var(--white);
}

.st-dd__list[hidden] { display: none; }

.st-dd__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.st-dd__list li:hover,
.st-dd__list li:focus-visible { background: #f2f2f2; outline: none; }
.st-dd__list li[aria-selected="true"] { background: var(--black); color: var(--white); }

/* ---------- group size strip above the map ---------- */
.st-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.3rem 0.4rem;
}

.st-check__label { font-weight: 800; font-size: 0.88rem; }
.st-check .st-stepper { padding: 0.15rem; border: 2px solid var(--black); border-radius: var(--radius-pill); }
.st-check .st-stepper__btn { width: 1.9rem; height: 1.9rem; border-width: 0; }
.st-check .st-input--num { border-width: 0; padding-block: 0.2rem; font-weight: 700; }

.st-check__text {
  flex: 1 1 14rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- map and its floating controls ---------- */
.st-canvas-wrap {
  position: relative;
  border: 2px solid var(--black);
  border-radius: 1rem;
  background: #f4f4f4;
}

.st-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0.9rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.st-canvas--zoomed { cursor: grab; }

.st-float {
  position: absolute;
  z-index: 4;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
}

.st-float--hist { inset-block-start: 0.6rem; }
.st-float--zoom { inset-block-end: 0.6rem; }
.st-zoom-val { min-width: 3rem; text-align: center; font-weight: 700; font-size: 0.85rem; }

.st-mbtn,
.st-ibtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font: 700 0.88rem/1 var(--font-body);
  cursor: pointer;
}

.st-ibtn { justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; }
.st-float .st-ibtn,
.st-ibtn--sm { border-color: transparent; }
.st-ibtn--sm { width: 2rem; height: 2rem; }
.st-ibtn--fill { background: var(--black); color: var(--white); border-color: var(--black); }

.st-ibtn:hover:not([disabled]) { background: #f0f0f0; }
.st-ibtn--fill:hover:not([disabled]) { background: var(--red); border-color: var(--red); }
.st-ibtn[disabled] { opacity: 0.3; cursor: not-allowed; }

/* the (+) button and its menu */
.st-add-menu {
  position: absolute;
  z-index: 8;
  inset-block-start: 0.6rem;
  inset-inline-start: 0.6rem;
}

.st-addbtn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  cursor: pointer;
}

.st-addbtn:hover { background: var(--red); border-color: var(--red); }
.st-addbtn[aria-expanded="true"] { background: var(--white); color: var(--black); }
.st-addbtn[aria-expanded="true"] .st-ico { rotate: 45deg; }

.st-pop {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  display: grid;
  gap: 0.2rem;
  min-width: 13rem;
  padding: 0.5rem;
  border: 2px solid var(--black);
  border-radius: 1rem;
  background: var(--white);
}

.st-pop[hidden] { display: none; }
.st-pop--add { width: min(19rem, calc(100vw - 3rem)); max-height: 70vh; overflow-y: auto; }

.st-pop__h {
  margin: 0.4rem 0.3rem 0.1rem;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

.st-pop__h:first-child { margin-block-start: 0.1rem; }

.st-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }

.st-tile {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.2rem;
  border: 2px solid var(--gray-line);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--black);
  font: 600 0.76rem/1.2 var(--font-body);
  text-align: center;
  cursor: pointer;
}

.st-tile:hover,
.st-tile:focus-visible { border-color: var(--black); background: #f7f7f7; }

.st-pop__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--black);
  font: 600 0.9rem/1.2 var(--font-body);
  text-align: start;
  cursor: pointer;
}

.st-pop__item:hover,
.st-pop__item:focus-visible { background: #f2f2f2; }

/* toast with the last message */
.st-status {
  position: absolute;
  z-index: 5;
  left: 50%;
  translate: -50% 0;
  inset-block-end: 3.6rem;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  text-align: center;
  pointer-events: none;
}

.st-status:empty { display: none; }

/* ---------- map drawing ---------- */
.st-item { cursor: grab; }
.st-item text { font-family: var(--font-body); pointer-events: none; }
.st-item:focus { outline: none; }
.st-item:focus-visible .st-shape { stroke: var(--red); stroke-width: 5; }

.st-shape { fill: var(--white); stroke: var(--black); stroke-width: 3; }
.st-obj .st-shape { fill: #f2f2f2; }

.st-item--sel .st-shape { stroke: var(--red); stroke-width: 5; }
.st-item--fit .st-shape,
.st-item--hl .st-shape { stroke: var(--red); stroke-width: 6; }
.st-item--nofit { opacity: 0.3; }

.st-seat { fill: var(--white); stroke: var(--black); stroke-width: 2.5; }

.st-t-name { font-weight: 800; font-size: 15px; text-anchor: middle; }
.st-t-count { font-weight: 600; font-size: 14px; text-anchor: middle; }
.st-t-obj { font-weight: 700; font-size: 20px; text-anchor: middle; }
.st-t-label { font-weight: 800; font-size: 28px; text-anchor: middle; }

@media (prefers-reduced-motion: no-preference) {
  .st-item { transition: opacity 0.2s; }
  .st-item .st-shape { transition: fill 0.2s; }
}

/* ---------- selected item panel (floats on the map) ---------- */
.st-inspect {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.6rem;
  z-index: 4;
  width: 15.5rem;
  max-height: calc(100% - 1.2rem);
  overflow-y: auto;
  padding: 0.75rem;
  border: 2px solid var(--black);
  border-radius: 1rem;
  background: var(--white);
}

.st-inspect[hidden] { display: none; }

.st-inspect__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.5rem;
}

.st-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.st-swatch {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  cursor: pointer;
}

.st-swatch[aria-pressed="true"] { outline: 3px solid var(--red); outline-offset: 2px; }

@media (max-width: 61.99rem) {
  .st-inspect {
    position: static;
    width: auto;
    max-height: none;
    margin: 0.6rem;
  }
  .st-canvas { border-end-start-radius: 0; border-end-end-radius: 0; }
}

/* ---------- assistant ---------- */
.st-ai {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-start: 0.6rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  pointer-events: none;
}

.st-ai > * { pointer-events: auto; }

.st-fab {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.st-fab:hover { border-color: var(--red); }
.st-fab img { width: 2.3rem; height: auto; }

.st-chat {
  display: flex;
  flex-direction: column;
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(34rem, 80vh);
  border: 2px solid var(--black);
  border-radius: 1.25rem;
  background: var(--white);
  overflow: hidden;
}

.st-chat[hidden] { display: none; }

.st-chat__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-block-end: 2px solid var(--black);
}

.st-chat__head > div { flex: 1; min-width: 0; }
.st-chat__title { margin: 0; font: 800 1rem/1.2 var(--font-display); }
.st-chat__sub { margin: 0; font-size: 0.78rem; opacity: 0.75; }

.st-chat__log {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-height: 7rem;
  padding: 0.7rem;
  overflow-y: auto;
}

.st-msg {
  max-width: 88%;
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.st-msg--bot { align-self: flex-start; border: 2px solid var(--black); border-end-start-radius: 0.3rem; }
.st-msg--me { align-self: flex-end; background: var(--black); color: var(--white); border-end-end-radius: 0.3rem; }

.st-chat__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.7rem 0.6rem;
  max-height: 11rem;
  overflow-y: auto;
}

.st-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--red);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font: 600 0.82rem/1.2 var(--font-body);
  cursor: pointer;
}

.st-opt:hover { background: var(--red); color: var(--white); }

.st-chat__form { display: flex; gap: 0.4rem; padding: 0 0.7rem 0.6rem; }
.st-chat__form[hidden] { display: none; }

.st-chat__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-block-start: 2px solid var(--black);
  background: #f7f7f7;
  font-size: 0.8rem;
  line-height: 1.4;
}

.st-pro {
  flex: none;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 0.72rem;
}

@media (max-width: 61.99rem) {
  .st-ai { position: fixed; inset-block-end: 0.75rem; inset-inline-start: 0.75rem; }
}

/* lists: rows may never be wider than the panel */
.st-list { grid-template-columns: minmax(0, 1fr); }

/* desktop: the chat stays inside the map height */
@media (min-width: 62rem) {
  .st-ai {
    inset-block-start: 0.6rem;
    justify-content: flex-end;
  }
  .st-chat { max-height: 100%; min-height: 0; }
}

/* on-map controls sit in the corners so they never cover the middle of the hall */
.st-float--hist { left: auto; translate: none; inset-inline-start: 3.9rem; }
.st-float--zoom { left: auto; translate: none; inset-inline-start: auto; inset-inline-end: 0.6rem; }
.st-status { inset-block-end: 0.8rem; }

@media (max-width: 61.99rem) {
  .st-zoom-val { display: none; }
  .st-addbtn { width: 2.4rem; height: 2.4rem; }
  .st-float--hist { inset-inline-start: 3.4rem; }
  .st-float .st-ibtn { width: 1.9rem; height: 1.9rem; }
}

/* ---------- full-size map ---------- */
html.st-lock { overflow: hidden; }

.st-app--noside { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage"; }
.st-app--noside .st-side { display: none; }

.st-app--full {
  position: fixed;
  inset: 0;
  z-index: 1000;
  height: 100vh;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: var(--white);
  overflow: auto;
}

.st-app--full:not(.st-app--noside) { grid-template-rows: minmax(0, 1fr); }
.st-app--full .st-side { max-height: none; overflow-y: auto; }
.st-app--full .st-stage { height: 100%; min-height: 0; }
.st-app--full .st-canvas-wrap { flex: 1 1 auto; min-height: 0; }
.st-app--full .st-canvas { height: 100%; aspect-ratio: auto; }
.st-app--full .st-hint { display: none; }

/* when the map fills a screen the floor is letterboxed: keep the band around it calm */
.st-app--full .st-canvas-wrap { background: #ececec; }

@media (max-width: 61.99rem) {
  .st-app--full .st-stage { height: auto; min-height: 100%; }
  .st-app--full .st-canvas-wrap { min-height: 22rem; }
}

/* ---------- spacing: guest list ---------- */
.st-side { gap: 0.75rem; padding: 1rem; }
.st-side__head { margin-block-end: 0.1rem; }
.st-stats { margin-block-start: -0.2rem; }
.st-groups { gap: 0.4rem; }
.st-list { gap: 0.3rem; padding-block: 0.1rem; padding-inline-end: 0.15rem; }
.st-guest { padding: 0.45rem 0.55rem; gap: 0.6rem; }
.st-guest label { gap: 0.6rem; }
.st-guest__text { gap: 0.1rem; }
.st-list--small .st-guest { padding: 0.3rem 0.45rem; }
.st-row { gap: 0.5rem; padding-block-start: 0.15rem; }

/* ---------- selected item: compact, icon actions ---------- */
.st-inspect { display: grid; gap: 0.7rem; padding: 0.8rem 0.9rem 0.9rem; width: 16rem; }
.st-inspect__head { margin: 0; }
.st-irow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.st-irow[hidden] { display: none; }
.st-irow--col { display: grid; gap: 0.4rem; justify-content: stretch; }
.st-irow__label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem; }
.st-inspect .st-input { padding-block: 0.4rem; font-size: 0.9rem; }
.st-inspect .st-input--num { width: 3.2rem; }
.st-inspect .st-stepper__btn { width: 2rem; height: 2rem; }
.st-inspect .st-chip--ico { padding: 0.3rem 0.5rem; }
.st-inspect .st-swatches { gap: 0.35rem; }
.st-inspect .st-swatch { width: 1.45rem; height: 1.45rem; }
.st-sliders { display: grid; gap: 0.5rem; }
.st-sliders[hidden] { display: none; }
.st-inspect .st-slider { margin: 0; gap: 0.15rem; font-size: 0.82rem; }
.st-inspect .st-list--small { max-height: 7rem; }

.st-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding-block-start: 0.7rem;
  border-block-start: 2px solid var(--gray-line);
}

.st-ibtn--line { border-color: var(--black); }
.st-ibtn--danger { border-color: var(--red); background: var(--red); color: var(--white); }
.st-ibtn--danger:hover:not([disabled]) { background: var(--white); color: var(--red); }
.st-actions .st-ibtn { width: 2.4rem; height: 2.4rem; }

/* ---------- export menu and drag-to-move map ---------- */
.st-export { margin-inline-start: auto; z-index: 20; }
.st-check { position: relative; z-index: 20; }
.st-export .st-mbtn { padding: 0.4rem 0.8rem; }
.st-pop--end { inset-inline-start: auto; inset-inline-end: 0; min-width: 15rem; }

.st-canvas { cursor: grab; }
.st-canvas:active { cursor: grabbing; }
.st-item { cursor: grab; }

@media (max-width: 61.99rem) {
  .st-inspect { width: auto; }
}

/* map size menu */
.st-menu { position: relative; }
.st-float .st-menu .st-pop { inset-inline-start: auto; inset-inline-end: 0; min-width: 14rem; }
.st-float .st-sep { height: 1.4rem; margin-inline: 0.1rem; }
.st-sep { width: 2px; background: var(--gray-line); }
.st-pop__item--check .st-ico { opacity: 0; color: var(--red); }
.st-pop__item--check[aria-checked="true"] .st-ico { opacity: 1; }
.st-pop__item[disabled] { opacity: 0.4; cursor: not-allowed; }
.st-canvas-wrap > .st-add-menu { position: absolute; }

/* search row with a small add-guest icon; icon-only select buttons */
.st-searchrow { display: flex; align-items: center; gap: 0.5rem; }
.st-searchrow .st-searchbox { flex: 1; min-width: 0; }
.st-ibtn--add { flex: none; width: 2.3rem; height: 2.3rem; background: var(--black); border-color: var(--black); color: var(--white); }
.st-ibtn--add:hover:not([disabled]) { background: var(--red); border-color: var(--red); }
.st-ibtn--add[aria-expanded="true"] { background: var(--white); color: var(--black); }
.st-ibtn--add .st-ico use { color: inherit; }
.st-side .st-row { justify-content: flex-end; }

/* ---------- tooltip ---------- */
.st-tip {
  position: fixed;
  z-index: 2000;
  max-width: 16rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.6rem;
  background: var(--black);
  color: var(--white);
  font: 600 0.78rem/1.3 var(--font-body);
  pointer-events: none;
}
.st-tip[hidden] { display: none; }

/* ---------- add guest dialog on the map ---------- */
.st-modal {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.8);
}
.st-modal[hidden] { display: none; }
.st-modal__card { width: min(24rem, 100%); padding: 1.1rem 1.25rem 1.25rem; border: 2px solid var(--black); border-radius: 1.25rem; background: var(--white); }
.st-modal__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 0.9rem; }
.st-modal .st-add { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.8rem; padding: 0; border: 0; background: none; }
.st-modal .st-field { margin: 0; }
.st-field--wide { grid-column: 1 / -1; }
.st-modal .st-add__actions { grid-column: 1 / -1; padding-block-start: 0.2rem; }
.st-modal .st-error { margin: 0; }
.st-modal .st-input--num { width: 4.5rem; }
.st-input[aria-invalid="true"] { border-color: var(--red); }

/* ---------- guest list grouped by group ---------- */
.st-list { gap: 0.6rem; }
.st-gsec {
  list-style: none;
  border: 2px solid var(--black);
  border-inline-start: 6px solid var(--c, var(--black));
  border-radius: 0.9rem;
  background: var(--white);
  overflow: hidden;
}
.st-gsec__head { display: flex; align-items: center; gap: 0.25rem; padding-inline-end: 0.3rem; background: #f4f4f4; }
.st-gsec__toggle {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: 800 0.88rem/1.2 var(--font-body);
  text-align: start;
  cursor: pointer;
}
.st-gsec__toggle:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.st-gsec__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-gsec__count { margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; opacity: 0.75; }
.st-gsec__chev { transition: none; }
.st-gsec__toggle[aria-expanded="false"] .st-gsec__chev { rotate: -90deg; }
html[dir="rtl"] .st-gsec__toggle[aria-expanded="false"] .st-gsec__chev { rotate: 90deg; }
.st-gsec__sel[aria-pressed="true"] { background: var(--black); color: var(--white); }
.st-gsec__list { list-style: none; margin: 0; padding: 0.35rem; display: grid; gap: 0.15rem; }
.st-gsec__list[hidden] { display: none; }
.st-gsec .st-guest { border-color: transparent; }
.st-gsec .st-guest:hover { background: #f7f7f7; border-color: transparent; }
.st-gsec .st-guest--on { background: #f0f0f0; border-color: var(--black); }
.st-guest__act { width: 1.6rem; height: 1.6rem; opacity: 0; }
.st-guest__act .st-ico { width: 0.95rem; height: 0.95rem; }
.st-guest:hover .st-guest__act,
.st-guest:focus-within .st-guest__act { opacity: 1; }
@media (hover: none) { .st-guest__act { opacity: 1; } }
.st-guest__rm:hover:not([disabled]) { background: var(--red); color: var(--white); }
.st-guest__sub { opacity: 0.8; }
.st-empty--pad { padding: 0.8rem 0.4rem; list-style: none; opacity: 0.75; }

/* row actions take no room until the row is hovered or focused, so names keep their width */
.st-guest__act { width: 0; min-width: 0; overflow: hidden; border-width: 0; opacity: 0; }
.st-guest:hover .st-guest__act,
.st-guest:focus-within .st-guest__act { width: 1.6rem; opacity: 1; }
@media (hover: none) { .st-guest__act { width: 1.6rem; opacity: 1; } }

/* ---------- guest list v2: light dividers and one-line rows, so more guests are visible at once ---------- */
.st-side { gap: 0.6rem; }
.st-list { gap: 0.1rem; max-height: none; flex: 1 1 14rem; min-height: 14rem; padding: 0; }
.st-gsec { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.st-gsec + .st-gsec { margin-block-start: 0.35rem; }
.st-gsec__head {
  position: sticky;
  top: 0;
  z-index: 2;
  gap: 0.1rem;
  padding: 0 0.1rem 0 0;
  border-block-end: 2px solid var(--c, var(--black));
  background: var(--white);
}
.st-gsec__toggle { padding: 0.35rem 0.3rem; font-size: 0.82rem; gap: 0.4rem; }
.st-gsec__head .st-ibtn--sm { width: 1.7rem; height: 1.7rem; }
.st-gsec__list { padding: 0.15rem 0 0; gap: 0; }
.st-guest { padding: 0.2rem 0.3rem; min-height: 2rem; border: 0; border-radius: 0.5rem; gap: 0.4rem; }
.st-guest label { gap: 0.5rem; }
.st-guest__text { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex: 1; min-width: 0; }
.st-guest__name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.86rem; }
.st-guest__sub { flex: none; font-size: 0.7rem; }
.st-gsec .st-guest--on { background: #eee; border: 0; }
.st-gsec .st-guest:hover { background: #f5f5f5; }
.st-badge { padding: 0 0.35rem; font-size: 0.68rem; border-width: 1.5px; }

/* ---------- assistant v2: tall panel, menu cards, typing, feedback effects ---------- */
@media (min-width: 62rem) {
  .st-ai { inset-block: 0.6rem; justify-content: flex-end; }
  .st-chat { flex: 1 1 auto; width: 23rem; height: auto; max-height: 100%; min-height: 0; }
}
.st-chat__log { gap: 0.55rem; padding: 0.8rem; }
.st-chat__opts { flex: none; max-height: 48%; padding: 0.5rem 0.8rem 0.7rem; border-block-start: 2px solid var(--gray-line); background: #fafafa; }
.st-chat__opts--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; align-content: start; }
.st-chat__opts--cards .st-opt { grid-column: 1 / -1; justify-content: center; }
.st-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--black);
  border-radius: 0.9rem;
  background: var(--white);
  color: var(--black);
  font: 700 0.78rem/1.2 var(--font-body);
  text-align: start;
  cursor: pointer;
}
.st-card .st-ico { color: var(--red); }
.st-card:hover, .st-card:focus-visible { border-color: var(--red); background: #fff5f6; }
.st-opt .st-dot { width: 0.7rem; height: 0.7rem; }
.st-opt--back { border-color: var(--black); }
.st-opt--back:hover { background: var(--black); color: var(--white); }
.st-chat__form { padding: 0.5rem 0.8rem 0; }
.st-msg { white-space: pre-line; }
.st-msg--typing { color: transparent; min-width: 3.4rem; position: relative; }
.st-msg--typing::after {
  content: "";
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  width: 0.4rem;
  height: 0.4rem;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0.7rem 0 var(--black), 1.4rem 0 var(--black);
}
.st-fab[aria-expanded="true"] { border-color: var(--red); }

/* effects on the map and in the list */
.st-ping { fill: none; stroke: var(--red); stroke-width: 5; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.st-item--flash .st-shape { stroke: var(--red); stroke-width: 6; transform-box: fill-box; transform-origin: center; }
.st-guest--flash { background: #fde7ea; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes st-ping { from { transform: scale(0.55); opacity: 0.95; } to { transform: scale(1.6); opacity: 0; } }
  @keyframes st-pop { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
  @keyframes st-rowflash { from { background: #f9b9c2; } to { background: transparent; } }
  @keyframes st-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes st-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes st-dots { 50% { opacity: 0.25; } }
  .st-ping { animation: st-ping 0.9s ease-out 2 both; }
  .st-item--flash .st-shape { animation: st-pop 0.6s ease-out; }
  .st-guest--flash { animation: st-rowflash 1.6s ease-out; }
  .st-msg { animation: st-msg 0.25s ease-out; }
  .st-chat:not([hidden]) { animation: st-rise 0.25s ease-out; }
  .st-msg--typing::after { animation: st-dots 0.9s infinite; }
}

@media (max-width: 61.99rem) {
  .st-ai { inset-inline: 0.5rem; inset-block: auto 0.5rem; align-items: stretch; }
  .st-chat { width: auto; height: min(78vh, 36rem); max-height: none; }
  .st-fab { align-self: flex-start; }
  .st-fab[aria-expanded="true"] { display: none; }
}

/* the tall panel starts below the (+) and history controls */
@media (min-width: 62rem) {
  .st-ai { inset-block-start: 3.9rem; }
}
.st-chat__opts { max-height: 55%; }

@media (max-width: 61.99rem) {
  .st-ai { z-index: 60; }
}

/* ---------- guest list spacing (groups start folded) ---------- */
.st-list { gap: 0.5rem; padding-inline-end: 0.2rem; }
.st-gsec + .st-gsec { margin-block-start: 0; }
.st-gsec__head { padding: 0 0.15rem 0 0; border-block-end-width: 2px; }
.st-gsec__toggle { padding: 0.55rem 0.5rem; gap: 0.55rem; }
.st-gsec__head .st-ibtn--sm { width: 1.9rem; height: 1.9rem; }
.st-gsec__list { padding: 0.4rem 0 0.2rem; gap: 0.15rem; }
.st-guest { padding: 0.35rem 0.5rem; min-height: 2.4rem; gap: 0.55rem; }
.st-guest label { gap: 0.6rem; }
.st-guest__text { gap: 0.6rem; }
.st-badge { margin-inline: 0.1rem; }

/* ---------- drag a guest onto a table ---------- */
.st-guest__grip { display: grid; place-items: center; flex: none; width: 1.2rem; height: 1.8rem; margin-inline-start: -0.15rem; color: #9a9a9a; cursor: grab; touch-action: none; }
.st-guest:hover .st-guest__grip, .st-guest__grip:hover { color: var(--black); }
body.st-dragging, body.st-dragging * { cursor: grabbing !important; user-select: none; }

.st-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 16rem;
  padding: 0.4rem 0.8rem;
  border: 2px solid var(--black);
  border-inline-start: 6px solid var(--c, var(--black));
  border-radius: 0.9rem;
  background: var(--white);
  color: var(--black);
  font: 700 0.82rem/1.2 var(--font-body);
  pointer-events: none;
  white-space: nowrap;
}
.st-ghost span { overflow: hidden; text-overflow: ellipsis; }
.st-ghost--ok { border-color: var(--red); background: #fff5f6; }
.st-ghost--no { opacity: 0.75; border-style: dashed; }

.st-item--drop .st-shape { stroke: var(--red); stroke-width: 5; stroke-dasharray: 10 6; }
.st-item--over .st-shape { stroke-dasharray: none; stroke-width: 8; fill: #fde7ea; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes st-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
  @keyframes st-pulse { 50% { stroke-width: 10; } }
  .st-ghost--bad { animation: st-shake 0.35s; }
  .st-item--over .st-shape { animation: st-pulse 0.8s ease-in-out infinite; }
}
.st-gsec__list { grid-template-columns: minmax(0, 1fr); }
.st-gsec { min-width: 0; }

/* ---------- tutorial: the assistant character guides, with a spotlight, a pointer and sparkles ---------- */
.st-tour { position: fixed; inset: 0; z-index: 3500; pointer-events: none; }
.st-tour[hidden] { display: none; }

.st-tour__spot {
  position: fixed;
  border: 3px solid var(--red);
  border-radius: 1rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);   /* dims everything around the target; clicks still go through */
  pointer-events: none;
}
.st-tour__spot--none { border-width: 0; }

.st-tour__pointer { position: fixed; width: 1.75rem; height: 1.75rem; pointer-events: none; }
.st-tour__pointer .st-ico { width: 100%; height: 100%; fill: var(--white); stroke: var(--red); stroke-width: 2.2; }
.st-tour__pointer--down { rotate: 180deg; }
.st-tour__pointer[data-side="right"] { rotate: -90deg; }
.st-tour__pointer[data-side="left"] { rotate: 90deg; }
.st-tour__pointer[hidden] { display: none; }

.st-guide {
  position: fixed;
  display: flex;
  gap: 0.8rem;
  width: min(23rem, calc(100vw - 1rem));
  padding: 0.9rem 1rem 0.8rem;
  border: 2px solid var(--black);
  border-radius: 1.25rem;
  background: var(--white);
  color: var(--black);
  pointer-events: auto;
}
.st-guide:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.st-guide__char { flex: none; align-self: flex-start; width: 3.6rem; transform-origin: 50% 90%; }
.st-guide__char img { width: 100%; height: auto; }
.st-guide__body { flex: 1; min-width: 0; display: grid; gap: 0.45rem; }
.st-guide__name { margin: 0; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); }
.st-guide__text { margin: 0; font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
.st-guide__rest { visibility: hidden; }
.st-guide__try { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 800; font-size: 0.82rem; color: var(--red); }
.st-guide__try[hidden] { display: none; }
.st-guide__try .st-ico { fill: var(--red); rotate: 90deg; }
.st-guide__meter { height: 5px; border-radius: var(--radius-pill); background: var(--gray-line); overflow: hidden; }
.st-guide__meter i { display: block; height: 100%; width: 0; background: var(--red); border-radius: inherit; }
.st-guide__foot { display: flex; align-items: center; gap: 0.5rem; }
.st-guide__skip { padding: 0.2rem 0; border: 0; background: none; color: var(--black); font: 700 0.8rem/1.2 var(--font-body); text-decoration: underline; text-decoration-color: var(--red); cursor: pointer; }
.st-guide__skip:hover { color: var(--red); }
.st-guide__count { margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; opacity: 0.7; }
.st-guide__back { width: 2rem; height: 2rem; rotate: 90deg; border-color: var(--black); }
html[dir="rtl"] .st-guide__back { rotate: -90deg; }
.st-guide__back[disabled] { opacity: 0.3; }
.st-guide__next--quiet { background: var(--white); color: var(--black); }
.st-guide__next--quiet:hover { background: var(--black); color: var(--white); }

.st-spark { position: fixed; border: 1.5px solid var(--black); border-radius: 50%; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes st-guide-in { 0% { opacity: 0; transform: translateY(18px) scale(0.92); } 60% { opacity: 1; transform: translateY(-4px) scale(1.02); } 100% { transform: none; } }
  @keyframes st-bob { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 0 -5px; rotate: 1.5deg; } }
  @keyframes st-wave { 0% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -9deg; } 80% { rotate: 6deg; } 100% { rotate: 0deg; } }
  @keyframes st-spot { 50% { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), 0 0 0 7px rgba(200, 16, 46, 0.35); } }
  @keyframes st-point { 50% { translate: 0 7px; } }
  @keyframes st-point-side { 50% { translate: 7px 0; } }
  @keyframes st-spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; } }
  .st-guide { transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .st-guide--in { animation: st-guide-in 0.5s ease-out; }
  .st-guide__char { animation: st-bob 2.6s ease-in-out infinite; }
  .st-guide__char--wave { animation: st-wave 0.9s ease-in-out, st-bob 2.6s ease-in-out 0.9s infinite; }
  .st-tour__spot { transition: left 0.45s ease, top 0.45s ease, width 0.45s ease, height 0.45s ease; animation: st-spot 1.6s ease-in-out infinite; }
  .st-tour__pointer { animation: st-point 0.8s ease-in-out infinite; transition: left 0.45s, top 0.45s; }
  .st-tour__pointer[data-side="right"], .st-tour__pointer[data-side="left"] { animation-name: st-point-side; }
  .st-spark { animation: st-spark 0.9s ease-out forwards; }
}

@media (max-width: 639px) {
  .st-guide { gap: 0.6rem; padding: 0.7rem 0.8rem; }
  .st-guide__char { width: 2.8rem; }
  .st-guide__text { font-size: 0.88rem; }
}
.st-guide { width: min(24rem, calc(100vw - 1rem)); }
.st-guide__skip, .st-guide__count, .st-guide__next { white-space: nowrap; }
.st-guide__foot { flex-wrap: wrap; row-gap: 0.4rem; }

/* ---------- side panel tabs: Guests | Assistant (the assistant replaces the list while open) ---------- */
.st-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; border: 2px solid var(--black); border-radius: var(--radius-pill); background: var(--white); }
.st-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--black);
  font: 800 0.88rem/1.2 var(--font-body);
  cursor: pointer;
}
.st-tab img { flex: none; width: 1.25rem; height: auto; }
.st-tab:hover { background: #f0f0f0; }
.st-tab[aria-selected="true"] { background: var(--black); color: var(--white); }
.st-tab[aria-selected="true"] .st-ico { color: var(--white); }
.st-tab:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.st-pane { display: flex; flex-direction: column; gap: 0.6rem; flex: 1 1 auto; min-height: 0; }
.st-pane[hidden] { display: none; }

/* the chat fills the side panel */
.st-side > .st-chat {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-height: 24rem;
  max-height: none;
  border: 2px solid var(--black);
  border-radius: 1rem;
  animation: none;
}
.st-side > .st-chat[hidden] { display: none; }
@media (min-width: 62rem) {
  .st-side > .st-chat { min-height: 0; }
}
.st-side > .st-chat .st-chat__head { padding: 0.55rem 0.7rem; }

/* narrow side panel: one column of cards, the chat scrolls inside the panel and never makes it taller than the map */
.st-tab img { width: 1.5rem; padding: 0.1rem; border-radius: 50%; background: var(--white); }
.st-side > .st-chat .st-chat__opts--cards { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.st-side > .st-chat .st-card { padding: 0.45rem 0.65rem; font-size: 0.8rem; }
.st-side > .st-chat .st-chat__opts { max-height: 58%; }
.st-side > .st-chat .st-chat__log { min-height: 6rem; }
@media (min-width: 62rem) {
  .st-side { contain: size; overflow: hidden; }
  .st-side > .st-chat { min-height: 0; }
}