/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * env() is not readable from JS. Mirror the bottom inset onto a custom property so
 * scripts can measure the strip covered by native chrome — the iOS/Android tab bar
 * overlays the bottom of the WebView (we only pad top/left/right on .hotwire-native),
 * which is what pushed the "…" comment menu underneath it. See action_menu_controller.
 */
:root {
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Paint before body/Tailwind so iOS Liquid Glass never shows the WKWebView default (often black). */
    background-color: hsl(30, 50%, 85%); /* light-oak-beige-500 */
    color-scheme: light;
}

/*
 * Stop horizontal overflow without breaking position:fixed.
 * On iOS WKWebView, overflow-x: clip/hidden on html/body makes fixed bottom bars
 * scroll/jump with rubber-band overscroll — keep overflow on inner shells only.
 */
html,
body {
    max-width: 100%;
}

/*
 * Flash toasts — keep inside the device width (no left:50% + width:100% spill).
 * inset-x margins work with safe-area on notched devices.
 */
.flash-toast {
    top: max(1rem, env(safe-area-inset-top, 0px));
    left: max(1rem, env(safe-area-inset-left, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: min(28rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
}

.flash-toast__text {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.35;
}

.flash-toast__close {
    margin-left: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.7;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
}

.flash-toast__close:hover {
    opacity: 1;
}

/*
 * Hotwire Native / mobile WebView:
 * - Prevent focus zoom (iOS zooms inputs < 16px)
 * - Clip sideways scroll on content shells (never on html/body — see above)
 * - overscroll-behavior helps limit rubber-band lifting fixed chrome
 */
body.hotwire-native,
body[data-hotwire-native="true"],
body[data-mobile-client="true"] {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

/*
 * Hotwire Native: no iOS/Android long-press link callouts ("Open in New Tab").
 * Pair with native-link-guard Stimulus controller. Inputs keep system menus.
 */
body.hotwire-native a[href],
body.hotwire-native a[href] *,
body[data-hotwire-native="true"] a[href],
body[data-hotwire-native="true"] a[href] * {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}

body.hotwire-native a[href],
body[data-hotwire-native="true"] a[href] {
  -webkit-user-select: none;
  user-select: none;
}

body.hotwire-native input,
body.hotwire-native textarea,
body.hotwire-native select,
body.hotwire-native [contenteditable="true"],
body.hotwire-native [data-native-allow-callout],
body.hotwire-native [data-native-allow-callout] *,
body[data-hotwire-native="true"] input,
body[data-hotwire-native="true"] textarea,
body[data-hotwire-native="true"] select,
body[data-hotwire-native="true"] [contenteditable="true"],
body[data-hotwire-native="true"] [data-native-allow-callout],
body[data-hotwire-native="true"] [data-native-allow-callout] * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

body.hotwire-native input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.hotwire-native select,
body.hotwire-native textarea,
body[data-hotwire-native="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body[data-hotwire-native="true"] select,
body[data-hotwire-native="true"] textarea,
body[data-mobile-client="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body[data-mobile-client="true"] select,
body[data-mobile-client="true"] textarea {
    font-size: 16px !important;
    max-width: 100%;
}

body.hotwire-native main,
body.hotwire-native .native-app-content,
body.hotwire-native .app-shell__main,
body.hotwire-native .app-shell__column,
body.hotwire-native .container,
body.hotwire-native .container-full,
body[data-hotwire-native="true"] main,
body[data-hotwire-native="true"] .native-app-content,
body[data-hotwire-native="true"] .app-shell__main,
body[data-hotwire-native="true"] .app-shell__column,
body[data-hotwire-native="true"] .container,
body[data-hotwire-native="true"] .container-full,
body[data-mobile-client="true"] main,
body[data-mobile-client="true"] .native-app-content,
body[data-mobile-client="true"] .container,
body[data-mobile-client="true"] .container-full {
    max-width: 100%;
    overflow-x: clip;
}

::selection {
    background-color: hsl(350, 40%, 35%); /* Sets the background color of the highlighted text */
    color: white; /* Sets the color of the text when highlighted */
}

/* For Firefox compatibility, use ::-moz-selection */
::-moz-selection {
    background-color: hsl(350, 40%, 35%);
    color: white;
}

#back-top a {}

a {
    cursor: pointer;
}

button {
    cursor: pointer;
}

input[type="checkbox"] {
    accent-color: hsl(350, 40%, 35%);
}

/*
 * Hotwire Native Bridge — hide web controls when native counterparts are registered.
 * Native shell sets <html data-bridge-components="button form barcode-scanner …">
 * See: https://native.hotwired.dev/ios/bridge-components
 */
[data-bridge-components~="button"] [data-controller~="bridge--button"] {
  display: none !important;
}

[data-bridge-components~="form"] [data-controller~="bridge--form"] [data-bridge--form-target="submit"],
[data-bridge-components~="form"] [data-controller~="bridge--form"] [data-bridge--form-target="passkey"] {
  /* Native toolbar owns submit (Masilotti Ch. 7). Hidden buttons still click(). */
  display: none !important;
}

/* Path-config sheet close is cancel — do not also show a web Cancel. */
body.hotwire-native a[data-controller~="bridge--dismiss"],
body[data-hotwire-native="true"] a[data-controller~="bridge--dismiss"] {
  display: none !important;
}

/* Auth pages: native toolbar already has the title; skip the peat banner gap. */
body.hotwire-native .native-page-heading,
body[data-hotwire-native="true"] .native-page-heading {
  display: none !important;
}

body.hotwire-native .session-auth-section,
body[data-hotwire-native="true"] .session-auth-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

[data-bridge-components~="menu"] [data-controller~="bridge--menu"] {
  /* Menu items stay in DOM for click() but the web chrome can be collapsed */
}

/* When barcode-scanner is live, primary scan button is driven natively — keep visible as in-page CTA */
[data-bridge-components~="barcode-scanner"] .bridge-native-scan {
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.35);
}

/*
 * Pagy 43 series_nav — minimal styles (whiskey-amber current page).
 * Full theme variables: see pagy gem stylesheets/pagy.css
 */
.pagy.series-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.75;
}

.pagy.series-nav a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(0, 0%, 88%);
  background: white;
  color: hsl(0, 0%, 35%);
  text-decoration: none;
}

.pagy.series-nav a[href]:hover {
  background: hsl(30, 50%, 96%);
  color: hsl(22, 70%, 35%);
}

.pagy.series-nav a[aria-current="page"] {
  background: hsl(22, 70%, 48%);
  border-color: hsl(22, 70%, 48%);
  color: white;
}

.pagy.series-nav a[role="link"]:not([aria-current]),
.pagy.series-nav a[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  background: hsl(0, 0%, 94%);
  color: hsl(0, 0%, 50%);
}

.pagy.series-nav a[role="separator"] {
  border: 0;
  background: transparent;
  color: hsl(0, 0%, 50%);
  cursor: default;
}

/*
 * App shell — sticky footer without empty mobile scroll.
 *
 * Desktop / mobile browser: body is at least one dynamic viewport tall; the
 * content column is a flex column so the footer sits at the bottom when the
 * page is short. Height is max(content, 100dvh), not content + 100vh.
 *
 * Hotwire Native: drop min-height so short pages don't invent scroll runway
 * (footer is already omitted in the native layout).
 */
body.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.app-shell > main.app-shell__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.app-shell__row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

@media (min-width: 1024px) {
  .app-shell__row {
    flex-direction: row;
    align-items: stretch;
  }
}

.app-shell__column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

/* Grows when there is spare viewport space → pushes footer down */
.app-shell__content {
  flex: 1 0 auto;
  width: 100%;
}

.app-shell__footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
}

/*
 * Fixed bottom tab bar footer clearance — DISABLED with mobile-web bottom nav
 * (2026-08). Re-enable together with _native_bottom_nav when product reopens IA.
 *
 * @media (max-width: 1023px) {
 *   body[data-mobile-client="true"]:not(.hotwire-native):not([data-hotwire-native="true"]) .app-shell__footer {
 *     padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
 *   }
 * }
 */

/* Native shell: height follows content only */
body.hotwire-native.app-shell,
body[data-hotwire-native="true"].app-shell {
  min-height: 0;
  display: block;
}

body.hotwire-native .app-shell__main,
body.hotwire-native .app-shell__row,
body.hotwire-native .app-shell__column,
body.hotwire-native .app-shell__content,
body[data-hotwire-native="true"] .app-shell__main,
body[data-hotwire-native="true"] .app-shell__row,
body[data-hotwire-native="true"] .app-shell__column,
body[data-hotwire-native="true"] .app-shell__content {
  display: block;
  flex: none;
  min-height: 0;
  height: auto;
}

/*
 * Mobile-web bottom navigation styles (glass tab strip + More sheet).
 * Partial is currently no-op (see _native_bottom_nav.html.haml). Keep CSS so
 * re-enable is a partial flag + restore `display: block` in the media query below.
 * Hotwire Native never uses this bar — system UITabBar / BottomNavigationView only.
 */
.native-bottom-nav {
  display: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.native-bottom-nav a,
.native-bottom-nav button,
.native-bottom-nav .native-bottom-nav__more-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 1023px) {
  /* Explicitly never show web tabs inside the native shell */
  body.hotwire-native .native-bottom-nav,
  body[data-hotwire-native="true"] .native-bottom-nav {
    display: none !important;
  }

  /*
   * DISABLED 2026-08 — do not set display:block while product evaluates IA.
   * Previous rule fixed the bar over cookie consent (z-100 > cookie z-90).
   *
   * body[data-mobile-client="true"]:not(.hotwire-native):not([data-hotwire-native="true"]) .native-bottom-nav {
   *   display: block;
   *   position: fixed;
   *   left: 0; right: 0; bottom: 0;
   *   width: 100%; max-width: 100vw;
   *   z-index: 100;
   *   padding: 0 max(0.65rem, env(safe-area-inset-left, 0px))
   *     max(0.45rem, env(safe-area-inset-bottom, 0px))
   *     max(0.65rem, env(safe-area-inset-right, 0px));
   *   background: transparent; border: 0; box-shadow: none;
   *   pointer-events: none;
   * }
   * body[data-mobile-client="true"]:not(.hotwire-native) .native-bottom-nav__tabs {
   *   pointer-events: auto;
   * }
   * body[data-mobile-client="true"]:not(.hotwire-native):not([data-hotwire-native="true"]) .native-app-content {
   *   padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
   * }
   */

  /* Native shell: modest safe-area only (system tab bar owns bottom chrome) */
  body.hotwire-native .native-app-content,
  body[data-hotwire-native="true"] .native-app-content {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }

  body.hotwire-native .lg\:block.relative.z-50,
  body[data-hotwire-native="true"] .lg\:block.relative.z-50 {
    display: none !important;
  }
}

/* Liquid-glass tab strip */
.native-bottom-nav__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.1rem;
  padding: 0.4rem 0.45rem 0.35rem;
  border-radius: 999px;
  /* Glass material: blur + slight saturate + translucent fill */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -0.5px 0 rgba(0, 0, 0, 0.06) inset,
    0 8px 28px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Prefer system dark glass when the page/user agent is dark */
@media (prefers-color-scheme: dark) {
  body.hotwire-native .native-bottom-nav__tabs,
  body[data-hotwire-native="true"] .native-bottom-nav__tabs {
    background: rgba(28, 28, 30, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 8px 28px rgba(0, 0, 0, 0.35),
      0 2px 6px rgba(0, 0, 0, 0.2);
  }

  body.hotwire-native .native-bottom-nav__tab,
  body[data-hotwire-native="true"] .native-bottom-nav__tab {
    color: rgba(235, 235, 245, 0.6);
  }

  body.hotwire-native .native-bottom-nav__tab.is-active,
  body.hotwire-native .native-bottom-nav__tab[aria-current="page"],
  body[data-hotwire-native="true"] .native-bottom-nav__tab.is-active,
  body[data-hotwire-native="true"] .native-bottom-nav__tab[aria-current="page"] {
    color: #0a84ff; /* systemBlue dark */
    background: transparent;
  }
}

/* Tab items — system-like, minimal chrome (no pill fills / brand paint) */
.native-bottom-nav__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  min-height: 2.85rem;
  padding: 0.2rem 0.15rem;
  border-radius: 999px;
  color: rgba(60, 60, 67, 0.6); /* secondary label */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.native-bottom-nav__tab i {
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 400;
  /* Let FA icons read like SF symbols weight */
  opacity: 0.92;
}

.native-bottom-nav__tab.is-active,
.native-bottom-nav__tab[aria-current="page"] {
  color: #007aff; /* systemBlue light */
  background: transparent;
  font-weight: 600;
}

.native-bottom-nav__tab.is-active i,
.native-bottom-nav__tab[aria-current="page"] i {
  opacity: 1;
}

.native-bottom-nav__tab:active {
  opacity: 0.55;
}

.native-bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.1rem;
}

/* More sheet — matching frosted glass panel */
.native-bottom-nav__scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 110;
  /* Parent nav uses pointer-events: none so the bar doesn't block content */
  pointer-events: auto !important;
}

.native-bottom-nav__sheet {
  position: fixed;
  left: max(0.5rem, env(safe-area-inset-left, 0px));
  right: max(0.5rem, env(safe-area-inset-right, 0px));
  bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  z-index: 120;
  max-height: min(78vh, 34rem);
  overflow: auto;
  border-radius: 1.5rem;
  padding: 0.5rem 0.85rem 1rem;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(32px);
  backdrop-filter: saturate(180%) blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 16px 48px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
  body.hotwire-native .native-bottom-nav__sheet,
  body[data-hotwire-native="true"] .native-bottom-nav__sheet {
    background: rgba(28, 28, 30, 0.78);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body.hotwire-native .native-bottom-nav__sheet-title,
  body[data-hotwire-native="true"] .native-bottom-nav__sheet-title {
    color: rgba(255, 255, 255, 0.92);
  }

  body.hotwire-native .native-bottom-nav__more-item,
  body[data-hotwire-native="true"] .native-bottom-nav__more-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
  }

  body.hotwire-native .native-bottom-nav__more-item i,
  body[data-hotwire-native="true"] .native-bottom-nav__more-item i {
    color: rgba(235, 235, 245, 0.75);
  }
}

.native-bottom-nav__sheet-handle {
  width: 2.25rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.22);
  margin: 0.35rem auto 0.75rem;
}

