/* Bubble dimensions, colours and typography follow canvas/src/styles.css. */
.map-tools { display: flex; align-items: center; gap: 8px; }
.map-tools button { padding: 6px 9px; border: 1px solid #354239; border-radius: 7px; background: #1a221d; color: #adbdaf; font-size: 9px; }
.map-tools button:hover { background: #27372b; color: var(--green); }
.map-tools button span { margin-left: 5px; }
.map-scroll { position: relative; width: 100%; height: 500px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.map-scroll:after { content: none; }
.map-space { min-width: 100%; position: relative; }
.conversation-map { min-width: 0; height: auto; transform-origin: top left; }
.conversation-map .map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.conversation-map .edge { stroke: #3d4348; stroke-width: 1.5; }
.conversation-map .edge.active { stroke: #4cc38a; stroke-width: 2; }
.conversation-map .message {
  display: block; position: absolute; height: auto; border-radius: 24px;
  padding: 14px 18px; text-align: left; gap: 0; user-select: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  transition: background .15s, color .15s, box-shadow .15s;
  transform: none;
}
.conversation-map .prompt { background: #f3f4f1; color: #191c1a; width: max-content; min-width: 70px; max-width: 300px; }
.conversation-map .prompt.with-images { width: 240px; }
.conversation-map .answer { background: #3a3e43; color: #e8eae7; width: 420px; }
.conversation-map .message.selected { background: #3fae75; color: #07170e; box-shadow: 0 0 0 6px rgba(76, 195, 138, .16), 0 14px 36px rgba(0, 0, 0, .4); }
.conversation-map .prompt:hover:not(.selected) { background: white; }
.conversation-map .answer:hover:not(.selected) { background: #42474d; }
.message-select { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; border-radius: 8px; }
.bubble-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.answer .bubble-text { display: block; font-size: 13.5px; line-height: 1.6; -webkit-line-clamp: unset; line-clamp: unset; max-height: 260px; overflow: hidden; }
.bubble-preview.clipped { mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
.bubble-time { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1; font-variant-numeric: tabular-nums; color: #8d918e; }
.answer .bubble-time { color: rgba(232, 234, 231, .55); }
.selected .bubble-time { color: rgba(7, 23, 14, .65); }
.bubble-images { display: grid; grid-template-columns: 1fr; gap: 6px; margin: -6px -10px 10px; }
.slide-thumbnail { display: block; padding: 0; background: rgba(127, 127, 127, .15); border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; }
.slide-thumbnail img { width: 100%; height: auto; display: block; object-fit: contain; }
.slide-thumbnail:hover { box-shadow: 0 0 0 2px #4cc38a; }
.study-controls { padding: 17px 20px; background: #19211c; border-top: 1px solid #2a3530; }
.controls-heading { display: flex; align-items: center; gap: 8px; color: #9fc9ad; font-size: 7px; font-weight: 550; letter-spacing: 1.2px; }
.controls-note { margin-left: auto; color: #91a596; font-size: 8px; font-weight: 400; letter-spacing: 0; }
#followup-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.followup-button { background: #23372a; color: #c2e8ce; border: 1px solid #3c6048; border-radius: 8px; padding: 9px 12px; font-size: 10px; line-height: 1.5; text-align: left; }
.followup-button:hover { background: #304f3b; border-color: var(--green); }
.followup-button.quiet-action { background: transparent; border-color: #37463b; color: #a1b3a6; }
.quiz-status { color: #c2e8ce; font-size: 10px; line-height: 1.8; }
.quiz-status:not(:empty) { margin-top: 11px; }
.demo-reader { display: block; background: #161c18; padding: 18px 20px 20px; border-top: 1px solid #29352d; }
.reader-top { display: flex; align-items: center; gap: 9px; font-size: 9px; color: #9ebda7; }
#reader-time { color: #899c8e; font-size: 8px; }
.reader-hint { margin-left: auto; color: #91a596; font-size: 8px; }
.demo-reader #reader-content { max-width: none; margin-top: 12px; max-height: 220px; overflow: auto; font-size: 12px; line-height: 1.8; color: #c9d5cc; white-space: pre-wrap; }
.reader-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; max-width: 500px; }
.reader-images[hidden] { display: none; }
.reader-images .slide-thumbnail { border-radius: 8px; }
.demo-caption { max-width: 100%; }
#slide-viewer { width: min(1160px, calc(100% - 32px)); max-height: 94dvh; padding: 0; border: 1px solid #52665a; border-radius: 14px; color: #e7e9e6; background: #171d19; box-shadow: 0 30px 100px #0009; }
#slide-viewer::backdrop { background: #07110bd9; backdrop-filter: blur(6px); }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 18px; border-bottom: 1px solid #39493e; }
.viewer-bar h2 { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.viewer-bar button { display: flex; align-items: center; gap: 12px; color: #d6e6db; font-size: 12px; padding: 8px 12px; border-radius: 7px; background: #293b2e; }
.viewer-bar button span { font-size: 20px; line-height: 1; }
.viewer-scroll { padding: 16px; overflow: auto; max-height: calc(94dvh - 78px); }
.viewer-scroll img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(94dvh - 112px); object-fit: contain; margin: auto; border-radius: 3px; }
@media (min-width: 1001px) {
  .map-scroll { height: 660px; }
}
@media (max-width: 1000px) {
  .demo-topbar { gap: 10px; }
  .demo-reader, .study-controls { padding-inline: 15px; }
}
@media (max-width: 760px) {
  .example-list { display: grid; grid-template-columns: 1fr 1fr; }
  .example { font-size: 9px; padding: 9px; }
  .map-scroll { height: 460px; }
  .demo-topbar { height: 50px; padding-inline: 12px; }
  .canvas-title { font-size: 9px; }
  .map-tools { gap: 5px; }
  .map-tools button { font-size: 8px; padding: 6px; }
  .controls-heading { font-size: 6px; }
  .controls-note { font-size: 7px; }
  .followup-button { font-size: 10px; padding: 9px 11px; }
  .demo-reader #reader-content { font-size: 11px; }
  .reader-hint { font-size: 7px; }
}
@media (max-width: 480px) {
  .controls-note { display: none; }
  .reader-hint { display: none; }
  .study-controls { padding: 15px 12px; }
  .demo-reader { padding: 16px 12px; }
  .map-scroll { height: 440px; }
  .example { font-size: 8px; }
  #followup-actions { gap: 6px; }
  .followup-button { flex: 1 1 135px; font-size: 9px; }
  .quiet-action { flex-basis: 100%; }
  .viewer-bar { padding: 12px; }
  .viewer-bar h2 { font-size: 12px; }
  .viewer-scroll { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .conversation-map .message { transition: none; }
}