/* ============================================================
   Premium Compact Queue Display Layout
   Refined Glassmorphic Design System — Kiosk / TV Displays
   ------------------------------------------------------------
   Design language: deep midnight glass, jewel-tone status
   accents, restrained motion. One signature moment: the
   ticket number treatment (row + announcement bar) carries a
   soft gradient-lit glow — everything else stays quiet so
   that moment reads clearly across a waiting hall.
   ============================================================ */

/* ---------- Design Tokens ---------- */
.qd-layout-compact.display-shell {
  /* Brand surface */
  --qc-bg-start: #0a1526;
  --qc-bg-mid: #060d1a;
  --qc-bg-end: #030509;

  /* Jewel-tone semantic accents — one true hex per hue, reused everywhere */
  --qc-accent-primary: #18e2cd;      /* teal — brand / QR / media */
  --qc-accent-secondary: #0d9c92;    /* deep teal — gradients */
  --qc-accent-purple: #8f7bf6;       /* violet — serving / QR head */
  --qc-accent-purple-tint: #c2b6ff;  /* legible violet for text on dark */
  --qc-accent-blue: #4f8dff;         /* called */
  --qc-accent-blue-tint: #8fb6ff;
  --qc-accent-green: #23c98e;        /* calling now */
  --qc-accent-green-tint: #6fe7bd;
  --qc-accent-amber: #f5a524;        /* deferred / generic amber */
  --qc-accent-amber-tint: #ffcb73;
  --qc-accent-red: #f0475c;          /* no-show only */
  --qc-accent-red-tint: #ff8a97;
  --qc-call-final: var(--qb-final-call, #d99614);
  --qc-call-repeat: var(--qb-repeat-call, #d97706);
  --qc-accent-slate: #7c8aa8;        /* waiting / transferred, neutral */

  /* Glass surface system */
  --qc-glass-bg: rgba(12, 23, 42, 0.46);
  --qc-glass-bg-strong: rgba(10, 18, 33, 0.72);
  --qc-glass-border: rgba(255, 255, 255, 0.08);
  --qc-glass-border-strong: rgba(255, 255, 255, 0.14);
  --qc-glass-hairline: rgba(255, 255, 255, 0.09);
  --qc-glass-blur: 22px;
  --qc-glass-blur-lg: 28px;
  --qc-glass-saturate: 165%;

  /* Elevation */
  --qc-shadow-sm: 0 4px 14px rgba(2, 6, 16, 0.28);
  --qc-shadow-md: 0 10px 28px rgba(2, 6, 16, 0.34);
  --qc-shadow-lg: 0 20px 48px rgba(2, 6, 16, 0.4);
  --qc-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* Text */
  --qc-text-primary: #f4f6fa;
  --qc-text-secondary: rgba(232, 240, 251, 0.82);
  --qc-text-muted: rgba(226, 234, 248, 0.52);

  /* Shape + motion */
  --qc-radius-sm: 10px;
  --qc-radius-md: 14px;
  --qc-radius-card: 18px;
  --qc-radius-lg: 22px;
  --qc-radius-pill: 999px;
  --qc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --qc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --qc-transition-smooth: 0.3s var(--qc-ease);

  --qc-font: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  font-family: var(--qc-font);
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--qc-accent-primary) 13%, transparent), transparent 46%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--qc-accent-purple) 11%, transparent), transparent 48%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--qc-accent-secondary) 8%, transparent), transparent 55%),
    linear-gradient(160deg, var(--qc-bg-start) 0%, var(--qc-bg-mid) 55%, var(--qc-bg-end) 100%);
  color: var(--qc-text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle film-grain veil — keeps large dark planes from looking flat/plasticky on TV panels */
.qd-layout-compact.display-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.qd-layout-compact.display-shell > * {
  position: relative;
  z-index: 1;
}

/* ---------- Utility: Logical-to-Physical Fallback ---------- */
.qd-layout-compact .u-size {
  width: var(--u-width, auto);
  height: var(--u-height, auto);
}

/* ============================================================
   Header
   ============================================================ */
.qd-layout-compact .qb-header {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  min-height: clamp(80px, 10vh, 112px);
  padding-inline: clamp(20px, 2.8vw, 44px);
  padding-block: clamp(10px, 1.2vh, 14px);
  background: var(--qc-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  border-bottom: 1px solid var(--qc-glass-border);
  box-shadow: var(--qc-shadow-md), var(--qc-shadow-inset-top);
  z-index: 10;
  box-sizing: border-box;
}

/* Soft two-tone brand hairline under the header */
.qd-layout-compact .qb-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--qc-accent-primary) 65%, transparent) 35%,
    color-mix(in srgb, var(--qc-accent-purple) 65%, transparent) 65%,
    transparent);
  opacity: 0.7;
}

.qd-layout-compact .qb-header__side--identity {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.qd-layout-compact .qb-header__side--status {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.4vw, 22px);
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.qd-layout-compact .qb-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.5vw, 64px);
  height: clamp(44px, 3.5vw, 64px);
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  flex: 0 0 auto;
  transition: transform var(--qc-transition-smooth), opacity var(--qc-transition-smooth);
}

.qd-layout-compact .qb-header__logo:hover {
  transform: translateY(-1px);
  opacity: 0.85;
}

.qd-layout-compact .qb-header__logo :is(img, svg) {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.qd-layout-compact .qb-header__identity-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qb-header__facility {
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 800;
  line-height: 1.45;
  padding-bottom: 4px;
  letter-spacing: 0.1px;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qb-header__subtitle {
  color: var(--qc-accent-primary);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 2px;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--qc-accent-primary) 35%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qb-header__location {
  display: none;
}

.qd-layout-compact .qb-header__time {
  font-size: clamp(24px, 2.4vw, 42px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
  font-variant-numeric: tabular-nums;
}

.qd-layout-compact .qb-header__date-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
  max-width: 22ch;
  flex: 0 0 auto;
}

.qd-layout-compact .qb-header__date {
  font-size: clamp(11px, 0.9vw, 15px);
  color: var(--qc-text-secondary);
  white-space: nowrap;
}

.qd-layout-compact .qb-header__time-wrap {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  flex: 0 0 auto;
  padding-inline-start: clamp(10px, 1.1vw, 18px);
  border-inline-start: 1px solid var(--qc-glass-border-strong);
}

.qd-layout-compact .qb-header__clock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--qc-text-secondary);
  flex-shrink: 0;
}

.qd-layout-compact .qb-header__live {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
  padding-inline-end: clamp(10px, 1.1vw, 18px);
  border-inline-end: 1px solid var(--qc-glass-border-strong);
}

.qd-layout-compact .qb-header__live-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qd-layout-compact .qb-header__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qc-accent-amber);
  flex-shrink: 0;
}