.native-bottom-nav__sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}

.native-bottom-nav__sheet-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(0, 0, 0, 0.88);
}

.native-bottom-nav__customize {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #007aff;
  text-decoration: none;
}

.native-bottom-nav__more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.native-bottom-nav__more-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0.95rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: rgba(0, 0, 0, 0.88);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.native-bottom-nav__more-item:active {
  opacity: 0.65;
}

.native-bottom-nav__more-item i {
  width: 1.35rem;
  text-align: center;
  font-size: 1.1rem;
  color: rgba(60, 60, 67, 0.75);
}

.native-bottom-nav__more-item.is-destructive,
.native-bottom-nav__more-item.is-destructive i {
  color: #ff3b30; /* systemRed */
}

body.native-nav-more-open {
  overflow: hidden;
}

/*
 * Top ad banner — document flow only (not sticky).
 * Visible below native title on load (safe-area padding + scroll-to-top); scrolls
 * away with the page. Sticky variants sit under the system title bar.
 */
#top-ad-banner,
#top-ad-banner-mobile {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Mobile: full-width banner under logo strip (no desktop sidebar offset) */
#top-ad-banner-mobile .top-ad-banner__inner {
  border-radius: 0;
}

/* Compact on native so more of the ad fits in the first screenful */
body.hotwire-native #top-ad-banner .top-ad-banner__inner,
body[data-hotwire-native="true"] #top-ad-banner .top-ad-banner__inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

