/*
 * Native app overrides — loaded only when hotwire_native_app? is true.
 * All rules scoped under body.native-app as defense-in-depth.
 *
 * Goals: match iOS HIG as closely as possible in a WebView context.
 * Uses backdrop-filter for glass/vibrancy effects where possible.
 */

/* ── Global: kill horizontal scroll, prevent auto-zoom ── */
html:has(body.native-app),
body.native-app {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100% !important;
}
body.native-app * {
  max-width: 100vw !important;
}
body.native-app input,
body.native-app textarea,
body.native-app select {
  font-size: 16px !important;
}

/* ── HOME PAGES (non-chat): allow natural scroll ── */
body.native-app:has(.nh),
body.native-app:has(.nh) > .flex {
  height: auto !important;
  overflow: visible !important;
}
body.native-app:has(.nh) > .flex > main {
  flex: none !important;
  padding-top: 60px;
}

/* ══════════════════════════════════════════════
   CHAT / ROOM PAGES
   ══════════════════════════════════════════════ */

body.native-app .chat-wrapper {
  height: 100dvh !important;
  padding-top: calc(env(safe-area-inset-top, 59px) + 20px) !important;
  box-sizing: border-box !important;
}
body.native-app .chat-wrapper .chat-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  animation: none !important;
  transition: none !important;
}

/* ── Chat header: align title/status with hamburger toggle ── */
body.native-app #chat-header {
  padding: 0 16px 0 60px !important;
  min-height: 44px !important;
  margin-top: -6px !important;
}

/* ── Sidebar toggle: glass pill, 44pt touch target ── */
body.native-app #sidebar-toggle {
  display: flex !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 22px !important;
  background: rgba(245, 244, 242, 0.7) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  box-shadow: 0 0.5px 1px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.04) !important;
  color: #1c1c1e !important;
}
body.native-app #sidebar-toggle svg {
  width: 20px !important;
  height: 20px !important;
}

/* ── Sidebar: slide from left with spring ── */
body.native-app #sidebar,
body.native-app #sidebar.open,
body.native-app #sidebar:not(.open) {
  opacity: 1 !important;
  transform: translateX(-100%) !important;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1),
              visibility 0s linear 0.25s !important;
  visibility: hidden !important;
  background: transparent !important;
}
body.native-app #sidebar.mobile-open,
body.native-app #sidebar.open.mobile-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  padding-top: calc(env(safe-area-inset-top, 59px) + 56px) !important;
  background: rgba(250, 249, 247, 0.92) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
  transition: transform 0.25s cubic-bezier(0.2, 1, 0.3, 1),
              visibility 0s linear 0s !important;
}

/* ── Sidebar: single scrollable body, pinned footer ── */
body.native-app #sidebar.mobile-open {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.native-app #conversation-list {
  flex: none !important;
  overflow-y: visible !important;
}
body.native-app #room-list {
  max-height: none !important;
  overflow-y: visible !important;
}
body.native-app #sidebar-user {
  position: sticky !important;
  bottom: 0 !important;
  background: rgba(250, 249, 247, 0.92) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
}

/* ── Sidebar nav items: 44pt touch targets ── */
body.native-app .nav-item {
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}
body.native-app .nav-item-new-conv {
  min-height: 44px !important;
  font-size: 15px !important;
}
body.native-app .nav-item-new-room {
  min-height: 44px !important;
  height: auto !important;
  padding: 0 25px !important;
  border-radius: 10px !important;
}

/* ── Sidebar workspace trigger: 44pt ── */
body.native-app .ws-trigger {
  min-height: 44px !important;
  padding: 8px 12px !important;
}
body.native-app .ws-name {
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* ── Sidebar conversation items: 44pt rows, readable sizes ── */
body.native-app .conv-item {
  font-size: 15px !important;
}
body.native-app .conv-time {
  font-size: 12px !important;
}
body.native-app .conv-link {
  min-height: 44px !important;
  padding: 10px 8px !important;
}
body.native-app .room-item {
  font-size: 15px !important;
}
body.native-app .room-item .conv-link {
  min-height: 44px !important;
}
body.native-app #sidebar-rooms-header h2,
body.native-app #sidebar-header h2 {
  font-size: 12px !important;
}
body.native-app .user-name {
  font-size: 15px !important;
}

