/*
 * TCE Ask AI — input form styling.
 *
 * Three layers:
 *   1. Base form/input primitives on .tce-ai-ask
 *   2. Variant overrides on .tce-ai-ask--{desktop,mobile,inline}
 *   3. Single breakpoint at 768px (tablet falls under desktop)
 *
 * Frank: swap the --tce-ask-* custom properties below to match the editor's
 * 2026-ai-integration-header mockup. The structure should not need to change.
 */

:root {
  /* Mobile — red utility strip wraps a white chat-bubble pill with the
     FA comments-o icon as the submit. Same shape language as desktop
     (asymmetric corners, no visible button text); border-radius is
     10px (vs 12px on desktop) per the 2026-ai-integration-header
     mobile breakpoint CSS. The form is the strip; a ::before
     pseudo-element draws the inner pill. */
  --tce-ask-mobile-bg:           #cc0000;        /* outer red strip */
  --tce-ask-mobile-pill-bg:      #ffffff;        /* inner white pill */
  --tce-ask-mobile-pill-border:  #cc0000;        /* matches strip — invisible against it, but defines the shape semantically */
  --tce-ask-mobile-input-fg:     #011627;        /* dark navy text */
  --tce-ask-mobile-btn-fg:       #011627;        /* icon fill */
  --tce-ask-mobile-btn-hover:    rgba(1, 22, 39, 0.06);
  --tce-ask-mobile-radius:       10px 0;
  --tce-ask-mobile-height:       40px;
  --tce-ask-mobile-strip-pad-y:  8px;
  /* Horizontal padding defaults to 0 so the pill spans whatever column
     the operator drops the shortcode into. Side gutters around the pill
     should come from the TagDiv column/row config (margins or padding
     on the parent), not from inside the shortcode — otherwise narrow
     columns end up with a tiny pill lost inside a fat red strip. Bump
     this to 8–12px only if you're placing the shortcode in a column
     that already spans viewport-edge to viewport-edge. */
  --tce-ask-mobile-strip-pad-x:  0;

  /* Desktop — pill with asymmetric corners + chat-bubble icon, per
     2026-ai-integration-header TagDiv mockup. Border is brand-red, inside
     is white, button is icon-only (text label is visually hidden). */
  --tce-ask-desktop-bg:        #ffffff;
  --tce-ask-desktop-input-bg:  transparent;
  --tce-ask-desktop-input-fg:  #011627;          /* dark navy text */
  --tce-ask-desktop-btn-bg:    transparent;
  --tce-ask-desktop-btn-fg:    #011627;          /* icon stroke */
  --tce-ask-desktop-btn-hover: rgba(1, 22, 39, 0.06);
  --tce-ask-desktop-border:    #cc0000;
  --tce-ask-desktop-radius:    12px 0;           /* TL + BR rounded, TR + BL square */
  --tce-ask-desktop-max-width: 300px;
  /* Matches mockup .tdb_search_form min-height: 32px. Below the strict
     WCAG 2.5.5 44px touch target, but the full 300px-wide pill is the
     effective tap area (any click in the input lands focus, then the
     icon button is one tap away). Bump to 36–40px if accessibility
     audit pushes back. */
  --tce-ask-desktop-height:    32px;

  /* Inline (body content). */
  --tce-ask-inline-input-bg:  #ffffff;
  --tce-ask-inline-input-fg:  #111111;
  --tce-ask-inline-btn-bg:    #cc0000;
  --tce-ask-inline-btn-fg:    #ffffff;
  --tce-ask-inline-btn-hover: #aa0000;

  /* Focus ring — TCE brand red, mirrors chat-side ChatInput. */
  --tce-ask-focus-ring: #cc0000;
}

/* === 1. Base ============================================================ */

.tce-ai-ask {
  display: none; /* a variant rule below re-enables, scoped to its breakpoint */
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  margin: 0;
}

.tce-ai-ask * {
  box-sizing: border-box;
}

.tce-ai-ask .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}

