/* Bookie — scoped to the mascot. Inactive until body.bookie-on. */

.bookie-settings-scroll {
  display: contents;
}

.bookie-dock {
  display: none;
  position: relative;
  pointer-events: none;
}

.bookie-dock-art {
  width: 108px;
  height: 70px;
  position: relative;
}

.bookie-bed {
  width: 108px;
  height: 70px;
  display: block;
}

@media (min-width: 1024px) {
  body.bookie-on .progress-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    gap: 6px;
  }

  body.bookie-on .bookie-settings-scroll {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
  }

  body.bookie-on .bookie-settings-scroll > .progress-card {
    flex: 0 0 auto;
    padding: 8px 10px;
  }

  body.bookie-on .progress-sidebar .timer-card {
    padding: 6px 10px;
  }

  body.bookie-on .progress-sidebar .timer-card .timer-display {
    font-size: 1.35rem;
    line-height: 1.1;
    margin: 0 0 2px;
  }

  body.bookie-on .progress-sidebar .timer-card .timer-controls,
  body.bookie-on .progress-sidebar .timer-card .timer-presets {
    margin-bottom: 2px;
  }

  body.bookie-on .progress-sidebar .card-title,
  body.bookie-on .progress-sidebar .ai-desc-card .card-title {
    margin-bottom: 4px;
  }

  body.bookie-on .progress-sidebar .pref-slider-row {
    margin-top: 0;
  }

  body.bookie-on .progress-sidebar .pref-slider-labels {
    margin-top: 2px;
  }

  body.bookie-on .bookie-settings-scroll > .ai-desc-card {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
  }

  body.bookie-on .ai-desc-textarea {
    flex: 1 1 auto;
    height: 58px;
    min-height: 40px;
    max-height: 58px;
    margin-bottom: 4px;
    padding: 6px 8px;
    font-size: 0.75rem;
    line-height: 1.3;
  }

  body.bookie-on .ai-desc-footer {
    gap: 2px;
  }

  body.bookie-on .ai-desc-save-btn {
    padding: 6px 10px;
  }

  body.bookie-on .progress-sidebar .ai-description-status {
    line-height: 1.2;
  }

  body.bookie-on #bookie-dock.is-active {
    display: flex;
    position: relative;
    align-items: flex-end;
    justify-content: center;
    flex: 1 0 auto;
    height: auto;
    min-height: 124px;
    border-top: 1px solid var(--sm-border, #c4c2ce);
    padding-bottom: 4px;
  }
}

@media (max-width: 1023px) {
  body.bookie-on .chat-panel-body {
    position: relative;
  }

  body.bookie-on #bookie-dock-compact.is-active {
    display: block;
    position: absolute;
    right: 10px;
    width: 120px;
    height: 104px;
    z-index: 3;
    pointer-events: none;
  }

  body.bookie-on #bookie-dock-compact.is-active .bookie-dock-art {
    position: absolute;
    right: 4px;
    bottom: 0;
  }
}

body.bookie-on.bookie-keyboard #bookie-dock-compact,
body.bookie-on.bookie-keyboard #bookie-dock-compact.is-active {
  display: none;
}

/* Teacher home: bottom of the sticky sidebar, nav scrolls above it. */
body.bookie-on .td-sidebar {
  overflow: hidden;
}

body.bookie-on .td-sidebar .td-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

body.bookie-on .td-sidebar #bookie-dock.is-active {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 148px;
  height: 148px;
  border-top: 1px solid var(--sm-border, #c4c2ce);
  padding-bottom: 6px;
}

@media (max-width: 860px) {
  body.bookie-on .bookie-dock-teacher.is-active {
    display: block;
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 120px;
    height: 104px;
    z-index: 20;
  }

  body.bookie-on .bookie-dock-teacher.is-active .bookie-dock-art {
    position: absolute;
    right: 4px;
    bottom: 0;
  }

  body.bookie-on.bookie-keyboard .bookie-dock-teacher,
  body.bookie-on.bookie-keyboard .bookie-dock-teacher.is-active {
    display: none;
  }
}

