/*
 * TRYVA tablet layout
 *
 * Applied only after app-core identifies a real tablet-sized touch device.
 * Phone and desktop contracts remain owned by their existing stylesheets.
 */

html.is-tablet-layout,
body.is-tablet-layout {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  min-height: var(--tryva-app-height, 100dvh) !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

body.is-tablet-layout {
  --tryva-desktop-site-width: 100vw !important;
  --tryva-tablet-gutter: clamp(20px, 3vw, 32px);
  --tryva-tablet-gap: 12px;
  --tryva-card-collection-gap: var(--tryva-tablet-gap) !important;
  --tryva-character-card-width: 218px !important;
  --tryva-card-w: var(--tryva-character-card-width) !important;
  --tryva-card-hover-w: var(--tryva-character-card-width) !important;
  --tryva-story-grid-columns: 3 !important;
  --tryva-card-radius: 14px !important;
  overflow-y: hidden !important;
}

body.is-tablet-layout *,
body.is-tablet-layout *::before,
body.is-tablet-layout *::after {
  box-sizing: border-box;
}

body.is-tablet-layout button,
body.is-tablet-layout [role="button"],
body.is-tablet-layout input,
body.is-tablet-layout select {
  touch-action: manipulation;
}

body.is-tablet-layout button,
body.is-tablet-layout [role="button"] {
  min-height: 40px;
}

body.is-tablet-layout .app-shell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100vw !important;
  height: var(--tryva-app-height, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.is-tablet-layout .workspace {
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tryva-app-height, 100dvh) !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
}

body.is-tablet-layout:not(.chat-active):not(.detail-active):not(.story-asset-detail-active):not(.create-active):not(.story-asset-create-active) .workspace {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.is-tablet-layout :is(
  #playView,
  #allCharactersView,
  #creatorProfileView,
  #libraryView,
  #recentConversationsView,
  #storyView,
  #pointShopView,
  #helpView
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.is-tablet-layout .hidden {
  display: none !important;
}

/* Tablet landscape keeps navigation visible, but at a proportional width. */
body.is-tablet-layout.is-tablet-landscape {
  --tryva-tablet-sidebar-width: 204px;
  --tryva-sidebar-width: var(--tryva-tablet-sidebar-width) !important;
}

body.is-tablet-layout.is-tablet-landscape .app-shell {
  display: grid !important;
  grid-template-columns: var(--tryva-tablet-sidebar-width) minmax(0, 1fr) !important;
}

body.is-tablet-layout.is-tablet-landscape .nav-shell {
  position: relative !important;
  z-index: var(--tryva-z-sidebar, 100) !important;
  inset: auto !important;
  display: flex !important;
  width: var(--tryva-tablet-sidebar-width) !important;
  min-width: var(--tryva-tablet-sidebar-width) !important;
  max-width: var(--tryva-tablet-sidebar-width) !important;
  height: var(--tryva-app-height, 100dvh) !important;
  padding: 24px 15px max(18px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.is-tablet-layout.is-tablet-landscape .nav-brand {
  padding-inline: 4px !important;
}

body.is-tablet-layout.is-tablet-landscape .nav-item {
  min-height: 42px !important;
  padding-inline: 12px !important;
}

body.is-tablet-layout.is-tablet-landscape :is(.mobile-nav-toggle, .mobile-nav-backdrop) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Tablet portrait owns a full drawer instead of inheriting the phone column. */
body.is-tablet-layout.is-tablet-portrait {
  --tryva-tablet-sidebar-width: 0px;
  --tryva-sidebar-width: 0px !important;
}

body.is-tablet-layout.is-tablet-portrait .app-shell {
  display: block !important;
  grid-template-columns: none !important;
}

body.is-tablet-layout.is-tablet-portrait .workspace {
  width: 100vw !important;
  padding: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait .mobile-nav-toggle {
  position: fixed !important;
  z-index: 1402 !important;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)) !important;
  left: max(16px, calc(env(safe-area-inset-left, 0px) + 10px)) !important;
  display: grid !important;
  visibility: visible !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  background: rgba(13,12,19,.94) !important;
  color: #f4f0fb !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
  pointer-events: auto !important;
}

body.is-tablet-layout.is-tablet-portrait .mobile-nav-backdrop {
  position: fixed !important;
  z-index: 1398 !important;
  inset: 0 !important;
  display: block !important;
  visibility: hidden !important;
  border: 0 !important;
  background: rgba(2,3,8,.62) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

body.is-tablet-layout.is-tablet-portrait .nav-shell {
  position: fixed !important;
  z-index: 1400 !important;
  inset: 0 auto 0 0 !important;
  display: flex !important;
  width: min(320px, 78vw) !important;
  min-width: 0 !important;
  max-width: 320px !important;
  height: var(--tryva-app-height, 100dvh) !important;
  padding: max(24px, calc(env(safe-area-inset-top, 0px) + 16px)) 18px max(20px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  overflow-y: auto !important;
  transform: translate3d(-104%, 0, 0) !important;
  transition: transform 210ms cubic-bezier(.2,.8,.2,1) !important;
  box-shadow: 24px 0 70px rgba(0,0,0,.48) !important;
  pointer-events: none !important;
}

body.is-tablet-layout.is-tablet-portrait.mobile-nav-open {
  overflow: hidden !important;
}

body.is-tablet-layout.is-tablet-portrait.mobile-nav-open .nav-shell {
  transform: translate3d(0,0,0) !important;
  pointer-events: auto !important;
}

body.is-tablet-layout.is-tablet-portrait.mobile-nav-open .mobile-nav-backdrop {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Shared tablet spacing. */
body.is-tablet-layout :is(.tryva-home-layout, .all-characters-view, .library-view, .recent-conversations-view, .story-view, .point-shop-view) {
  padding-left: var(--tryva-tablet-gutter) !important;
  padding-right: var(--tryva-tablet-gutter) !important;
}

body.is-tablet-layout.is-tablet-portrait :is(.explore-head, .library-explore-head, .recent-page-head, .story-library-head, .point-shop-head, .creator-profile-page-head) {
  padding-left: 68px !important;
}

body.is-tablet-layout.is-tablet-portrait #playView .tryva-home-layout {
  padding-top: max(70px, calc(env(safe-area-inset-top, 0px) + 62px)) !important;
}

body.is-tablet-layout .explore-pane {
  min-width: 0 !important;
  padding-top: 22px !important;
}

body.is-tablet-layout .explore-gender-toolbar {
  max-width: 100% !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
}

body.is-tablet-layout .explore-gender-toolbar::-webkit-scrollbar {
  display: none;
}

body.is-tablet-layout .explore-gender-toolbar button {
  flex: 0 0 auto !important;
  padding-inline: 18px !important;
}

body.is-tablet-layout .explore-filter-panel {
  width: min(410px, 64vw) !important;
  max-width: 410px !important;
}

body.is-tablet-layout :is(.page-head, .all-characters-head, .recent-page-head, .library-title-row) {
  min-width: 0 !important;
  gap: 14px !important;
}

body.is-tablet-layout :is(.page-head h1, .explore-title) {
  font-size: clamp(27px, 3.2vw, 34px) !important;
}

body.is-tablet-layout :is(.all-character-toolbar, .library-tabs, .explore-tabs, .cw-stepper, .story-asset-create-steps) {
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

body.is-tablet-layout :is(.all-character-toolbar, .library-tabs, .explore-tabs, .cw-stepper, .story-asset-create-steps)::-webkit-scrollbar {
  display: none;
}

/* Preserve the PC card geometry and copy composition; only scale dimensions. */
body.is-tablet-layout.play-active #playView {
  --tryva-home-card-w: 206px !important;
  --tryva-home-card-hover-w: 206px !important;
  --tryva-home-card-h: 175.81px !important;
  --tryva-home-card-gap: 12px !important;
}

body.is-tablet-layout #playView .tryva-featured-hero {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 958 / 225 !important;
  border-radius: 18px !important;
}

body.is-tablet-layout #playView :is(.tryva-home-card-carousel, .story-home-showcase, .character-section, .play-rail-row, .play-rail-row-single) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.is-tablet-layout #playView .tryva-home-card-carousel > :is(#characterGrid, #newCharacterRail) {
  gap: var(--tryva-home-card-gap) !important;
  padding: 8px 0 20px !important;
}

body.is-tablet-layout #playView .tryva-home-card-carousel > :is(#characterGrid, #newCharacterRail) > :is(.character-tile, .catalog-card, .tryva-card),
body.is-tablet-layout #playView .tryva-home-card-carousel > :is(#characterGrid, #newCharacterRail) > :is(.character-tile, .catalog-card, .tryva-card):hover,
body.is-tablet-layout #playView .tryva-home-card-carousel > :is(#characterGrid, #newCharacterRail) > :is(.character-tile, .catalog-card, .tryva-card):focus-visible,
body.is-tablet-layout #playView .tryva-home-card-carousel > :is(#characterGrid, #newCharacterRail) > :is(.character-tile, .catalog-card, .tryva-card).selected {
  flex: 0 0 var(--tryva-home-card-w) !important;
  width: var(--tryva-home-card-w) !important;
  min-width: var(--tryva-home-card-w) !important;
  max-width: var(--tryva-home-card-w) !important;
  height: var(--tryva-home-card-h) !important;
  min-height: var(--tryva-home-card-h) !important;
  max-height: var(--tryva-home-card-h) !important;
  transform: none !important;
}

body.is-tablet-layout #playView .tryva-home-card-carousel .character-tile .tile-body,
body.is-tablet-layout #playView .tryva-home-card-carousel .character-tile:hover .tile-body,
body.is-tablet-layout #playView .tryva-home-card-carousel .character-tile.selected .tile-body {
  width: calc(var(--tryva-home-card-w) - 52px) !important;
}

body.is-tablet-layout #playView .tryva-home-card-carousel .character-tile .tile-title h3 {
  font-size: 18px !important;
}

body.is-tablet-layout #playView :is(#homeStoryShowcase, #homeWorldShowcase) > :is(.tryva-card--story, .tryva-unified-story-card) {
  flex: 0 0 calc((100% - (var(--tryva-card-collection-gap) * 2)) / 3) !important;
  width: calc((100% - (var(--tryva-card-collection-gap) * 2)) / 3) !important;
  min-width: calc((100% - (var(--tryva-card-collection-gap) * 2)) / 3) !important;
  max-width: calc((100% - (var(--tryva-card-collection-gap) * 2)) / 3) !important;
  aspect-ratio: var(--tryva-story-card-ratio) !important;
}

