/* Kiosk-specific styles — layout utilities come from static/css/tailwind.css */
.hidden,
.kiosk-is-hidden {
  display: none !important;
}

/* Touch-friendly kiosk layout — 1920×1080 landscape target */

html {
  height: 100%;
  overflow: hidden;
}

/* Finger-drag scrolling: disable text selection so touch pans scroll containers */
.kiosk-shell {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.kiosk-main,
.kiosk-sidebar-nav,
.kiosk-video-panel-content {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.kiosk-main.is-nav-loading {
  opacity: 0.7;
}

/* Pi Chromium: child elements must allow vertical pan to reach scroll container */
.kiosk-main *,
.kiosk-sidebar-nav *,
.kiosk-video-panel-content * {
  touch-action: pan-y;
}

.kiosk-shell button,
.kiosk-shell input,
.kiosk-shell textarea,
.kiosk-shell select,
.kiosk-shell video,
.kiosk-shell summary,
.kiosk-shell label {
  touch-action: manipulation;
}

/* Sidebar nav: quick tap without scroll ambiguity */
.kiosk-sidebar a {
  touch-action: manipulation;
}

/* Selected nav item — single highlight via .is-active only (no :active/:hover on touch) */
.kiosk-sidebar-link.is-active {
  background-color: rgb(51 65 85);
  font-weight: 600;
}

/* Main content links (e.g. full-card guide rows) must allow vertical pan */
.kiosk-main a,
.kiosk-video-panel-content a,
.kiosk-scroll-card {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

/* Guide body prose — inline cross-reference links scroll with surrounding text */
.kiosk-guide-body a {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

/* Detail-page back links: large tap target, no scroll-vs-tap ambiguity */
.kiosk-main a.kiosk-back-link,
.kiosk-video-panel-content a.kiosk-back-link,
.kiosk-main a.kiosk-guide-link,
.kiosk-video-panel-content a.kiosk-guide-link {
  touch-action: manipulation;
}

.kiosk-back-link {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 0.75rem;
  margin-inline: -0.75rem;
}

.kiosk-guide-link {
  min-height: 3rem;
}

.kiosk-shell input,
.kiosk-shell textarea,
.kiosk-shell select {
  -webkit-user-select: text;
  user-select: text;
}

.kiosk-sidebar a {
  min-height: 3rem;
}

.kiosk-checklist-btn {
  min-height: 3rem;
}

.kiosk-shift-card {
  min-height: 3rem;
}

.kiosk-upcoming-row {
  min-height: 3rem;
}

.kiosk-upcoming-link {
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.kiosk-routine-tab {
  min-height: 3rem;
}

.kiosk-log-input,
.kiosk-log-select,
.kiosk-log-submit {
  min-height: 3rem;
}

.kiosk-log-file {
  min-height: 3rem;
}

.kiosk-activity-row {
  min-height: 3rem;
}

.kiosk-video-search,
.kiosk-video-search-btn,
.kiosk-video-card,
.kiosk-step-image {
  min-height: 3rem;
}
.kiosk-video-player {
  min-height: 3rem;
}

.kiosk-contact-card {
  min-height: 3rem;
}

.kiosk-display-sleep {
  touch-action: manipulation;
}

.kiosk-display-sleep.hidden,
.kiosk-display-sleep[aria-hidden="true"] {
  pointer-events: none;
}

.kiosk-bio-photo {
  aspect-ratio: 4 / 5;
  max-height: 24rem;
}

@media (min-width: 1920px) {
  .kiosk-sidebar {
    width: 18rem;
  }
}

.kiosk-with-video-panel {
  height: 100%;
  min-height: 0;
}

.kiosk-video-panel-content {
  min-height: 0;
}

.kiosk-video-panel {
  max-width: 26rem;
  width: 26rem;
}

.kiosk-video-panel .kiosk-video-player {
  max-height: calc(100vh - 2rem);
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Settings / WiFi — offline-safe (no Tailwind CDN required) */
.kiosk-settings-network {
  max-width: 42rem;
}

.kiosk-settings-notice {
  font-size: 1.25rem;
  color: rgb(146 64 14);
  background-color: rgb(255 251 235);
  border: 1px solid rgb(253 230 138);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.kiosk-settings-help {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: rgb(71 85 105);
}

.kiosk-settings-error {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: rgb(153 27 27);
  background-color: rgb(254 242 242);
  border: 1px solid rgb(254 202 202);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.kiosk-settings-success {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: rgb(22 101 52);
  background-color: rgb(240 253 244);
  border: 1px solid rgb(187 247 208);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

.kiosk-settings-status {
  margin-top: 1rem;
  font-size: 1.25rem;
  color: rgb(30 41 59);
}

.kiosk-settings-form,
.kiosk-settings-manual-connect {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kiosk-settings-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.kiosk-settings-input {
  width: 100%;
  font-size: 1.25rem;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.kiosk-settings-button {
  align-self: flex-start;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  background-color: rgb(79 70 229);
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
}

.kiosk-settings-link-button {
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(79 70 229);
  background: transparent;
  border: none;
  text-decoration: underline;
  padding: 0.5rem 0;
}

.kiosk-settings-unlocked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.kiosk-settings-wifi-actions {
  margin-top: 1.5rem;
}

.kiosk-settings-subheading {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.kiosk-settings-network-list {
  margin-top: 1rem;
}

.kiosk-settings-network-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.kiosk-settings-network-item {
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  padding: 1rem;
  background: white;
}

.kiosk-settings-network-item.is-active {
  border-color: rgb(34 197 94);
  background-color: rgb(240 253 244);
}

.kiosk-settings-network-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.kiosk-settings-network-name {
  font-size: 1.25rem;
  font-weight: 600;
}

.kiosk-settings-network-detail {
  font-size: 1rem;
  color: rgb(100 116 139);
}

.kiosk-settings-network-connect {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.kiosk-settings-inline-form {
  margin: 0;
}

/* Floating touch keyboard — Settings WiFi / PIN (offline-safe) */
.kiosk-touch-keyboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgb(241 245 249);
  border-top: 2px solid rgb(203 213 225);
  box-shadow: 0 -8px 24px rgb(15 23 42 / 0.15);
  padding: 0.75rem 1rem 1rem;
  touch-action: manipulation;
}

.kiosk-touch-keyboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.kiosk-touch-keyboard-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(51 65 85);
}

.kiosk-touch-keyboard-hint {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: rgb(71 85 105);
}

.kiosk-touch-keyboard-hint:not([hidden]) + .kiosk-touch-keyboard-keys {
  margin-top: 0;
}

.kiosk-touch-keyboard-close {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(79 70 229);
  background: white;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
}

.kiosk-touch-keyboard-keys {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.kiosk-touch-keyboard-row {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.kiosk-keyboard-key {
  min-width: 2.75rem;
  min-height: 3rem;
  padding: 0.35rem 0.65rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(15 23 42);
  background: white;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  touch-action: manipulation;
}

.kiosk-keyboard-key.is-active {
  background: rgb(224 231 255);
  border-color: rgb(79 70 229);
}

.kiosk-keyboard-key:active,
.kiosk-keyboard-key.is-pressed {
  background: rgb(199 210 254);
  border-color: rgb(67 56 202);
  transform: scale(0.94);
  box-shadow: inset 0 2px 4px rgb(15 23 42 / 0.15);
}

.kiosk-touch-keyboard-close:active,
.kiosk-touch-keyboard-close.is-pressed {
  background: rgb(224 231 255);
  border-color: rgb(79 70 229);
}

.kiosk-keyboard-input-pulse {
  background-color: rgb(238 242 255);
}

.kiosk-password-field {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.kiosk-password-field .kiosk-settings-input {
  flex: 1;
  min-width: 0;
}

.kiosk-password-toggle {
  min-height: 3rem;
  min-width: 5.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgb(79 70 229);
  background: white;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  touch-action: manipulation;
  flex-shrink: 0;
}

.kiosk-password-toggle:active,
.kiosk-password-toggle.is-pressed {
  background: rgb(224 231 255);
  border-color: rgb(79 70 229);
  transform: scale(0.96);
}

.kiosk-settings-network-connect .kiosk-password-field {
  flex: 1 1 12rem;
  min-width: 12rem;
}

.kiosk-keyboard-key--wide {
  min-width: 5.5rem;
  flex: 1 1 auto;
  max-width: 10rem;
}

.kiosk-keyboard-target {
  outline: 3px solid rgb(79 70 229);
  outline-offset: 2px;
}

.kiosk-keyboard-invalid {
  border-color: rgb(220 38 38) !important;
  outline-color: rgb(220 38 38);
}

.kiosk-schedule-form-error {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  font-size: 1.125rem;
  color: rgb(153 27 27);
  background: rgb(254 242 242);
  border: 1px solid rgb(254 202 202);
  border-radius: 0.5rem;
}

.kiosk-shell.kiosk-keyboard-open .kiosk-main {
  padding-bottom: 16rem;
}

.kiosk-shell.kiosk-keyboard-open #kiosk-touch-keyboard.is-open ~ .fixed,
.kiosk-shell.kiosk-keyboard-open .kiosk-main {
  scroll-padding-bottom: 16rem;
}

/* Bonnie assistant drawer (#62) */
.kiosk-bonnie-fab {
  min-height: 3rem;
  z-index: 40;
  touch-action: manipulation;
}

.kiosk-bonnie-drawer-root:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
}

.kiosk-bonnie-drawer-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
}

.kiosk-bonnie-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgb(15 23 42 / 0.45);
  cursor: pointer;
}

.kiosk-bonnie-drawer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 100vw);
  max-width: 100%;
  height: 100%;
  background: white;
  box-shadow: -8px 0 24px rgb(15 23 42 / 0.15);
}

.kiosk-bonnie-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgb(226 232 240);
  flex-shrink: 0;
}

.kiosk-bonnie-drawer-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(15 23 42);
}

.kiosk-bonnie-drawer-close {
  min-height: 3rem;
  min-width: 3rem;
  padding: 0.5rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(79 70 229);
  background: white;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  touch-action: manipulation;
}

.kiosk-bonnie-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem;
}

.kiosk-bonnie-chat-form.is-disabled {
  opacity: 0.65;
}

.kiosk-bonnie-chat-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kiosk-bonnie-input-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(51 65 85);
}

.kiosk-bonnie-input,
.kiosk-bonnie-send,
.kiosk-bonnie-prompt {
  min-height: 3rem;
  font-size: 1.125rem;
  touch-action: manipulation;
}

.kiosk-bonnie-input {
  width: 100%;
  border: 1px solid rgb(203 213 225);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  resize: vertical;
}

.kiosk-bonnie-send {
  align-self: flex-start;
  font-weight: 600;
  color: white;
  background: rgb(79 70 229);
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
}

.kiosk-bonnie-prompts {
  margin-top: 1.5rem;
}

.kiosk-bonnie-prompts-heading {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgb(51 65 85);
}

.kiosk-bonnie-prompt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kiosk-bonnie-prompt-form {
  margin: 0;
}

.kiosk-bonnie-prompt {
  font-weight: 600;
  color: rgb(79 70 229);
  background: rgb(238 242 255);
  border: 1px solid rgb(199 210 254);
  border-radius: 9999px;
  padding: 0.75rem 1.25rem;
}

.kiosk-bonnie-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.kiosk-bonnie-thinking {
  display: none;
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: rgb(71 85 105);
  background: rgb(241 245 249);
  border: 1px dashed rgb(203 213 225);
}

.kiosk-bonnie-thinking.htmx-request,
#bonnie-chat:has(.htmx-request) .kiosk-bonnie-thinking {
  display: block;
}

.kiosk-bonnie-thinking-label {
  font-style: italic;
  animation: kiosk-bonnie-thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes kiosk-bonnie-thinking-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

#bonnie-chat:has(.htmx-request) .kiosk-bonnie-send,
#bonnie-chat:has(.htmx-request) .kiosk-bonnie-prompt {
  opacity: 0.55;
  pointer-events: none;
}

.kiosk-bonnie-message {
  max-width: 95%;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.kiosk-bonnie-message--user {
  align-self: flex-end;
  background: rgb(224 231 255);
  color: rgb(30 27 75);
}

.kiosk-bonnie-message--assistant {
  align-self: flex-start;
  background: rgb(241 245 249);
  color: rgb(15 23 42);
}

.kiosk-bonnie-message-text {
  margin: 0;
}

.kiosk-bonnie-reference {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem;
}

.kiosk-bonnie-reference-label {
  margin-right: 0.35rem;
  color: rgb(71 85 105);
}

.kiosk-bonnie-reference-link {
  display: inline-block;
  min-height: 3rem;
  padding: 0.35rem 0;
  color: rgb(67 56 202);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.kiosk-bonnie-unavailable {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: rgb(255 251 235);
  border: 1px solid rgb(253 230 138);
  border-radius: 0.5rem;
}

.kiosk-bonnie-unavailable-text {
  margin: 0;
  font-size: 1.125rem;
  color: rgb(146 64 14);
}