/* Composer responsiveness is viewport-based unless the public Root opts into
   its own inline-size container. The semantic hooks below intentionally keep
   information density separate from pointer target sizing. */
.og-composer[data-og-responsive-basis="container"] {
  container: og-composer / inline-size;
  --_og-c-input-x: 1rem;
  --_og-c-input-size: var(--og-font-size-composer-wide);
  --_og-c-input-leading: var(--og-line-height-composer-wide);
  --_og-c-gap: 0.375rem;
  --_og-c-footer-x: 0.625rem;
  --_og-c-footer-b: 0.625rem;
  --_og-c-controls-wrap: wrap;
  --_og-c-hint-display: inline;
  --_og-c-model-max: 16rem;
  --_og-c-model-x: 0.625rem;
  --_og-c-native-max: 180px;
  --_og-c-recovered-max: 14rem;
  --_og-c-error-max: 14rem;
  --og-model-policy-label-full-display: inline;
  --og-model-policy-label-short-display: none;
  --og-model-policy-effort-display: inline;
  --og-model-policy-chevron-display: inline;
}

[data-og-responsive-basis="container"] .og-composer-input {
  padding-inline: var(--_og-c-input-x);
  font-size: var(--_og-c-input-size);
  line-height: var(--_og-c-input-leading);
}

[data-og-responsive-basis="container"] .og-composer-footer {
  gap: var(--_og-c-gap);
  padding-inline: var(--_og-c-footer-x);
  padding-bottom: var(--_og-c-footer-b);
}

[data-og-responsive-basis="container"] .og-composer-footer[data-og-stack-actions] {
  flex-wrap: wrap;
}

[data-og-responsive-basis="container"] .og-composer-controls {
  flex-wrap: var(--_og-c-controls-wrap);
}

[data-og-responsive-basis="container"]
  :is(.og-composer-controls, .og-composer-actions) {
  gap: var(--_og-c-gap);
}

[data-og-responsive-basis="container"]
  :is(.og-composer-hint, .og-command-description) {
  display: var(--_og-c-hint-display);
}

[data-og-responsive-basis="container"] .og-model-policy-trigger {
  height: var(--og-model-picker-trigger-height);
  max-width: var(--_og-c-model-max);
  padding-inline: var(--_og-c-model-x);
}

[data-og-responsive-basis="container"] .og-model-policy-label-full {
  display: var(--og-model-policy-label-full-display);
}

[data-og-responsive-basis="container"] .og-model-policy-label-short {
  display: var(--og-model-policy-label-short-display);
}

/* A host row too narrow for even the short model name (a phone composer that
   also offers Queue or Steer beside Send) shows the pill's icon alone rather
   than a clipped sliver of the name. */
@container model-controls (max-width: 7.999rem) {
  [data-og-responsive-basis="container"] .og-model-policy-label-short {
    display: none;
  }
}

[data-og-responsive-basis="container"] .og-model-policy-effort {
  display: var(--og-model-policy-effort-display);
}

[data-og-responsive-basis="container"] .og-model-policy-chevron {
  display: var(--og-model-policy-chevron-display);
}

/* Pause steps aside on a narrow composer while there is a draft, so Send and
   its Queue/Steer choice keep their room. */
[data-og-responsive-basis="container"] .og-composer-pause-yields {
  display: inline-flex;
}

[data-og-responsive-basis="container"] .og-model-picker-native {
  max-width: var(--_og-c-native-max);
}

[data-og-responsive-basis="container"] .og-transcription-recovered-label {
  max-width: var(--_og-c-recovered-max);
}

[data-og-responsive-basis="container"] .og-transcription-error-label {
  max-width: var(--_og-c-error-max);
}

[data-og-responsive-basis="container"]
  :is(.og-realtime-primary, .og-realtime-model-trigger) {
  height: 2rem;
}

[data-og-responsive-basis="container"] .og-realtime-primary {
  width: 2rem;
}

[data-og-responsive-basis="container"] .og-realtime-model-trigger {
  display: inline-flex;
  width: 1.5rem;
}

