/* Rooster One's own labels are bold; the admin chrome library's are not ours to weigh. The id selector used to beat
 * the library's label recipe, so every field row's label read 700 where the library's (and a group's <span> label)
 * read 600, and every checkbox and radio option of its checks was bold. UI wave 2 (lead, 27 Oct 2026): the rule
 * leaves alone a label that is the library's (a rooster-admin-* class: its checks, switches, combos) or that sits in
 * its field rows or fields grids, and keeps the bold for the old markup around them. The patterns sweep (lead, 27 Oct
 * 2026): the old markup's labels take the library's weights, not 700: a field's label 600, as the library's field
 * label; a label around a checkbox or radio is an option, not a field's name, and reads normal, as the library's checks. */
#aieo-wpbody-content label:not([class*="rooster-admin-"]):not(.rooster-admin-field *):not(.rooster-admin-fields *) {
  font-weight: 600;
}
#aieo-wpbody-content label:not([class*="rooster-admin-"]):not(.rooster-admin-field *):not(.rooster-admin-fields *):has(input[type="checkbox"], input[type="radio"]) {
  font-weight: 400;
}

.aieo-table {
  display: table;
  width: 100%;
}

.aieo-row {
  display: table-row;
}

.aieo-cell {
  display: table-cell;
  padding: 3px;
  font-weight: bold;
}

.aieo-cellsubmit {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  text-align: center;      /* Ensure the text within the button is centered */
  width: 100%;             /* If you want it to span the full width of its container */
  padding: 3px;
  font-weight: bold;
}

/* The prose that row contains. Carries the spacing the stray </br> tags used to
   fake, and keeps the line length readable rather than edge-to-edge. */

.aieo-cellsubmit .aieo-button {
  flex: 0 0 auto;
  width: 80%;
  max-width: 420px;
  margin: 8px auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px 24px;
  box-sizing: border-box;
}

.aieo-buttonsubmit{
    align-content: center !important;
    margin: 0 auto;
    width: 80% !important; 
    margin: 20px 10% 0  10% !important;   
  }

  #aieo-wpbody-content input[type="submit"] {
  align-content: center !important;
  margin: 0 auto;
  width: 80% !important;
  margin: 20px 10% 0  10% !important;
  border-radius: 0px 8px 8px 0px;
}

/* THE BIG CENTRED FILE PICKER, and only where it is asked for.
 *
 * This used to read `#aieo-wpbody-content input[type=file]`, so it caught every
 * file input on every admin screen and, with !important on the width and the
 * margin, threw each one to 80% width and indented it 10% from the left. A
 * picker meant to sit inline beside a button could not be brought back: no
 * amount of `margin:0` on a child+class selector beats !important, which is why
 * the withdrawal upload row kept floating in the middle of its strip, and why
 * the Geniki CSV controls carry a block of !important rules whose whole job is
 * to undo this one.
 *
 * The 20px top margin is gone with it. It existed to separate a submit button
 * from the form above it; on a control that sits in a row it is the reason
 * nothing lines up vertically. */
#aieo-wpbody-content input[type=file].aieo-filesubmit {
  /* SIZES TO ITS CONTENT. This used to be `width:80% !important` with
     `margin:0 10% !important`, which is a full-page-form style from when these
     controls sat alone on a wide screen. Inside a card it stretched a "Choose
     File" button to ~970px and pushed it in from the left by a tenth of the
     panel, so the control floated in the middle of its own row with nothing
     beside it.

     A file input has no useful stretched state — the browser draws a fixed
     button plus a filename — so forcing a percentage width only moves the
     button away from the label that explains it. max-width keeps it honest on
     narrow screens. */
  width: auto;
  max-width: 100%;
  margin: 0;
  border-radius: 0px 8px 8px 0px;
}

#aieo-wpbody-content input[type="submit"]:hover, #aieo-wpbody-content input[type=file].aieo-filesubmit:hover, #aieo-wpbody-content .aieo-buttonsubmit:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(64, 71, 67, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(64, 71, 67, 0.2);
  border-radius: 0px 8px 8px 0px;
}

.aieo-cell.aieo-description {
  font-weight: bold;
  width: 50%; 
}

.aieo-cell.aieo-input {
  width: 50%; 
}

/* The old cells' boxes (their fixed widths and blue border) are for the old markup only. UI wave 2 (lead, 27 Oct
 * 2026): an input that is the library's (a rooster-admin-* class: its width classes, its combobox's text box) or sits
 * in its field rows or fields grids keeps the library's width and border; the 200px !important beat every width
 * class on the AI Chat setup page. */
.aieo-cell.aieo-input input[type="number"]:not([class*="rooster-admin-"]):not(.rooster-admin-field *):not(.rooster-admin-fields *) {
  width: 100px;
  box-sizing: border-box;
  border-width: 1px;
  border-color: #97b6da !important;
}

