body.tables-show {
  /* Fallback for older browsers */
  max-height: 100vh;
  /* Use dynamic viewport height on modern mobile browsers */
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.tables-new #setting-details {
  padding: 1rem;
}

body.tables-new .setting-details-content {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

body.tables-new .setting-details-media {
  order: 2;
  flex: 0 0 11rem;
  max-width: 11rem;
}

body.tables-new .setting-details-image {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  border-radius: var(--form-radius);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Slowly pan the (overflowing) cover image right-to-left and back.
     `alternate` + ease-in-out gives the rubber-band ease at each end. */
  animation: setting-image-pan 20s ease-in-out infinite alternate;
}

@keyframes setting-image-pan {
  from {
    background-position: right center;
  }
  to {
    background-position: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tables-new .setting-details-image {
    animation: none;
    background-position: center;
  }
}

body.tables-new .setting-details-copy {
  min-width: 0;
  flex: 1 1 auto;
}

body.tables-new .setting-details-prompt {
  white-space: pre-wrap;
}

body.tables-show footer {
  display: none;
}

#TableShow {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /* Fallback first, then dvh for mobile URL bar handling */
  max-height: calc(100vh - 45px);
  max-height: calc(100dvh - 45px);
}

#TableShow nav.button-group.is-tabs {
  padding: 0;
  width: 100%;
}

#TableShow .table-realtime-status[hidden] {
  display: none;
}

#TableShow .channel-content {
  /* Fallback first, then dvh for mobile URL bar handling */
  min-height: calc(100vh - 100px);
  min-height: calc(100dvh - 100px);
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
}

#TableShow nav.button-group .button:first-child {
  border-bottom-left-radius: 0;
}

#TableShow nav.button-group .button:last-child {
  border-bottom-right-radius: 0;
}

#TableShow nav.button-group .button.is-selected {
  border-bottom: 2px solid black;
}

#TableShow {
  --table-character-accent: var(--color-character-accent);
  --table-character-accent-rgb: var(--color-character-accent-rgb);
}

#TableShow nav.button-group .button.character-tab {
  color: var(--table-character-accent);
}

#TableShow nav.button-group .button.character-tab.is-selected {
  border-bottom-color: var(--table-character-accent);
  box-shadow: inset 0 -2px 0 var(--table-character-accent);
}

/* Story tab specific styling for seamless look */
/* Remove padding and background from story tab-container so inner elements create the seamless unit */
#TableShow section.tab-container:has(.story-log) {
  padding: 0;
  background-color: transparent;
  border: none;
}

/* Story log forms the top of the seamless unit */
#TableShow .story-log {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom: none;
  border-top: none;
}

#TableShow .table-objectives {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-box);
  padding: 0.25rem 0 0.5rem;
}

/* The pinned bar lives inside nested padded containers (tab-container >
   story-log), so its own background stops short of the container's top edge
   and scrolling text peeks through the seam above it. Paint an opaque backdrop
   that overshoots the bar upward only (never sideways — that would widen the
   scroll area and add a horizontal scrollbar). z-index:-1 keeps it behind the
   bar's own text but, because the bar has z-index:10, still above the scrolling
   story content. On desktop the overflow of .story-log clips the overshoot to
   the scroll edge; on mobile the sticky tabs (z-index:100) cover it. */
#TableShow .table-objectives::before {
  content: '';
  position: absolute;
  inset: -2rem 0 0;
  background-color: var(--color-box);
  z-index: -1;
}

/* Objective details are hover/focus-only so the pinned bar stays one line. */
#TableShow .objective-tooltip {
  position: relative;
  display: inline-flex;
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: baseline;
  opacity: 0.5;
  cursor: help;
}

/* :focus, not :focus-visible — a tap on touch devices (where there is no hover)
   must be enough to reveal the details. */
#TableShow .objective-tooltip:hover,
#TableShow .objective-tooltip:focus {
  opacity: 0.85;
}

#TableShow .objective-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 50%;
  width: max-content;
  max-width: min(280px, calc(100vw - 2rem));
  padding: 0.4rem 0.55rem;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--form-radius);
  font-family: var(--font-stack-sans-serif);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

#TableShow .objective-tooltip:hover::after,
#TableShow .objective-tooltip:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* The delete button is disabled once a story is underway, and disabled buttons
   swallow hover, so the tooltip lives on the wrapper instead. */
#TableShow .delete-character-wrap {
  position: relative;
  display: inline-flex;
}

#TableShow .delete-character-wrap[data-tooltip] {
  cursor: help;
}

#TableShow .delete-character-wrap[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 6px);
  right: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 2rem));
  padding: 0.4rem 0.55rem;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--form-radius);
  font-family: var(--font-stack-sans-serif);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* :focus, not :focus-visible — a tap on touch devices (where there is no hover)
   must be enough to reveal the reason. */