body.hotwire-native #top-ad-banner img,
body[data-hotwire-native="true"] #top-ad-banner img {
  max-height: 2.5rem;
  height: 2.5rem;
  width: auto;
}

/* contentInsetAdjustmentBehavior = .never: pad safe-area so the ad starts below chrome */
body.hotwire-native,
body[data-hotwire-native="true"] {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body.hotwire-native.native-modal-shell input,
body.hotwire-native.native-modal-shell select,
body.hotwire-native.native-modal-shell textarea,
body[data-hotwire-native="true"].native-modal-shell input,
body[data-hotwire-native="true"].native-modal-shell select,
body[data-hotwire-native="true"].native-modal-shell textarea {
  scroll-margin-top: 1.25rem;
}

/*
 * Shared catalog icons — match Font Awesome `.fa-lg` in the sidebar.
 * FA fa-lg uses font-size: 1.33333em (of surrounding text). Extra “padding”
 * usually means empty space *inside* the SVG viewBox; crop assets tightly.
 */
.nav-catalog-icon {
  display: inline-block;
  width: 1.33333em; /* .fa-lg */
  height: 1.33333em;
  flex-shrink: 0;
  color: currentColor;
  fill: currentColor;
  vertical-align: -0.125em;
  overflow: visible;
}

.nav-catalog-icon--lg {
  width: 1.33333em;
  height: 1.33333em;
}

.nav-catalog-icon--xxl {
  width: 3.33333em;
  height: 3.33333em;
}

.unselectable {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*
 * Mobile-web barcode camera — full-viewport modal (not the tiny inline box).
 * Native apps use Bridge Components PRO system scanner (VisionKit / Code Scanner).
 */
html.barcode-scanner-modal-open,
body.barcode-scanner-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.barcode-scanner-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: max(0.75rem, env(safe-area-inset-top, 0px))
    max(0.75rem, env(safe-area-inset-right, 0px))
    max(0.75rem, env(safe-area-inset-bottom, 0px))
    max(0.75rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}

.barcode-scanner-modal.hidden {
  display: none !important;
}

.barcode-scanner-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 8, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.barcode-scanner-modal__sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 32rem);
  max-height: 100%;
  margin: auto 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0b0b0c;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.45);
}