.qd-layout-compact .qb-header__live-dot.is-live {
  background: var(--qc-accent-green);
  box-shadow: 0 0 9px color-mix(in srgb, var(--qc-accent-green) 70%, transparent);
  animation: qc-pulse 2.4s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qb-header__live-label {
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  color: #d9f8ec;
}

.qd-layout-compact .qb-header__live-sub {
  font-size: clamp(9px, 0.75vw, 11px);
  color: var(--qc-text-muted);
}

.qd-layout-compact .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qd-layout-compact .qb-header__controls {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: clamp(8px, 0.8vw, 14px);
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

.qd-layout-compact .qb-header__btn {
  position: relative;
  width: clamp(40px, 2.65vw, 46px);
  height: clamp(40px, 2.65vw, 46px);
  min-width: clamp(40px, 2.65vw, 46px);
  padding: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82) !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(20, 184, 166, 0.15) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0;
  text-decoration: none;
  box-sizing: border-box;
}

.qd-layout-compact .qb-header__btn-icon,
.qd-layout-compact .qb-header__btn :is(svg, span[id$="-icon"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.qd-layout-compact .qb-header__btn svg {
  width: 18px;
  height: 18px;
}

.qd-layout-compact .qb-header__lang-code,
.qd-layout-compact .qb-header__layout-code {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  font-family: var(--qc-font);
  color: #020812 !important;
  background: var(--qc-accent-primary, #14b8a6) !important;
  border: 1.5px solid rgba(2, 8, 18, 0.25) !important;
  box-shadow: 0 2px 6px rgba(20, 184, 166, 0.35) !important;
  pointer-events: none;
}

.qd-layout-compact .qb-header__btn:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(255, 255, 255, 0.08)) !important;
  color: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1.5px);
}

.qd-layout-compact .qb-header__btn:active {
  transform: translateY(0) scale(0.95);
}

.qd-layout-compact .qb-header__btn:focus-visible {
  outline: 2px solid var(--qc-accent-primary);
  outline-offset: 2px;
}

.qd-layout-compact .qb-header__btn--layout.display-btn--active {
  color: var(--qc-accent-primary) !important;
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow:
    0 0 14px rgba(20, 184, 166, 0.22),
    inset 0 1px 0 rgba(20, 184, 166, 0.15) !important;
}

.qd-layout-compact .qb-header__btn--sound.display-btn--active {
  color: #042b29 !important;
  background: linear-gradient(135deg, var(--qc-accent-primary), var(--qc-accent-secondary)) !important;
  border-color: transparent !important;
  box-shadow:
    0 3px 14px rgba(20, 184, 166, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.qd-layout-compact .qb-header__btn--fullscreen.display-btn--active {
  color: #042b29 !important;
  background: linear-gradient(135deg, var(--qc-accent-primary), var(--qc-accent-secondary)) !important;
  border-color: transparent !important;
  box-shadow:
    0 3px 14px rgba(20, 184, 166, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.qd-layout-compact .qb-header__btn--fullscreen {
  position: relative;
}

.qd-layout-compact .qb-header__btn--fullscreen.qb-header__btn--expand-hint::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1.5px solid #020812;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  pointer-events: none;
  animation: qc-fullscreen-hint-pulse 1.85s var(--qc-ease-soft) infinite;
}

@keyframes qc-fullscreen-hint-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
  }
}


/* Compact screens must surface audio-off state; hiding it makes visual calls look healthy while silent. */
.qd-layout-compact .qb-sound-hint {
  position: absolute;
  z-index: 30;
  top: calc(clamp(80px, 10vh, 112px) + 10px);
  inset-inline-start: clamp(20px, 2.4vw, 40px);
  max-width: min(420px, calc(100vw - 40px));
  margin: 0;
  padding: 9px 14px;
  border-radius: 12px;
  color: #fff7d6;
  background: rgba(64, 42, 4, 0.82);
  border: 1px solid color-mix(in srgb, var(--qc-accent-amber) 48%, transparent);
  box-shadow: 0 12px 30px rgba(2, 6, 16, 0.26), 0 0 18px color-mix(in srgb, var(--qc-accent-amber) 18%, transparent);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  text-align: start;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.qd-layout-compact .qb-sound-hint[hidden] {
  display: none !important;
}

@keyframes qc-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qc-accent-green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--qc-accent-green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qc-accent-green) 0%, transparent); }
}

/* ============================================================
   Main Content Grid
   ============================================================ */
.qd-layout-compact .qc {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(16px, 2.2vh, 28px);
  padding: clamp(16px, 2.4vh, 32px) clamp(20px, 2.4vw, 40px) clamp(12px, 1.6vh, 20px);
  box-sizing: border-box;
}

.qd-layout-compact .qc-main {
  direction: ltr;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(276px, 24.15vw) minmax(0, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
}

.qd-layout-compact .qc-side,
.qd-layout-compact .qc-board {
  direction: rtl;
  min-width: 0;
  min-height: 0;
}

/* ---------- Left Sidebar: Call / QR / Media ---------- */
.qd-layout-compact .qc-side {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(8px, 1vh, 12px);
  overflow: hidden;
}

/* Call overlay + side QR share a hero slot; media fills the lower pane. */
.qd-layout-compact .qc-side-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: clamp(180px, 26vh, 420px);
  flex: 1 1 auto;
  height: 100%;
}

.qd-layout-compact .compact-side-hero {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  container-type: size;
  container-name: compact-side-hero;
}

.qd-layout-compact .compact-side-hero > .compact-call-card,
.qd-layout-compact .compact-side-hero > .compact-side-qr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  transition: opacity 0.32s var(--qc-ease), visibility 0.32s var(--qc-ease);
}

.qd-layout-compact .compact-side-hero.is-calling > .compact-call-card {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.qd-layout-compact .compact-side-hero.is-calling > .compact-side-qr {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.qd-layout-compact .compact-side-hero:not(.is-calling) > .compact-call-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.qd-layout-compact .compact-side-hero:not(.is-calling) > .compact-side-qr {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.qd-layout-compact.queue-display--no-qr .compact-side-hero:not(.is-calling) > .compact-call-card {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.qd-layout-compact .compact-side-qr {
  --csq-accent: var(--qc-accent-primary, #16dccd);
  --csq-accent-soft: color-mix(in srgb, var(--csq-accent) 24%, transparent);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(8px, 1vh, 12px);
  border-radius: var(--qb-radius-lg, 28px);
  border: 1px solid color-mix(in srgb, var(--csq-accent) 34%, var(--qc-glass-border));
  background:
    radial-gradient(ellipse 90% 70% at 50% -8%, color-mix(in srgb, var(--csq-accent) 18%, transparent), transparent 58%),
    linear-gradient(165deg, rgba(7, 16, 30, 0.98) 0%, rgba(4, 10, 22, 0.99) 100%);
  box-shadow:
    var(--qc-shadow-md),
    0 0 42px color-mix(in srgb, var(--csq-accent) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.qd-layout-compact .compact-side-qr__shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: clamp(8px, 0.9vh, 12px);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.qd-layout-compact .compact-side-qr__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: 1;
  margin: auto;
  padding: clamp(10px, 1.4cqw, 14px);
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.99) 0%, rgba(241, 250, 255, 0.96) 48%, rgba(232, 246, 255, 0.94) 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 36px color-mix(in srgb, var(--csq-accent) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

.qd-layout-compact .compact-side-qr__glow {
  position: absolute;
  inset: 12%;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--csq-accent) 12%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: compact-side-qr-glow 4.8s ease-in-out infinite;
}

.qd-layout-compact .compact-side-qr__scanline {
  position: absolute;
  inset-inline: 10%;
  height: 2px;
  top: 14%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--csq-accent) 85%, white), transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--csq-accent) 55%, transparent);
  opacity: 0.72;
  pointer-events: none;
  z-index: 3;
  animation: compact-side-qr-scan 3.6s ease-in-out infinite;
}

.qd-layout-compact .compact-side-qr__corner {
  position: absolute;
  width: clamp(18px, 2.2cqw, 28px);
  height: clamp(18px, 2.2cqw, 28px);
  border: 3px solid var(--csq-accent);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--csq-accent) 45%, transparent));
}

.qd-layout-compact .compact-side-qr__corner--tl {
  top: clamp(8px, 1.2cqh, 12px);
  inset-inline-start: clamp(8px, 1.2cqh, 12px);
  border-bottom: 0;
  border-inline-end: 0;
  border-start-start-radius: 10px;
}

.qd-layout-compact .compact-side-qr__corner--tr {
  top: clamp(8px, 1.2cqh, 12px);
  inset-inline-end: clamp(8px, 1.2cqh, 12px);
  border-bottom: 0;
  border-inline-start: 0;
  border-start-end-radius: 10px;
}

.qd-layout-compact .compact-side-qr__corner--bl {
  bottom: clamp(8px, 1.2cqh, 12px);
  inset-inline-start: clamp(8px, 1.2cqh, 12px);
  border-top: 0;
  border-inline-end: 0;
  border-end-start-radius: 10px;
}

.qd-layout-compact .compact-side-qr__corner--br {
  bottom: clamp(8px, 1.2cqh, 12px);
  inset-inline-end: clamp(8px, 1.2cqh, 12px);
  border-top: 0;
  border-inline-start: 0;
  border-end-end-radius: 10px;
}

.qd-layout-compact .compact-side-qr__code {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 120px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2px, 0.4cqw, 4px);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.qd-layout-compact .compact-side-qr__code .join-qr-host {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qd-layout-compact .compact-side-qr__code .join-qr-host :is(canvas, img) {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  image-rendering: auto;
}

.qd-layout-compact .compact-side-qr__placeholder {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 700;
  color: #64748b;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
}

.qd-layout-compact .compact-side-qr.is-ready .compact-side-qr__placeholder,
.qd-layout-compact .compact-side-qr__placeholder[hidden] {
  display: none !important;
}

.qd-layout-compact .compact-side-qr.is-ready .compact-side-qr__scanline {
  opacity: 0.9;
}

.qd-layout-compact .compact-side-qr__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: clamp(7px, 0.8vh, 10px) clamp(14px, 1.4vw, 18px);
  border-radius: 999px;
  color: #eafffb;
  font-size: clamp(12px, 0.88vw, 15px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--csq-accent) 88%, #0f766e), color-mix(in srgb, var(--csq-accent) 62%, #0e7490));
  border: 1px solid color-mix(in srgb, var(--csq-accent) 70%, white);
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--csq-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.qd-layout-compact .compact-side-qr__hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.95;
}