#TableShow .delete-character-wrap[data-tooltip]:hover::after,
#TableShow .delete-character-wrap[data-tooltip]:focus::after {
  opacity: 1;
  transform: translateY(0);
}

#TableShow .table-settings-section + .table-settings-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.table-confirm-modal {
  width: 24rem;
}

/* Remove border radius from elements that should be seamlessly connected */
#TableShow .table-characters-badge-list {
  margin-top: 0;
  margin-bottom: 0;
}

#TableShow #audio-player {
  margin-top: 0;
  margin-bottom: 0;
}

#TableShow .table-audio-disabled-notice {
  background-color: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.75);
}

/* Remove all border radius from textarea to connect story log and submit button */
#TableShow .input-submission-container textarea {
  border-radius: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* Remove margin and border radius from input container to connect to story log */
#TableShow .input-submission-container {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
}

/* Status panes (scene being written, submitting, retry, etc.) replace the
   input form and must close the seamless unit at the bottom the same way the
   input does: a top divider, side + bottom borders, and matching bottom radius
   so they attach flush to the story log instead of floating borderless. */
#TableShow .story-status-pane {
  margin: 0;
  padding: var(--base-spacing) calc(var(--base-spacing) * 2);
  background-color: var(--color-box);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-left-radius: var(--form-radius);
  border-bottom-right-radius: var(--form-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Center the status text vertically. Keep the pane compact so a single
     line doesn't float with a large gap above it; on mobile the pane is a
     sticky footer and keeps the taller input-matching height (see below). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
}

#TableShow .story-status-pane p:last-child {
  margin-bottom: 0;
}

#TableShow .story-status-pane > p {
  margin: 0;
}

#TableShow .generation-progress {
  width: 100%;
  height: 3px;
  margin-top: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0.55;
}

#TableShow .generation-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-primary);
  position: relative;
  overflow: hidden;
}

#TableShow .generation-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: loading-shimmer 2.4s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #TableShow .generation-progress-bar::after {
    animation: none;
  }
}

/* Submit button closes the seamless unit at the bottom */
#TableShow .action-submit {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

#TableShow .table-move-actions {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

#TableShow .table-move-actions > .button {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
}

@media screen and (max-width: 30em) {
  #TableShow .table-submit-shortcut {
    display: none;
  }

  #TableShow .table-move-actions .action-submit.is-tokens .value,
  #TableShow .table-move-actions .action-submit.is-tokens .amount {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}

#TableShow .table-errors {
  right: var(--base-spacing);
  top: var(--base-spacing);
  position: absolute;
  z-index: 5;
  max-width: 90vw;
}

#TableShow .tab-container {
  /* Fallback first, then dvh for mobile URL bar handling */
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  display: flex;
  flex-direction: column;
  /* Tab containers should have borders and connect seamlessly with button group */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--form-radius);
  border-bottom-right-radius: var(--form-radius);
  background-color: var(--color-box);
  padding: var(--base-spacing);
}

#TableShow .tab-container[hidden] {
  display: none !important;
}

/* Desktop tabs scroll internally, so the panel claims the whole viewport rather
   than stopping short and leaving dead space under a scrollbar. */