.tce-ai-ask input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  /* 16px minimum on mobile — defeats iOS Safari auto-zoom on focus. */
  font-size: 16px;
  line-height: 1.2;
  padding: 0 12px;
  height: 44px; /* WCAG touch target */
  background: #fff;
  color: #111;
}

.tce-ai-ask input[type="search"]::-webkit-search-cancel-button { display: none; }

.tce-ai-ask button[type="submit"] {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 14px;
  height: 44px;
  min-width: 56px;
  color: #fff;
  background: #0e1a3a;
  transition: background-color 120ms ease;
}

.tce-ai-ask button[type="submit"]:hover,
.tce-ai-ask button[type="submit"]:focus-visible {
  background: #1a2752;
}

/* Visible keyboard focus on BOTH input and button — don't rely on colour alone. */
.tce-ai-ask input[type="search"]:focus-visible,
.tce-ai-ask button[type="submit"]:focus-visible {
  outline: 2px solid var(--tce-ask-focus-ring);
  outline-offset: 2px;
}

.tce-ai-ask button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* === 2. Variant overrides ============================================== */

/* Mobile: form acts as the red utility strip; a ::before pseudo-element
   draws the inner white chat-bubble pill behind the input + icon button.
   Same shape vocabulary as desktop but tighter corners (10px vs 12px),
   per the 2026-ai-integration-header mobile-breakpoint CSS. */
.tce-ai-ask--mobile {
  background: var(--tce-ask-mobile-bg);
  padding: var(--tce-ask-mobile-strip-pad-y) var(--tce-ask-mobile-strip-pad-x);
  gap: 0;
  position: relative;
}

.tce-ai-ask--mobile::before {
  content: "";
  position: absolute;
  top: var(--tce-ask-mobile-strip-pad-y);
  bottom: var(--tce-ask-mobile-strip-pad-y);
  left: var(--tce-ask-mobile-strip-pad-x);
  right: var(--tce-ask-mobile-strip-pad-x);
  background: var(--tce-ask-mobile-pill-bg);
  border: 1px solid var(--tce-ask-mobile-pill-border);
  border-radius: var(--tce-ask-mobile-radius);
  pointer-events: none;          /* clicks pass through to input/button */
  transition: outline-color 120ms ease;
}

/* Pill-shaped focus ring instead of per-element outlines. */
.tce-ai-ask--mobile:focus-within::before {
  outline: 2px solid var(--tce-ask-focus-ring);
  outline-offset: 2px;
}
.tce-ai-ask--mobile input[type="search"]:focus-visible,
.tce-ai-ask--mobile button[type="submit"]:focus-visible {
  outline: none;
}

.tce-ai-ask--mobile input[type="search"] {
  position: relative;             /* z-index above the ::before pill */
  z-index: 1;
  background: transparent;
  color: var(--tce-ask-mobile-input-fg);
  border-radius: 0;
  height: var(--tce-ask-mobile-height);
  /* 16px stays — iOS Safari auto-zooms inputs <16px on focus. */
  font-size: 16px;
  padding: 0 4px 0 12px;
}
.tce-ai-ask--mobile input[type="search"]::placeholder {
  color: var(--tce-ask-mobile-input-fg);
  opacity: 0.6;
}

/* Icon-only submit — identical glyph + sizing as the desktop variant. */
.tce-ai-ask--mobile button[type="submit"] {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--tce-ask-mobile-btn-fg);
  width: var(--tce-ask-mobile-height);
  height: var(--tce-ask-mobile-height);
  min-width: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0;                   /* hide button text label */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tce-ai-ask--mobile button[type="submit"]::before {
  content: "";
  display: block;
  width: 18px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='%23011627'><path d='M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 120ms ease;
}
.tce-ai-ask--mobile button[type="submit"]:hover,
.tce-ai-ask--mobile button[type="submit"]:focus-visible {
  background: var(--tce-ask-mobile-btn-hover);
}
.tce-ai-ask--mobile button[type="submit"]:hover::before {
  opacity: 0.7;
}