/* ── Sidebar user profile: 44pt ── */
body.native-app .user-trigger {
  min-height: 44px !important;
  padding: 8px 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── Workspace dropdown: uniform inset, glass ── */
body.native-app .sidebar-dropdown {
  width: auto !important;
  left: 16px !important;
  right: 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(40px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08),
              0 2px 8px rgba(0,0,0,0.08),
              0 12px 32px rgba(0,0,0,0.12) !important;
}
body.native-app .dropdown-menu-item {
  min-height: 44px !important;
  font-size: 16px !important;
}
body.native-app .dropdown-ws-item {
  min-height: 48px !important;
}
body.native-app .dropdown-divider {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* ── Messages: iOS-standard 16px margins ── */
body.native-app #messages {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
body.native-app .room-message,
body.native-app .message {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ── Chat input: glass bar, safe area, 44pt buttons ── */
body.native-app #input-row {
  align-items: center !important;
}
body.native-app #input-row > * {
  margin-bottom: 0 !important;
}
body.native-app #chat-input-area {
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 4px) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
body.native-app #input-container {
  border-radius: 22px !important;
  border: 0.5px solid rgba(0,0,0,0.1) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.native-app #chat-input-area #send-btn,
body.native-app #chat-input-area #stop-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 18px !important;
}
body.native-app #chat-input-area #attach-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

/* ── NON-FULL-BLEED PAGES: push below safe area ── */
body.native-app .app-main {
  width: 100% !important;
  padding-top: 60px !important;
  animation: none !important;
  transition: none !important;
}

/* ══════════════════════════════════════════════
   SETTINGS MODAL — iOS sheet presentation
   ══════════════════════════════════════════════ */

/* Overlay: fully transparent, just a click-away-to-close layer */
body.native-app .sm-overlay {
  background: transparent !important;
  padding: 0 !important;
}
/* Modal: full-screen takeover, no gaps, no borders, no radius */
body.native-app .sm-modal,
body.native-app .sm-modal.sm-showing-content {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  padding-top: env(safe-area-inset-top, 59px) !important;
  box-sizing: border-box !important;
  /* Slide up animation */
  transform: translateY(100%) !important;
  opacity: 1 !important;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
}
body.native-app .sm-overlay.open .sm-modal {
  transform: translateY(0) !important;
}
/* No grabber — full screen doesn't need one */
body.native-app .sm-modal::before {
  display: none !important;
}
/* Content and sidebar: full width, no borders */
body.native-app .sm-sidebar {
  border: none !important;
}
body.native-app .sm-content {
  border: none !important;
}
body.native-app .sm-modal.sm-showing-content .sm-sidebar {
  display: none !important;
}
body.native-app .sm-modal.sm-showing-content .sm-content {
  display: flex !important;
  width: 100% !important;
}
/* Hide the old close buttons inside sidebar/content */
body.native-app .sm-close-mobile,
body.native-app .sm-content > .sm-close {
  display: none !important;
}
/* Persistent close button: always visible, top-right of modal */
body.native-app .sm-close-persistent {
  display: flex !important;
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 59px) + 8px) !important;
  right: 12px !important;
  z-index: 10 !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 18px !important;
  background: var(--color-hover, rgba(128, 128, 128, 0.15)) !important;
  border-radius: 50% !important;
  color: var(--color-text-secondary, rgba(128, 128, 128, 0.8)) !important;
  border: none !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
/* Nav items: 44pt touch targets */
body.native-app .sm-nav-item {
  min-height: 44px !important;
  font-size: 16px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
body.native-app .sm-nav-group-label {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}
body.native-app .sm-mobile-back {
  border-radius: 0 !important;
  min-height: 44px !important;
  font-size: 15px !important;
}
/* Section headers in settings content */
body.native-app .sm-section-title {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ══════════════════════════════════════════════
   CREATE ROOM MODAL — iOS centered sheet
   ══════════════════════════════════════════════ */

body.native-app .room-create-modal {
  margin: 0 16px !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
}

/* ── Quick reply chips: full-width, 44pt touch ── */
body.native-app .quick-reply {
  min-height: 44px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
}
body.native-app .quick-reply .chip-edit-icon svg,
body.native-app .quick-reply .chip-send-icon svg {
  width: 14px !important;
  height: 14px !important;
}
body.native-app .room-chip {
  min-height: 44px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
}
body.native-app .room-chip .room-chip-icon svg {
  width: 14px !important;
  height: 14px !important;
}
body.native-app .room-reply-chips {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 8px 16px !important;
  gap: 8px !important;
}

/* ── Dividers: iOS-standard opacity ── */
body.native-app .dropdown-divider,
body.native-app .sm-nav-divider {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* ── User profile card: push above phone's bottom radius ── */
body.native-app #sidebar-user {
  display: flex !important;
  align-items: center !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 8px) !important;
}
body.native-app .sidebar-sound-toggle {
  position: static !important;
  margin-top: 8px !important;
  transform: none !important;
  order: 2 !important;
  flex-shrink: 0 !important;
}

/* ── Kill hover states: prevent iOS double-tap-to-navigate ── */
body.native-app .nav-item:hover,
body.native-app .conv-item:hover,
body.native-app .room-item:hover,
body.native-app .conv-link:hover,
body.native-app .nav-item-new-conv:hover,
body.native-app .nav-item-new-room:hover,
body.native-app .dropdown-menu-item:hover,
body.native-app .dropdown-ws-item:hover,
body.native-app .ws-trigger:hover,
body.native-app .user-trigger:hover,
body.native-app .sidebar-sound-toggle:hover,
body.native-app #sidebar-toggle:hover {
  background: inherit !important;
  color: inherit !important;
  transform: none !important;
}
body.native-app .conv-item:hover .conv-delete {
  opacity: 0 !important;
}
body.native-app .nav-item-new-room:hover .nav-room-tooltip {
  animation: none !important;
  display: none !important;
}
body.native-app .room-item:hover .room-item-av {
  border-color: inherit !important;
}
body.native-app .dropdown-menu-item:hover svg {
  opacity: inherit !important;
}

