/**
 * Dr. Teddy ask bar.
 *
 * Moved here from the 2026 theme's style.css so the bar travels with the
 * plugin that renders it. The custom properties it reads are the theme's design
 * tokens; each carries the theme's own value as a fallback, so the bar still
 * looks right under a theme that never defined them, and follows the
 * light/dark toggle under one that does.
 *
 * @package movieguide-dr-teddy
 */

/*
 * The bar is a full-bleed band: its background runs edge to edge while
 * .mg-teddy__inner keeps the content centred and capped. --mg-band-max is the
 * 2026 theme's published cap for exactly that shape. It resolves to `none`
 * normally — so these two declarations do nothing at all, here or under any
 * other theme — and to the width of the narrowed page while a background
 * takeover is running, when a band left at full width would run out past the
 * ad rails and give away that the page is not as wide as it looks.
 *
 * The theme asks nothing of this plugin and names nothing in it; the contract
 * is the property. See BACKGROUND TAKEOVER in the 2026 theme's style.css.
 */
.mg-teddy {
  background: var(--dark-band, #0a0a0a);
  color: #ffffff;
  max-width: var(--mg-band-max, none);
  margin-inline: auto;
}
/*
 * The inner column holds two things — the row the search pill sits in, and the
 * suggestion chips — so this gap is precisely the distance between the pill and
 * the chips, at every width. It is deliberately tighter than the gaps inside
 * the row: the chips are the pill's own suggestions rather than a third element
 * of the bar, and they should sit close enough to read as belonging to it.
 */
.mg-teddy__inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.mg-teddy__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mg-teddy__row img { height: 64px; width: auto; display: block; flex-shrink: 0; }
.mg-teddy__row h1, .mg-teddy__row .mg-teddy__h {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  max-width: 240px;
}
/*
 * BETA pill between the mascot and the heading — the same accent token as the
 * submit button, so the pair stay one colour whatever the theme resolves the
 * accent to. The markup says 'Beta' and the casing happens here, so a
 * translation arrives as a word rather than shouting.
 */
.mg-teddy__beta {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent, #003bff);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.mg-teddy__form {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 80px;
  padding: 6px 6px 6px 20px;
}
.mg-teddy__form input[type="search"],
.mg-teddy__form input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
}
.mg-teddy__form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mg-teddy__submit {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #003bff);
  color: #ffffff;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.mg-teddy__submit:hover { opacity: 0.88; }
/*
 * ONE LINE, ALWAYS
 *
 * The chips scroll sideways and never wrap, at any width. A wrapped row moves
 * the band's bottom edge as the window resizes, and it was what made the phone
 * band nearly twice as tall as it needed to be. Chips past the edge stay
 * tabbable, and the browser scrolls them in when focus reaches them.
 *
 * Right-aligned by an auto margin on the first chip rather than
 * justify-content: flex-end. In a scroll container flex-end pushes the overflow
 * out past the start edge, where scrolling cannot reach it; an auto margin
 * resolves to zero the moment the row overflows, so nothing is stranded. The
 * padding is room for the 2026 theme's focus ring — 3px at a 3px offset — which
 * a scroll container would otherwise clip against the chips' own edges, and the
 * matching negative margin means it costs no visible space.
 */
.mg-teddy__chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px;
  margin: -6px;
}
.mg-teddy__chips::-webkit-scrollbar { display: none; }
.mg-teddy__chips a {
  flex: none;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
}
.mg-teddy__chips a:first-child { margin-inline-start: auto; }
.mg-teddy__chips a:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }

/*
 * PHONE
 *
 * The desktop bar is one row; on a phone it becomes three, and the job here is
 * to keep those three as short as the single row was tall — roughly 200px for
 * the band, against the 370px the desktop rules alone once gave it.
 *
 * The heading is matched with the mascot on the first row rather than given one
 * of its own: the mascot's PNG is 16:9 with the bear centred in it, so at any
 * height it reserves nearly twice its visible width, and a heading beside it is
 * filling space that is already paid for.
 *
 * .mg-teddy__row .mg-teddy__h carries a class the base rule does not need, so
 * it can outrank `.mg-teddy__row h1` — which is what these overrides are
 * against, headingLevel defaulting to 1.
 */
@media (max-width: 640px) {
  .mg-teddy__inner { padding: 18px 18px 20px; }
  .mg-teddy__row img { height: 56px; }
  /* Smaller pill so the heading beside it keeps as much of the row as it can. */
  .mg-teddy__beta { font-size: 10px; padding: 5px 10px; }
  .mg-teddy__row .mg-teddy__h {
    flex: 1;
    min-width: 0;
    max-width: none;
    font-size: clamp(18px, 4.6vw, 20px);
  }
  /* Own row, whatever is left over on the first one. */
  .mg-teddy__form { flex-basis: 100%; min-width: 0; }
  /*
   * The chip row already scrolls at every width; on a phone it also runs out
   * through the band's padding to the screen edge, so the chip it cuts off is
   * visibly cut off — a row that ends short of the edge reads as the whole
   * list. And it starts at the left, where the eye already is, rather than
   * right-aligned under a full-width pill.
   */
  .mg-teddy__chips { margin-inline: -18px; padding-inline: 18px; }
  .mg-teddy__chips a:first-child { margin-inline-start: 0; }
}

/*
 * ADMINISTRATOR NOTE — MGDT_Plugin::admin_placeholder()
 *
 * Stands in for a Dr. Teddy block that cannot work, for readers with
 * manage_options only. Deliberately unlike the rest of the page: this is
 * back-of-house information that happens to be printed on the front end, and it
 * should read as a note to the person editing the site rather than as a section
 * of the site. So it borrows wp-admin's warning notice instead of the theme's
 * tokens, and fixes its own colours rather than following the light/dark toggle
 * — the same reason the editor canvas shows it against the same paper in both.
 *
 * These rules live in the ask bar's stylesheet because that handle is
 * registered whatever available() says; the chat block's is not, so it borrows
 * this one. .mg-teddy-off is the ask bar's own wrapper in place of .mg-teddy,
 * carrying the section's spacing without its full-bleed dark band.
 */
.mg-teddy-off { padding: 24px; }
.mgdt-admin-notice {
  max-width: 1020px;
  margin: 0 auto;
  padding: 14px 18px;
  border: 1px solid #f0b849;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fcf9e8;
  color: #1e1e1e;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.mgdt-admin-notice p, .mgdt-admin-notice li { color: inherit; margin: 0; }
.mgdt-admin-notice__head { font-weight: 700; }
.mgdt-admin-notice__list {
  list-style: disc;
  margin: 8px 0 8px 20px;
  padding: 0;
}
.mgdt-admin-notice__list li { margin: 4px 0; }
.mgdt-admin-notice__foot { font-size: 13px; }
.mgdt-admin-notice__foot a { color: #2271b1; text-decoration: underline; }