/* Send-feedback modal.
   Deliberately plain: it borrows WP's own button classes and neutral greys so it
   reads as part of wp-admin rather than as a widget bolted onto it. */

/* Visual constants borrowed from the Ctrl+K navigator (aieo-admin-navigator.js)
   so the three overlays in this admin read as one system rather than three
   authors. The navigator builds its DOM in JS with inline cssText, so there is
   no shell to import — only values to agree on. Same backdrop, same radius,
   same shadow; the width differs because a form is not a search palette.
   Extracting a shared shell would mean refactoring working Ctrl+K code, which
   is worth doing one day and is not worth doing inside this release. */
.aieo-fb-overlay {
  position: fixed;
  inset: 0;
  /* Above the sticky admin header (1000), the value picker (100001) and the
     navigator (99999) — a dialog that opens under the thing that opened it is
     the one z-index bug users always find. */
  z-index: 160000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
}

/* [hidden] alone loses to `display:flex`, and an overlay that is merely
   invisible still swallows every click on the page underneath it. */
.aieo-fb-overlay[hidden] {
  display: none;
}

/* 720, not 560, so the category pills sit on one row.
   Four choices wrapping onto two rows read as two questions, and the widest
   locale decides: the Greek set ("Κάτι δεν λειτουργεί", "Κάτι που σας άρεσε")
   needs about 600px of content box, where English fits in 430. Sizing this to
   English would have shipped a modal that only looks right in the language it
   was designed in. The pills still wrap below 640px, where one row is not on
   offer at any width. */
.aieo-fb-card {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}

.aieo-fb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}

.aieo-fb-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.aieo-fb-x {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #646970;
  padding: 2px 6px;
  border-radius: 4px;
}

.aieo-fb-x:hover {
  color: #1d2327;
  background: #f0f0f1;
}

.aieo-fb-body {
  padding: 4px 20px 8px;
}

.aieo-fb-intro {
  margin: 0 0 14px;
  color: #50575e;
}

.aieo-fb-cats {
  border: 0;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aieo-fb-cats legend {
  padding: 0;
  margin-bottom: 6px;
  font-weight: 600;
}

.aieo-fb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #dcdcde;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
}

/* :has() is what lets the whole pill light up from the radio inside it. Where
   it is unsupported the pill simply stays neutral and the radio still shows
   which one is chosen, so nothing becomes unusable. */
.aieo-fb-cat:has(input:checked) {
  border-color: #3858e9;
  background: #f0f4ff;
}

.aieo-fb-label {
  display: block;
  font-weight: 600;
  margin: 0 0 4px;
}

#aieo-fb-msg {
  width: 100%;
  resize: vertical;
}

.aieo-fb-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.aieo-fb-star {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 1px;
  color: #c3c4c7;
}

.aieo-fb-star.on {
  color: #f5b100;
}

.aieo-fb-optional {
  color: #787c82;
  font-size: 12px;
}

.aieo-fb-identity {
  border-top: 1px solid #f0f0f1;
  padding-top: 12px;
  margin-top: 12px;
}

.aieo-fb-identity p {
  margin: 0 0 8px;
  color: #50575e;
}

#aieo-fb-email {
  width: 100%;
  max-width: 320px;
}

.aieo-fb-anon {
  display: block;
  margin-top: 8px;
  color: #50575e;
}

.aieo-fb-consent {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: #f6f7f7;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #50575e;
}

.aieo-fb-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
}

/* `hidden` is only `display:none` at user-agent specificity, so ANY explicit
   display on the same element beats it and the element stays visible. The
   overlay needed this guard and got one; this footer is also display:flex and
   did not, so after submitting, Cancel and Send stayed on screen above the
   thank-you panel. Every element in this file that JS toggles with .hidden and
   that also sets `display` needs the pair. */
.aieo-fb-foot[hidden] {
  display: none;
}

.aieo-fb-msg {
  margin-right: auto;
  color: #b32d2e;
  font-size: 13px;
}

.aieo-fb-thanks {
  padding: 28px 20px 26px;
  text-align: center;
}

.aieo-fb-thanks[hidden] {
  display: none;
}

.aieo-fb-tick {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #edfaef;
  color: #00a32a;
  font-size: 24px;
  line-height: 46px;
}

.aieo-fb-thanks h3 {
  margin: 0 0 4px;
}

.aieo-fb-thanks p {
  margin: 0 0 8px;
  color: #50575e;
}

.aieo-fb-review {
  font-size: 13px;
}

@media (max-width: 600px) {
  .aieo-fb-card {
    max-height: 96vh;
  }
  .aieo-fb-foot {
    flex-wrap: wrap;
  }
}

/* ─── Survey modal ────────────────────────────────────────────────────────
   Follows docs/rooster-one-welcome-modal.html. Kept in this stylesheet rather
   than a new one because the survey and the feedback modal share the overlay
   and the card; only the body differs. */