/* ── Active/tap feedback (replaces hover) ── */
body.native-app .nav-item:active,
body.native-app .conv-item:active,
body.native-app .conv-link:active,
body.native-app .room-item:active,
body.native-app .nav-item-new-conv:active,
body.native-app .nav-item-new-room:active,
body.native-app .dropdown-menu-item:active,
body.native-app .dropdown-ws-item:active,
body.native-app .ws-trigger:active,
body.native-app .user-trigger:active,
body.native-app #sidebar-toggle:active {
  background: var(--color-hover) !important;
  transition: none !important;
}

/* ── Suppress web-only UI ── */
body.native-app .pwa-install-prompt {
  display: none !important;
}
body.native-app .chat-download-group {
  display: none !important;
}

/* ══════════════════════════════════════════════
   DARK THEME — adapt frosted-glass for dark modes
   Uses iOS HIG dark material colors (systemMaterialDark)
   ══════════════════════════════════════════════ */

[data-theme="wistful_juniper"] body.native-app #sidebar-toggle,
[data-theme="deep_current"] body.native-app #sidebar-toggle {
  background: rgba(58, 58, 60, 0.7) !important;
  color: var(--color-text-muted) !important;
  box-shadow: 0 0.5px 1px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.06) !important;
}

[data-theme="wistful_juniper"] body.native-app #sidebar.mobile-open,
[data-theme="deep_current"] body.native-app #sidebar.mobile-open {
  background: rgba(28, 28, 30, 0.92) !important;
}

[data-theme="wistful_juniper"] body.native-app #input-container,
[data-theme="deep_current"] body.native-app #input-container {
  background: rgba(44, 44, 46, 0.8) !important;
  border: 0.5px solid rgba(255,255,255,0.1) !important;
}

[data-theme="wistful_juniper"] body.native-app .sidebar-dropdown,
[data-theme="deep_current"] body.native-app .sidebar-dropdown {
  background: rgba(44, 44, 46, 0.85) !important;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.08),
              0 2px 8px rgba(0,0,0,0.3),
              0 12px 32px rgba(0,0,0,0.4) !important;
}

[data-theme="wistful_juniper"] body.native-app #sidebar-user,
[data-theme="deep_current"] body.native-app #sidebar-user {
  background: rgba(28, 28, 30, 0.92) !important;
}

[data-theme="wistful_juniper"] body.native-app .sm-section-title,
[data-theme="deep_current"] body.native-app .sm-section-title {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="wistful_juniper"] body.native-app .dropdown-divider,
[data-theme="wistful_juniper"] body.native-app .sm-nav-divider,
[data-theme="deep_current"] body.native-app .dropdown-divider,
[data-theme="deep_current"] body.native-app .sm-nav-divider {
  background: rgba(255, 255, 255, 0.12) !important;
}


/* ── Disable text selection on interactive elements ── */
body.native-app button,
body.native-app .nav-item,
body.native-app .conv-link,
body.native-app .conv-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ── Remove tap highlight on all interactive elements ── */
body.native-app {
  -webkit-tap-highlight-color: transparent;
}

/* ── Offline banner ── */
body.native-app .native-offline-banner {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: #b91c1c;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  animation: native-offline-slide 0.25s ease-out;
}

@keyframes native-offline-slide {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}