.qd-layout-compact .compact-side-qr__hint-text {
  white-space: nowrap;
}

@keyframes compact-side-qr-scan {
  0%, 100% { top: 12%; opacity: 0.35; }
  12% { opacity: 0.85; }
  50% { top: 78%; opacity: 0.95; }
  88% { opacity: 0.45; }
}

@keyframes compact-side-qr-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.02); }
}

.qd-layout-compact .compact-side-hero > .compact-call-card {
  padding: clamp(6px, 0.9vh, 12px) clamp(8px, 1vw, 16px);
  border-radius: var(--qb-radius-lg, 28px);
}

.qd-layout-compact .compact-side-hero .compact-call-card__main {
  gap: clamp(6px, 1.2cqh, 14px);
  height: 100%;
  justify-content: center;
}

.qd-layout-compact .compact-side-hero .call-ticket-number {
  font-size: clamp(2rem, 24cqh, 5.75rem);
  line-height: 1.02;
}

.qd-layout-compact .compact-side-hero .call-clinic-name {
  font-size: clamp(0.95rem, 9cqh, 2.35rem);
}

.qd-layout-compact .compact-side-hero .call-location-pill {
  font-size: clamp(0.78rem, 6.5cqh, 1.35rem);
}

.qd-layout-compact .compact-side-hero .call-status-badge {
  font-size: clamp(11px, 7cqh, 18px);
  padding: clamp(4px, 0.45cqh, 8px) clamp(10px, 1.2cqw, 20px);
}

.qd-layout-compact .compact-side-hero .call-number-row {
  gap: clamp(6px, 1.2cqw, 14px);
}

.qd-layout-compact .qc-side-slot {
  min-width: 0;
  border: 1px solid var(--qc-glass-border);
  border-radius: var(--qc-radius-card);
  background: var(--qc-glass-bg);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur)) saturate(var(--qc-glass-saturate));
  box-shadow: var(--qc-shadow-md), var(--qc-shadow-inset-top);
  overflow: hidden;
  transition: opacity 0.28s var(--qc-ease), transform 0.28s var(--qc-ease), border-color 0.24s var(--qc-ease);
}

.qd-layout-compact .qc-side-slot--call {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.qd-layout-compact .qc-side-slot--call:has(.qc-call-bar[hidden]) {
  display: none;
}

.qd-layout-compact .qc-side-slot--qr {
  flex: 0 0 auto;
  padding: clamp(10px, 1.1vh, 14px);
  border-color: color-mix(in srgb, var(--qc-accent-primary) 22%, var(--qc-glass-border));
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--qc-accent-primary) 10%, transparent) 0%, transparent 52%),
    var(--qc-glass-bg);
}

.qd-layout-compact .qc-side-qr__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vh, 12px);
  width: 100%;
  min-height: 0;
}

.qd-layout-compact .qc-side-stack--calling .qc-side-qr__body {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1vw, 14px);
}

.qd-layout-compact .qc-side-qr__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-side-stack:not(.qc-side-stack--calling) .qc-side-slot--qr {
  aspect-ratio: 1;
  max-height: min(17vw, 21vh);
}

.qd-layout-compact .qc-side-hint {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

.qd-layout-compact .qc-side-stack--calling .qc-side-hint {
  text-align: start;
}

.qd-layout-compact .qc-side-hint span,
.qd-layout-compact .qc-side-hint strong {
  display: block;
}

.qd-layout-compact .qc-side-hint strong {
  margin-top: 0.2em;
  color: var(--qc-accent-primary);
  font-weight: 800;
}

.qd-layout-compact .qc-side-card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--qc-glass-border);
  border-radius: var(--qc-radius-card);
  background: var(--qc-glass-bg);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur)) saturate(var(--qc-glass-saturate));
  box-shadow: var(--qc-shadow-lg), var(--qc-shadow-inset-top);
  transition: border-color var(--qc-transition-smooth), box-shadow var(--qc-transition-smooth), transform var(--qc-transition-smooth);
}

.qd-layout-compact .qc-side-card:hover {
  border-color: var(--qc-glass-border-strong);
  box-shadow: var(--qc-shadow-lg), var(--qc-shadow-inset-top);
  transform: translateY(-1px);
}

.qd-layout-compact .qc-side-slot--call .qc-call-bar--side {
  height: 100%;
  min-height: 0;
}

.qd-layout-compact .qc-side-card--media {
  flex: 1 1 auto;
  min-height: 0;
  border-color: color-mix(in srgb, var(--qc-accent-primary) 12%, var(--qc-glass-border));
}

.qd-layout-compact .qc-side-card--compact {
  padding: clamp(6px, 0.7vh, 10px);
  min-height: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-side-card__head {
  display: none;
}

.qd-layout-compact .qc-side-card--compact .queue-media__indicators {
  padding: 6px 0 8px;
  gap: 6px;
}

/* QR section */
.qd-layout-compact .qc-side-slot--qr .qb-qr,
.qd-layout-compact .qc-side .qb-qr {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  box-sizing: border-box;
  list-style: none;
}

.qd-layout-compact .qc-side .qb-qr.qd-next-card {
  margin: 0;
}

.qd-layout-compact .qc-side .qb-qr__shell,
.qd-layout-compact .qc-side .qb-qr__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qd-layout-compact .qc-side-slot--qr .qb-qr__frame,
.qd-layout-compact .qc-side .qb-qr__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(78%, 168px);
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 36%, transparent);
  border-radius: 14px;
  padding: clamp(8px, 0.9vh, 10px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(236, 248, 255, 0.94));
  box-shadow:
    var(--qc-shadow-sm),
    0 0 20px color-mix(in srgb, var(--qc-accent-primary) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.qd-layout-compact .qc-side-stack--calling .qc-side-slot--qr .qb-qr__frame {
  width: clamp(72px, 7.5vw, 96px);
  padding: 6px;
  border-radius: 12px;
}

.qd-layout-compact .qc-side .qb-qr__corner {
  position: absolute;
  width: clamp(11px, 1vw, 16px);
  height: clamp(11px, 1vw, 16px);
  border: 2px solid var(--qc-accent-primary);
  pointer-events: none;
}

.qd-layout-compact .qc-side .qb-qr__corner--tl { top: 6px; inset-inline-start: 6px; border-bottom: 0; border-inline-end: 0; border-radius: 4px 0 0 0; }
.qd-layout-compact .qc-side .qb-qr__corner--tr { top: 6px; inset-inline-end: 6px; border-bottom: 0; border-inline-start: 0; border-radius: 0 4px 0 0; }
.qd-layout-compact .qc-side .qb-qr__corner--bl { bottom: 6px; inset-inline-start: 6px; border-top: 0; border-inline-end: 0; border-radius: 0 0 0 4px; }
.qd-layout-compact .qc-side .qb-qr__corner--br { bottom: 6px; inset-inline-end: 6px; border-top: 0; border-inline-start: 0; border-radius: 0 0 4px 0; }

.qd-layout-compact .qc-side-slot--qr .qb-qr__code,
.qd-layout-compact .qc-side .qb-qr__code {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(88px, min(11vh, 13vw), 140px);
  height: clamp(88px, min(11vh, 13vw), 140px);
  aspect-ratio: 1;
  padding: 4px;
  border-radius: 10px;
  background: #ffffff;
}

.qd-layout-compact .qc-side-stack--calling .qc-side-slot--qr .qb-qr__code {
  width: clamp(58px, 6.5vw, 76px);
  height: clamp(58px, 6.5vw, 76px);
}

.qd-layout-compact .qc-side .qb-qr__code .join-qr-host {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qd-layout-compact .qc-side .qb-qr__code .join-qr-host :is(canvas, img) {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

.qd-layout-compact .qc-side .qb-qr__code .qr-placeholder {
  font-size: clamp(11px, 0.8vw, 13px);
  color: var(--qc-text-muted);
  text-align: center;
}

/* Media Zone — fill sidebar area elegantly */
.qd-layout-compact .qc-side-card--media .queue-media,
.qd-layout-compact .qc-side .queue-media {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

.qd-layout-compact .qc-side .queue-media[hidden] + .qc-media-fallback {
  display: flex;
}

.qd-layout-compact .qc-media-fallback {
  display: none;
  flex: 1 1 auto;
  min-height: clamp(100px, 14vh, 180px);
  height: 100%;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  color: var(--qc-text-muted);
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.25), rgba(2, 6, 23, 0.55)),
    linear-gradient(135deg, #16263e, #090e17 75%);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.qd-layout-compact .qc-side .queue-media__frame,
.qd-layout-compact .qc-media-fallback {
  flex: 1 1 auto;
  min-height: clamp(110px, 16vh, 260px);
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--qc-shadow-sm);
  border: 1px solid var(--qc-glass-border);
  position: relative;
  background: #ffffff;
  aspect-ratio: var(--queue-media-aspect, 16 / 9);
}

.qd-layout-compact .qc-side .queue-media__frame:not([data-media-orientation]) {
  aspect-ratio: unset;
}

.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="landscape"],
.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="square"] {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: var(--queue-media-aspect, 16 / 9);
}

.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="portrait"] {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--queue-media-aspect, 9 / 16);
}