.barcode-scanner-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(20, 16, 14, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.barcode-scanner-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f5ebe0;
  letter-spacing: 0.01em;
}

.barcode-scanner-modal__icon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f5ebe0;
  cursor: pointer;
}

.barcode-scanner-modal__icon-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.barcode-scanner-modal__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: min(68vh, 36rem);
  background: #000;
}

.barcode-scanner-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.barcode-scanner-modal__reticle {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78%, 18rem);
  height: min(34%, 10rem);
  transform: translate(-50%, -50%);
  border: 2px solid #5c1a2e; /* peat-burgundy-500 */
  border-radius: 0.75rem;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.38);
}

.barcode-scanner-modal__hint {
  margin: 0;
  padding: 0.65rem 1rem 0.25rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(245, 235, 224, 0.85);
  background: rgba(20, 16, 14, 0.95);
}

.barcode-scanner-modal__close {
  display: block;
  width: calc(100% - 2rem);
  margin: 0.75rem 1rem 1rem;
  padding: 0.85rem 1rem;
  border: 2px solid #5c1a2e; /* peat-burgundy-500 */
  border-radius: 0.85rem;
  background: #5c1a2e;
  color: #f5ebe0;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.barcode-scanner-modal__close:hover {
  background: #4a1525;
  border-color: #4a1525;
}