[data-og-responsive-basis="container"]
  .og-realtime-control[data-model-menu="split-desktop"]
  .og-realtime-primary {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

@container og-composer (max-width: 47.999rem) {
  [data-og-responsive-basis="container"] :where(*) {
    --_og-c-input-x: 0.875rem;
    --_og-c-input-size: var(--og-font-size-composer);
    --_og-c-input-leading: var(--og-line-height-composer);
  }
}

@container og-composer (max-width: 39.999rem) {
  [data-og-responsive-basis="container"] :where(*) {
    /* The phone row carries attach, dictate, model, voice, Pause and Send;
       44px targets space themselves, so tight gaps and a chevron-free model
       pill leave room for the model's short name. */
    --_og-c-gap: 0.125rem;
    --_og-c-footer-x: 0.5rem;
    --_og-c-footer-b: 0.5rem;
    --_og-c-controls-wrap: nowrap;
    --_og-c-hint-display: none;
    --_og-c-model-max: 7.5rem;
    --_og-c-model-x: 0.375rem;
    --_og-c-native-max: 7.5rem;
    --_og-c-recovered-max: 8rem;
    --_og-c-error-max: 8rem;
    --og-model-policy-label-full-display: none;
    --og-model-policy-label-short-display: inline;
    --og-model-policy-effort-display: none;
    --og-model-policy-chevron-display: none;
  }

  [data-og-responsive-basis="container"] .og-composer-footer {
    flex-wrap: nowrap;
    align-items: center;
  }

  [data-og-responsive-basis="container"] .og-composer-actions {
    flex-wrap: nowrap;
  }

  [data-og-responsive-basis="container"] .og-composer-pause-yields {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-realtime-control[data-model-menu="split-desktop"]
    .og-realtime-primary {
    border-radius: var(--og-radius-md);
  }

  [data-og-responsive-basis="container"]
    .og-realtime-control[data-model-menu="split-desktop"]
    .og-realtime-model-trigger {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-transcription-capturing]
    .og-composer-controls
    > :not([data-transcription-capturing]) {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-transcription-capturing]
    .og-composer-actions {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-transcription-attention]
    .og-composer-controls
    > :not([data-transcription-attention]) {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-transcription-attention]
    .og-composer-actions
    > :not([data-analytics-action]) {
    display: none;
  }

  [data-og-responsive-basis="container"]
    [data-transcription-attention]
    :is(.og-transcription-recovered-label, .og-transcription-error-label) {
    max-width: 15rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.2;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-realtime-attention]
    .og-composer-controls {
    display: none;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-realtime-attention]
    .og-composer-actions,
  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-realtime-attention]
    .og-realtime-control,
  [data-og-responsive-basis="container"] .og-composer-footer [data-realtime-attention] {
    flex: 1 1 auto;
    min-width: 0;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer[data-footer-realtime-attention]
    .og-composer-actions
    > :not(.og-realtime-control) {
    flex-shrink: 0;
  }

  [data-og-responsive-basis="container"]
    .og-composer-footer
    [data-realtime-attention]
    .og-realtime-failure-label {
    max-width: none;
    -webkit-line-clamp: 3;
  }
}

@container og-composer (max-width: 24.999rem) {
  .og-composer[data-og-responsive-basis="container"] .og-composer-resume-label-long {
    display: none;
  }

  .og-composer[data-og-responsive-basis="container"] .og-composer-resume-label-short {
    display: inline;
  }
}

@media (pointer: coarse) {
  [data-og-responsive-basis="container"] .og-model-policy-trigger,
  [data-og-responsive-basis="container"] .og-realtime-primary,
  [data-og-responsive-basis="container"] .og-realtime-model-trigger {
    height: 2.75rem;
  }

  [data-og-responsive-basis="container"] .og-realtime-primary,
  [data-og-responsive-basis="container"] .og-realtime-model-trigger {
    width: 2.75rem;
  }
}

/* Portalled menus retain theme/density tokens from their trigger and, in
   container mode, the live composer width supplied by ResizeObserver. */
.og-model-policy-menu {
  box-sizing: border-box;
  width: min(
    var(--og-model-picker-menu-width),
    calc(var(--og-portal-source-inline-size, 100vw) - 1rem),
    var(--radix-popover-content-available-width, 100vw)
  );
  max-width: calc(100vw - 1rem);
}

.og-realtime-menu {
  box-sizing: border-box;
  width: min(
    var(--og-realtime-menu-width),
    calc(var(--og-portal-source-inline-size, 100vw) - 1rem),
    var(--radix-dropdown-menu-content-available-width, 100vw)
  );
  max-width: calc(100vw - 1rem);
}

/* OpenGeniChat: the chat list is a sidebar when the component is wide and a
   drawer behind a menu button when it is narrow. Container-based so it adapts
   inside host panels, not only to the viewport. */
.og-chat {
  container: og-chat / inline-size;
}

.og-chat .og-chat-sidebar {
  display: none;
}

.og-chat .og-chat-menu {
  display: flex;
}

@container og-chat (min-width: 44rem) {
  .og-chat .og-chat-sidebar {
    display: flex;
  }

  .og-chat .og-chat-menu,
  .og-chat .og-chat-drawer {
    display: none;
  }
}