/* QPal sidebar glass balance and compact QBao floating chat.
   Presentation only: navigation, assessment, Workers AI, allowance, KV cache,
   and response-rendering logic remain unchanged. */

/* Keep navigation content fully opaque while making only the drawer surfaces
   translucent. The light gradient averages about 90% opacity; dark about 87%. */
.qpal-navigation-drawer {
  background:
    radial-gradient(
      circle at 10% 3%,
      rgba(255, 107, 53, 0.13) 0%,
      rgba(255, 107, 53, 0.045) 23%,
      transparent 43%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(243, 243, 241, 0.90) 58%,
      rgba(229, 229, 225, 0.88) 100%
    ) !important;
  backdrop-filter: blur(20px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(112%) !important;
}

html.dark-mode .qpal-navigation-drawer {
  background:
    radial-gradient(
      circle at 10% 3%,
      rgba(255, 107, 53, 0.14) 0%,
      rgba(255, 107, 53, 0.05) 24%,
      transparent 44%
    ),
    linear-gradient(
      155deg,
      rgba(20, 20, 20, 0.89) 0%,
      rgba(36, 36, 36, 0.87) 58%,
      rgba(48, 48, 48, 0.85) 100%
    ) !important;
  backdrop-filter: blur(21px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(21px) saturate(110%) !important;
}

.qpal-navigation-drawer-header,
.qpal-navigation-footer {
  background: color-mix(in srgb, var(--surface-elevated) 54%, transparent) !important;
  backdrop-filter: blur(15px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(108%) !important;
}

/* Slightly reduce ASK QBAO without changing its label, availability, or click
   handling. The assessment action-bar version receives the smallest change. */
.qbao-trigger {
  width: min(100%, 320px);
}

.action-bar .qbao-inline-host {
  flex-basis: 144px;
  max-width: 144px;
}

/* Open QBao as a compact floating chat window over a softly blurred backdrop,
   instead of a visually heavy full-size modal panel. */
.qbao-overlay {
  place-items: center !important;
  background: rgba(10, 10, 10, 0.50) !important;
  backdrop-filter: blur(12px) saturate(92%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(92%) !important;
}

html:not(.dark-mode) .qbao-overlay {
  background: rgba(23, 23, 23, 0.32) !important;
}

.qbao-dialog {
  width: min(440px, calc(100vw - 40px)) !important;
  height: min(550px, 68dvh) !important;
  min-height: min(410px, 68dvh) !important;
  border-radius: 24px !important;
  background-color: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  background-image: linear-gradient(
    155deg,
    color-mix(in srgb, var(--surface-elevated) 94%, transparent),
    color-mix(in srgb, var(--surface) 90%, transparent)
  ) !important;
  box-shadow:
    0 28px 74px rgba(0, 0, 0, 0.44),
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    var(--inner-highlight) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
}

/* Keep the typing animation, but remove the assistant bubble until actual
   answer or error content replaces the loading state. */
.qbao-message-typing .qbao-message-bubble {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.qbao-message-typing .qbao-typing-dots {
  padding-inline: 2px;
}

@media (max-width: 600px) {
  .action-bar .qbao-inline-host {
    flex-basis: 104px;
    max-width: 104px;
  }

  .action-bar .qbao-trigger {
    padding-inline: 8px;
    font-size: 10.5px;
  }
}

@media (max-width: 560px) {
  .qbao-overlay {
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left)) !important;
  }

  .qbao-dialog {
    width: min(420px, calc(100vw - 36px)) !important;
    height: min(525px, 67dvh) !important;
    min-height: min(400px, 67dvh) !important;
    border-radius: 22px !important;
  }
}