.qd-layout-compact .qc-side .queue-media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, transparent 78%, rgba(4, 10, 20, 0.08) 100%);
}

.qd-layout-compact .qc-side .queue-media__shell,
.qd-layout-compact .qc-side .media-player-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  background: #ffffff;
}

.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="portrait"] .media-player-shell,
.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="portrait"] .queue-media__shell {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: var(--queue-media-aspect, 9 / 16);
}

.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="landscape"] .media-player-shell,
.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="landscape"] .queue-media__shell,
.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="square"] .media-player-shell,
.qd-layout-compact .qc-side .queue-media__frame[data-media-orientation="square"] .queue-media__shell {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: var(--queue-media-aspect, 16 / 9);
}

.qd-layout-compact .qc-side .queue-media__frame video,
.qd-layout-compact .qc-side .queue-media__frame img,
.qd-layout-compact .qc-side .queue-media__frame iframe,
.qd-layout-compact .qc-side .queue-media__frame .queue-media__asset,
.qd-layout-compact .qc-side .queue-media__frame .media-player-shell > :is(img, video) {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  border: 0;
  display: block;
  background: #ffffff;
}

.qd-layout-compact .qc-side .queue-media__frame iframe,
.qd-layout-compact .qc-side .queue-media__frame .media-player-shell > iframe {
  width: 100%;
  height: 100%;
  object-fit: unset;
  background: #ffffff;
}

.qd-layout-compact .qc-side .media-player-shell--veil {
  overflow: hidden;
  background: #ffffff;
}

.qd-layout-compact .qc-side .queue-media__frame.media-stage--veil,
.qd-layout-compact .qc-side .queue-media__frame:has(.media-player-shell--veil) {
  overflow: hidden;
  background: #ffffff;
}

.qd-layout-compact .qc-side .media-player-shell--veil .queue-media__asset {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.qd-layout-compact .qc-side .media-player-shell__veil {
  position: absolute;
  z-index: 2;
  background: #ffffff;
  pointer-events: none;
  box-shadow: 0 0 0 1px #ffffff;
}

.qd-layout-compact .qc-side .media-player-shell__veil--side {
  inset-block: 0;
  width: var(--veil-size, 12.5%);
}

.qd-layout-compact .qc-side .media-player-shell__veil--start {
  inset-inline-start: 0;
}

.qd-layout-compact .qc-side .media-player-shell__veil--end {
  inset-inline-end: 0;
}

.qd-layout-compact .qc-side .media-player-shell__veil--bar {
  inset-inline: 0;
  height: var(--veil-size, 12.5%);
}

.qd-layout-compact .qc-side .media-player-shell__veil--top {
  inset-block-start: 0;
}

.qd-layout-compact .qc-side .media-player-shell__veil--bottom {
  inset-block-end: 0;
}

.qd-layout-compact .qc-side .queue-media__indicators {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
}

.qd-layout-compact .qc-side .queue-media__indicators > *,
.qd-layout-compact .qc-side .queue-media__indicators > .queue-media__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color var(--qc-transition-smooth), box-shadow var(--qc-transition-smooth), width var(--qc-transition-smooth);
}

.qd-layout-compact .qc-side .queue-media__indicators > .is-active,
.qd-layout-compact .qc-side .queue-media__indicators > .queue-media__indicator.is-active {
  width: 18px;
  border-radius: 999px;
  background: var(--qc-accent-primary);
  box-shadow: 0 0 7px color-mix(in srgb, var(--qc-accent-primary) 65%, transparent);
}

/* ============================================================
   Main Queue Board
   ============================================================ */
.qd-layout-compact .qc-board {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
  overflow: hidden;
  isolation: isolate;
}

.qd-layout-compact .qc-board__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
  color: #ffffff;
  font-size: clamp(17px, 1.3vw, 24px);
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.qd-layout-compact .qc-board__title::before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 5px;
  height: clamp(22px, 2.8vh, 32px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--qc-accent-primary), var(--qc-accent-purple));
  box-shadow: 0 0 10px color-mix(in srgb, var(--qc-accent-primary) 55%, transparent);
}

/* Table Head */
.qd-layout-compact .qc-table-head {
  flex: 0 0 auto;
  min-height: clamp(48px, 6.2vh, 66px);
  padding: 0 clamp(16px, 1.8vw, 28px);
  border: 1px solid var(--qc-glass-border);
  border-radius: 14px;
  background: var(--qc-glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.68);
  box-shadow: var(--qc-shadow-sm);
  box-sizing: border-box;
}

.qd-layout-compact .qc-table-head .qc-col {
  font-size: clamp(14px, 1vw, 19px);
  font-weight: 800;
  min-width: 0;
  letter-spacing: 0.2px;
}

/* Row flex layout */
.qd-layout-compact .qc-table-head,
.qd-layout-compact .qc-call-row {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  width: 100%;
  box-sizing: border-box;
}

.qd-layout-compact .qc-col--ticket,
.qd-layout-compact .qc-call-row__ticket {
  flex: 0 0 clamp(130px, 12vw, 190px);
  max-width: clamp(130px, 12vw, 190px);
}

.qd-layout-compact .qc-col--service,
.qd-layout-compact .qc-call-row__service {
  flex: 1 1 0;
  min-width: 0;
}

.qd-layout-compact .qc-col--room,
.qd-layout-compact .qc-call-row__room {
  flex: 0 0 clamp(88px, 8vw, 124px);
  max-width: clamp(88px, 8vw, 124px);
}

.qd-layout-compact .qc-col--status,
.qd-layout-compact .qc-call-row__status {
  flex: 0 0 clamp(118px, 11vw, 162px);
  max-width: clamp(118px, 11vw, 162px);
}

.qd-layout-compact .qc-col--ticket { text-align: center; }
.qd-layout-compact .qc-col--service { text-align: right; }
.qd-layout-compact .qc-col--room { text-align: center; }
.qd-layout-compact .qc-col--status { text-align: center; }

/* Call list container */
.qd-layout-compact .qc-call-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.6vh, 9px);
  overflow: hidden;
}

.qd-layout-compact .qc-call-list:not(.qc-call-list--dense) .qc-call-row {
  flex: 1 1 0;
  min-height: clamp(46px, 5.2vh, 60px);
  max-height: clamp(68px, 8vh, 88px);
}

.qd-layout-compact .qc-call-list--dense .qc-call-row {
  flex: 0 0 auto;
  min-height: clamp(48px, 5.6vh, 64px);
  max-height: none;
}

/* ---------- Call Row ---------- */
.qd-layout-compact .qc-call-row {
  --qc-row-accent: var(--qc-accent-purple);
  position: relative;
  min-height: clamp(52px, 6.4vh, 72px);
  padding: 0 clamp(16px, 1.8vw, 28px);
  border: 1px solid var(--qc-glass-border);
  border-radius: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--qc-row-accent) 6%, transparent), transparent 40%),
    var(--qc-glass-bg);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur));
  backdrop-filter: blur(var(--qc-glass-blur));
  box-shadow: var(--qc-shadow-sm);
  overflow: hidden;
  transition: border-color 0.3s var(--qc-ease), background 0.3s var(--qc-ease),
              box-shadow 0.3s var(--qc-ease), transform 0.3s var(--qc-ease);
}