:root {
  --rooster-blue: #015bb4;
  --rooster-blue-dark: #014a92;
  --rooster-dark: #191c20;
  --rooster-gray: #6b7280;
  --rooster-border: #e5e7eb;
  --rooster-bg-soft: #f5f6f8;
}

/* TWO THIRDS OF THE VIEWPORT, and the content fills it.
   Two earlier attempts kept a narrower measure inside this card — first a 74ch
   cap per block, then a 900px centred column — on the reasoning that a 66vw
   line is too long to read. Both produced the same complaint, and the complaint
   is right: a wide card with narrow content does not read as a considered
   measure, it reads as a layout bug, and the empty band down each side is more
   distracting than a long line. If the card is 66vw then 66vw is the measure.
   94vw is the only clamp, so the modal cannot exceed the screen. */
/* 990px, up from 760. Widening is what REMOVES the scrollbar here, which reads
   backwards until you see the failure: the check-in is five questions whose
   choice rows wrap, and every row that wraps to a second line adds height. At
   760 the answer sets for "what brought you here" and "which AI platforms"
   each took two or three lines, and the card ran past max-height and scrolled.
   Give the rows room to sit on one line and the card gets SHORTER.

   So do not treat this as decoration and trim it back: below about 950 the
   longest choice set wraps again and the scrollbar returns. max-height stays —
   it is the guard for small screens, not the thing being worked around. */
#aieo-form .aieo-fb-card {
  max-width: 990px;
  max-height: 86vh;
  border-radius: 16px;
  padding: 32px 40px 26px;
}

/* Only the form that has something long to say gets the VIEWPORT-relative card.
   The check-in is a title, a sentence and five questions; at 66vw it was mostly
   empty card, which reads as a modal that failed to load rather than one that
   is being brief. See render(): data-wide is set from the presence of blocks,
   so width is a consequence of content and not of a hard-coded form code.

   The narrow card is 990px, not the 760 this note was written against — see
   the rule above for why that number is load-bearing rather than cosmetic. */
#aieo-form[data-wide="1"] .aieo-fb-card {
  /* 70vw. 88 was too much — measured off the operator's own marks, the wanted
     width is about 1,230px at 1920, which is 64vw, so this sits just above it
     and stops the modal reaching for the browser chrome.
     NOTE for whoever tries again: the warning box cannot be two lines at 1920
     by widening. It holds 436 characters in English and 497 in Greek; two lines
     needs roughly 1,840px and 1,970px of text box, both wider than the screen.
     The remaining lever is the sentence, not the stylesheet. */
  width: 70vw;
  max-width: 1400px;
}

/* Padding lives on the card, so the inner sections must not add their own or
   the left edges of the title, the questions and the footer stop lining up —
   which is what made the first version look lopsided. */
#aieo-form .aieo-fb-head,
#aieo-form .aieo-fb-body,
#aieo-form .aieo-fb-foot {
  padding-left: 0;
  padding-right: 0;
}

/* THE CLOSE BUTTON LEAVES THE FLOW so the title can be centred.
   The head is a space-between flex row, which is right when the title is a
   left-aligned form heading — it is what pinned "Δύο λεπτά για να χτίσουμε τα
   σωστά πράγματα" to the left edge while the sentence underneath it sat
   centred, so the panel had two different ideas about its own alignment. The
   welcome modal never showed this because its hero owns the title and the head
   renders empty. Absolute × against the card, per the design spec. */
#aieo-form .aieo-fb-card {
  position: relative;
}

#aieo-form .aieo-fb-head {
  display: block;
  padding-top: 0;
}

#aieo-form .aieo-fb-head h2 {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  /* Room for the × on a narrow card, so a long title cannot run under it. */
  padding: 0 28px;
  margin: 0 0 12px;
}

#aieo-form .aieo-fb-x {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 1;
}

.aieo-form-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--rooster-gray);
  margin: 0 0 20px;
}

.aieo-form-copy {
  font-size: 14px;
  line-height: 1.6;
  color: #33383f;
  margin: 0 0 12px;
}

.aieo-form-tip {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rooster-blue-dark);
  background: #eaf2fc;
  border: 1px solid #cfe2f7;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 14px 0 22px;
}

.aieo-form-divider {
  border: 0;
  border-top: 1px solid var(--rooster-border);
  margin: 4px 0 20px;
}

.aieo-form-q {
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}

.aieo-form-q-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  padding: 0;
  display: block;
}

.aieo-form-q-hint {
  font-size: 12px;
  color: var(--rooster-gray);
  margin: 0 0 10px;
}

/* The layout fix: options wrap as pills instead of stacking as rows. Six short
   choices then read as one question, not as six. */
.aieo-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aieo-form-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rooster-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  background: #fff;
}