.aieo-cell.aieo-input input[type="text"]:not([class*="rooster-admin-"]):not(.rooster-admin-field *):not(.rooster-admin-fields *) {
  width: 200px !important;
  box-sizing: border-box;
  border-width: 1px;
  border-color: #97b6da !important;
}

.aieo-cell.aieo-input input[type="password"]:not([class*="rooster-admin-"]):not(.rooster-admin-field *):not(.rooster-admin-fields *) {
  width: 200px !important; 
  box-sizing: border-box; 
  border-width: 1px;
  border-color: #97b6da !important;
}

.aieo-center-content {
  text-align: center;
}

.aieo-file-download {
  text-align: center;
  padding: 10px;
  font-weight: bolder;
  color: #12a912;
}

/* THE PAGE BUTTONS WEAR THE CONTROL LAYER'S PAINT.
 *
 * Every one of these is a WordPress `.button` / `.button-primary` with an AIEO
 * fill laid over it, so core's chrome kept showing through underneath: the hard
 * `0 1px 0 #2271b1` bottom edge (which reads as a black line under a gold
 * fill), a text shadow built for blue, a 3px radius and a blue focus ring. Two
 * cards apart from a control-layer button they looked like a different control,
 * on three screens at once (Rooster One Pro, Analytics, AI Chat).
 *
 * ⚠️ SIZE IS DELIBERATELY UNTOUCHED. The padding, the 80% widths from
 * `.aieo-cellsubmit .aieo-button` and the inherited type are exactly what they
 * were; only the chrome moves. That was the operator's instruction: same size,
 * our spec.
 *
 * The values are `.aieo-c-btn`'s, from assets/css/aieo-controls.css — radius-md,
 * the 1px/2px 5% lift instead of a hard edge, a 120ms transition and a 3px ring
 * on focus. Change them there and change them here; there is no shared class to
 * inherit, because these buttons must keep core's own layout behaviour.
 *
 * Scoped to `.wp-core-ui` as well as bare, so it beats core on CLASS COUNT
 * rather than on load order — the standing specificity trap in this codebase
 * (see aieo_table_header_alignment_specificity).
 */
/* THE ADMIN BUTTONS ARE THE CHROME'S (admin chrome 0.29.0, adopt/rooster-one.css, UI-PLAN Phase 3, D3): `.aieo-button`
   and its variants take the kit's button recipe on every chrome screen; the rules that stood here went with it. */

/* `.aieo-notice` (the chat page's saved notice) is a core notice under the chrome's adoption layer (0.33.0): no margin of its own. */

/* `.aieo-button-alarm`, `-optimal`, `-setup`, `-pro-section`, `-optimal-reverse`, `-troubleshooter`: the chrome's
   destructive, primary and outline buttons now (admin chrome 0.29.0). The amber Set Up fills and their white text,
   the operator's choice of 2026-09-06, gave way to the one primary button of the kit, which reads at 4.5:1. */

.aieo-modules-indicator {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #3c8733;
}

.aieo-modules-indicator-support {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #740e63;
}

.aieo-modules-indicator-pro-section {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: rgba(255, 215, 0, 1) !important;
}