body.is-tablet-layout :is(#allCharacterGrid, #libraryGrid, #creatorProfileCharacterGrid).tryva-card-collection--character {
  grid-template-columns: repeat(auto-fill, minmax(var(--tryva-character-card-width), var(--tryva-character-card-width))) !important;
  gap: var(--tryva-card-collection-gap) !important;
  justify-content: start !important;
}

body.is-tablet-layout :is(#allCharacterGrid, #libraryGrid, #creatorProfileCharacterGrid).tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card) {
  width: var(--tryva-character-card-width) !important;
  min-width: var(--tryva-character-card-width) !important;
  max-width: var(--tryva-character-card-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--tryva-character-card-ratio) !important;
}

body.is-tablet-layout :is(#exploreStoryGrid, #storyScenarioGrid, #libraryGrid).tryva-card-collection--story {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--tryva-card-collection-gap) !important;
}

body.is-tablet-layout .library-folder-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)) !important;
  gap: 12px !important;
}

body.is-tablet-layout .library-folder-tile {
  min-width: 0 !important;
  min-height: 72px !important;
}

body.is-tablet-layout .tryva-card-corner-actions > button,
body.is-tablet-layout :is(.catalog-card-edit, .tile-heart, .tryva-card-edit-button, .tryva-card-wishlist-button) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
}