/* :has() lights the whole pill from the input inside it. Where it is
   unsupported the pill stays neutral and the radio still shows the choice, so
   nothing becomes unusable. */
.aieo-form-pill:has(input:checked) {
  border-color: var(--rooster-blue);
  background: #eaf2fc;
  color: var(--rooster-blue-dark);
  font-weight: 600;
}

.aieo-form-pill input {
  accent-color: var(--rooster-blue);
  margin: 0;
  flex: 0 0 auto;
}

.aieo-form-other {
  width: 100%;
  margin-top: 8px;
}

.aieo-form-identity {
  margin: 0 0 16px;
}

.aieo-form-identity input[type="email"] {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 4px 0 8px;
}

.aieo-form-anon {
  display: block;
  font-size: 13px;
  color: var(--rooster-gray);
}

.aieo-form-support {
  background: var(--rooster-bg-soft);
  border-radius: 8px;
  padding: 14px;
  margin: 4px 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.aieo-form-support a {
  color: var(--rooster-blue-dark);
  font-weight: 600;
  text-decoration: none;
}

.aieo-form-support a:hover {
  text-decoration: underline;
}

#aieo-form .aieo-fb-consent {
  margin-bottom: 20px;
}

#aieo-form .aieo-fb-foot {
  padding-bottom: 0;
}

/* CENTRED, not flush right. The feedback modal's footer is a form footer, where
   right-aligned Cancel/Send is the wp-admin convention. This one is a single
   invitation to begin, sitting under centred copy — pinned to the right edge of
   a 900px column it reads as an afterthought rather than the next step. */
#aieo-form .aieo-fb-foot {
  justify-content: center;
}

#aieo-form .aieo-fb-foot .button {
  border-radius: 8px;
  padding: 9px 24px;
  font-weight: 600;
}

/* The status line normally pushes the buttons right with margin-right:auto;
   with a centred footer that would shove them off-centre by its own width. */
#aieo-form .aieo-fb-msg {
  margin-right: 0;
}

#aieo-form .aieo-fb-msg:empty {
  display: none;
}

/* ─── Thank you, first and large ──────────────────────────────────────────
   Centred and given room, because it is the only line in this modal that is
   not asking the reader for something. */

.aieo-form-hero {
  text-align: center;
  padding: 8px 0 6px;
}

/* The wordmark the top bar already uses. Sized by height so the SVG's own
   ~2:1 ratio decides the width — setting a width instead would squash it the
   first time the logo is redrawn. */
.aieo-form-hero-logo {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 auto 14px;
}

/* PUNCTUATION, not an icon. Stacked above the word it read as a section marker;
   inline it belongs to the sentence. Slightly smaller than the text and nudged
   up, because a heart glyph sits low on its own baseline and lines up with the
   descenders rather than the caps if left alone. */
.aieo-form-hero-mark {
  color: #e0405e;
  font-size: 0.78em;
  vertical-align: 0.12em;
  margin-right: 0.28em;
}

.aieo-form-hero-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--rooster-ink, #1d2327);
  /* The heart and the word are one line and must never break apart. */
  text-wrap: balance;
}

#aieo-form .aieo-form-hero + .aieo-form-subtitle {
  text-align: center;
}

/* Nothing left in the head when the hero owns the title, so it must not still
   reserve a row of its own above the mark. */
#aieo-form .aieo-fb-head:has(> span:empty) {
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* ─── The word of caution ─────────────────────────────────────────────────
   Amber, not red. It is reassurance about the size of the product, not a
   warning that something is wrong, and the colour has to say so before the
   words are read. */

.aieo-form-caution {
  /* An even 1px border, not a 4px amber rule down the left. The heavy edge is
     the convention for a callout that INTERRUPTS — an error, a blocked action.
     This one reassures, and a bar pointing at it argued the opposite of what it
     says. The fill already marks it as a note; the edge was saying it twice and
     louder. */
  border: 1px solid #e8d9a0;
  background: #fdf8e7;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0 0 24px;
  /* Centred, matching the greeting and the punch line above it — the top of the
     panel now reads as one centred block rather than centred, centred, left. */
  text-align: center;
}

/* The HEADING centres; the paragraph under it does not. A centred heading over
   left-aligned body is a deliberate-looking pairing — centring five lines of
   prose as well would give every line a ragged left edge and make the box
   harder to read than it needs to be. Say the word if the whole block should
   centre. */
.aieo-form-caution-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #7a5c12;
  text-align: center;
}

/* With the heading gone the body is also the FIRST child, so it must not carry
   a top margin either — otherwise the box gains a band of empty amber above the
   sentence and looks like it lost something. */
.aieo-form-caution p:first-child {
  margin-top: 0;
}

.aieo-form-caution p:last-child {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: #5c4a1a;
}

/* ─── The fold ────────────────────────────────────────────────────────────
   Native <details>, so it opens without JavaScript. */