.aieo-modules-list-item-desc {
  color: var(--aieo-muted-fg, #757575);
  font-size: 13px;
  line-height: 20px;
}

.aieo-card-dark {
  color: #002147;
  backdrop-filter: blur(2px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(5px) saturate(175%);
  background: rgba(102, 116, 192, 0.13) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(209, 213, 219, 0.3) !important;
  padding: 20px 20px 20px 20px !important;
  margin: 20px 0px 20px 0px !important;
}

/* columns */

.aieo-info {
  width: 80%;
  padding: 5px;
  text-align: left;
  font-size: 1rem;
  text-decoration: dotted;
  vertical-align: middle;
}

.aieo-promo {
  width: 80%;
  padding: 10px;
  text-align: left;
  font-size: 0.9rem;
  font-style: italic;
  vertical-align: middle;
}

.aieo-pro {
  width: 80%;
  text-align: left;
  font-style: italic;
  vertical-align: middle;
  color: #6f91c7;
}

.aieo-modules-list-two-thirds {
  display: grid;
  grid-template-columns: 2.03fr 1fr;
  grid-gap: 20px;
}

.aieo-modules-list-item-support-dual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row; /* set flex direction to row to make items side-by-side */
  justify-content: space-between; /* space out the items evenly */
  gap: 10px; /* replaced grid-gap with gap as it's more modern and works for both grid and flex */
  padding: 20px;
  text-decoration: none;
  border: 2px solid rgba(169, 219, 184, 0.1);
  background-color: #f0f6f5;
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.aieo-modules-list-item-support-dual:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(118, 194, 141, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(118, 194, 141, 0.2);
}

.aieo-modules-list-item-support-dual:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aieo-modules-list-item-icon-dual {
  display: flex;
  flex: 0 0 auto; /* This will ensure it only takes the space of its content */
}

.aieo-modules-list-item-icon-dual-right {
  margin-left: 57px;
  display: flex;
  flex: 0 0 auto; /* This will ensure it only takes the space of its content */
}

.aieo-modules-list-item-icon-dual svg {
  width: 25px;
  height: 25px;
  fill: #1db92c;
}

.aieo-modules-list-item-icon-dual-right svg {
  width: 25px;
  height: 25px;
  fill: #1db92c;
}

.aieo-modules-list-item-icon-action {
  display: flex;
  flex: 0 0 auto; /* This will ensure it only takes the space of its content */
}
.aieo-modules-list-item-icon-action svg {
  width: 25px;
  height: 25px;
  fill: #1db92c;
}

.aieo-modules-list-item-icon-pro-section {
  display: flex;
  flex: 0 0 auto; /* This will ensure it only takes the space of its content */
}
.aieo-modules-list-item-icon-pro-section svg {
  width: 25px;
  height: 25px;
  fill: rgb(231, 197, 3) !important;
}

.aieo-modules-list-item-icon-support {
  display: flex;
  flex: 0 0 auto; /* This will ensure it only takes the space of its content */
}
.aieo-modules-list-item-icon-support svg {
  width: 25px;
  height: 25px;
  fill: #9f1db9;
}

.aieo-modules-list-item-content-dual {
  display: flex;
  flex-direction: column; /* To stack children vertically */
  flex: 1; /* This will ensure it takes up the remaining space */
  gap: 5px; /* space between title and description */
}

.aieo-modules-list-item-title-dual {
  margin: 0;   /* now an <h3>: neutralise the UA margin */
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-gap: 5px;
    font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--aieo-foreground, #101517);
  flex: 0 0 auto; /* Ensure it doesn't grow or shrink */
}

.aieo-modules-list-item-support:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(164, 118, 194, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(164, 118, 194, 0.2);
}

.aieo-modules-list-item-support:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aieo-modules-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
  padding: 20px;
  text-decoration: none;
  border: 2px solid var(--aieo-border, #f0f0f1);
  background-color: var(--aieo-card, #fff);
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.aieo-modules-list-item:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
  box-shadow: 0px 8px 12px 0px rgba(240, 240, 241, 0.7);
}

.aieo-modules-list-item:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aieo-modules-list-item-support {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
  padding: 20px;
  text-decoration: none;
  border: 2px solid rgba(199, 169, 219, 0.1);
  background-color: #f4effb;
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.aieo-modules-list-item-support:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(164, 118, 194, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(164, 118, 194, 0.2);
}

.aieo-modules-list-item-support:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aieo-modules-list-item-pro-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
  padding: 20px;
  text-decoration: none;
  border: 2px solid rgba(219, 210, 169, 0.1);
  background-color: #fbfaef;
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.aieo-modules-list-item-pro-section:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(194, 164, 118, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(194, 164, 118, 0.2);
}

.aieo-modules-list-item-pro-section:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.aieo-modules-list-item-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
  padding: 20px;
  text-decoration: none;
  border: 2px solid rgba(169, 219, 184, 0.1);
  background-color: #f0f6f5;
  border-radius: 8px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.aieo-modules-list-item-action:hover {
  -webkit-box-shadow: 0px 8px 12px 0px rgba(118, 194, 141, 0.2);
  box-shadow: 0px 8px 12px 0px rgba(118, 194, 141, 0.2);
}

.aieo-modules-list-item-action:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

@-webkit-keyframes merchant-flash {
  0%,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes merchant-flash {
  0%,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@-webkit-keyframes merchant-bounce {
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes merchant-bounce {
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@-webkit-keyframes merchant-shake {
  33% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  67% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}

@keyframes merchant-shake {
  33% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  67% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
}

@-webkit-keyframes merchant-pulse {
  0% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  10% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
  }
  17% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
  }
  33% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
  }
  45% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes merchant-pulse {
  0% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  10% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
  }
  17% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
  }
  33% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
  }
  45% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes merchant-jello-shake {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes merchant-jello-shake {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@-webkit-keyframes merchant-wobble {
  0%,
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

@keyframes merchant-wobble {
  0%,
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}

@-webkit-keyframes merchant-vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes merchant-vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@-webkit-keyframes merchant-swing {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  40% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  80% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes merchant-swing {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  40% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  60% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  80% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes merchant-tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes merchant-tada {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

.aieo-pcr-app.visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.toplevel_page_merchant #aieo-wpbody-content > .updated,
.toplevel_page_merchant #aieo-wpbody-content > .aieo-notice {
  display: none;
}

/* Cap the OM logo so the top-bar height is stable (drives the sub-tab bar's
   sticky offset). width:auto preserves the aspect ratio. */

/* ---------------------------------------------------------------------------
 *  ROOSTER ONE wordmark — docs/rooster-one-brand-spec.md §1, applied verbatim.
 *  Do not "tidy" these numbers: each one is measured, not chosen.
 * ------------------------------------------------------------------------- */

/* No text-indent: the spec's 0.15em correction is for the CENTRED case, and
   this lockup is left-aligned against the mark. */
   /* body near-black, not pure black */
   /* the blue the swoosh ramp runs to */
@media screen and (max-width: 782px) {
  /* The mark alone still reads as the brand; the word is what costs the room. */
  
}
@media screen and (max-width: 782px) {
  /* The WP admin bar grows to 46px on small screens. */
  
}

/* Every item centres its own content on one shared axis.
   Before this, the icon items and the text items were centred by DIFFERENT
   rules: the buttons carry `line-height: 0` (correct — the SVG is their whole
   content), while the version and the product name inherit the bar's
   line-height. Two boxes of different heights, each centred against the row,
   put the glyphs and the text on visibly different baselines — the icons rode
   high and `v11.0.3` sat low.

   min-height is the 17px icon plus its stroke, so the text items stop being
   the shorter ones and the 17px divider centres on the same axis as both. */

/* Send-feedback icon button — a bare glyph, no chrome of any kind.
   `.wp-core-ui .button` (and the UA's own button styling) would otherwise give
   this a border, a background, a box-shadow and a min-height, which is exactly
   the grey pill this must not be. Every one of those is reset explicitly,
   including on :hover and :focus, because WP restyles all three states. Three
   class levels deep so it outranks `.wp-core-ui .button` on specificity. */

/* The Viber link is an <a>, so it also needs the link chrome cleared:
   wp-admin gives anchors a colour, an underline on hover and a focus
   box-shadow, none of which belong on a bare glyph. */

/* (A shared purple hover for these two lived here. It was dead the day the
   palette block below gave every icon its own pair, and a dead rule that still
   names a colour is how a future edit gets talked into the wrong one.) */

/* Keyboard users still get a ring; pointer users get none. :focus above already
   cleared WP's focus box-shadow, so this is the only visible focus affordance. */

/* Same bare-glyph treatment as the two icons before it. Anchors, so it is link
   chrome that has to go — colour, underline, focus box-shadow — rather than
   the button chrome the feedback icon fights. */

/* ─── The bar wears the mark's own colours ────────────────────────────────
   Values taken from assets/images/rooster-logo-universal.svg, not invented.

   THE ORDER IS THE MARK'S ORDER, LEFT TO RIGHT — the operator's instruction,
   and it is why the assignment is not what a designer picking per-icon would
   choose. Reading the bar the way you read the bird:

     1  survey    blue     #0269D0 -> #1478DB    both in the logo
     2  feedback  green    #4C8309 -> #61A00A    both in the logo
     3  Viber     purple   #7360F2 -> #8F81F5    Viber's own, see below
     4  manual    red      #D90B0E -> #F0272B    the logo carries one red
     5  welcome   yellow   #C98703 -> #FEAC03    #FEAC03 is the logo's

   COLOUR IS BOUND TO POSITION, NOT TO MEANING. The classes below only look
   like per-feature styling; what each one actually encodes is "the icon that
   sits Nth in the bar". The bulb is last because a lit bulb wants to be
   yellow, and the manual took the red slot it vacated — the glyphs were moved
   to suit the run, which is the right way round. A strip of five small marks
   in a header is read as a sequence, the way the bird is, not decoded one icon
   at a time.

   So: changing the ORDER of the requires in the three top bars changes which
   colour each icon wears, and the two must be edited together. Never retune a
   single colour to flatter its own glyph. The sequence is the thing being
   branded.

   Deeper at rest, brighter on hover, so the hover state is still one of the
   mark's own values rather than a computed tint. Amber rests deepened because
   #FEAC03 on white is barely legible at 17px. */

/* 1 · blue */

/* 2 · green */

/* 3 · purple. Viber keeps Viber's own: the one colour here that is not ours to
   choose, because it confirms where the link goes before the click — worth
   more than palette consistency. It sits third, where the bird carries its
   own dark, so the run absorbs it rather than fighting it. */

/* 4 · red */

/* 5 · yellow */

/* ─── A tooltip we own ────────────────────────────────────────────────────
   The native `title` attribute was doing this job badly: it waits about a
   second, appears wherever the pointer happens to be, cannot be styled, and on
   Windows renders in the OS's own chrome — which is exactly the "cheap browser
   default" look. Drawn here instead, from data-aieo-tip.

   aria-label stays on every button and is what a screen reader announces; this
   bubble is aria-hidden by construction because generated content is not in the
   accessibility tree. Removing `title` also removes the double tooltip that
   would otherwise appear once we drew our own. */

/* The little pointer. Same colour as the bubble, so the two read as one shape. */

/* The bar clips nothing, but the item is the positioning context and a bubble
   wider than a 17px icon must be allowed out of it. */

/* Notifications Sidebar */

.aieo-notifications-sidebar.opened {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
  transform: none;
}

.aieo-notifications-sidebar.closing {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

/* Notifications (card) */

.aieo-wrap {
  padding-left: 5px;
  padding-right: 5px;
}

.aieo-wrap * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.aieo-wrap * *:before,
.aieo-wrap * *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.aieo-modules-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.aieo-modules-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  background-color: var(--aieo-card, #fff);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-bottom: 10px;
}

.aieo-modules-box-heading {
  margin: 0;   /* now an <h2>: neutralise the UA margin */
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  color: var(--aieo-foreground, #101517);
}

.aieo-modules-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 20px;
}

/* --------------------------------------------------------------------------
 * ONE CARD PER ROW UNTIL 1900px — OPT-IN, FOR LISTS OF SETUP CARDS.
 *
 * The grid above is three columns down to 991px, which is right for short
 * module tiles and wrong for a page whose "tiles" are setup cards carrying
 * paragraphs, dropdowns, tables and status rows: between roughly 1000 and
 * 1900px each track is far too narrow and the text runs into its neighbour.
 *
 * A MODIFIER, NOT A GLOBAL BREAKPOINT. Raising 1900px onto .aieo-modules-list
 * would put every page of tiles into a single column on almost any screen,
 * which is the opposite of what that grid is for — the reason the AI Chat
 * admin page first solved this with a copy of the rule inside its own
 * template. That copy is gone; the chat page and the subscription screen now
 * opt in here, so there is one rule to change and no page can drift from it.
 * -------------------------------------------------------------------------- */
@media (max-width: 1900px) {
  .aieo-modules-list--setup {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.aieo-modules-list-item-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aieo-modules-list-item-icon svg {
  width: 18px;
  height: 26px;
  fill: var(--aieo-muted-fg, #787c82);
}

.aieo-modules-list-item-content {
  display: -webkit-box;
  display: -ms-flexbox;
  flex: 1;
  display: flex;
  grid-gap: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.aieo-modules-list-item-title {
  margin: 0;   /* now an <h3>: neutralise the UA margin */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-gap: 5px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--aieo-foreground, #101517);
}

@-webkit-keyframes merchant-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes merchant-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* Sortable Field */

.aieo-sortable ul.ui-sortable li .dashicons {
  width: 36px;
  height: 36px;
  -ms-flex-preferred-size: 36px;
  flex-basis: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.aieo-sortable ul.ui-sortable li .dashicons:before {
  font-size: 16px;
  line-height: 1em;
}

.aieo-sortable ul.ui-sortable li .dashicons.dashicons-menu {
  float: left;
  padding: 0;
  margin: 0 10px 0 0;
  border: none;
  border-right: 1px solid var(--aieo-border, #ddd);
}

.aieo-sortable ul.ui-sortable li .dashicons.dashicons-visibility {
  float: right;
  color: var(--aieo-primary, #3858e9);
  padding: 0;
  margin: 0 0 0 10px;
  border: none;
  border-left: 1px solid var(--aieo-border, #ddd);
}

.aieo-sortable ul.ui-sortable li .dashicons.visibility {
  cursor: pointer;
}

.aieo-sortable ul.ui-sortable li.invisible {
  color: #6e7780;
  border: 1px solid #cad2f6;
  background-color: #ebeefb;
}

.aieo-sortable ul.ui-sortable li.invisible .dashicons.dashicons-visibility:before {
  content: "\f530";
}

.aieo-module-page-setting-field-color .aieo-color {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 10px;
}

.aieo-module-page-setting-field-color .aieo-color-picker {
  cursor: pointer;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.aieo-module-page-setting-field-gallery .aieo-gallery-image.ui-sortable-helper img {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.aieo-module-page-setting-field-gallery .ui-sortable-placeholder {
  visibility: visible !important;
  border: 1px dashed var(--aieo-border, #ddd);
  background-color: #f9f9f9;
  border-radius: 4px;
}

/* Utils */

/* Admin Footer Text */

/* Responsive */
@media (max-width: 991px) {
  .aieo-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    grid-gap: 20px;
  }
  
  
  
  
  
  
  .aieo-modules-list {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  
  
}

/* Export Progress Styling */
#aieo-export-progress-container {
    background: var(--aieo-card, #fff);
    border: 1px solid #ccd0d4;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

.aieo-progress-wrapper {
    margin: 20px 0;
}

.aieo-progress-bar-container {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: var(--aieo-muted, #f0f0f1);
    border-radius: 4px;
    overflow: hidden;
}

.aieo-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2271b1 0%, #135e96 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.aieo-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: var(--aieo-foreground, #1d2327);
    font-size: 14px;
    z-index: 1;
}

.aieo-current-stage {
    margin: 15px 0;
    padding: 10px;
    background: var(--aieo-primary-soft, #f0f6fc);
    border-left: 4px solid var(--aieo-primary, #2271b1);
    font-weight: 600;
    color: var(--aieo-foreground, #1d2327);
}

.aieo-log-container {
    margin-top: 20px;
}

.aieo-log-container h4 {
    margin-bottom: 10px;
    color: var(--aieo-foreground, #1d2327);
}

.aieo-log {
    max-height: 400px;
    overflow-y: auto;
    background: var(--aieo-muted, #f6f7f7);
    border: 1px solid var(--aieo-input, #c3c4c7);
    border-radius: 4px;
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
}

.aieo-log > div {
    margin-bottom: 8px;
    padding: 4px 0;
}

.aieo-log-time {
    color: var(--aieo-muted-fg, #646970);
    margin-right: 8px;
}

.aieo-log-info {
    color: var(--aieo-foreground, #1d2327);
}

.aieo-log-success {
    color: var(--aieo-tone-success, #00a32a);
    font-weight: 600;
}

.aieo-log-error {
    color: var(--aieo-tone-danger, #d63638);
    font-weight: 600;
}

.aieo-log-warning {
    color: var(--aieo-tone-warning, #dba617);
    font-weight: 600;
}

.aieo-log-progress {
    color: var(--aieo-primary, #2271b1);
    padding-left: 20px;
}

.aieo-insight-list {
    margin: 12px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
}

.aieo-insight-list li {
    margin-bottom: 6px;
}

.aieo-insight-list li span {
    display: block;
    color: #556275;
    font-size: 12px;
}

.aieo-insight-list a {
    font-weight: 600;
    color: #1b4b9c;
    text-decoration: none;
}

.aieo-insight-list a:hover {
    text-decoration: underline;
}

.aieo-insight-brand-name {
    font-weight: 600;
    color: #222e44;
}

/* Setup Cards - Using default purple/lavender styling from lines 479-491 */
/* Removed colored gradients to maintain consistent purple/lavender theme across all cards */

/* Chat Page - Spacing and Layout Utilities */
.aieo-chat-box-spacing {
    margin-bottom: 10px;
}

.aieo-chat-table-spacing {
    margin-top: 15px;
}

.aieo-chat-card-divider {
    border-bottom: 1px solid var(--aieo-border, #e5e7eb);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.aieo-chat-submit-spacing {
    margin-top: 20px;
}

/* Chat Page - the Delete Embeddings title's colour (the page's painted info boxes are library notices now; their
 * other classes went with them: UI wave 2, lead). */
.aieo-chat-info-box-title-red {
    color: var(--aieo-tone-danger, #dc2626);
}

.aieo-chat-list-styled {
    margin: 8px 0 0 20px;
    color: #1E3A8A;
    font-size: 0.95em;
}

/* Chat Page - Typography */
.aieo-chat-text-brown {
    color: var(--aieo-warning-soft-fg, #92400E);
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-green {
    color: #047857;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 500;
}

.aieo-chat-text-blue {
    color: var(--aieo-primary-soft-fg, #1E40AF);
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-indigo {
    color: #4338CA;
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-purple {
    color: var(--aieo-tone-info, #7C3AED);
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-gray {
    color: var(--aieo-muted-fg, #6B7280);
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-red {
    color: var(--aieo-tone-danger, #DC2626);
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-text-small {
    font-size: 0.85em;
}

.aieo-chat-small-block-green {
    display: block;
    margin-top: 8px;
    color: #047857;
}

.aieo-chat-text-medium {
    font-size: 15px;
}

.aieo-chat-margin-top-10 {
    margin-top: 10px;
}

.aieo-chat-margin-bottom-10 {
    margin-bottom: 10px;
}

.aieo-chat-margin-bottom-15 {
    margin-bottom: 15px;
}

/* Chat Page - Form Elements */
.aieo-chat-label-block {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}

.aieo-chat-label-flex {
    display: flex;
    align-items: start;
    gap: 10px;
}

.aieo-chat-label-flex-centered {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.aieo-chat-label-checkbox {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
}

.aieo-chat-select-full {
    width: 100%;
    max-width: 500px;
}

.aieo-chat-select-full-padded {
    width: 100%;
    padding: 8px;
}

.aieo-chat-select-styled {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    border: 1px solid var(--aieo-input, #d1d5db);
    border-radius: 4px;
    font-size: 14px;
}

.aieo-chat-select-styled-full {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--aieo-input, #d1d5db);
    border-radius: 4px;
    font-size: 14px;
}

.aieo-chat-select-small {
    width: 100px;
}

.aieo-chat-textarea-full {
    width: 100%;
}

.aieo-chat-input-small {
    width: 100px;
}

/* Chat Page - Full Width Containers */
.aieo-chat-full-width-container {
    width: 100%;
    margin-bottom: 15px;
}

.aieo-chat-full-width-container label {
    display: block;
    margin-bottom: 8px;
}

.aieo-chat-full-width-container select {
    width: 100%;
    max-width: 600px;
}

.aieo-chat-section-divider {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.aieo-chat-section-header {
    width: 100%;
    margin-bottom: 10px;
}

.aieo-chat-section-content {
    width: 100%;
}

/* Chat Page - Glass Transparency Effect (Apple-style) */
.aieo-chat-sticky-glass-footer {
    position: sticky;
    bottom: 0;
    background: rgba(240, 240, 240, 0.15);
    padding: 20px 0 10px 0;
    margin-top: 20px;
    z-index: 100;
    backdrop-filter: blur(5px) saturate(180%);
    -webkit-backdrop-filter: blur(5px) saturate(180%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
}

.aieo-chat-glass-button {
    /* Was a blue glow (59,130,246), which read as a third colour under a button
       that is now the Set Up amber. Tinted to the accent. */
    box-shadow: 0 4px 14px rgba(254, 172, 3, 0.40);
}

/* Chat Page - Code and Inline Elements */
.aieo-chat-code {
    background: var(--aieo-card, #fff);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--aieo-border, #ddd);
    font-family: monospace;
}

.aieo-chat-code-orange {
    background: var(--aieo-card, #fff);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--aieo-warning-soft-fg, #92400E);
    font-size: 0.95em;
    border: 1px solid var(--aieo-warning, #F59E0B);
    font-family: monospace;
}

.aieo-chat-indicator-inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.aieo-chat-indicator-inline.active {
    background-color: #03163c;
}

.aieo-chat-indicator-inline.inactive {
    background-color: var(--aieo-tone-muted, #9CA3AF);
}

.aieo-chat-icon-spacing {
    margin-right: 8px;
}

.aieo-chat-icon-emoji {
    font-size: 24px;
}

.aieo-chat-span-gray {
    margin-left: 5px;
    color: var(--aieo-muted-fg, #6B7280);
}

/* Chat Page - Preview Elements */
.aieo-chat-preview-container {
    margin-bottom: 10px;
}

.aieo-chat-preview-image {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
}

.aieo-chat-preview-image-bordered {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
    border: 2px solid var(--aieo-border, #ddd);
    padding: 4px;
}

.aieo-chat-preview-placeholder {
    width: 60px;
    height: 60px;
    border: 2px dashed var(--aieo-border, #ddd);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}

/* Chat Page - Stats and Tables */
.aieo-chat-table-header {
    padding: 10px;
    font-weight: 600;
}

.aieo-chat-engine-stats {
    margin-top: 15px;
    padding: 10px;
    background: var(--aieo-muted, #F9FAFB);
    border: 1px solid var(--aieo-border, #E5E7EB);
    border-radius: 4px;
}

.aieo-chat-delete-section {
    margin-top: 15px;
    padding: 12px;
    background: var(--aieo-tone-danger-wash, #fef2f2);
    border: 1px solid #fecaca;
    border-radius: 6px;
}

.aieo-chat-delete-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.aieo-chat-delete-options {
    display: none;
    margin-top: 12px;
}

.aieo-chat-delete-options-visible {
    display: block;
    margin-top: 10px;
}

.aieo-chat-button-small {
    padding: 2px 8px;
    font-size: 11px;
}

.aieo-chat-filter-select-styled {
    width: 100%;
    padding: 6px;
    border: 1px solid var(--aieo-input, #d1d5db);
    border-radius: 4px;
    font-size: 12px;
}

.aieo-chat-filter-label-small {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 12px;
    color: var(--aieo-warning-soft-fg, #92400E);
}

.aieo-chat-filter-wrapper {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--aieo-warning-soft, #FEF3C7);
    border-radius: 4px;
}

.aieo-chat-filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.aieo-chat-filter-select {
    width: 100%;
    max-width: 300px;
}

.aieo-chat-filter-help {
    margin: 8px 0 0;
    font-size: 13px;
    color: #78350F;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-warning-text {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--aieo-tone-danger, #ef4444);
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.aieo-chat-help-text {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--aieo-muted-fg, #666);
}

.aieo-chat-type-item {
    margin-bottom: 12px;
}

.aieo-chat-type-checkbox {
    font-weight: 600;
    color: var(--aieo-tone-secondary, #374151);
}

.aieo-chat-type-count {
    color: var(--aieo-tone-muted, #9ca3af);
    font-weight: normal;
    font-size: 0.9em;
}

.aieo-chat-type-content {
    flex: 1;
    font-size: 13px;
}

.aieo-chat-button-group {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.aieo-chat-warning-text {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--aieo-tone-danger, #ef4444);
    line-height: 1.4;
}

/* Chat Page - Sticky Submit Button */
.aieo-chat-sticky-submit {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
    padding: 15px 0;
    border-top: 1px solid var(--aieo-border, #e5e7eb);
}

/* Chat Page - Modal */
.aieo-chat-training-modal {
    display: none;
}

/* Chat Page - JavaScript Generated Content */
.aieo-chat-js-stats {
    font-size: 13px;
    color: var(--aieo-muted-fg, #6B7280);
}

.aieo-chat-js-stats-title {
    color: var(--aieo-foreground, #1F2937);
}

.aieo-chat-js-stats-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.aieo-chat-js-stats-card {
    padding: 8px;
    background: var(--aieo-muted, #F9FAFB);
    border-radius: 4px;
}

.aieo-chat-js-stats-label {
    font-size: 12px;
    color: var(--aieo-muted-fg, #6B7280);
}

.aieo-chat-js-stats-missing {
    font-size: 11px;
    color: var(--aieo-tone-muted, #9CA3AF);
}

.aieo-chat-js-stats-footer {
    margin-top: 10px;
    font-size: 11px;
    color: var(--aieo-muted-fg, #6B7280);
}

.aieo-chat-js-error {
    color: var(--aieo-tone-danger, #DC2626);
    font-size: 13px;
}

/* Chat Page - Row Backgrounds */
.aieo-chat-row-yellow {
    display: block;
    background: var(--aieo-warning-soft, #FEF3C7);
    border-left: 4px solid var(--aieo-warning, #F59E0B);
    padding: 0;
    margin-left: -50px;
    margin-right: -20px;
    padding-left: 50px;
    padding-right: 20px;
}

.aieo-chat-row-blue {
    display: block;
    background: var(--aieo-primary-soft, #DBEAFE);
    border-left: 4px solid var(--aieo-primary, #3B82F6);
    padding: 0;
    margin-left: -50px;
    margin-right: -20px;
    padding-left: 50px;
    padding-right: 20px;
}

.aieo-chat-row-blue-spaced {
    display: block;
    background: var(--aieo-primary-soft, #DBEAFE);
    border-left: 4px solid var(--aieo-primary, #3B82F6);
    margin-top: 20px;
    padding: 0;
    margin-left: -50px;
    margin-right: -20px;
    padding-left: 50px;
    padding-right: 20px;
}

.aieo-chat-cell-header {
    padding: 10px;
    font-weight: bold;
    display: block;
    width: 100%;
}

.aieo-chat-cell-header-yellow {
    color: var(--aieo-warning-soft-fg, #92400E);
}

.aieo-chat-cell-header-blue {
    color: var(--aieo-primary-soft-fg, #1E40AF);
}

/* Chat Page - Example Box */
.aieo-chat-example-box {
    display: block;
    margin-top: 15px;
    padding: 12px;
    background: var(--aieo-warning-soft, #FEF3C7);
    border-radius: 4px;
    margin-left: -50px;
    margin-right: -20px;
    padding-left: 50px;
    padding-right: 20px;
}

/* Chat Page - Flex Utilities */
.aieo-chat-flex-start {
    display: flex;
    align-items: start;
    gap: 8px;
}

.aieo-chat-flex-1 {
    flex: 1;
}

/* Chat Page - Input Widths */
.aieo-chat-input-full {
    width: 100%;
}

/* Chat Page - Button Spacing */
.aieo-chat-button-spaced {
    margin-right: 5px;
}

/* Checkbox Controls */
.aieo-checkbox-controls {
    margin: 10px 0;
}

.aieo-checkbox-controls .button-link {
    text-decoration: none;
    color: var(--aieo-primary, #2271b1);
    cursor: pointer;
}

.aieo-checkbox-controls .button-link:hover {
    color: var(--aieo-primary, #135e96);
}

/* Textbox Legend (for textarea labels) */
.aieo-textbox-legend {
    vertical-align: top !important;
}

/* Help Text (explanatory text below inputs) */
.aieo-help-text {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Code Example Block */
.aieo-code-example {
    display: block;
    padding: 8px;
    margin: 5px 0 0 0;
    background: #f5f5f5;
    border: 1px solid var(--aieo-border, #ddd);
    border-radius: 3px;
    box-shadow: none;
    line-height: 1.6;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
}

/* Pro Plugin Advertisement */
.aieo-visualizations-row {
    margin-top: 20px;
    width: 100%;
}

.aieo-pro-advertisement {
    background:
        linear-gradient(135deg, rgba(102, 126, 234, 0.85) 0%, rgba(118, 75, 162, 0.85) 100%),
        url('../images/analytics-heatmap.webp') center center / cover no-repeat;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: var(--aieo-primary-fg, #fff);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.aieo-pro-advertisement h3 {
    font-size: 24px;
    margin: 0 0 15px 0;
    color: var(--aieo-primary-fg, #fff);
}

.aieo-pro-advertisement p {
    font-size: 16px;
    margin: 0 0 25px 0;
    max-width: 500px;
    opacity: 0.9;
}

.aieo-pro-advertisement .aieo-pro-cta {
    display: inline-block;
    background: var(--aieo-card, #fff);
    color: var(--aieo-tone-info, #667eea);
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.aieo-pro-advertisement .aieo-pro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--aieo-tone-info, #667eea);
}

.aieo-pro-features {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.aieo-pro-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.aieo-pro-feature .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* The analytics setup's Save & Analyze button, reached by the AI Chat notice's "Go to Analyze Data" link
 * (#analyze-data-section): a short amber pulse marks it (moved from the retired navigation-tabs.php, 27 Oct 2026). */
@media (prefers-reduced-motion: no-preference) {
  #analyze-data-section:target {
    animation: aieo-target-pulse 2s ease-in-out;
    border-radius: 8px;
  }
}
@keyframes aieo-target-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(245, 158, 11, 0.2); }
}