:root {
  --ctbar-h: 96px;
}

#centerTopBar {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--accent-soft);
  padding: calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    10px
    calc(12px + env(safe-area-inset-left));
  box-sizing: border-box;
  overflow: visible;
}

#schedulerRoot {
  position: absolute;
  top: var(--ctbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.ct-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.ct-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ct-group.right {
  margin-left: auto;
}

.ct-divider {
  width: 1px;
  height: 34px;
  background: var(--border-medium);
  box-shadow: 0 0 0 1px var(--overlay-soft);
  flex: 0 0 auto;
}

.ct-icon,
.ct-icon-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ui-light-08);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.ct-icon svg,
.ct-icon-toggle svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-main);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-icon:active,
.ct-icon-toggle:active {
  transform: translateY(1px);
}

.ct-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--overlay-strong);
}

.ct-icon-toggle.on {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
}

.ct-icon-toggle.live.on {
  box-shadow: 0 0 0 2px rgba(198,40,40,.22);
}

#ctGreetingFloat {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    rgba(var(--accent-rgb), .10)
  );
  color: var(--accent);
  padding: 10px 18px;
  border-radius: min(22px, calc(48px - (100% - 260px) * 0.08));
  font-size: 15px;
  font-weight: 700 !important;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0,0,0,.38),
    inset 0 0 0 1px var(--accent-soft);
  position: relative;
  margin: 8px 0 0 0 !important;
  max-width: calc(100vw - 32px);
  width: calc(100vw - 32px) !important;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
  animation: aiIdleBreath 14s ease-in-out infinite;
  will-change: opacity, box-shadow;
  z-index: 1;
  transition: height 0.45s cubic-bezier(.4,0,.2,1),
              max-height 0.45s cubic-bezier(.4,0,.2,1),
              padding 0.3s ease;
  box-sizing: border-box;
}

#ctAnnouncementPanel {
  display: none;
  margin-top: 10px;
  gap: 10px;
  background: var(--overlay-strong);
  backdrop-filter: blur(10px);
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-medium);
}

#ctAnnouncementPanel.active {
  display: flex;
}

#ctAnnouncementPanel input {
  flex: 1;
  padding: 14px 14px;
  border-radius: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-medium);
  color: var(--text-main);
  font-size: 15px;
}

#ctAnnouncementPanel button {
  padding: 0 16px;
  border-radius: 14px;
  border: none;
  font-weight: 900;
  font-size: 14px;
}

#ctAnnounceSend {
  background: var(--accent);
  color: var(--text-inverse);
}

#ctAnnounceCancel {
  background: var(--bg-elevated);
  color: var(--text-main);
}

#ctGreetingFloat.ct-ai-pill {
  position: relative;
  overflow: hidden;
}

@keyframes aiBreath{

  0% {
    box-shadow:
      0 6px 18px rgba(0,0,0,.45),
      inset 0 0 0 1px var(--accent-soft);
    background:
      linear-gradient(
        135deg,
        var(--accent-soft),
        rgba(var(--accent-rgb), .10)
      );
  }

  50% {
    box-shadow:
      0 10px 26px rgba(0,0,0,.55),
      inset 0 0 0 1px var(--accent-mid);
    background:
      linear-gradient(
        135deg,
        var(--accent-mid),
        rgba(var(--accent-rgb), .14)
      );
  }

  100% {
    box-shadow:
      0 6px 18px rgba(0,0,0,.45),
      inset 0 0 0 1px var(--accent-soft);
    background:
      linear-gradient(
        135deg,
        var(--accent-soft),
        rgba(var(--accent-rgb), .10)
      );
  }

}

@keyframes siriDot{

  0%, 100% { opacity: .25; }
  50% { opacity: .6; }

}

.ct-toggle-switch {
  width: 64px;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transform: scale(1.25);
  transform-origin: center;
  margin-right: 8px;
}

.ct-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--ui-light-08);
  border: 1px solid var(--border-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}

.ct-toggle-icon {
  width: 16px;
  height: 16px;
  opacity: .45;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-toggle-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-main);
}

.ct-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--bg-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,.45),
    inset 0 0 0 1px var(--border-medium);
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              background .25s ease;
}

.ct-toggle-switch[data-state="on"] .ct-toggle-thumb {
  transform: translateX(28px);
  background: var(--accent);
}

.ct-toggle-switch[data-state="on"] .ct-toggle-icon.right {
  opacity: 1;
}

.ct-toggle-switch[data-state="off"] .ct-toggle-icon.left {
  opacity: 1;
}

#magicScrim {
  pointer-events: none;
}

#magicScrim.show {
  pointer-events: auto;
}

#centerTopBar,
#centerTopBar * {
  pointer-events: auto;
  touch-action: manipulation;
}