.aieo-form-fold {
  border: 1px solid var(--rooster-border);
  border-radius: 10px;
  padding: 0 14px;
  margin: 0 0 4px;
}

.aieo-form-fold[open] {
  padding-bottom: 4px;
}

.aieo-form-fold-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--rooster-blue-dark);
  list-style: none;
}

/* Both spellings: WebKit still wants the pseudo-element, everyone else takes
   list-style above. Leaving either out shows a stray disclosure triangle
   beside our own chevron. */
.aieo-form-fold-summary::-webkit-details-marker {
  display: none;
}

.aieo-form-fold-summary::marker {
  content: "";
}

.aieo-form-fold-summary:hover .aieo-form-fold-label {
  text-decoration: underline;
}

.aieo-form-fold-label {
  flex: 1 1 auto;
}

.aieo-form-fold-chev {
  font-size: 18px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
  color: var(--rooster-gray);
}

.aieo-form-fold[open] .aieo-form-fold-chev {
  transform: rotate(-90deg);
}

.aieo-form-fold-hint {
  margin: -4px 0 16px;
  font-size: 12px;
  color: var(--rooster-gray);
}

/* ─── The argument: thesis, punch, lede, sections, rule ───────────────────
   Follows docs/rooster-one-welcome-modal_2.html. */


.aieo-form-subtitle {
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: #33383f;
  margin-bottom: 24px;
}

/* The sentence the panel exists to land: centred, blue, heavier, and given air
   above and below so nothing shares the eye with it. */
.aieo-form-punch {
  display: block;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--rooster-blue-dark);
  font-size: 17px;
  margin: 0 auto 28px;
}

.aieo-form-lede {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--rooster-dark);
}

.aieo-form-section {
  font-size: 15px;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--rooster-dark);
}

/* The one line somebody can hold us to, so it does not get to look like the
   paragraph above it. */
.aieo-form-rule {
  font-weight: 600;
  color: var(--rooster-dark);
}

/* Closes the argument the way .aieo-form-punch opens it, so the panel has a
   matching top and bottom instead of trailing off after the last paragraph. */
.aieo-form-sum {
  display: block;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--rooster-blue-dark);
  max-width: 78ch;
  margin: 22px auto 4px;
  padding-top: 18px;
  border-top: 1px solid var(--rooster-border);
}


/* THE TWO CENTRED BLOCKS ARE CAPPED; everything else fills the card.
   A percentage of the card, not a ch measure, because the operator marked the
   width they wanted relative to the panel and that is what should hold as the
   card resizes. 72% keeps the punch line on one line at 70vw while giving the
   thesis a shape rather than letting it run the full width — centred text
   reaching both edges reads as a mistake in a way left-aligned text does not,
   which is why the body copy below is uncapped and these two are not. */
#aieo-form .aieo-form-subtitle,
#aieo-form .aieo-form-punch {
  max-width: 72%;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Not due yet / already answered ──────────────────────────────────────
   Blue, not amber: this is an explanation, not a caution. Amber is already
   spoken for by the "do not let the size of it put you off" panel above, and
   two amber blocks in one modal would flatten both into decoration. */

.aieo-form-blocked {
  border-left: 3px solid var(--rooster-blue, #3858e9);
  background: #eaf2fc;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.aieo-form-blocked-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--rooster-blue-dark, #1d3a8a);
}

.aieo-form-blocked p:not(.aieo-form-blocked-title) {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #33383f;
}

.aieo-form-blocked p:last-child {
  margin-bottom: 0;
}

/* ─── Footer swap ─────────────────────────────────────────────────────────
   Send is only reachable once there is something to send. Driven off
   details[open] so it is correct with the script absent; the .is-fold-open
   class is the same rule for browsers without :has(). */

#aieo-form .aieo-fold-open {
  display: none;
}

#aieo-form .aieo-fb-card:has(#aieo-form-fold[open]) .aieo-fold-open,
#aieo-form.is-fold-open .aieo-fold-open {
  display: inline-block;
}

#aieo-form .aieo-fb-card:has(#aieo-form-fold[open]) .aieo-fold-shut,
#aieo-form.is-fold-open .aieo-fold-shut {
  display: none;
}

@media (max-width: 640px) {
  #aieo-form .aieo-fb-card {
    padding: 20px 18px 18px;
    max-height: 92vh;
  }
  .aieo-form-pill {
    /* Full width once two per row stop fitting, so half-wrapped pills do not
       leave a ragged right edge. */
    flex: 1 1 100%;
  }
  #aieo-form .aieo-fb-card {
    width: auto;
    min-width: 0;
    padding: 20px 18px 18px;
  }
  .aieo-form-hero-title {
    font-size: 24px;
  }
  .aieo-form-hero-logo {
    height: 28px;
  }
}