.chatbot-guide-card { margin: 10px 0; padding: 10px; border: 1px solid #dce5f1; border-radius: 10px; background: #f3f7fc; }
.chatbot-guide-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #294b70; }
.chatbot-guide-heading span { font-size: 10px; color: #60758b; }
.chatbot-guide-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chatbot-guide-preview { overflow: hidden; min-width: 0; padding: 0; border: 1px solid #cedcec; border-radius: 7px; background: white; cursor: zoom-in; }
.chatbot-guide-preview img { display: block; width: 100%; height: auto; }
.chatbot-guide-preview span { display: block; padding: 7px 4px; color: #28598e; font-size: 11px; }
.chatbot-guide-preview.is-unavailable { min-height: 90px; }
.chatbot-guide-open { width: 100%; padding: 8px; margin-top: 8px; border: 1px solid #b8cfe9; border-radius: 6px; color: #245c96; background: white; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.chatbot-guide-explanation { margin: 10px 0; font-size: 12px; }
.chatbot-guide-explanation .chatbot-text { margin-top: 8px; }
.chatbot-guide-caution { margin: 8px 0; font-size: 11px; color: #795720; line-height: 1.6; }
.chatbot-guide-dialog { position: fixed; inset: 0; margin: auto; padding: 0; width: min(1240px, calc(100vw - 32px)); max-width: none; height: calc(100dvh - 40px); max-height: none; border: 1px solid #d8e2ee; border-radius: 14px; color: var(--ink); background: white; box-shadow: 0 20px 80px #102b4b40; overflow: hidden; }
.chatbot-guide-dialog[open] { display: flex; flex-direction: column; }
.chatbot-guide-dialog::backdrop { background: #10243ed9; }
.chatbot-guide-dialog [hidden] { display: none !important; }
.chatbot-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chatbot-guide-header > div { min-width: 0; }
.chatbot-guide-header h2 { font-size: 16px; margin: 0; }
.chatbot-guide-header p { margin: 4px 0 0; color: #61748a; font-size: 12px; line-height: 1.4; }
.chatbot-guide-dialog button, .chatbot-guide-dialog select { min-height: 34px; padding: 5px 9px; border: 1px solid #d7e2ef; border-radius: 6px; color: #294b70; background: white; font: inherit; font-size: 12px; cursor: pointer; }
.chatbot-guide-dialog button:disabled { opacity: .4; cursor: default; }
#closeChatbotGuide { flex: 0 0 36px; min-height: 36px; font-size: 24px; padding: 0; }
.chatbot-guide-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #f7f9fc; border-bottom: 1px solid var(--line); }
.chatbot-guide-navigation, .chatbot-guide-zoom { display: flex; align-items: center; gap: 5px; min-width: 0; }
.chatbot-guide-navigation { flex: 1 1 380px; }
.chatbot-guide-navigation select { flex: 1; min-width: 0; width: 100%; max-width: 380px; }
.chatbot-guide-navigation > span { white-space: nowrap; font-size: 11px; color: #5d728b; }
.chatbot-guide-zoom output { min-width: 56px; text-align: center; font-size: 11px; }
.chatbot-guide-stage { flex: 1; min-height: 0; padding: 12px; overflow: auto; scrollbar-gutter: stable; background: #dce3ec; overscroll-behavior: contain; }
.chatbot-guide-stage img { display: block; max-width: none; height: auto; margin: 0 auto; background: white; box-shadow: 0 2px 14px #213f6230; }
#chatbotGuideLoadStatus { margin: 0; font-size: 13px; line-height: 1.6; color: #294b70; }
#chatbotGuideLoadStatus:empty { display: none; }
.chatbot-guide-dialog button:focus-visible, .chatbot-guide-dialog select:focus-visible, .chatbot-guide-stage:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 600px) {
  .chatbot-guide-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .chatbot-guide-header { padding: 8px 10px; }
  .chatbot-guide-header h2 { font-size: 14px; }
  .chatbot-guide-header p { font-size: 11px; }
  .chatbot-guide-toolbar { padding: 6px 8px; gap: 6px; }
  .chatbot-guide-navigation { flex-basis: 100%; }
  .chatbot-guide-zoom { flex-wrap: wrap; }
  .chatbot-guide-dialog button, .chatbot-guide-dialog select { min-height: 36px; }
}