.qd-layout-compact .qc-call-row:hover {
  border-color: color-mix(in srgb, var(--qc-row-accent) 30%, var(--qc-glass-border-strong));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--qc-row-accent) 9%, transparent), transparent 45%),
    rgba(13, 27, 49, 0.5);
  transform: translateY(-1px);
  box-shadow: var(--qc-shadow-md);
}

.qd-layout-compact .qc-call-row--enter {
  animation: qc-row-enter 0.32s var(--qc-ease) both;
}

.qd-layout-compact .qc-call-row::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--qc-row-accent) 90%, white 10%),
    var(--qc-row-accent));
  border-radius: 999px 0 0 999px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--qc-row-accent) 65%, transparent);
}

/* Ticket number — the signature element: soft gradient-lit glow */
.qd-layout-compact .qc-call-row__ticket {
  direction: ltr;
  color: var(--qc-row-accent);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--qc-row-accent) 100%, white 22%),
    var(--qc-row-accent) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--qc-row-accent) 35%, transparent));
}

@supports not (background-clip: text) {
  .qd-layout-compact .qc-call-row__ticket {
    background: none;
    color: var(--qc-row-accent);
  }
}

/* Service with icon */
.qd-layout-compact .qc-call-row__service {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1.1vw, 16px);
  color: #ffffff;
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.qd-layout-compact .qc-call-row__service-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qc-call-row__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 2.6vw, 44px);
  height: clamp(34px, 2.6vw, 44px);
  border-radius: 12px;
  color: var(--qc-row-accent);
  background: color-mix(in srgb, var(--qc-row-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-row-accent) 22%, transparent);
  transition: background var(--qc-transition-smooth), border-color var(--qc-transition-smooth);
}

.qd-layout-compact .qc-call-row__icon svg {
  width: 50%;
  height: 50%;
}

/* Room label */
.qd-layout-compact .qc-call-row__room {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: clamp(32px, 3.8vh, 42px);
  padding: 0 14px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--qc-glass-border-strong);
  font-size: clamp(14px, 1vw, 19px);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qc-call-row__room--waiting {
  color: var(--qc-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: transparent;
}

/* Status pill */
.qd-layout-compact .qc-status-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: clamp(32px, 3.8vh, 44px);
  padding: 0 12px;
  border-radius: 12px;
  color: var(--qc-row-accent);
  background: color-mix(in srgb, var(--qc-row-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-row-accent) 22%, transparent);
  font-size: clamp(12px, 0.9vw, 16px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--qc-transition-smooth), border-color var(--qc-transition-smooth), box-shadow var(--qc-transition-smooth);
}

.qd-layout-compact .qc-status-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Row State Variants ---------- */
.qd-layout-compact .qc-call-row--calling {
  --qc-row-accent: var(--qc-accent-primary);
  border-color: color-mix(in srgb, var(--qc-accent-primary) 45%, transparent);
  box-shadow: var(--qc-shadow-sm), 0 0 22px color-mix(in srgb, var(--qc-accent-primary) 18%, transparent);
  animation: qc-calling-glow 3.2s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qc-call-row--calling.qc-call-row--enter {
  animation: qc-row-enter 0.32s var(--qc-ease) both,
             qc-calling-glow 3.2s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qc-call-row--calling::after {
  width: 5px;
}

.qd-layout-compact .qc-call-row--calling .qc-status-pill {
  background: color-mix(in srgb, var(--qc-accent-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--qc-accent-primary) 40%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--qc-accent-primary) 22%, transparent);
  color: var(--qc-accent-primary);
}

.qd-layout-compact .qc-call-row--calling .qc-status-icon--sound {
  width: 20px;
  height: 20px;
  animation: qc-sound-pulse 2s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qc-call-row--called      { --qc-row-accent: var(--qc-accent-blue); }
.qd-layout-compact .qc-call-row--repeat      {
  --qc-row-accent: var(--qc-call-repeat);
  border-color: color-mix(in srgb, var(--qc-call-repeat) 40%, transparent);
  box-shadow: var(--qc-shadow-sm), 0 0 18px color-mix(in srgb, var(--qc-call-repeat) 16%, transparent);
}
.qd-layout-compact .qc-call-row--repeat .qc-status-pill {
  background: color-mix(in srgb, var(--qc-call-repeat) 18%, transparent);
  border-color: color-mix(in srgb, var(--qc-call-repeat) 38%, transparent);
  color: var(--qc-call-repeat);
}
.qd-layout-compact .qc-call-row--final {
  --qc-row-accent: var(--qc-call-final);
  border-color: color-mix(in srgb, var(--qc-call-final) 40%, transparent);
  box-shadow: var(--qc-shadow-sm), 0 0 18px color-mix(in srgb, var(--qc-call-final) 16%, transparent);
}
.qd-layout-compact .qc-call-row--final .qc-status-pill {
  background: color-mix(in srgb, var(--qc-call-final) 18%, transparent);
  border-color: color-mix(in srgb, var(--qc-call-final) 38%, transparent);
  color: var(--qc-call-final);
}
.qd-layout-compact .qc-call-row--no-show     { --qc-row-accent: var(--qc-accent-red); }
.qd-layout-compact .qc-call-row--waiting     { --qc-row-accent: var(--qc-accent-slate); }
.qd-layout-compact .qc-call-row--serving     { --qc-row-accent: var(--qc-accent-purple); }
.qd-layout-compact .qc-call-row--deferred    { --qc-row-accent: var(--qc-accent-amber); }
.qd-layout-compact .qc-call-row--transferred { --qc-row-accent: var(--qc-accent-slate); }

/* ---------- Empty State ---------- */
.qd-layout-compact .qc-empty {
  align-self: center;
  margin: clamp(24px, 6vh, 60px) auto 0;
  padding: 16px 28px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.72);
  background: var(--qc-glass-bg);
  border: 1px solid var(--qc-glass-border);
  font-size: clamp(16px, 1.2vw, 22px);
  font-weight: 800;
  text-align: center;
  box-shadow: var(--qc-shadow-md);
}

.qd-layout-compact .qc-empty[hidden] {
  display: none !important;
}

/* ---------- Waiting Queue Strip (separate from active calls) ---------- */
.qd-layout-compact {
  --qc-waiting-zone-gap: clamp(2px, 0.22vh, 4px);
  --qc-waiting-track-min: clamp(58px, 7.4vh, 80px);
  --qc-waiting-chip-min-h: clamp(50px, 6.2vh, 68px);
  --qc-waiting-chip-pad-x: clamp(18px, 1.65vw, 30px);
  --qc-waiting-chip-num-size: clamp(21px, 1.55vw, 30px);
  --qc-waiting-chip-svc-size: clamp(16px, 1.12vw, 22px);
  --qc-waiting-chip-wait-size: clamp(16px, 1.05vw, 20px);
}

.qd-layout-compact .qc-waiting-zone,
.qd-layout-compact .qc-waiting-overflow,
.qd-layout-compact .qc-waiting-chip,
.qd-layout-compact .qc-waiting-chip__num,
.qd-layout-compact .qc-waiting-chip__svc,
.qd-layout-compact .qc-waiting-chip__wait {
  font-family: var(--qc-font);
}

.qd-layout-compact .qc-waiting-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--qc-waiting-zone-gap);
  min-height: 0;
  max-width: 100%;
  margin-top: clamp(-4px, -0.45vh, 0px);
}

.qd-layout-compact .qc-waiting-zone[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-waiting-zone__meta {
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 0 clamp(2px, 0.35vw, 6px) 0;
  margin-bottom: 0;
}

.qd-layout-compact .qc-waiting-zone__title-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-waiting-overflow,
.qd-layout-compact .qc-waiting-strip {
  flex: 0 0 auto;
  margin-top: 0;
  min-height: 0;
  max-width: 100%;
  padding: clamp(10px, 1.15vh, 14px) clamp(14px, 1.5vw, 24px);
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 28%, var(--qc-glass-border));
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--qc-accent-primary) 8%, rgba(13, 27, 49, 0.62)),
      rgba(8, 16, 30, 0.82));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    var(--qc-shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 24px color-mix(in srgb, var(--qc-accent-primary) 8%, transparent);
  box-sizing: border-box;
}

.qd-layout-compact .qc-waiting-overflow[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-waiting-overflow__head {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 34px;
}

.qd-layout-compact .qc-waiting-overflow__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--qc-accent-primary);
  background: color-mix(in srgb, var(--qc-accent-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 28%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--qc-accent-primary) 14%, transparent);
}

.qd-layout-compact .qc-waiting-overflow__label {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45em 0.65em;
  color: #ffffff;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 800;
  letter-spacing: 0.2px;
}