.barcode-scanner-modal__close:focus-visible,
.barcode-scanner-modal__icon-close:focus-visible {
  outline: 2px solid #5c1a2e;
  outline-offset: 2px;
}

/*
 * Hotwire Native modal sheets (More / customize tabs).
 * Layout: app/views/layouts/native_modal.html.haml — no app navbar/age-gate/footer.
 */
.native-modal-shell {
  margin: 0;
  min-height: 100%;
  background: hsl(36, 33%, 94%);
}

.native-modal-shell__main {
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  max-width: 36rem;
  margin: 0 auto;
}

.native-more {
  padding: 0.25rem 0 1rem;
}

.native-more__header {
  margin-bottom: 0.75rem;
}

.native-more__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(350, 40%, 28%);
}

.native-more__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(0, 0%, 40%);
}

.native-more__toolbar {
  margin-bottom: 0.75rem;
}

.native-more__empty {
  margin: 2rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(0, 0%, 45%);
}

.native-more__customize {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.85rem;
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.native-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.native-more__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid hsla(0, 0%, 0%, 0.06);
  color: rgba(0, 0, 0, 0.88);
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  /* button_to renders a <button> — reset defaults */
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

.native-more__item:active {
  opacity: 0.7;
}

.native-more__icon {
  width: 1.75rem;
  text-align: center;
  color: rgba(60, 60, 67, 0.75);
}

.native-more__label {
  flex: 1 1 auto;
  min-width: 0;
}

.native-more__chevron {
  font-size: 0.75rem;
  color: rgba(60, 60, 67, 0.35);
}

.native-more__item.is-destructive,
.native-more__item.is-destructive .native-more__icon {
  color: #ff3b30;
}

body.hotwire-native .native-more,
body[data-hotwire-native="true"] .native-more {
  padding-bottom: 0.5rem;
}

/* Compact flash toasts inside modal sheets */
.native-modal-shell .flash-toast {
  top: 0.75rem;
}

/*
 * Native search sheet (GET /search — path-config page_sheet modal).
 * Fill the sheet; only scroll when results actually overflow.
 */
body.hotwire-native .native-modal-shell__main,
body[data-hotwire-native="true"] .native-modal-shell__main {
  min-height: 85dvh;
  display: flex;
  flex-direction: column;
}

.native-search {
  padding: 0.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: min(85dvh, 100%);
}

.native-search__header {
  margin-bottom: 0.75rem;
  flex: 0 0 auto;
}

.native-search__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(350, 40%, 28%);
}

.native-search__hint {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(0, 0%, 40%);
}

.native-search__form {
  margin-bottom: 0.75rem;
  flex: 0 0 auto;
}

.native-search__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid hsla(0, 0%, 0%, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.native-search__icon {
  color: hsl(0, 0%, 45%);
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.native-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 16px; /* prevent iOS focus zoom */
  line-height: 1.4;
  padding: 0.55rem 0.15rem;
  color: hsl(350, 20%, 18%);
  outline: none;
}

.native-search__clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: hsl(0, 0%, 50%);
  padding: 0.35rem 0.45rem;
  cursor: pointer;
  border-radius: 999px;
}

.native-search__clear:active {
  opacity: 0.7;
}

.native-search__results {
  flex: 1 1 auto;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
}