@media (min-width: 769px) {
  /* The dark theme gives every page a bottom scroll runway, which this
     viewport-height shell has no use for. */
  body.tables-show {
    padding-bottom: 0;
  }

  /* Inertia wraps the page in a plain div, so opt that wrapper into the column
     flex chain; without it nothing below can measure the space it has. */
  body.tables-show > div:has(> #TableShow) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  #TableShow {
    min-height: 0;
    max-height: none;
  }

  #TableShow .tab-container {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}

@media (max-height: 768px) {
  #TableShow .table-characters-badge-list {
    display: none;
  }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  body.tables-new .setting-details-content {
    flex-direction: column;
  }

  body.tables-new .setting-details-media {
    order: 0;
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
  }

  body.tables-new .setting-details-image {
    height: 5.5rem;
    min-height: 5.5rem;
  }

  body.tables-show {
    #TableShow {
      font-size: 1.05rem;
      width: 100%;
      max-width: 100%;
      margin: 0;
      padding: 0;
    }

    /* Remove box styling from tab containers on mobile */
    #TableShow .tab-container {
      padding: 0.5rem;
      margin: 0;
      border: none;
      box-shadow: none;
      background: transparent;
      max-height: none !important;
      height: auto !important;
      flex-grow: 1;
    }

    /* Switch to window scrolling on mobile - apply to body.tables-show directly */
      overflow: visible !important;
      max-height: none !important;
      height: auto !important;

    #TableShow {
      max-height: none !important;
      height: auto !important;
      padding-bottom: 0 !important;
    }

    #TableShow .channel-content {
      min-height: 100dvh;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      padding-bottom: 0;
    }

    /* Disable internal scroll for story log */
    #TableShow .tab-container .story-log {
      overflow: visible !important;
      max-height: none !important;
    }

    /* Sticky Header */
    #TableShow nav.button-group.is-tabs {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: #fff;
      padding: 4px 6px;
      width: 100%;
    }

    #TableShow .table-objectives {
      top: 37px;
    }

    /* Keep the input and its generation-state replacement in the same place. */
    #TableShow .input-submission-container,
    #TableShow .story-status-pane {
      position: sticky;
      bottom: 0;
      z-index: 100;
      background-color: #fff; /* not transparent w/ sticky */
      padding: 10px;
      margin-bottom: 0;
      border-top: 1px solid rgba(0,0,0,0.1);
    }

    #TableShow nav.button-group.is-tabs .button {
      border-radius: 0;
    }

    /* On mobile the story content is borderless, so the status pane keeps just
       the top divider to stay consistent with the sticky input treatment. */
    #TableShow .story-status-pane {
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-radius: 0;
      background-color: #fff;
      padding: 10px;
      min-height: 130px;
    }

    /* Minimal padding for text content - remove box styling */
    #TableShow .tab-container article.box,
    #TableShow .tab-container .box {
      padding: 0.5rem;
      margin-left: 0;
      margin-right: 0;
      border: none;
      box-shadow: none;
      background-color: transparent;
      border-radius: 0;
    }

    /* Remove bottom spacing under input for full height */
    #TableShow .tab-container article:last-child {
      margin-bottom: 0;
    }

    /* Full height input section */
    #TableShow article.w-100.flex-shrink-0 {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    #TableShow article.w-100.flex-shrink-0 button {
      margin-bottom: 0;
    }

    /* Error box adjustments */
    #TableShow nav.table-errors {
      margin: 0;
      border-radius: 0;
    }

    /* Audio player padding reduction */
    #TableShow #audio-player {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    /* Table character badges */
    #TableShow .table-characters-badge-list {
      padding-left: 0.5rem;
      margin-top: 0.5rem;
    }

    /* Force advance button */
    #TableShow button.is-link.mb3 {
      margin-bottom: 0;
    }
  }
}

/* Quick Start Character Introduction Panel */
@keyframes quick-start-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.quick-start-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  border-radius: var(--form-radius) var(--form-radius) 0 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
  padding: 1rem 1rem 1.25rem;
  animation: quick-start-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 60vh;
  overflow-y: auto;
}

.quick-start-character-panel {
  border-top: 3px solid var(--table-character-accent);
  box-shadow: 0 -4px 28px rgba(var(--table-character-accent-rgb), 0.38), 0 0 0 1px rgba(var(--table-character-accent-rgb), 0.16);
}

.quick-start-character-panel .badge-circle {
  background-color: var(--table-character-accent);
  box-shadow: 0 0 0 4px rgba(var(--table-character-accent-rgb), 0.18);
}

.quick-start-panel-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 auto 1rem;
}

.quick-start-panel-label {
  font-size: 0.7rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.quick-start-panel-hint {
  font-size: 0.75rem;
  opacity: 0.5;
  text-align: center;
  margin: 0;
}

/* Entry/leave transitions */
.quick-start-enter-active {
  animation: quick-start-slide-up 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.quick-start-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.quick-start-leave-to {
  opacity: 0;
  transform: translateY(16px);
}

/* Desktop: centered panel */
@media (min-width: 769px) {
  .quick-start-panel {
    left: calc(50% - 240px);
    right: auto;
    width: 480px;
    border-radius: var(--form-radius) var(--form-radius) 0 0;
  }
}

@media (prefers-color-scheme: dark) {
  .quick-start-panel-handle {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Character counter for submission textarea */
.submission-char-counter {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 0.65rem;
  background-color: rgba(255, 255, 255, 0.75);
  color: rgba(0, 0, 0, 0.6);
  border-radius: 0.25rem;
  padding: 0.15rem 0.25rem;
  line-height: 1;
  font-family: sans-serif;
  pointer-events: none;
  opacity: 0.65;
}

.submission-char-counter.is-invalid {
  color: #ff4136;
  font-weight: bold;
}

@media (prefers-color-scheme: dark) {
  #TableShow .tab-container {
    border-color: rgba(255, 255, 255, 0.15);
  }

  #TableShow .table-audio-disabled-notice {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
  }

  .submission-char-counter {
    background-color: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.7);
  }

  .submission-char-counter.is-invalid {
    color: #ff6b6b;
  }

  @media (max-width: 768px) {
    body.tables-show {
      #TableShow nav.button-group.is-tabs {
        background-color: #333;
      }

      #TableShow .input-submission-container,
      #TableShow .story-status-pane {
        background-color: #333;
        border-top: 1px solid #555;
      }
    }
  }
}