.bookie-restore {
  display: none;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--sm-ai-border, #b8b4c8);
  background: var(--sm-surface, #e3e1e9);
  color: var(--sm-text, #1a1f2e);
  font: inherit;
  font-size: var(--sm-text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
}

body.bookie-on .bookie-restore.is-visible {
  display: block;
}

.bookie-restore:focus-visible {
  outline: 2px solid var(--sm-lavender, #bba2ff);
  outline-offset: 2px;
}

.bookie-bed-restore {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding: 6px 8px 0;
  border: 0;
  background: transparent;
  color: var(--sm-text, #1a1f2e);
  font: inherit;
  cursor: pointer;
}

.bookie-bed-restore[hidden] {
  display: none !important;
}

body.bookie-on.bookie-hidden #bookie-dock.is-active,
body.bookie-on.bookie-hidden #bookie-dock-compact.is-active,
body.bookie-on.bookie-hidden .bookie-dock-teacher.is-active {
  pointer-events: auto;
}

body.bookie-on.bookie-hidden #bookie-dock.is-active .bookie-bed-restore:not([hidden]),
body.bookie-on.bookie-hidden #bookie-dock-compact.is-active .bookie-bed-restore:not([hidden]) {
  display: flex;
}

.bookie-bed-restore-label {
  pointer-events: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sm-surface, #fff);
  border: 1px solid var(--sm-border, #c4c2ce);
  color: var(--sm-text, #1a1f2e);
}

.bookie-bed-restore:focus-visible {
  outline: 2px solid var(--sm-lavender, #bba2ff);
  outline-offset: -2px;
}

.bookie-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  z-index: 150;
  pointer-events: none;
}

body.bookie-modal .bookie-overlay {
  visibility: hidden;
}

.bookie-actor {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 78px;
  overflow: visible;
  pointer-events: none;
}

.bookie-mascot {
  position: relative;
  width: 64px;
  height: 78px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
  overflow: visible;
}

.bookie-mascot:active {
  cursor: grabbing;
}

.bookie-mascot:focus-visible {
  outline: 2px solid var(--sm-lavender, #bba2ff);
  outline-offset: 3px;
  border-radius: 10px;
}

.bookie-mascot[data-motion="dragging"] {
  cursor: grabbing;
}

.bookie-pose {
  width: 64px;
  height: 78px;
  transform-origin: 32px 76px;
}

.bookie-rig {
  width: 64px;
  height: 78px;
  transform-origin: 32px 70px;
}

.bookie-mascot.is-scripted .bookie-rig,
.bookie-mascot.is-lookdown .bookie-rig,
.bookie-mascot.is-worried .bookie-rig {
  animation: none;
}

.bookie-mascot svg {
  width: 64px;
  height: 78px;
  display: block;
  overflow: visible;
}

.bookie-mascot.is-settled[data-expression="idle"] .bookie-rig,
.bookie-mascot.is-settled[data-expression="reading"] .bookie-rig {
  animation: bookie-sway 2.6s ease-in-out infinite;
}

.bookie-mascot[data-motion="sleeping"] .bookie-rig {
  transform: none;
  transform-origin: 32px 76px;
  animation: bookie-breathe 3.2s ease-in-out infinite;
}

.bookie-eye-shut,
.bookie-mouth-flat,
.bookie-mouth-open,
.bookie-mouth-oh,
.bookie-mouth-sleep,
.bookie-brow,
.bookie-mouth-worry {
  display: none;
}

.bookie-mascot.is-worried .bookie-brow,
.bookie-mascot.is-worried .bookie-mouth-worry {
  display: block;
}

.bookie-mascot.is-worried .bookie-mouth-smile {
  display: none;
}

.bookie-mascot.is-worried .bookie-eye-open {
  transform: scale(1.16);
  transform-box: fill-box;
  transform-origin: center;
}

.bookie-mascot.is-lookdown .bookie-pupil {
  animation: bookie-lookdown 2.8s ease-in-out infinite;
}

.bookie-mascot.is-blink .bookie-eye-scale {
  transform: scaleY(0.14);
}

.bookie-mascot[data-expression="sleep"] .bookie-eye-open,
.bookie-mascot[data-expression="sleep"] .bookie-pupil {
  display: none;
}

.bookie-mascot[data-expression="sleep"] .bookie-eye-shut,
.bookie-mascot[data-expression="sleep"] .bookie-mouth-sleep {
  display: block;
}

.bookie-mascot[data-expression="sleep"] .bookie-eye-shut {
  stroke-width: 1.8;
}

.bookie-mascot[data-expression="sleep"] .bookie-mouth-smile {
  display: none;
}

.bookie-mascot[data-expression="thinking"] .bookie-mouth-smile,
.bookie-mascot[data-expression="error"] .bookie-mouth-smile {
  display: none;
}

.bookie-mascot[data-expression="thinking"] .bookie-mouth-flat,
.bookie-mascot[data-expression="error"] .bookie-mouth-flat {
  display: block;
}

.bookie-mascot[data-expression="air"] .bookie-mouth-smile {
  display: none;
}

.bookie-mascot[data-expression="air"] .bookie-mouth-oh {
  display: block;
}

.bookie-mascot[data-expression="responding"] .bookie-mouth-smile {
  animation: bookie-talk 0.42s steps(2, end) infinite;
}

.bookie-thought,
.bookie-z {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.bookie-thought {
  top: -16px;
  left: 38px;
  width: 40px;
  height: 20px;
}

.bookie-z {
  top: -30px;
  right: -8px;
  width: 34px;
  height: 28px;
}

.bookie-mascot[data-expression="thinking"] .bookie-thought,
.bookie-mascot[data-expression="waiting"] .bookie-thought {
  opacity: 1;
}

.bookie-mascot[data-expression="sleep"] .bookie-z {
  opacity: 1;
  animation: bookie-z-float 2.6s ease-in-out infinite;
}

body.bookie-on.bookie-asleep .bookie-dock.is-active .bookie-bed {
  pointer-events: auto;
  cursor: pointer;
}

.bookie-thought circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: bookie-dot 1.1s ease-in-out infinite;
}

.bookie-thought circle:nth-child(2) { animation-delay: 0.15s; }
.bookie-thought circle:nth-child(3) { animation-delay: 0.3s; }

.bookie-mascot[data-expression="reading"] .bookie-pupil {
  animation: bookie-read 1.8s ease-in-out infinite;
}

.bookie-mascot.is-gazing .bookie-pupil {
  animation: none;
}

.bookie-blanket {
  position: absolute;
  width: 108px;
  height: 70px;
  pointer-events: none;
  opacity: 0;
}

.bookie-blanket.is-on {
  opacity: 1;
}

.bookie-blanket svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bookie-menu {
  position: absolute;
  left: 68px;
  top: 0;
  min-width: 196px;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--sm-surface-raised, #e8e6ed);
  color: var(--sm-text, #1a1f2e);
  border: 1px solid var(--sm-border, #c4c2ce);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 24, 38, 0.16);
  pointer-events: auto;
  z-index: 2;
}

.bookie-menu.is-up {
  top: auto;
  bottom: 0;
}

.bookie-menu.is-left {
  left: auto;
  right: 68px;
}

.bookie-menu[hidden] {
  display: none;
}

.bookie-menu button {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  padding: 8px 10px;
  cursor: pointer;
}

.bookie-menu button:hover,
.bookie-menu button:focus-visible {
  background: var(--sm-ai-highlight, #e8e4f0);
  outline: 2px solid var(--sm-lavender, #bba2ff);
  outline-offset: -2px;
}

.bookie-menu button[hidden] {
  display: none;
}

@keyframes bookie-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}

@keyframes bookie-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(1px) scale(1.012, 0.988); }
}

@keyframes bookie-z-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -3px); }
}

@keyframes bookie-talk {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

@keyframes bookie-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes bookie-read {
  0%, 100% { transform: translate(-1.5px, 2px); }
  50% { transform: translate(2px, 2px); }
}

@keyframes bookie-lookdown {
  0%, 100% { transform: translate(0, 4.2px); }
  50% { transform: translate(0.4px, 5px); }
}

@media (prefers-reduced-motion: reduce) {
  .bookie-rig,
  .bookie-thought circle,
  .bookie-pupil,
  .bookie-mouth-smile,
  .bookie-z {
    animation: none !important;
  }
}

body.bookie-paused .bookie-rig,
body.bookie-paused .bookie-thought circle,
body.bookie-paused .bookie-pupil,
body.bookie-paused .bookie-mouth-smile,
body.bookie-paused .bookie-z {
  animation: none !important;
}