.native-search__panel {
  flex: 1 1 auto;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid hsla(0, 0%, 0%, 0.06);
  /* Grow with content; scroll only when taller than the sheet */
  max-height: min(78dvh, 100%);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.hotwire-native .native-search__panel .search-results-list,
body[data-hotwire-native="true"] .native-search__panel .search-results-list {
  max-height: none;
  overflow: visible;
}

.native-search__empty {
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: hsl(0, 0%, 45%);
  text-align: center;
}

/* Result rows inside native sheet use dark text on light panel */
.native-search__panel a {
  color: inherit;
}

body.hotwire-native .native-search__panel .text-smoky-gray-100,
body[data-hotwire-native="true"] .native-search__panel .text-smoky-gray-100 {
  color: hsl(350, 15%, 18%) !important;
}

body.hotwire-native .native-search__panel .text-smoky-gray-300,
body[data-hotwire-native="true"] .native-search__panel .text-smoky-gray-300 {
  color: hsl(0, 0%, 42%) !important;
}

body.hotwire-native .native-search__panel .hover\:bg-smoky-gray-400:hover,
body[data-hotwire-native="true"] .native-search__panel .hover\:bg-smoky-gray-400:hover {
  background-color: hsla(36, 40%, 88%, 0.9) !important;
}

body.hotwire-native .native-search__panel .divide-smoky-gray-400 > :not(:last-child),
body[data-hotwire-native="true"] .native-search__panel .divide-smoky-gray-400 > :not(:last-child) {
  border-color: hsla(0, 0%, 0%, 0.06);
}

select {
    accent-color: hsl(350, 40%, 35%);
    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px hsl(350, 40%, 62%);
    }
}



/* Book Styling for Swiper.js */
.swiper {
    width: 80%;
    max-width: 850px;  /* Prevent over-stretching on large screens */
    height: 77dvh;  /* Viewport-based for responsiveness; adjust % as needed */
    perspective: 1000px;
    position: relative;
    overflow: visible;
    margin: 0 auto;  /* Center for better mobile layout */
}

.toc-link {
    position: absolute;
    bottom: 10px;  /* At the bottom */
    left: 50%;
    transform: translateX(-50%);  /* Center horizontally */
    font-size: 16px;  /* Smaller for footer-like feel */
    color: #333;  /* Default color */
}

.swiper-slide {
    background-color: #f8f5f0;
    /*background-image: url("path/to/paper-texture.jpg");*/
    background-size: cover;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-align: center;
    padding: 20px;
    backface-visibility: hidden;  /* Crucial for not showing mirrored back */
    transform-style: preserve-3d;
}

.swiper-slide-active {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Enhance shadow during flip for book depth */
.swiper-creative-shadow {
    background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

/* Updated: Styled navigation buttons at bottom corners with overrides */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 0;
    bottom: 10px !important;  /* Position at bottom */
    margin-top: 0;  /* Override default margin-top */
    width: 30px;   /* Smaller size */
    height: 30px;
    --swiper-navigation-size: 30px;  /* Scale arrow size to match button */
    --swiper-navigation-sides-offset: 35px;
    --swiper-navigation-top-offset: calc(100% - 30px);  /* Override top offset */
    /*background-color: rgba(255, 255, 255, 0.8);  !* Semi-transparent white background *!*/
    /*border-radius: 50%;  !* Circular shape *!*/
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  !* Subtle shadow for depth *!*/
    color: #5a5959;  /* Arrow color (override blue) */
    /*transition: background-color 0.3s ease;  !* Hover effect *!*/
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);  /* Subtle text shadow for better visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;  /* Ensure above slides */
}

.swiper-button-prev {
    left: 10px;  /* Bottom-left corner */
}

.swiper-button-next {
    right: 10px;  /* Bottom-right corner */
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    /*background-color: rgba(255, 255, 255, 1);  !* Full opacity on hover *!*/
}

/* Adjust arrow icons for better centering and sizing */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;  /* Slightly smaller than button for fit; adjust if needed */
    color: #5a5959;  /* Reinforce arrow color */
    width: 25px;  /* Even smaller on mobile */
    height: 25px;
    --swiper-navigation-size: 25px;
    top: auto;
    bottom: 5px !important;
}

/* Media queries for mobile responsiveness */
@media (max-width: 767px) {
    .swiper {
        width: 100%;  /* Full width on mobile */
        height: 88vh;  /* Shorter for portrait mode */
    }

    .swiper-slide {
        font-size: 18px;  /* Smaller text for readability */
        padding: 10px;  /* Reduce padding to fit content */
    }


    .swiper-button-prev,
    .swiper-button-next {
        width: 25px;  /* Even smaller on mobile */
        height: 25px;
        --swiper-navigation-size: 25px;
        top: auto;
        bottom: 5px !important;  /* Closer to bottom edge */
    }

    .swiper-button-prev {
        left: 5px;
    }

    .swiper-button-next {
        right: 5px;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 14px;
    }
}
/* Pagination dots at the bottom like page numbers */
.swiper-pagination-bullet {
    background: #888;
}