@keyframes aiIdleBreath{

  0%, 100% {
    opacity: 0.92;
    box-shadow:
      0 6px 18px rgba(0,0,0,.38),
      inset 0 0 0 1px var(--accent-soft);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 10px 26px rgba(0,0,0,.48),
      inset 0 0 0 1px var(--accent-mid);
  }

}

#ctGreetingFloat.ct-siri-enter {
  animation: aiFadeIn 2.2s cubic-bezier(.2,.7,.2,1) forwards;
}

#ctGreetingFloat.ct-siri-exit {
  animation: aiFadeOut 1.8s ease forwards;
}

@keyframes aiFadeIn{

  from {
    opacity: 0;
    transform: translateY(2px);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

}

@keyframes aiFadeOut{

  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(1.5px);
  }

}

@keyframes siriDotSoft{

  0%, 100% { opacity: .22; }
  50% { opacity: .5; }

}

#ctGreetingFloat.interactive {
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--accent-mid),
    0 10px 28px var(--accent-glow-soft);
}

#ctGreetingFloat.interactive:hover {
  box-shadow: 0 0 0 2px var(--accent-strong),
    0 14px 36px var(--accent-glow-mid);
}

#ctGreetingFloat.interactive:active {
  transform: scale(0.99);
}

#centerTopBar .ct-row {
  position: relative;
  z-index: 3;
}

@keyframes ctPulse{

  0%   { transform: scale(1);   opacity: .85; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: .85; }

}

#ctShopToggle[data-state="on"] .ct-toggle-track {
  border-color: var(--success);
  box-shadow: 0 0 0 1px rgba(var(--success-rgb), .45),
    0 0 18px rgba(var(--success-rgb), .35);
}

#ctShopToggle[data-state="on"] .ct-toggle-thumb {
  background: var(--success);
  box-shadow: 0 4px 10px rgba(0,0,0,.45),
    0 0 14px rgba(var(--success-rgb), .6);
}

#ctShopToggle[data-state="on"] .ct-toggle-icon.right {
  opacity: 1;
  animation: ctPulse 1.8s ease-in-out infinite;
}

#ctShopToggle[data-state="on"] svg {
  stroke: var(--success);
}

#ctLiveToggle[data-state="on"] .ct-toggle-track {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-mid),
    0 0 22px var(--accent-glow-mid);
}

#ctLiveToggle[data-state="on"] .ct-toggle-thumb {
  background: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,.45),
    0 0 18px var(--accent-glow-strong);
}

#ctLiveToggle[data-state="on"] .ct-toggle-icon.right {
  opacity: 1;
  animation: ctPulse 1.6s ease-in-out infinite;
}

#ctLiveToggle[data-state="on"] svg {
  stroke: var(--accent);
}

.ct-toggle-switch[data-state="off"] .ct-toggle-icon {
  opacity: .35;
}

.ct-toggle-switch[data-state="off"] svg {
  stroke: var(--text-secondary);
}

.ct-icon.ct-announce-small,
.ct-icon.ct-shophours-small {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-light-08);
  border: 1px solid var(--border-medium);
  transition: background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.ct-icon.ct-announce-small svg,
.ct-icon.ct-shophours-small svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.ct-icon.ct-announce-small:hover,
.ct-icon.ct-shophours-small:hover {
  background: var(--ui-light-18);
}

.ct-icon.ct-shophours-small.shop-open {
  border-color: var(--success);
  box-shadow: 0 0 0 2px rgba(var(--success-rgb), .35);
}

.ct-live.is-live {
  box-shadow: 0 0 0 1px var(--accent-mid),
    0 0 14px var(--accent-glow-strong);
  animation: goldLiveGlow 2.4s ease-in-out infinite;
  border-radius: 14px;
}

@keyframes goldLiveGlow{

  0% {
    box-shadow:
      0 0 0 1px var(--accent-soft),
      0 0 10px var(--accent-glow-soft);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--accent-strong),
      0 0 18px var(--accent-glow-strong);
  }
  100% {
    box-shadow:
      0 0 0 1px var(--accent-soft),
      0 0 10px var(--accent-glow-soft);
  }

}

.ct-live.is-live svg circle {
  transform-origin: center;
  transform-box: fill-box;
  animation: liveRedPulse 1.4s ease-in-out infinite;
}

@keyframes liveRedPulse{

  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.6); opacity: .55; }
  100% { transform: scale(1);   opacity: 1; }

}

.ct-live svg {
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
  transform-origin: center;
}

.ct-live.is-live svg {
  transform: scale(1.18);
  animation: liveSvgPop 0.32s ease-out;
}

@keyframes liveSvgPop{

  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.22); }
  100% { transform: scale(1.18); }

}

#centerTopBar .new-booking-icon,
#centerTopBar .ct-newBooking,
#centerTopBar .newBookingIcon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  transform: none !important;
}