.qd-layout-compact .qc-waiting-overflow__note {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(11px, 0.78vw, 14px);
  font-weight: 600;
}

.qd-layout-compact .qc-waiting-overflow__note[hidden],
.qd-layout-compact.queue-display--no-estimated-wait .qc-waiting-overflow__note {
  display: none !important;
}

.qd-layout-compact .qc-waiting-overflow__title {
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
}

.qd-layout-compact .qc-waiting-overflow__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #042b29;
  background: linear-gradient(135deg, var(--qc-accent-primary), var(--qc-accent-secondary));
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 55%, transparent);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px color-mix(in srgb, var(--qc-accent-primary) 35%, transparent);
}

.qd-layout-compact .qc-waiting-overflow__badge[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-waiting-overflow__track {
  position: relative;
  overflow: hidden;
  min-height: var(--qc-waiting-track-min);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.qd-layout-compact .qc-waiting-overflow__track::before,
.qd-layout-compact .qc-waiting-overflow__track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 4vw, 56px);
  z-index: 2;
  pointer-events: none;
}

.qd-layout-compact .qc-waiting-overflow__track::before {
  inset-inline-start: 0;
  background: linear-gradient(
    to inline-end,
    rgba(8, 16, 30, 0.98) 0%,
    rgba(8, 16, 30, 0.72) 45%,
    transparent 100%
  );
}

.qd-layout-compact .qc-waiting-overflow__track::after {
  inset-inline-end: 0;
  background: linear-gradient(
    to inline-start,
    rgba(8, 16, 30, 0.98) 0%,
    rgba(8, 16, 30, 0.72) 45%,
    transparent 100%
  );
}

.qd-layout-compact .qc-waiting-overflow__chips {
  display: flex;
  align-items: center;
  width: max-content;
  min-height: var(--qc-waiting-track-min);
  padding: clamp(8px, 0.95vh, 12px) clamp(12px, 1.35vw, 20px);
  box-sizing: border-box;
}

.qd-layout-compact .qc-waiting-overflow__chips--static {
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  gap: clamp(12px, 1.1vh, 16px);
  animation: none;
}

.qd-layout-compact .qc-waiting-overflow__chips--static .qc-waiting-overflow__group {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.1vh, 16px);
  width: 100%;
  padding-inline-end: 0;
}

.qd-layout-compact .qc-waiting-overflow__chips--marquee {
  gap: clamp(24px, 2.8vw, 44px);
  will-change: transform;
  backface-visibility: hidden;
  animation: qc-waiting-marquee-ltr var(--qc-marquee-duration, 48s) linear infinite;
}

.qd-layout-compact .qc-waiting-overflow__chips--marquee.qc-waiting-overflow__chips--rtl {
  animation-name: qc-waiting-marquee-rtl;
}

.qd-layout-compact .qc-waiting-overflow__chips--marquee:hover {
  animation-play-state: paused;
}

.qd-layout-compact .qc-waiting-overflow__group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(12px, 1.2vw, 18px);
  padding-inline-end: 0;
}

.qd-layout-compact .qc-waiting-chip {
  direction: rtl;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 14px);
  min-height: var(--qc-waiting-chip-min-h);
  padding: 0 var(--qc-waiting-chip-pad-x);
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 22%, var(--qc-glass-border-strong));
  box-shadow:
    var(--qc-shadow-sm),
    0 0 16px color-mix(in srgb, var(--qc-accent-primary) 8%, transparent);
  white-space: nowrap;
  transition: border-color var(--qc-transition-smooth), box-shadow var(--qc-transition-smooth);
}

.qd-layout-compact .qc-waiting-chip::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(8px, 0.65vw, 10px);
  height: clamp(8px, 0.65vw, 10px);
  border-radius: 50%;
  background: var(--qc-accent-slate);
  box-shadow: 0 0 8px rgba(124, 138, 168, 0.5);
}

.qd-layout-compact .qc-waiting-chip__num {
  direction: ltr;
  color: var(--qc-accent-primary);
  font-size: var(--qc-waiting-chip-num-size);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-shadow: 0 0 10px color-mix(in srgb, var(--qc-accent-primary) 42%, transparent);
}

.qd-layout-compact .qc-waiting-chip__svc {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--qc-waiting-chip-svc-size);
  font-weight: 800;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.qd-layout-compact .qc-waiting-chip__wait {
  color: var(--qc-accent-amber, #fbbf24);
  font-size: var(--qc-waiting-chip-wait-size);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding-inline-start: clamp(8px, 0.75vw, 12px);
  border-inline-start: 2px solid color-mix(in srgb, var(--qc-accent-amber, #fbbf24) 45%, transparent);
}

/* ============================================================
   Footer
   ============================================================ */
.qd-layout-compact .qc-footer {
  direction: rtl;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
  min-height: clamp(84px, 10vh, 112px);
  padding: clamp(12px, 1.4vh, 18px) clamp(18px, 1.8vw, 30px);
  border-radius: 16px;
  color: #ffffff;
  background: var(--qc-glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  border-top: 1px solid var(--qc-glass-border);
  box-shadow: var(--qc-shadow-lg), var(--qc-shadow-inset-top);
  box-sizing: border-box;
}

.qd-layout-compact .qc-footer--compact {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.qd-layout-compact .qc-footer--compact .qc-footer__center {
  display: none;
}

.qd-layout-compact .qc-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--qc-accent-purple) 55%, transparent) 35%,
    color-mix(in srgb, var(--qc-accent-primary) 55%, transparent) 65%,
    transparent);
  opacity: 0.6;
}

.qd-layout-compact .qc-footer__care,
.qd-layout-compact .qc-footer__hours {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.qd-layout-compact .qc-footer__care {
  justify-content: flex-start;
}

.qd-layout-compact .qc-footer__hours {
  justify-content: flex-end;
}

.qd-layout-compact .qc-footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding-inline: clamp(10px, 1.2vw, 22px);
  border-inline: 1px solid color-mix(in srgb, var(--qc-glass-border) 85%, transparent);
}

.qd-layout-compact .qc-footer__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-footer__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--qc-accent-primary);
  background: color-mix(in srgb, var(--qc-accent-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-accent-primary) 22%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--qc-accent-primary) 12%, transparent);
}

.qd-layout-compact .qc-footer strong {
  display: block;
  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 800;
  line-height: 1.35;
  color: #ffffff;
}

.qd-layout-compact .qc-footer__care strong,
.qd-layout-compact .qc-footer__hours strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-layout-compact .qc-footer small {
  display: block;
  color: var(--qc-text-muted);
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.45;
  margin-top: 2px;
}