/* Catalog, ranking and recent pages keep multiple useful columns on tablet. */
body.is-tablet-layout .explore-suggest {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

body.is-tablet-layout .explore-rank-podium {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
}

body.is-tablet-layout .explore-rank-podium-card {
  min-height: 190px !important;
}

body.is-tablet-layout .explore-rank-table-head,
body.is-tablet-layout .explore-rank-row {
  grid-template-columns: 54px minmax(0,1fr) 110px 72px !important;
  padding-inline: 14px !important;
}

body.is-tablet-layout .recent-page-list {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 12px !important;
}

body.is-tablet-layout .point-shop-grid,
body.is-tablet-layout .point-shop-packages {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

body.is-tablet-layout .story-library-head {
  min-width: 0 !important;
  gap: 18px !important;
}

body.is-tablet-layout .story-library-tools {
  min-width: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait .story-library-head {
  display: grid !important;
  align-items: start !important;
}

body.is-tablet-layout.is-tablet-portrait .story-library-tools {
  width: 100% !important;
}

body.is-tablet-layout.is-tablet-portrait .story-library-tools label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body.is-tablet-layout .creator-profile-view {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 30px var(--tryva-tablet-gutter) 96px !important;
}

body.is-tablet-layout.is-tablet-portrait .creator-profile-view {
  padding-top: max(22px, env(safe-area-inset-top, 0px)) !important;
}

body.is-tablet-layout .creator-profile-hero {
  min-width: 0 !important;
  min-height: 208px !important;
  gap: 22px !important;
  padding: 28px !important;
  border-radius: 20px !important;
}

body.is-tablet-layout .creator-profile-avatar {
  width: 120px !important;
  height: 120px !important;
}

body.is-tablet-layout.is-tablet-portrait .creator-profile-hero {
  grid-template-columns: auto minmax(0,1fr) !important;
}

body.is-tablet-layout.is-tablet-portrait .creator-profile-stat {
  grid-column: 1 / -1 !important;
  grid-template-columns: 1fr auto !important;
  width: 100% !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-left: 0 !important;
}

body.is-tablet-layout > #globalSelectionTray.selection-tray {
  right: 14px !important;
  bottom: 12px !important;
  grid-template-columns: minmax(0,1fr) 156px !important;
  gap: 12px !important;
  width: auto !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
}

body.is-tablet-layout.is-tablet-landscape > #globalSelectionTray.selection-tray {
  left: calc(var(--tryva-tablet-sidebar-width) + 14px) !important;
}

body.is-tablet-layout.is-tablet-portrait > #globalSelectionTray.selection-tray {
  left: 14px !important;
}

