/* Falcon 3.6.26.47
   Ask Ordonna microphone support.
   IMPORTANT:
   - Do NOT control the mobile header layout here.
   - The user's .ao-header-* CSS owns positioning/size/spacing.
   - Falcon only supplies listening-state styling and protects the mic
     from theme active/focus transforms.
*/

/* =========================================================
   EXACT MOBILE/TABLET HEADER MIC
   ========================================================= */

@media (max-width: 1024px) {

  .ao-header-search .ao-header-field {
    position: relative !important;
  }

  /* Preserve the header's own absolute mic placement. */
  .ao-header-search .ao-header-mic,
  .ao-header-search .ao-header-mic:hover,
  .ao-header-search .ao-header-mic:focus,
  .ao-header-search .ao-header-mic:focus-visible,
  .ao-header-search .ao-header-mic:active {
    position: absolute !important;
    top: 50% !important;
    right: 3px !important;
    left: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;

    transform: translateY(-50%) !important;
    translate: none !important;

    align-self: auto !important;
    flex: none !important;
  }

  /* Arabic / RTL mirrors the mic to the left edge of the field. */
  html[dir="rtl"] .ao-header-search .ao-header-mic,
  html[lang^="ar"] .ao-header-search .ao-header-mic,
  body.rtl .ao-header-search .ao-header-mic {
    left: 3px !important;
    right: auto !important;
  }

  /* Listening = red, without changing size or position. */
  .ao-header-search .ao-header-mic.is-listening {
    background: #e31b23 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
  }

  .ao-header-search .ao-header-mic.is-listening svg {
    fill: #fff !important;
  }

  /* Keep English text clear of the mic. */
  html:not([dir="rtl"]) .ao-header-search .ao-header-field input {
    padding-right: 42px !important;
  }

  /* Keep Arabic text clear of the mirrored mic. */
  html[dir="rtl"] .ao-header-search .ao-header-field input,
  html[lang^="ar"] .ao-header-search .ao-header-field input,
  body.rtl .ao-header-search .ao-header-field input {
    padding-left: 42px !important;
    padding-right: 8px !important;
    text-align: right !important;
    direction: rtl !important;
  }
}

/* Match the user's mobile dimensions exactly. */
@media (max-width: 600px) {
  .ao-header-search .ao-header-mic,
  .ao-header-search .ao-header-mic:hover,
  .ao-header-search .ao-header-mic:focus,
  .ao-header-search .ao-header-mic:focus-visible,
  .ao-header-search .ao-header-mic:active {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  html:not([dir="rtl"]) .ao-header-search .ao-header-field input {
    padding-right: 38px !important;
  }

  html[dir="rtl"] .ao-header-search .ao-header-field input,
  html[lang^="ar"] .ao-header-search .ao-header-field input,
  body.rtl .ao-header-search .ao-header-field input {
    padding-left: 38px !important;
    padding-right: 5px !important;
  }
}

/* Tablet dimensions from the user's original header code. */
@media (min-width: 601px) and (max-width: 1024px) {
  .ao-header-search .ao-header-mic,
  .ao-header-search .ao-header-mic:hover,
  .ao-header-search .ao-header-mic:focus,
  .ao-header-search .ao-header-mic:focus-visible,
  .ao-header-search .ao-header-mic:active {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* =========================================================
   FALCON'S OWN LEGACY/INTERNAL ASK MIC
   Keep its existing visual behavior separate from the header.
   ========================================================= */

@media (max-width: 768px) {
  .ordonna-ai-mic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ordonna-ai-mic.is-listening {
    background: #e31b23 !important;
    color: #fff !important;
  }
}