/* Responsive/layout overrides for embedding the voice agent UI inside the
   ITC app's chat popup. Purely presentational — no functional classes,
   ids, or JS hooks used by main.js/gemini-client.js/media-handler.js are
   touched here.

   Layout goal: everything (header, mic/session area, all 5 capability
   cards, powered-by bar) fits inside the popup viewport at once — no
   scrolling anywhere, on mobile or desktop. #voiceAgentRoot is a fixed-
   height flex column; header/footer/powered-by are fixed-size flex-shrink:0
   rows, and the mic area (flex:1) absorbs whatever vertical space is left,
   so the total always exactly matches the popup's height. */

#voiceAgentRoot,
#voiceAgentRoot * {
  box-sizing: border-box;
}

#voiceAgentRoot {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100%;
  overflow: hidden !important;
  width: 100%;
}

/* Scaled up + re-tuned for this smaller popup container (the original was
   sized/blurred for a full page) so the soft red gradient wash still reads
   clearly instead of shrinking down to almost nothing. */
#voiceAgentRoot .bg-glow {
  position: absolute;
  width: 85%;
  height: 85%;
  bottom: -20%;
  right: -10%;
  filter: blur(90px);
  opacity: 0.09;
}

/* ── Header (fixed, compact) ─────────────────────────────────────────────── */
#voiceAgentRoot header {
  flex: 0 0 auto;
  padding: 8px 12px;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 10px;
}

#voiceAgentRoot header img {
  height: 50px;
  width: auto;
}

#voiceAgentRoot header > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4px;
  column-gap: 8px;
}

#voiceAgentRoot .test-data-btn {
  padding: 5px 12px;
  white-space: nowrap;
  font-size: 11px;
}

/* ── Mic / session area: flexible spacer, absorbs the remaining height ──── */
#voiceAgentRoot main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#voiceAgentRoot main > div[style*="aspect-ratio"] {
  aspect-ratio: auto !important;
  max-width: 100% !important;
  width: 100%;
  height: auto !important;
  min-height: 0;
}

#voiceAgentRoot .start-btn {
  width: 168px !important;
  height: 168px !important;
  gap: 10px !important;
}

#voiceAgentRoot .start-btn svg {
  width: 42px !important;
  height: 42px !important;
}

#voiceAgentRoot #start-label {
  font-size: 11px !important;
}

/* No "display" override here: main.js toggles visibility by adding/removing
   the "hidden" class (display:none!important), and this element already
   carries Tailwind's own "flex" class for when it's shown — an !important
   display override here would fight that toggle and force it always-visible. */
#voiceAgentRoot #active-view:not(.hidden) {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  position: relative;
  min-height: 0;
}

/* Tall enough for the bars' 80px animation peak (style.css @keyframes wave),
   so they never spill into the End Session button below. */
#voiceAgentRoot #waveform {
  position: relative !important;
  inset: auto !important;
  height: 88px;
}

#voiceAgentRoot .bar {
  width: 4px !important;
}

/* Short screens: the full-size waveform would push the popup past its
   no-scroll height, so the bars peak lower (and the box and gap shrink to
   match) — still clear of the End Session button. */
@media (max-height: 820px) {
  #voiceAgentRoot #active-view:not(.hidden) {
    gap: 16px;
  }
  #voiceAgentRoot #waveform {
    height: 44px;
  }
  #voiceAgentRoot .bar {
    animation-name: wave-compact;
  }
}

@keyframes wave-compact {
  0%, 100% {
    height: 12px;
    opacity: 0.3;
  }
  50% {
    height: 40px;
    opacity: 1.0;
  }
}

#voiceAgentRoot #stopBtn {
  margin-top: 0 !important;
  position: static !important;
  transform: none !important;
  padding: 8px 16px !important;
}

/* ── Capability cards footer (fixed, compact — one column, stacked) ──────── */
/* !important throughout: Tailwind's CDN script injects its own stylesheet
   asynchronously (after this one), so its "flex-wrap" utility class on this
   same element can otherwise win the cascade by source order alone and
   silently turn this into column-wrapping (masonry-style) instead of a
   single stacked column. */
#voiceAgentRoot footer {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 14px !important;
}

#voiceAgentRoot footer > div {
  max-width: none !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#voiceAgentRoot footer > div > div:first-child {
  padding: 5px !important;
}

#voiceAgentRoot footer > div > div:first-child svg {
  width: 13px !important;
  height: 13px !important;
}

#voiceAgentRoot footer h3 {
  font-size: 10px !important;
  margin-bottom: 1px !important;
}

#voiceAgentRoot footer p {
  font-size: 12px !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#voiceAgentRoot .tool-tooltip {
  width: min(16rem, 82vw);
  left: 0;
  right: auto;
  transform: translateY(8px);
}

#voiceAgentRoot .capability-card:hover .tool-tooltip,
#voiceAgentRoot .capability-card:focus-within .tool-tooltip {
  transform: translateY(0);
}

#voiceAgentRoot .tool-tooltip::after {
  left: 18px;
  right: auto;
  transform: none;
}

/* ── Powered-by bar (fixed, compact) ─────────────────────────────────────── */
#voiceAgentRoot > div.flex.items-center.justify-center.gap-2 {
  flex: 0 0 auto;
  padding: 4px 0;
}

/* ── Modals opened from inside the popup (these still scroll their own
   content — a data table or a map is expected to, independent of the "no
   scroll" rule for the main popup layout) ─────────────────────────────── */
#voiceAgentRoot .modal-overlay {
  padding: 12px;
}

#voiceAgentRoot .modal-card {
  max-width: 100%;
  width: 100%;
  max-height: 90vh;
  padding: 16px;
  overflow-y: auto;
}

#voiceAgentRoot .auth-table {
  font-size: 10.5px;
}

#voiceAgentRoot .modal-table-wrap {
  max-height: 220px;
}