body.is-tablet-layout > #globalSelectionTray > div > p {
  display: none !important;
}

body.is-tablet-layout > #globalSelectionTray #startBtn {
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding-inline: 16px !important;
}

/* Detail dialogs use a PC-like split in landscape and a deliberate stack in portrait. */
body.is-tablet-layout.tryva-detail-overlay-active :is(#characterDetailView, #storyAssetDetailView) {
  padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
}

body.is-tablet-layout .tryva-unified-detail-dialog {
  width: min(100%, 1080px) !important;
  max-width: 100% !important;
  height: calc(var(--tryva-app-height, 100dvh) - 28px) !important;
  max-height: calc(var(--tryva-app-height, 100dvh) - 28px) !important;
  border-radius: 18px !important;
}

body.is-tablet-layout .tryva-unified-detail-body {
  min-width: 0 !important;
}

body.is-tablet-layout.is-tablet-landscape .tryva-detail-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  min-height: clamp(500px, 65dvh, 690px) !important;
}

body.is-tablet-layout.is-tablet-landscape .tryva-unified-detail-media-column,
body.is-tablet-layout.is-tablet-landscape .tryva-unified-detail-copy {
  min-width: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait .tryva-unified-detail-dialog {
  height: calc(var(--tryva-app-height, 100dvh) - 20px) !important;
  max-height: calc(var(--tryva-app-height, 100dvh) - 20px) !important;
}

body.is-tablet-layout.is-tablet-portrait .tryva-detail-hero {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(430px, 52dvh) auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait .tryva-unified-detail-media-column {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 430px !important;
}

body.is-tablet-layout.is-tablet-portrait .tryva-unified-detail-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  padding: 28px 28px 34px !important;
  border-left: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

body.is-tablet-layout .tryva-unified-detail-document,
body.is-tablet-layout .story-detail-page-quick-editor {
  width: min(100%, 832px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

body.is-tablet-layout .story-detail-page-quick-code {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

/* Creator surfaces: three efficient columns in landscape, one focused workstream in portrait. */
body.is-tablet-layout :is(#storyAssetCreateView, #createView) {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--tryva-app-height, 100dvh) !important;
  overflow: hidden !important;
}

body.is-tablet-layout.is-tablet-landscape :is(#storyAssetCreateView, #createView) .story-asset-create-main {
  display: grid !important;
  grid-template-columns: 178px minmax(0,1fr) 258px !important;
  height: calc(var(--tryva-app-height, 100dvh) - 76px) !important;
  min-width: 0 !important;
}

body.is-tablet-layout.is-tablet-landscape :is(#storyAssetCreateView, #createView) .story-asset-create-head {
  min-height: 76px !important;
  padding: 12px 22px !important;
}

body.is-tablet-layout.is-tablet-landscape :is(#storyAssetCreateView, #createView) .story-asset-create-form {
  min-width: 0 !important;
  padding: 26px 26px 104px !important;
}

body.is-tablet-layout.is-tablet-landscape :is(#storyAssetCreateView, #createView) :is(.story-asset-create-steps, .story-asset-create-preview) {
  min-width: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) .story-asset-create-head {
  min-height: 70px !important;
  padding: max(12px, env(safe-area-inset-top, 0px)) 20px 10px 68px !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) .story-asset-create-main {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  height: calc(var(--tryva-app-height, 100dvh) - 70px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) .story-asset-create-steps {
  position: relative !important;
  z-index: 20 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  width: 100% !important;
  padding: 10px 20px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) :is(#storyAssetStepList, .cw-stepper) {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 8px !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) :is(#storyAssetStepList, .cw-stepper) > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 132px !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) .story-asset-create-form {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  padding: 28px var(--tryva-tablet-gutter) 118px !important;
  overflow-y: auto !important;
}

body.is-tablet-layout.is-tablet-portrait :is(#storyAssetCreateView, #createView) .story-asset-create-preview {
  display: none !important;
}

body.is-tablet-layout :is(#storyAssetCreateView, #createView) :is(.story-field-grid.two, .character-world-position-grid, .cw-field-row, .cw-two-column-settings) {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

body.is-tablet-layout :is(#storyAssetCreateView, #createView) :is(.story-asset-create-actions, .cw-footer) {
  min-width: 0 !important;
}

body.is-tablet-layout .story-detail-page-inline-editor {
  grid-template-columns: minmax(0,1fr) !important;
}

body.is-tablet-layout .story-detail-page-preview-column {
  width: 100% !important;
  min-width: 0 !important;
}

/* The room is tablet-native: landscape retains insight, portrait uses its drawer. */
body.is-tablet-layout.chat-active .app-shell {
  display: block !important;
  grid-template-columns: none !important;
}

body.is-tablet-layout.chat-active .nav-shell,
body.is-tablet-layout.chat-active .mobile-nav-toggle,
body.is-tablet-layout.chat-active .mobile-nav-backdrop {
  display: none !important;
}

body.is-tablet-layout.chat-active .workspace,
body.is-tablet-layout.chat-active .chat-view {
  width: 100vw !important;
  max-width: 100vw !important;
  height: var(--tryva-app-height, 100dvh) !important;
  max-height: var(--tryva-app-height, 100dvh) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.is-tablet-layout.is-tablet-landscape.chat-active .chat-view {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 296px !important;
  grid-template-rows: minmax(0,1fr) !important;
  gap: 8px !important;
}

body.is-tablet-layout.is-tablet-landscape.chat-active .insight-panel {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  width: 296px !important;
  min-width: 296px !important;
  max-width: 296px !important;
  height: 100% !important;
  max-height: none !important;
  transform: none !important;
}

body.is-tablet-layout.is-tablet-landscape.chat-active :is(#mobileInsightBtn, #mobileInsightBackdrop, #mobileInsightCloseBtn) {
  display: none !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active .chat-view {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: minmax(0,1fr) !important;
  gap: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active .chat-panel {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active .insight-panel {
  position: fixed !important;
  z-index: 1310 !important;
  inset: 0 0 0 auto !important;
  display: flex !important;
  width: min(380px, 82vw) !important;
  min-width: 0 !important;
  max-width: 82vw !important;
  height: var(--tryva-app-height, 100dvh) !important;
  max-height: none !important;
  transform: translate3d(104%,0,0) !important;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1) !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active .chat-view.show-insight .insight-panel {
  transform: translate3d(0,0,0) !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active #mobileInsightBackdrop {
  position: fixed !important;
  z-index: 1300 !important;
  inset: 0 !important;
  display: block !important;
  visibility: hidden !important;
  background: rgba(2,3,8,.58) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-tablet-layout.is-tablet-portrait.chat-active.mobile-insight-open #mobileInsightBackdrop {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.is-tablet-layout.chat-active .vn-stage {
  min-height: 0 !important;
}

/* Tablet dialogs are centered surfaces, never phone full-screen sheets. */
body.is-tablet-layout .modal-backdrop {
  padding: max(18px, env(safe-area-inset-top,0px)) max(18px, env(safe-area-inset-right,0px)) max(18px, env(safe-area-inset-bottom,0px)) max(18px, env(safe-area-inset-left,0px)) !important;
}

body.is-tablet-layout .modal-backdrop > :is(section, .modal, .modal-card),
body.is-tablet-layout :is(.account-modal, .settings-modal, .start-modal, .simple-media-editor, .simple-detail-media-editor, .admin-dashboard-modal) {
  width: min(100%, 760px) !important;
  max-width: calc(100vw - 36px) !important;
  max-height: calc(var(--tryva-app-height, 100dvh) - 36px) !important;
  border-radius: 18px !important;
}

body.is-tablet-layout.is-tablet-landscape :is(.story-presentation-editor-modal, .scenario-intro-editor-modal) {
  width: calc(100vw - 32px) !important;
  height: calc(var(--tryva-app-height,100dvh) - 32px) !important;
}

body.is-tablet-layout.is-tablet-portrait :is(.story-presentation-editor-body, .scenario-intro-editor-body) {
  grid-template-columns: minmax(0,1fr) !important;
  overflow-y: auto !important;
}

/* Help keeps a tablet navigation column in landscape and a compact header in portrait. */
body.is-tablet-layout.is-tablet-landscape .help-docs-shell {
  grid-template-columns: 210px minmax(0,1fr) !important;
  width: min(100%, 980px) !important;
}

body.is-tablet-layout.is-tablet-landscape .help-docs-toc {
  display: none !important;
}

body.is-tablet-layout.is-tablet-portrait .help-docs-shell {
  display: block !important;
  width: 100% !important;
}

body.is-tablet-layout.is-tablet-portrait .help-docs-navigation {
  display: none !important;
}

body.is-tablet-layout.is-tablet-portrait .help-docs-mobile-head {
  position: sticky !important;
  z-index: 5 !important;
  top: 0 !important;
  display: flex !important;
  min-height: 58px !important;
  padding-left: 68px !important;
}

body.is-tablet-layout.is-tablet-portrait .help-docs-article {
  width: min(100%, 832px) !important;
  margin-inline: auto !important;
  padding: 38px var(--tryva-tablet-gutter) 96px !important;
}

/* No hover-only expansion on a touch-first tablet. */
body.is-tablet-layout :is(.character-tile, .catalog-card, .tryva-unified-story-card, .library-folder-tile):hover {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.is-tablet-layout .nav-shell,
  body.is-tablet-layout .mobile-nav-backdrop,
  body.is-tablet-layout .insight-panel {
    transition: none !important;
  }
}