.qd-layout-compact .qc-footer__care small,
.qd-layout-compact .qc-footer__hours small {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qd-layout-compact .qc-footer__notice {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.qd-layout-compact .qc-footer__ticker {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.qd-layout-compact .qc-footer__live {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.qd-layout-compact .qc-footer__live[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-footer__announcement[hidden],
.qd-layout-compact .qc-footer__status[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-footer__announcement {
  display: block;
  color: var(--qc-accent-primary);
  font-size: clamp(12px, 0.88vw, 15px);
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 0 7px color-mix(in srgb, var(--qc-accent-primary) 30%, transparent);
}

.qd-layout-compact .qc-footer__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 800;
  line-height: 1.3;
}

.qd-layout-compact .qc-footer__status--warn {
  color: #ffcb73;
  background: color-mix(in srgb, var(--qc-accent-amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-accent-amber) 28%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--qc-accent-amber) 12%, transparent);
}

.qd-layout-compact .qc-footer__status--warn::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: qc-footer-pulse 1.6s var(--qc-ease-soft) infinite;
}

@keyframes qc-footer-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- Branch Stats ---------- */
.qd-layout-compact .qc-stats {
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
}

.qd-layout-compact .qc-stats[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-stat {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-inline: clamp(10px, 1.1vw, 20px);
  border-inline-start: 1px solid var(--qc-glass-border-strong);
}

.qd-layout-compact .qc-stat:last-child {
  border-inline-start: 0;
}

.qd-layout-compact .qc-stat strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  color: var(--qc-stat-color, #fff);
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px color-mix(in srgb, var(--qc-stat-color, #fff) 28%, transparent);
}

.qd-layout-compact .qc-stat > span {
  color: var(--qc-text-muted);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 700;
  white-space: nowrap;
}

.qd-layout-compact .qc-stat__unit {
  color: var(--qc-stat-color, #fff);
  font-size: 0.52em;
  font-weight: 800;
  line-height: 1;
}

.qd-layout-compact .qc-stat--waiting { --qc-stat-color: var(--qc-accent-purple-tint); }
.qd-layout-compact .qc-stat--today   { --qc-stat-color: var(--qc-accent-green-tint); }
.qd-layout-compact .qc-stat--serving { --qc-stat-color: var(--qc-accent-blue-tint); }
.qd-layout-compact .qc-stat--avg     { --qc-stat-color: var(--qc-accent-amber-tint); }

/* ============================================================
   Sidebar Call Card (square announcement hero)
   ============================================================ */
.qd-layout-compact .qc-call-bar[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-call-bar.qc-call-bar--redundant {
  display: none !important;
}

.qd-layout-compact .qc-call-bar.qc-call-bar--side {
  --qc-bar-accent: var(--qc-accent-green);
  direction: rtl;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(10px, 1.2vh, 14px);
  border: 1px solid color-mix(in srgb, var(--qc-bar-accent) 42%, transparent);
  border-radius: var(--qc-radius-card);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--qc-bar-accent) 14%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, rgba(12, 20, 36, 0.94), rgba(8, 14, 28, 0.98));
  -webkit-backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  box-shadow:
    var(--qc-shadow-lg),
    var(--qc-shadow-inset-top),
    0 0 24px color-mix(in srgb, var(--qc-bar-accent) 16%, transparent);
  opacity: 1;
  transform: none;
  overflow: hidden;
  transition: opacity 0.32s var(--qc-ease), border-color 0.24s var(--qc-ease), box-shadow 0.24s var(--qc-ease);
  z-index: 1;
  box-sizing: border-box;
}

.qd-layout-compact .qc-call-bar--side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 20%,
    color-mix(in srgb, var(--qc-bar-accent) 18%, transparent) 50%,
    transparent 80%);
  transform: translateX(-120%);
  pointer-events: none;
}

.qd-layout-compact .qc-call-bar--side.is-entering {
  animation: qc-side-call-in 0.34s var(--qc-ease) both;
}

.qd-layout-compact .qc-call-bar--side.is-entering::before {
  animation: qc-bar-sweep 0.9s var(--qc-ease-soft) 0.1s both;
}

.qd-layout-compact .qc-call-bar--side.is-exiting {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

@keyframes qc-side-call-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.qd-layout-compact .qc-call-bar--side.qc-call-bar--calling { --qc-bar-accent: var(--qc-accent-green); }
.qd-layout-compact .qc-call-bar--side.qc-call-bar--repeat  { --qc-bar-accent: var(--qc-call-repeat); }
.qd-layout-compact .qc-call-bar--side.qc-call-bar--final   { --qc-bar-accent: var(--qc-call-final); }

.qd-layout-compact .qc-call-bar--side .qc-call-bar__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vh, 10px);
  min-width: 0;
  flex: 1 1 auto;
  text-align: center;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__sound {
  width: clamp(30px, 2.4vw, 36px);
  height: clamp(30px, 2.4vw, 36px);
  border-radius: 10px;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__badge {
  min-height: 28px;
  padding: 0 10px;
  font-size: clamp(10px, 0.72vw, 12px);
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__number {
  width: 100%;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__service {
  font-size: clamp(11px, 0.82vw, 14px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__room {
  font-size: clamp(10px, 0.75vw, 12px);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__recent {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--qc-bar-accent) 18%, transparent);
}

.qd-layout-compact .qc-call-bar--side .qc-call-bar__chip {
  padding: 2px 8px;
  font-size: clamp(10px, 0.72vw, 12px);
}

/* Legacy horizontal call bar (unused in compact board) */
.qd-layout-compact .qc-call-bar:not(.qc-call-bar--side) {
  --qc-bar-accent: var(--qc-accent-green);
  flex: 0 0 auto;
  direction: rtl;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.4vw, 24px);
  min-height: clamp(70px, 8.5vh, 96px);
  padding: clamp(10px, 1.2vh, 16px) clamp(16px, 1.8vw, 30px);
  border: 1px solid color-mix(in srgb, var(--qc-bar-accent) 42%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--qc-bar-accent) 16%, rgba(10, 18, 33, 0.85)),
      rgba(10, 18, 33, 0.96)
    ),
    rgba(10, 18, 33, 0.92);
  -webkit-backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  backdrop-filter: blur(var(--qc-glass-blur-lg)) saturate(var(--qc-glass-saturate));
  box-shadow:
    var(--qc-shadow-lg),
    var(--qc-shadow-inset-top),
    0 0 28px color-mix(in srgb, var(--qc-bar-accent) 18%, transparent);
  opacity: 1;
  transform: translateY(0);
  overflow: hidden;
  transition: opacity 0.32s var(--qc-ease), transform 0.32s var(--qc-ease),
              border-color 0.24s var(--qc-ease), box-shadow 0.24s var(--qc-ease);
  z-index: 100;
  box-sizing: border-box;
}

/* One-time light sweep on entry — the announcement's "reveal" moment */
.qd-layout-compact .qc-call-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 20%,
    color-mix(in srgb, var(--qc-bar-accent) 22%, transparent) 50%,
    transparent 80%);
  transform: translateX(-120%);
  pointer-events: none;
}

.qd-layout-compact .qc-call-bar.is-entering {
  animation: qc-bar-in 0.34s var(--qc-ease) both;
}

.qd-layout-compact .qc-call-bar.is-entering::before {
  animation: qc-bar-sweep 0.9s var(--qc-ease-soft) 0.1s both;
}

.qd-layout-compact .qc-call-bar:not(.qc-call-bar--side).is-exiting {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.qd-layout-compact .qc-call-bar--calling { --qc-bar-accent: var(--qc-accent-green); }
.qd-layout-compact .qc-call-bar--repeat  { --qc-bar-accent: var(--qc-call-repeat); }
.qd-layout-compact .qc-call-bar--final   { --qc-bar-accent: var(--qc-call-final); }

.qd-layout-compact .qc-call-bar__main {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-call-bar__lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.qd-layout-compact .qc-call-bar__sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3.2vw, 46px);
  height: clamp(38px, 3.2vw, 46px);
  border-radius: 12px;
  color: var(--qc-bar-accent);
  background: color-mix(in srgb, var(--qc-bar-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-bar-accent) 26%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--qc-bar-accent) 20%, transparent);
}

.qd-layout-compact .qc-call-bar__sound svg {
  width: 52%;
  height: 52%;
  animation: qc-sound-pulse 2.4s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qc-call-bar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(32px, 4vh, 40px);
  padding: 0 14px;
  border-radius: 999px;
  color: var(--qc-bar-accent);
  background: color-mix(in srgb, var(--qc-bar-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--qc-bar-accent) 26%, transparent);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 900;
  white-space: nowrap;
}

.qd-layout-compact .qc-call-bar__number {
  direction: ltr;
  flex: 0 0 auto;
  color: #ffffff;
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--qc-bar-accent) 100%, white 30%),
    var(--qc-bar-accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--qc-bar-accent) 40%, transparent));
}

@supports not (background-clip: text) {
  .qd-layout-compact .qc-call-bar__number {
    background: none;
    color: #ffffff;
  }
}

.qd-layout-compact .qc-call-bar__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.qd-layout-compact .qc-call-bar__service {
  color: #ffffff;
  font-size: clamp(18px, 1.3vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.qd-layout-compact .qc-call-bar__room {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--qc-glass-border);
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 700;
  white-space: nowrap;
}

.qd-layout-compact .qc-call-bar__recent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: min(34%, 280px);
  overflow: hidden;
}

.qd-layout-compact .qc-call-bar__recent[hidden] {
  display: none !important;
}

.qd-layout-compact .qc-call-bar__chip {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--qc-glass-border);
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qd-layout-compact .qc-call-bar__chip--repeat {
  border-color: color-mix(in srgb, var(--qc-call-repeat) 38%, transparent);
  color: color-mix(in srgb, var(--qc-call-repeat) 72%, white);
  background: color-mix(in srgb, var(--qc-call-repeat) 12%, transparent);
}

.qd-layout-compact .qc-call-bar__chip--final {
  border-color: color-mix(in srgb, var(--qc-call-final) 38%, transparent);
  color: color-mix(in srgb, var(--qc-call-final) 72%, white);
  background: color-mix(in srgb, var(--qc-call-final) 12%, transparent);
}