.swiper-button-prev.swiper-button-disabled::after {
     opacity: 0;
     cursor: auto; /* Optional: Change cursor to default */
     pointer-events: none; /* Prevents clicks on the hidden button */
 }

.swiper-button-next.swiper-button-disabled::after {
    opacity: 0;
    cursor: auto; /* Optional: Change cursor to default */
    pointer-events: none; /* Prevents clicks on the hidden button */
}

.confirm-dialog {
  border: 0;
  padding: 1rem;
  margin: auto;
  background: transparent;
  max-width: 28rem;
  width: calc(100% - 2rem);
  color: inherit;
}

.confirm-dialog[open] {
  display: block;
}

.confirm-dialog::backdrop {
  background: hsla(0, 0%, 8%, 0.72);
}

.confirm-dialog__card {
  background: hsl(36, 33%, 90%);
  border: 1px solid hsl(0, 0%, 70%);
  border-radius: 1rem;
  box-shadow: 0 18px 40px hsla(0, 0%, 0%, 0.28);
  padding: 1.5rem 1.5rem 1.25rem;
}

.confirm-dialog__icon {
  display: flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  border-radius: 9999px;
  background: hsl(150, 30%, 88%);
  color: hsl(150, 45%, 24%);
  font-size: 1.15rem;
}

.confirm-dialog__title {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(350, 40%, 25%);
}

.confirm-dialog__body {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: hsl(0, 0%, 32%);
}

.confirm-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .confirm-dialog__actions {
    flex-direction: row-reverse;
  }
}

.confirm-dialog__accept,
.confirm-dialog__cancel {
  flex: 1;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.confirm-dialog__accept {
  border: 0;
  background: hsl(150, 45%, 28%);
  color: #fff;
}

.confirm-dialog__accept:hover {
  background: hsl(150, 45%, 22%);
}

.confirm-dialog__accept--danger {
  background: hsl(350, 40%, 28%);
}

.confirm-dialog__accept--danger:hover {
  background: hsl(350, 40%, 20%);
}

.confirm-dialog__cancel {
  border: 1px solid hsl(0, 0%, 62%);
  background: transparent;
  color: hsl(350, 40%, 25%);
}

.confirm-dialog__cancel:hover {
  background: hsla(0, 0%, 100%, 0.55);
}

.confirm-dialog__accept:focus-visible,
.confirm-dialog__cancel:focus-visible {
  outline: 2px solid hsl(22, 70%, 50%);
  outline-offset: 2px;
}

/*
 * Conversation thread — native-feel chat.
 * Default bubble is "theirs" (left, smoky-gray). Page-scoped CSS in
 * conversations/show paints data-sender-id="{viewer}" as mine (right, burgundy)
 * so Turbo Stream broadcasts stay viewer-agnostic.
 */
.app-shell__column:has(.chat-page) .app-shell__footer {
  display: none;
}

html:has(.chat-page) {
  scroll-behavior: auto;
}

html:has(.chat-page),
body:has(.chat-page) {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app-shell__content:has(.chat-page) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-page {
  --chat-keyboard-inset: 0px;
  --chat-page-height: calc(100dvh - 42.5rem);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
  height: var(--chat-page-height);
  max-height: min(var(--chat-page-height), 860px);
  overflow: hidden;
}

body.hotwire-native .app-shell__content:has(.chat-page),
body[data-hotwire-native="true"] .app-shell__content:has(.chat-page),
body.hotwire-native .app-shell__column:has(.chat-page),
body[data-hotwire-native="true"] .app-shell__column:has(.chat-page),
body.hotwire-native .app-shell__row:has(.chat-page),
body[data-hotwire-native="true"] .app-shell__row:has(.chat-page),
body.hotwire-native .app-shell__main:has(.chat-page),
body[data-hotwire-native="true"] .app-shell__main:has(.chat-page) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

body.hotwire-native:has(.chat-page),
body[data-hotwire-native="true"]:has(.chat-page) {
  height: 100%;
  min-height: 100%;
}

body.hotwire-native:has(.chat-page) [data-controller~="navbar"],
body[data-hotwire-native="true"]:has(.chat-page) [data-controller~="navbar"] {
  display: none !important;
}

body.hotwire-native .chat-page,
body[data-hotwire-native="true"] .chat-page {
  --chat-page-height: 100%;
  max-width: none;
  height: var(--chat-page-height);
  max-height: var(--chat-page-height);
}

/* WebView is already above the system tab bar — don't also pad the home
   indicator or the composer floats above the nav. */
body.hotwire-native:has(.chat-page) .native-app-content,
body[data-hotwire-native="true"]:has(.chat-page) .native-app-content {
  padding-bottom: 0;
}

.chat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex: 0 0 auto;
  padding: 0.25rem 0.25rem 0.75rem;
}

body.hotwire-native .chat-header,
body[data-hotwire-native="true"] .chat-header {
  padding: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.chat-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  min-width: 0;
}

.chat-header__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  background: var(--color-smoky-gray-400);
  color: #fff;
  font-size: 1rem;
  border: 0;
  line-height: 1;
}

