/* Keep the shared search banner in normal flow as controls wrap on small screens. */
.cont-wr.chatbot-search { height: auto; min-height: 170px; padding: 18px 0 22px; }
.chatbot-search .banner { position: relative; top: auto; }
#chatbot-controls { margin: 16px 0 0; color: #fff; }
.chatbot-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 9px 14px; border: 1px solid rgba(255,255,255,.45);
  border-radius: 30px; background: rgba(9,45,43,.65); color: #fff;
  cursor: pointer; font-size: 14px; line-height: 22px;
}
.chatbot-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chatbot-switch {
  position: relative; flex: 0 0 36px; width: 36px; height: 21px;
  border-radius: 20px; background: #617877; transition: background .18s ease;
}
.chatbot-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003;
  transition: transform .18s ease;
}
.chatbot-toggle input:checked + .chatbot-switch { background: #42bbae; }
.chatbot-toggle input:checked + .chatbot-switch::after { transform: translateX(15px); }
.chatbot-toggle input:focus-visible + .chatbot-switch { outline: 3px solid #f4dc64; outline-offset: 4px; }
.chatbot-toggle-label { font-weight: 600; }
.chatbot-mode { padding-left: 10px; border-left: 1px solid #ffffff50; font-size: 12px; }
.chatbot-panel {
  max-width: 900px; margin: 28px auto; overflow: hidden;
  border: 1px solid #cde1dd; border-radius: 18px; background: #fff; color: #243c38;
  text-align: left; box-shadow: 0 8px 28px rgba(20,65,59,.09);
  font-family: inherit;
}
.chatbot-header {
  display: flex; align-items: center; gap: 16px; padding: 26px 28px;
  background: linear-gradient(115deg, #eaf6f2, #f7fbfa);
  border-bottom: 1px solid #dcebe6;
}
.chatbot-avatar {
  display: flex; align-items: center; justify-content: center; flex: 0 0 52px;
  width: 52px; height: 52px; border-radius: 16px; background: #226f64; color: #fff;
  box-shadow: 0 4px 10px #226f6420;
}
.chatbot-eyebrow { display: block; margin-bottom: 5px; color: #306f63; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.chatbot-panel .chatbot-heading h2 { margin: 0; color: #183f37; font-size: 24px; font-weight: 700; line-height: 1.25; text-transform: none; }
.chatbot-panel .chatbot-heading p { margin: 6px 0 0; color: #526c65; font-size: 14px; line-height: 1.5; }
.chatbot-body { padding: 24px 28px; }
.chatbot-panel .chatbot-hint { margin: 0 0 18px; color: #5b706a; font-size: 13px; line-height: 1.7; }
#chatbot-status { margin: 0 0 12px; color: #256b5d; font-size: 14px; font-weight: 600; line-height: 1.6; }
#chatbot-status:empty, .chatbot-answer:empty { display: none; }
.chatbot-answer {
  padding: 20px 22px; border: 1px solid #e0ebe7; border-left: 3px solid #49a58f;
  border-radius: 4px 12px 12px 4px; background: #f8fbfa;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 15px;
}
.chatbot-panel[aria-busy="true"] #chatbot-status::before {
  content: ""; display: inline-block; flex: 0 0 28px; width: 28px; height: 28px;
  border: 3px solid #c4e0d7; border-top-color: #287e68;
  border-radius: 50%; animation: chatbot-spin .8s linear infinite;
}
.chatbot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.chatbot-actions button {
  padding: 9px 15px; border: 1px solid #c7dbd3; border-radius: 8px;
  background: #fff; color: #2c6153; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; line-height: 1.5; transition: background .15s, border-color .15s;
}
.chatbot-actions button:hover { background: #edf6f2; border-color: #8ab7a7; }
.chatbot-actions #chatbot-retry { background: #226f64; color: #fff; border-color: #226f64; }
.chatbot-actions #chatbot-retry:hover { background: #19594f; }
.chatbot-disclaimer {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px 28px;
  border-top: 1px solid #eee3c9; background: #fdf9ef; color: #71603b;
}
.chatbot-disclaimer svg { flex: 0 0 20px; margin-top: 1px; }
.chatbot-panel .chatbot-disclaimer p { margin: 0; font-size: 12px; line-height: 1.75; }
.chatbot-disclaimer strong { font-weight: 700; }
.chatbot-actions button:focus-visible, #drugcentral-search button:focus-visible { outline: 3px solid #287e68; outline-offset: 3px; }
#drugcentral-search button:disabled { opacity: .5; cursor: wait; }
#chatbot-panel[hidden], #chatbot-controls[hidden], #normal-search-options[hidden], #chatbot-retry[hidden] { display: none; }
@keyframes chatbot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .chatbot-panel[aria-busy="true"] #chatbot-status::before { animation: none; }
  .chatbot-switch, .chatbot-switch::after, .chatbot-actions button { transition: none; }
}
@media (max-width: 767px) {
  .chatbot-panel { margin: 18px 10px; border-radius: 12px; }
  .chatbot-header { padding: 20px 18px; gap: 12px; }
  .chatbot-avatar { flex-basis: 44px; width: 44px; height: 44px; border-radius: 12px; }
  .chatbot-panel .chatbot-heading h2 { font-size: 21px; }
  .chatbot-body { padding: 20px 18px; }
  .chatbot-answer { padding: 16px; font-size: 14px; }
  .chatbot-disclaimer { padding: 14px 18px; }
}

.chatbot-examples { margin-bottom: 24px; }
.chatbot-panel .chatbot-examples h3 { margin: 0 0 6px; color: #183f37; font-size: 17px; line-height: 1.4; text-transform: none; }
.chatbot-panel .chatbot-examples p { margin: 0 0 12px; color: #526c65; font-size: 13px; line-height: 1.6; }
.chatbot-example-list { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chatbot-example {
  display: block; width: 100%; padding: 12px 14px; border: 1px solid #c7dbd3;
  border-radius: 8px; background: #f8fbfa; color: #243c38; text-align: left;
  font-family: inherit; font-size: 14px; line-height: 1.5; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.chatbot-example-label { display: block; margin-bottom: 3px; color: #306f63; font-size: 12px; font-weight: 700; }
.chatbot-example:hover { background: #edf6f2; border-color: #8ab7a7; }
.chatbot-example:focus-visible { outline: 3px solid #287e68; outline-offset: 3px; }

.chatbot-answer a { color: #176b59; text-decoration: underline; }
.chatbot-answer a:hover { color: #104c40; }
.chatbot-answer a:focus-visible { outline: 3px solid #287e68; outline-offset: 3px; }

.chatbot-panel[aria-busy="true"] .chatbot-examples { display: none; }
.chatbot-panel[aria-busy="true"] #chatbot-status {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 100px; padding: 20px; border-radius: 12px; background: #f0f7f4;
}

/* Keep the question available while long answers scroll within their own pane. */
.chatbot-panel { max-width: 1180px; }
.chatbot-heading { flex: 1; }
.chatbot-powered { display: block; margin-top: 8px; color: #306f63; font-size: 11px; }
.chatbot-nav, .chatbot-primary {
  border: 1px solid #c7dbd3; border-radius: 10px; padding: 10px 14px;
  background: #fff; color: #226f64; font: inherit; font-size: 13px; cursor: pointer;
}
.chatbot-workspace { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.7fr); gap: 28px; }
.chatbot-workspace > div { min-width: 0; }
.chatbot-panel h3 { margin: 0 0 12px; font-size: 18px; color: #183f37; text-transform: none; }
.chatbot-question-column { padding-right: 28px; border-right: 1px solid #dcebe6; }
#chatbot-question-form label { display: block; font-size: 13px; margin-bottom: 8px; color: #526c65; }
#chatbot-question {
  display: block; box-sizing: border-box; width: 100%; resize: vertical; min-height: 130px;
  max-height: 300px; padding: 14px; border: 1px solid #b9d3ca; border-radius: 12px;
  background: #f8fbfa; color: #243c38; font: inherit; font-size: 14px; line-height: 1.6;
}
.chatbot-primary { margin-top: 12px; width: 100%; background: #226f64; border-color: #226f64; color: #fff; font-weight: 600; }
.chatbot-primary:hover { background: #19594f; }
.chatbot-primary:disabled { opacity: .5; cursor: wait; }
.chatbot-examples { margin: 20px 0 0; }
.chatbot-examples summary { cursor: pointer; color: #226f64; font-weight: 600; font-size: 14px; padding: 8px 0; }
.chatbot-examples p { margin-top: 8px !important; }
.chatbot-example { padding: 9px 12px; font-size: 12px; }
.chatbot-answer { max-height: min(58vh, 620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chatbot-empty { padding: 32px 24px; margin: 0; border: 1px dashed #b9d3ca; border-radius: 12px; background: #f8fbfa; color: #526c65; font-size: 14px; line-height: 1.8; }
.chatbot-about { padding: 26px 28px; }
.chatbot-about p { font-size: 14px; line-height: 1.8; color: #526c65; }
.chatbot-about h4 { color: #183f37; margin-top: 24px; text-transform: none; }
.chatbot-architecture { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-left: 20px; }
.chatbot-architecture li { padding: 14px; border-radius: 10px; background: #f0f7f4; font-size: 14px; }
.chatbot-architecture span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.7; }
.chatbot-nav:focus-visible, .chatbot-primary:focus-visible, #chatbot-question:focus-visible, .chatbot-examples summary:focus-visible { outline: 3px solid #287e68; outline-offset: 3px; }
#chatbot-about[hidden], #chatbot-workspace[hidden], #chatbot-empty[hidden] { display: none; }
@media (max-width: 767px) {
  .chatbot-header { flex-wrap: wrap; }
  .chatbot-nav { margin-left: 56px; }
  .chatbot-workspace { grid-template-columns: 1fr; gap: 22px; }
  .chatbot-question-column { padding-right: 0; padding-bottom: 22px; border-right: 0; border-bottom: 1px solid #dcebe6; }
  .chatbot-architecture { grid-template-columns: 1fr; }
  .chatbot-about { padding: 20px 18px; }
}

#q[data-chatbot="on"] { filter: blur(2px); }
#q:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
#drugcentral-search button:disabled { cursor: not-allowed; }