.mgdt-chat {
  width: min(820px, 100%);
  margin: 0 auto 0;
  color: #162033;
}

.mgdt-chat__status,
.mgdt-answer {
  border: 1px solid rgba(22, 32, 51, 0.14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(8, 19, 39, 0.12);
  padding: 22px;
  text-align: left;
  margin: 10px auto 10px;
}

.mgdt-chat__status {
  color: #44506a;
  font-weight: 700;
}

/*
 * The question, echoed the instant it is asked.
 *
 * Printed by open() before anything is awaited, and outside .mgdt-chat__body,
 * which the renderers empty when the answer lands — so it stays put for the
 * whole exchange rather than flashing and vanishing. Tinted and shouldered to
 * the right, unlike the answer cards: this is what the reader said, and it
 * should not be mistaken for something Dr. Teddy wrote.
 *
 * It sits on the ask bar's near-black band as often as on white page copy, so
 * it carries its own light background rather than borrowing either.
 */
.mgdt-chat__question {
  width: fit-content;
  max-width: min(560px, 85%);
  margin: 10px 0 0 auto;
  padding: 12px 18px;
  border: 1px solid rgba(22, 32, 51, 0.10);
  border-radius: 18px 18px 4px 18px;
  background: #eef1f6;
  color: #162033;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.mgdt-chat__status::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 2px solid #d2d8e4;
  border-top-color: #b11b29;
  border-radius: 50%;
  animation: mgdt-spin .8s linear infinite;
}

@keyframes mgdt-spin { to { transform: rotate(360deg); } }

.mgdt-chat__phrase {
  display: inline-block;
  animation: mgdt-phrase-in .45s ease;
}

@keyframes mgdt-phrase-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.mgdt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.mgdt-answer__label {
  display: inline-flex;
  margin-bottom: 14px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.mgdt-answer__label--official { background: #e8f6ec; color: #176534; }
.mgdt-answer__label--provisional { background: #fff1cf; color: #7a4a00; }
.mgdt-answer__block + .mgdt-answer__block { margin-top: 18px; }
.mgdt-answer h3 { margin: 0 0 6px; font-size: 16px; }
.mgdt-answer p { margin: 0; line-height: 1.65; }
.mgdt-answer ul { margin: 8px 0 0 20px; }

.mgdt-answer__disclosure,
.mgdt-answer__attribution {
  margin-top: 18px !important;
  color: #5d6678;
  font-size: 13px;
}

.mgdt-answer__alt {
  margin-top: 14px !important;
  font-size: 14px;
}

.mgdt-answer__sources,
.mgdt-answer__limitations {
  margin-top: 20px;
  border-top: 1px solid #e4e8ef;
  padding-top: 16px;
}

.mgdt-answer__sources a { color: #8d1522; font-weight: 700; }

/* Inline review links sit inside running prose, so they underline rather than
   shout, and keep a comfortable tap target on a phone. */
.mgdt-answer__link {
  color: #8d1522;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mgdt-answer__link:hover,
.mgdt-answer__link:focus { text-decoration-thickness: 2px; }

.mgdt-feedback { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: #5d6678; font-size: 13px; }
/*
 * Round icon buttons: 44px is the tap target, and with the label moved to
 * aria-label and title there is no text to pad around, so the padding goes and
 * the radius finally reads as a circle. The thumb is drawn in currentColor, so
 * colouring the button is all dark mode has to do.
 */
.mgdt-feedback button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccd2de;
  border-radius: 999px;
  background: #fff;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.mgdt-feedback button:hover { background: #f3f5f9; color: #162033; }
.mgdt-feedback__thumb { display: block; }
.mgdt-feedback__thumb--down { transform: rotate(180deg); }
.mgdt-chat-form { display: flex; gap: 8px; }
.mgdt-chat-form input { flex: 1; min-width: 0; }

/* Floating "Ask Dr. Teddy" bubble (design: Movieguide Redesign v2, DR. TEDDY BUBBLE) */
.mgdt-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.mgdt-bubble__fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: #0a0a0a;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.mgdt-bubble__fab:hover { transform: scale(1.06); }

.mgdt-bubble__fab img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center 22%;
}

.mgdt-bubble__panel {
  width: 340px;
  max-width: calc(100vw - 48px);
  background: #0a0a0a;
  color: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  animation: mgdt-fade-up 0.25s ease;
}

@keyframes mgdt-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mgdt-bubble__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mgdt-bubble__header img { height: 38px; width: auto; display: block; }
.mgdt-bubble__titles { display: flex; flex-direction: column; line-height: 1.2; }
.mgdt-bubble__title { font-size: 14px; font-weight: 800; }
.mgdt-bubble__subtitle { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

.mgdt-bubble__close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.mgdt-bubble__close:hover { color: #fff; }

.mgdt-bubble__form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 80px;
  padding: 6px 6px 6px 16px;
}

.mgdt-bubble__form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  min-width: 0;
}

.mgdt-bubble__form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.mgdt-bubble__submit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #003bff;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.mgdt-bubble__submit:hover { opacity: 0.88; }

.mgdt-bubble__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.mgdt-bubble__chips a {
  padding: 6px 12px;
  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;
  cursor: pointer;
  text-decoration: none;
}

.mgdt-bubble__chips a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.mgdt-bubble .mgdt-chat {
  width: auto;
  margin: 12px 0 0;
  max-height: 55vh;
  overflow-y: auto;
  color: #162033;
}

.mgdt-bubble .mgdt-chat:empty { display: none; }

/* Keep clear of the theme's floating bottom navigation pill on small screens. */
@media (max-width: 782px) {
  .mgdt-bubble { bottom: 92px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mgdt-chat__status::before { animation: none; }
  .mgdt-chat__phrase { animation: none; }
  .mgdt-bubble__panel { animation: none; }
  .mgdt-bubble__fab { transition: none; }
}

@media (prefers-color-scheme: dark) {
  .mgdt-chat { color: #e4e8ef; }

  .mgdt-chat__status,
  .mgdt-answer {
    border-color: rgba(228, 232, 239, 0.18);
    background: #1b2437;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  }

  .mgdt-chat__question {
    border-color: rgba(228, 232, 239, 0.18);
    background: #27314a;
    color: #e4e8ef;
  }

  .mgdt-chat__status { color: #aab4c8; }
  .mgdt-chat__status::before { border-color: #44506a; border-top-color: #e05563; }
  .mgdt-answer__label--official { background: #143d24; color: #7fd39a; }
  .mgdt-answer__label--provisional { background: #4a3200; color: #f4c96b; }

  .mgdt-answer__disclosure,
  .mgdt-answer__attribution,
  .mgdt-feedback { color: #aab4c8; }

  .mgdt-answer__sources,
  .mgdt-answer__limitations { border-top-color: #313d55; }

  .mgdt-answer__sources a,
  .mgdt-answer__link { color: #f08791; }
  .mgdt-feedback button { border-color: #44506a; background: #24304a; color: #e4e8ef; }
  .mgdt-feedback button:hover { background: #2d3a56; color: #ffffff; }
}