.chat-header__call:hover {
  background: var(--color-smoky-gray-500);
}

.chat-header__call--soon,
.chat-header__call--soon:hover {
  background: var(--color-smoky-gray-300);
  color: var(--color-smoky-gray-600);
  cursor: default;
}

.chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem 0.85rem 0.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #fff 50%, transparent);
  overscroll-behavior: contain;
}

.chat-empty {
  margin: 2.5rem 1rem;
  text-align: center;
  color: var(--color-smoky-gray-600);
  font-size: 0.95rem;
}

.chat-day,
.chat-gap {
  display: flex;
  justify-content: center;
  margin: 0.85rem 0 0.45rem;
}

.chat-day span,
.chat-gap span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-smoky-gray-600);
  background: color-mix(in srgb, var(--color-light-oak-beige-400) 70%, #fff);
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
}

.chat-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.65rem;
  outline: none;
  cursor: pointer;
}

.chat-row.is-continuation {
  margin-top: 0.15rem;
}

.chat-bubble {
  max-width: min(75%, 28rem);
  padding: 0.55rem 0.85rem;
  border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
  background: var(--color-smoky-gray-400);
  color: #fff;
}

.chat-row.is-continuation .chat-bubble {
  border-bottom-left-radius: 1.125rem;
}

.chat-row.is-mine {
  align-items: flex-end;
}

.chat-row.is-mine .chat-bubble {
  background: var(--color-peat-burgundy-400);
  color: #fff;
  border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
}

.chat-row.is-mine.is-continuation .chat-bubble {
  border-bottom-right-radius: 1.125rem;
}

.chat-row.is-mine .chat-stamp,
.chat-row.is-mine .chat-receipt {
  align-self: flex-end;
}

.chat-bubble__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.4;
}

.chat-stamp {
  display: none;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: var(--color-smoky-gray-600);
}

.chat-row.is-stamped .chat-stamp {
  display: block;
}

.chat-receipt {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-smoky-gray-600);
}

.chat-receipt[hidden] {
  display: none !important;
}

.chat-composer-wrap {
  --chat-bar-gap: 3px;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  padding: 0.55rem 0.15rem 0.15rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  background: var(--color-light-oak-beige-500);
}

/* Android: WebView is laid out above the nav — snug + 3px. */
body.hotwire-native .chat-composer-wrap,
body[data-hotwire-native="true"] .chat-composer-wrap {
  padding-bottom: calc(0.2rem + var(--chat-bar-gap));
}

/* iOS Liquid Glass overlays the WebView — clear the tab bar + 3px. */
body[data-native-platform="ios"] .chat-composer-wrap {
  padding-bottom: calc(var(--chat-bar-gap) + max(3.1rem, env(safe-area-inset-bottom, 0px)));
}

/* Keyboard covers the tab bar — drop nav clearance or a large gap sits above the keys. */
body.hotwire-native .chat-page--keyboard .chat-composer-wrap,
body[data-hotwire-native="true"] .chat-page--keyboard .chat-composer-wrap,
body[data-native-platform="ios"] .chat-page--keyboard .chat-composer-wrap {
  padding-bottom: var(--chat-bar-gap);
}

.chat-locked {
  margin: 0;
  padding: 0.75rem 0.25rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-smoky-gray-600);
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.chat-composer__input {
  flex: 1 1 auto;
  resize: none;
  min-height: 2.6rem;
  max-height: 12rem;
  border-radius: 1.25rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--color-smoky-gray-300);
  background: #fff;
  line-height: 1.35;
  color: var(--color-smoky-gray-800);
}

.chat-composer__input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-whiskey-amber-500) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--color-whiskey-amber-500);
}

.chat-composer__send {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--color-whiskey-amber-500);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.05rem;
  min-height: 2.6rem;
}

.chat-composer__send:hover {
  background: var(--color-whiskey-amber-600);
}

.chat-row:focus-visible .chat-bubble {
  outline: 2px solid var(--color-whiskey-amber-500);
  outline-offset: 2px;
}