/* Immersive Micro-Theater: scoped ambient layout for the shared chat runtime. */
#wpcss-widget-root.wpcss-theme-immersive-micro-theater {
  --wpcss-theater-x: 72%;
  --wpcss-theater-y: 28%;
  --wpcss-theater-panel: rgba(10, 16, 29, 0.76);
  --wpcss-theater-line: rgba(255, 255, 255, 0.13);
  --wpcss-text-main: #f8fafc;
  --wpcss-text-muted: #a8b5c7;
}

#wpcss-widget-root.wpcss-theme-immersive-micro-theater.wpcss-is-open {
  inset: 0 !important;
  z-index: 999999;
  display: grid;
  width: 100vw;
  height: 100dvh;
  place-items: center;
  pointer-events: none;
}

#wpcss-widget-root.wpcss-theme-immersive-micro-theater.wpcss-is-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(7, 12, 22, 0.54);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  animation: wpcssTheaterVeilIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#wpcss-widget-root.wpcss-theme-immersive-micro-theater.wpcss-is-open::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.72;
  background:
    radial-gradient(circle at var(--wpcss-theater-x) var(--wpcss-theater-y), color-mix(in srgb, var(--wpcss-primary, #2563eb) 28%, transparent), transparent 34%),
    radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.12), transparent 28%);
  pointer-events: none;
  transition: background-position 0.8s ease;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel {
  width: min(980px, calc(100vw - 80px)) !important;
  height: min(720px, calc(100dvh - 80px)) !important;
  overflow: hidden;
  border: 1px solid var(--wpcss-theater-line) !important;
  border-radius: 22px !important;
  background: var(--wpcss-theater-panel) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(42px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(42px) saturate(150%) !important;
  pointer-events: auto;
  animation: wpcssTheaterPanelIn 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel::before {
  content: "";
  position: absolute;
  top: -90px;
  left: 8%;
  width: 360px;
  height: 180px;
  border-radius: 50%;
  opacity: 0.34;
  background: color-mix(in srgb, var(--wpcss-primary, #2563eb) 54%, #38bdf8);
  filter: blur(70px);
  pointer-events: none;
  animation: wpcssTheaterGlow 8s ease-in-out infinite alternate;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-header {
  height: 64px !important;
  flex-basis: 64px !important;
  padding: 0 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-header strong {
  color: #f8fafc !important;
  font-size: 15px !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-header > div:first-child > span {
  color: #a8b5c7 !important;
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-icon-button {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-body {
  padding: 14px 18px 18px;
  background: transparent !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-thread-view,
.wpcss-theme-immersive-micro-theater .wpcss-start {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-imt-main,
.wpcss-theme-immersive-micro-theater .wpcss-imt-context {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.wpcss-theme-immersive-micro-theater .wpcss-imt-main {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 0;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-imt-main {
  overflow-y: auto;
}

.wpcss-theme-immersive-micro-theater .wpcss-imt-context {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: thin;
}

.wpcss-theme-immersive-micro-theater .wpcss-imt-context-title {
  padding: 2px;
  color: #dbe6f4;
  font-size: 11px;
  font-weight: 720;
}

.wpcss-theme-immersive-micro-theater .wpcss-status-summary,
.wpcss-theme-immersive-micro-theater .wpcss-service-summary {
  display: grid !important;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
}

.wpcss-theme-immersive-micro-theater .wpcss-status-summary strong,
.wpcss-theme-immersive-micro-theater .wpcss-service-summary strong {
  color: #e2e8f0;
  font-size: 11px;
}

.wpcss-theme-immersive-micro-theater .wpcss-status-summary span,
.wpcss-theme-immersive-micro-theater .wpcss-service-summary span {
  color: #94a3b8;
  font-size: 10px;
}

.wpcss-theme-immersive-micro-theater .wpcss-history-switcher {
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-history-switcher span {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  color: #a8b5c7 !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-history-switcher select {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(7, 12, 22, 0.48) !important;
  color: #e2e8f0 !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-history-switcher::after {
  right: 17px;
  top: auto;
  bottom: 17px;
}

.wpcss-theme-immersive-micro-theater .wpcss-messages {
  padding: 4px 6px 18px;
  scroll-behavior: smooth;
}

.wpcss-theme-immersive-micro-theater .wpcss-message-bubble {
  max-width: 76%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.085);
  color: #edf4ff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}

.wpcss-theme-immersive-micro-theater .wpcss-message-user .wpcss-message-bubble,
.wpcss-theme-immersive-micro-theater .wpcss-message-guest .wpcss-message-bubble {
  border-color: color-mix(in srgb, var(--wpcss-primary, #2563eb) 55%, transparent);
  background: color-mix(in srgb, var(--wpcss-primary, #2563eb) 76%, rgba(10, 16, 29, 0.82));
}

.wpcss-theme-immersive-micro-theater .wpcss-reply-form,
.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-form {
  margin-right: -18px !important;
  margin-left: -18px !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
  background: rgba(7, 12, 22, 0.44) !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-reply-form textarea,
.wpcss-theme-immersive-micro-theater .wpcss-field input,
.wpcss-theme-immersive-micro-theater .wpcss-field textarea,
.wpcss-theme-immersive-micro-theater .wpcss-upload-button {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #eef5ff !important;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-welcome {
  border-left-color: color-mix(in srgb, var(--wpcss-primary, #2563eb) 75%, #7dd3fc);
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-presets {
  grid-template-columns: 1fr;
  gap: 7px;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-preset-item {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-preset-question {
  min-height: 48px;
  color: #dbe6f4;
}

.wpcss-theme-immersive-micro-theater .wpcss-panel-start .wpcss-preset-answer p {
  color: #a8b5c7;
}

@keyframes wpcssTheaterVeilIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wpcssTheaterPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes wpcssTheaterGlow {
  from { transform: translate3d(-3%, -2%, 0) scale(0.94); opacity: 0.26; }
  to { transform: translate3d(5%, 5%, 0) scale(1.08); opacity: 0.42; }
}

@media (max-width: 760px) {
  .wpcss-theme-immersive-micro-theater .wpcss-panel {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px !important;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-panel-body {
    padding: 8px;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-thread-view,
  .wpcss-theme-immersive-micro-theater .wpcss-start {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-imt-main {
    grid-row: 2;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-imt-context {
    grid-row: 1;
    flex-direction: row;
    max-height: 102px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 9px;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-imt-context > * {
    flex: 0 0 min(210px, 72vw);
  }

  .wpcss-theme-immersive-micro-theater .wpcss-imt-context-title {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wpcss-widget-root.wpcss-theme-immersive-micro-theater.wpcss-is-open::before,
  .wpcss-theme-immersive-micro-theater .wpcss-panel,
  .wpcss-theme-immersive-micro-theater .wpcss-panel::before {
    animation: none !important;
  }

  .wpcss-theme-immersive-micro-theater .wpcss-messages {
    scroll-behavior: auto;
  }
}