/* Desktop: TCE-red bordered pill with asymmetric corners and icon-only
   submit (matches 2026-ai-integration-header mockup, TagDiv .tdi_36).
   Input + button are transparent, so the form's white background and
   rounded border define the visible shape. */
.tce-ai-ask--desktop {
  background: var(--tce-ask-desktop-bg);
  border: 1px solid var(--tce-ask-desktop-border);
  border-radius: var(--tce-ask-desktop-radius);
  max-width: var(--tce-ask-desktop-max-width);
  height: var(--tce-ask-desktop-height);
  gap: 0;
}

/* Focus is shown on the whole pill, not on individual children — keeps the
   indicator a continuous rounded ring that matches the form's shape. */
.tce-ai-ask--desktop:focus-within {
  outline: 2px solid var(--tce-ask-focus-ring);
  outline-offset: 2px;
}
.tce-ai-ask--desktop input[type="search"]:focus-visible,
.tce-ai-ask--desktop button[type="submit"]:focus-visible {
  outline: none;
}

.tce-ai-ask--desktop input[type="search"] {
  background: var(--tce-ask-desktop-input-bg);
  color: var(--tce-ask-desktop-input-fg);
  border-radius: 0;
  height: 100%;
  font-size: 14px;             /* no iOS-zoom concern at ≥768px */
  padding: 0 4px 0 12px;
}
.tce-ai-ask--desktop input[type="search"]::placeholder {
  color: var(--tce-ask-desktop-input-fg);
  opacity: 0.6;
}

/* Icon-only button: hide the "Ask AI" text via font-size:0, render the
   FontAwesome comments-o glyph as a background-image SVG (same shape
   TagDiv used in the mockup — FA4 \f0e6, identical to FA6 Free Regular
   "comments"). Filled in dark navy #011627 to match the placeholder
   text colour, so the chrome reads as one tonally-unified element. */
.tce-ai-ask--desktop button[type="submit"] {
  background: var(--tce-ask-desktop-btn-bg);
  color: var(--tce-ask-desktop-btn-fg);
  width: var(--tce-ask-desktop-height);
  height: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0;                /* hide button text label */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tce-ai-ask--desktop button[type="submit"]::before {
  content: "";
  display: block;
  width: 18px;                  /* FA comments-o is 640×512 (~5:4), so a   */
  height: 14px;                 /* wider-than-tall box keeps it crisp.    */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='%23011627'><path d='M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 120ms ease;
}
.tce-ai-ask--desktop button[type="submit"]:hover,
.tce-ai-ask--desktop button[type="submit"]:focus-visible {
  background: var(--tce-ask-desktop-btn-hover);
}
.tce-ai-ask--desktop button[type="submit"]:hover::before {
  opacity: 0.7;
}

/* Inline: minimal chrome, body-content placement. */
.tce-ai-ask--inline {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  overflow: hidden;
}
.tce-ai-ask--inline input[type="search"] {
  background: var(--tce-ask-inline-input-bg);
  color: var(--tce-ask-inline-input-fg);
}
.tce-ai-ask--inline button[type="submit"] {
  background: var(--tce-ask-inline-btn-bg);
  color: var(--tce-ask-inline-btn-fg);
}
.tce-ai-ask--inline button[type="submit"]:hover,
.tce-ai-ask--inline button[type="submit"]:focus-visible {
  background: var(--tce-ask-inline-btn-hover);
}

/* === 3. Breakpoint utility ============================================= */

/* Below 768px: mobile shows, desktop hides. */
@media (max-width: 767.98px) {
  .tce-ai-ask--mobile  { display: flex; }
  .tce-ai-ask--desktop { display: none !important; }
  .tce-ai-ask--inline  { display: flex; }
}

/* 768px and up: desktop shows, mobile hides. Tablet (768–1024px) inherits desktop. */
@media (min-width: 768px) {
  .tce-ai-ask--desktop { display: flex; }
  .tce-ai-ask--mobile  { display: none !important; }
  .tce-ai-ask--inline  { display: flex; }
}