/* Active row highlight during bar overlay */
.qd-layout-compact .qc-call-row--bar-active {
  --qc-row-accent: var(--qc-bar-highlight, var(--qc-accent-green));
  border-color: color-mix(in srgb, var(--qc-bar-highlight, var(--qc-accent-green)) 48%, var(--qc-glass-border));
  box-shadow: var(--qc-shadow-sm), 0 0 18px color-mix(in srgb, var(--qc-bar-highlight, var(--qc-accent-green)) 16%, transparent);
  animation: qc-bar-row-pulse 2.8s var(--qc-ease-soft) infinite;
}

.qd-layout-compact .qc-call-row--bar-active.qc-call-row--calling {
  animation: qc-calling-glow 3.2s var(--qc-ease-soft) infinite;
}

/* ============================================================
   Animations — calm, restrained, "breathing" rather than blinking
   ============================================================ */
@keyframes qc-bar-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes qc-bar-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

@keyframes qc-sound-pulse {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

@keyframes qc-bar-row-pulse {
  0%, 100% {
    box-shadow: var(--qc-shadow-sm),
                0 0 12px color-mix(in srgb, var(--qc-bar-highlight, var(--qc-accent-green)) 12%, transparent);
  }
  50% {
    box-shadow: var(--qc-shadow-md),
                0 0 22px color-mix(in srgb, var(--qc-bar-highlight, var(--qc-accent-green)) 24%, transparent);
  }
}

@keyframes qc-row-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qc-calling-glow {
  0%, 100% {
    box-shadow: var(--qc-shadow-sm),
                0 0 18px color-mix(in srgb, var(--qc-accent-green) 16%, transparent);
  }
  50% {
    box-shadow: var(--qc-shadow-md),
                0 0 28px color-mix(in srgb, var(--qc-accent-green) 28%, transparent);
  }
}

@keyframes qc-waiting-marquee-ltr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--qc-marquee-shift, 50%)), 0, 0); }
}

@keyframes qc-waiting-marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--qc-marquee-shift, 50%), 0, 0); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .qd-layout-compact .qc-call-row,
  .qd-layout-compact .qc-call-bar,
  .qd-layout-compact .qc-call-bar::before,
  .qd-layout-compact .qc-call-bar__sound svg,
  .qd-layout-compact .qb-header__live-dot.is-live,
  .qd-layout-compact .qb-header__btn--fullscreen.qb-header__btn--expand-hint::after,
  .qd-layout-compact .qc-waiting-overflow__chips--marquee,
  .qd-layout-compact .compact-side-qr__scanline,
  .qd-layout-compact .compact-side-qr__glow {
    animation: none !important;
    transition: none !important;
  }

  .qd-layout-compact .qc-waiting-overflow__chips--static {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .qd-layout-compact .qc-waiting-overflow__chips--static::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 1180px), (max-height: 760px) {
  .qd-layout-compact .qb-header {
    gap: clamp(12px, 1.6vw, 20px);
    min-height: clamp(72px, 9vh, 100px);
    padding-inline: clamp(16px, 2.2vw, 28px);
  }

  .qd-layout-compact .qb-header__facility {
    font-size: clamp(16px, 1.45vw, 24px);
  }

  .qd-layout-compact .qb-header__time {
    font-size: clamp(20px, 2vw, 34px);
  }

  .qd-layout-compact .qb-header__live-sub {
    display: none;
  }

  .qd-layout-compact .qb-header__date-stack {
    max-width: 16ch;
  }
}

@media (max-width: 980px), (max-height: 690px) {
  .qd-layout-compact .qc {
    padding: 14px;
    gap: 12px;
  }

  .qd-layout-compact .qc-main {
    grid-template-columns: minmax(240px, 26vw) minmax(0, 1fr);
    gap: 14px;
  }

  .qd-layout-compact .qc-col--ticket,
  .qd-layout-compact .qc-call-row__ticket {
    flex-basis: clamp(100px, 10vw, 140px);
    max-width: clamp(100px, 10vw, 140px);
  }

  .qd-layout-compact .qc-call-row__ticket {
    font-size: clamp(20px, 1.9vw, 30px);
  }

  .qd-layout-compact .qc-col--room,
  .qd-layout-compact .qc-call-row__room {
    flex-basis: clamp(78px, 7.5vw, 100px);
    max-width: clamp(78px, 7.5vw, 100px);
  }

  .qd-layout-compact .qc-col--status,
  .qd-layout-compact .qc-call-row__status {
    flex-basis: clamp(100px, 9.5vw, 132px);
    max-width: clamp(100px, 9.5vw, 132px);
  }

  .qd-layout-compact .qc-call-bar:not(.qc-call-bar--side) {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .qd-layout-compact .qc-call-bar:not(.qc-call-bar--side) .qc-call-bar__recent {
    max-width: 100%;
    flex-basis: 100%;
    justify-content: flex-end;
  }

  .qd-layout-compact .qc-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    min-height: auto;
    padding: 12px 16px;
  }

  .qd-layout-compact .qc-footer:not(.qc-footer--compact) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "care"
      "center"
      "hours";
  }

  .qd-layout-compact .qc-footer:not(.qc-footer--compact) .qc-footer__care { grid-area: care; }
  .qd-layout-compact .qc-footer:not(.qc-footer--compact) .qc-footer__center {
    grid-area: center;
    border-inline: 0;
    padding-inline: 0;
  }
  .qd-layout-compact .qc-footer:not(.qc-footer--compact) .qc-footer__hours { grid-area: hours; }

  .qd-layout-compact .qc-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .qd-layout-compact .qc-stat strong {
    font-size: clamp(18px, 1.8vw, 28px);
  }

  .qd-layout-compact .qc-footer__icon {
    width: 40px;
    height: 40px;
  }

  .qd-layout-compact .qc-waiting-overflow,
  .qd-layout-compact .qc-waiting-strip {
    padding: 10px 12px;
  }

  .qd-layout-compact .qc-waiting-chip {
    padding: 0 14px;
    min-height: 44px;
  }

  .qd-layout-compact .qc-waiting-chip__svc {
    max-width: 14ch;
  }
}

@media (max-width: 720px), (max-height: 620px) {
  .qd-layout-compact .qb-header {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding-block: 10px 12px;
  }

  .qd-layout-compact .qb-header__side--identity {
    width: 100%;
  }

  .qd-layout-compact .qb-header__side--status {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }

  .qd-layout-compact .qb-header__live {
    border-inline-end: 0;
    padding-inline-end: 0;
  }

  .qd-layout-compact .qb-header__time-wrap {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .qd-layout-compact .qc-main {
    grid-template-columns: minmax(200px, 28vw) minmax(0, 1fr);
  }

  .qd-layout-compact .qc-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "care"
      "center"
      "hours";
  }

  .qd-layout-compact .qc-footer__care { grid-area: care; }
  .qd-layout-compact .qc-footer__center {
    grid-area: center;
    border-inline: 0;
    padding-inline: 0;
  }
  .qd-layout-compact .qc-footer__hours { grid-area: hours; }

  .qd-layout-compact .qc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qd-layout-compact .qc-stat {
    border-inline-start: 0;
    padding: 8px 4px;
    border-bottom: 1px solid var(--qc-glass-border);
  }

  .qd-layout-compact .qc-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* ---------- Browser Compatibility Fallbacks ---------- */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .qd-layout-compact.display-shell {
    background:
      radial-gradient(circle at 12% 12%, rgba(24, 226, 205, 0.13), transparent 46%),
      radial-gradient(circle at 88% 18%, rgba(143, 123, 246, 0.11), transparent 48%),
      linear-gradient(160deg, #0a1526 0%, #060d1a 55%, #030509 100%);
  }
  .qd-layout-compact .qc-call-row__ticket {
    background: none;
    color: var(--qc-row-accent);
    text-shadow: 0 0 12px rgba(143, 123, 246, 0.25);
  }
  .qd-layout-compact .qc-call-bar__number {
    background: none;
    color: #ffffff;
  }
  .qd-layout-compact .qc-call-row--calling {
    background: rgba(13, 27, 49, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 0 15px rgba(35, 201, 142, 0.2);
  }
  .qd-layout-compact .qc-call-bar {
    background:
      linear-gradient(90deg, rgba(35, 201, 142, 0.16), rgba(10, 18, 33, 0.95)),
      rgba(10, 18, 33, 0.92);
  }
  .qd-layout-compact .qc-call-row--bar-active {
    background: rgba(10, 18, 33, 0.9);
  }
}