/*
 * TRYVA UI SYSTEM · v5.34.72.175
 *
 * Canonical owner of shared application tokens and card-collection geometry.
 * Page styles may own card internals, copy and page spacing. They must not own
 * collection display/columns/gaps or the outer dimensions of collection cards.
 */

:root {
  /* Application surfaces */
  --tryva-app-ground: #0c0c11;
  --tryva-app-surface: #111116;
  --tryva-app-surface-raised: #17171e;
  --tryva-app-line: rgba(255, 255, 255, .10);
  --tryva-app-line-strong: rgba(255, 255, 255, .16);

  /* Readable secondary copy. Tiny category labels remain intentionally compact. */
  --tryva-support-text: #a59eae;
  --tryva-meta-text: #958da0;
  --tryva-support-font-size: 10.5px;
  --tryva-meta-font-size: 9.5px;

  /* Shared collection geometry */
  --tryva-card-collection-gap: 12px;
  --tryva-character-card-width: 232px;
  --tryva-character-card-ratio: 218 / 302;
  --tryva-story-card-ratio: 378 / 302;
  --tryva-story-grid-columns: 4;
  --tryva-card-radius: 14px;

  /* Compatibility aliases consumed by card-internal legacy rules. Their
     values are owned here, not by page or breakpoint patches. */
  --tryva-catalog-ground: var(--tryva-app-ground);
  --tryva-catalogue-gap: var(--tryva-card-collection-gap);
  --tryva-story-surface-gap: var(--tryva-card-collection-gap);
  --tryva-story-grid-gap: var(--tryva-card-collection-gap);
  --tryva-pc-card-grid-gap: var(--tryva-card-collection-gap);
  --tryva-card-w: var(--tryva-character-card-width);
  --tryva-card-aspect-ratio: var(--tryva-character-card-ratio);
  --tryva-story-card-width: 378px;
  --tryva-story-card-height: 302px;
  --tryva-story-card-aspect-ratio: var(--tryva-story-card-ratio);

  /* One z-index scale for new and migrated components. */
  --tryva-z-content: 1;
  --tryva-z-sticky: 20;
  --tryva-z-sidebar: 100;
  --tryva-z-sidebar-toggle: 110;
  --tryva-z-popover: 300;
  --tryva-z-modal: 1000;
  --tryva-z-toast: 1200;
  --tryva-z-critical: 1400;
}

html,
body,
body.route-booting,
.route-boot-screen,
body.play-active,
body.play-active .app-shell,
body.play-active .workspace,
body.play-active #playView,
body.story-asset-detail-active,
body.story-asset-detail-active .app-shell,
body.story-asset-detail-active .workspace,
body.story-asset-detail-active #storyAssetDetailView {
  background: var(--tryva-app-ground) !important;
}

/* -------------------------------------------------------------------------
   Shared card and collection contracts
   ------------------------------------------------------------------------- */
.tryva-card {
  box-sizing: border-box;
  min-width: 0;
}

.tryva-card--character { aspect-ratio: var(--tryva-character-card-ratio); }
.tryva-card--story { aspect-ratio: var(--tryva-story-card-ratio); }

.tryva-card-collection {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: var(--tryva-card-collection-gap) !important;
  row-gap: var(--tryva-card-collection-gap) !important;
  column-gap: var(--tryva-card-collection-gap) !important;
  align-items: start !important;
  align-content: start !important;
}

.tryva-card-collection.tryva-card-collection--grid {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  justify-content: start !important;
  overflow: visible !important;
}

.tryva-card-collection.tryva-card-collection--rail {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: flex-start !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overscroll-behavior-inline: contain;
}

.tryva-card-collection.tryva-card-collection--rail::-webkit-scrollbar {
  display: none !important;
}

.tryva-card-collection.tryva-card-collection--rail > .tryva-card {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
}

/* Character collections. Home and New are rails; Explore, Library and the
   creator profile are grids. Every surface consumes the same width and gap. */
html body #playView #characterGrid.tryva-card-collection.tryva-card-collection--character,
html body #playView #newCharacterRail.tryva-card-collection.tryva-card-collection--character {
  display: flex !important;
  flex-flow: row nowrap !important;
  width: 100% !important;
  padding: 8px 0 26px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html body #playView #characterGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .character-tile),
html body #playView #newCharacterRail.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .character-tile) {
  box-sizing: border-box !important;
  flex: 0 0 var(--tryva-character-card-width) !important;
  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;
}

html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character,
html body.library-active #libraryView #libraryGrid.tryva-card-collection--character,
html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid.tryva-card-collection--character {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--tryva-character-card-width), var(--tryva-character-card-width))) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  justify-content: start !important;
  overflow: visible !important;
}

html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card),
html body.library-active #libraryView #libraryGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card),
html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card) {
  box-sizing: border-box !important;
  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;
  justify-self: start !important;
}

/* Story/world collections. The card dimensions and 12px gap are identical.
   Home adds only horizontal rail behavior; Explore/Library/Story wrap as grid. */
html body #playView #homeStoryShowcase.tryva-card-collection.tryva-card-collection--story,
html body #playView #homeWorldShowcase.tryva-card-collection.tryva-card-collection--story {
  display: flex !important;
  flex-flow: row nowrap !important;
  width: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

html body #playView #homeStoryShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card),
html body #playView #homeWorldShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card) {
  box-sizing: border-box !important;
  flex: 0 0 calc((100% - (var(--tryva-card-collection-gap) * 3)) / 4) !important;
  width: calc((100% - (var(--tryva-card-collection-gap) * 3)) / 4) !important;
  min-width: calc((100% - (var(--tryva-card-collection-gap) * 3)) / 4) !important;
  max-width: calc((100% - (var(--tryva-card-collection-gap) * 3)) / 4) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--tryva-story-card-ratio) !important;
}

html body.all-characters-active #allCharactersView #exploreStoryGrid.tryva-card-collection--story,
html body.library-active #libraryView #libraryGrid.tryva-card-collection--story,
html body.story-active #storyView #storyScenarioGrid.tryva-card-collection--story {
  display: grid !important;
  grid-template-columns: repeat(var(--tryva-story-grid-columns), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;
  width: 100% !important;
  justify-content: stretch !important;
  overflow: visible !important;
}

html body.all-characters-active #allCharactersView #exploreStoryGrid.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card, .create-card),
html body.library-active #libraryView #libraryGrid.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card, .create-card),
html body.story-active #storyView #storyScenarioGrid.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card, .create-card) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--tryva-story-card-ratio) !important;
  justify-self: stretch !important;
}

.tryva-card-collection--grid > :is(.tryva-card-loading-status, .tryva-public-story-loading, .tryva-public-story-empty) {
  grid-column: 1 / -1;
}

.tryva-card-collection--rail > :is(.tryva-card-loading-status, .tryva-public-story-loading, .tryva-public-story-empty) {
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

/* -------------------------------------------------------------------------
   Story/world detail surface derives from the same application ground.
   ------------------------------------------------------------------------- */
html body.story-asset-detail-active #storyAssetDetailView .story-detail-art-shade,
html .tryva-story-detail-preview-context .tryva-story-detail-preview-clone .story-detail-art-shade {
  background:
    linear-gradient(90deg, rgba(8, 8, 11, .80) 0%, rgba(8, 8, 11, .34) 38%, transparent 72%),
    linear-gradient(180deg,
      transparent 30%,
      rgba(12, 12, 17, .02) 44%,
      rgba(12, 12, 17, .08) 57%,
      rgba(12, 12, 17, .18) 68%,
      rgba(12, 12, 17, .34) 78%,
      rgba(12, 12, 17, .54) 87%,
      rgba(12, 12, 17, .78) 94%,
      var(--tryva-app-ground) 100%) !important;
}

html body.story-asset-detail-active #storyAssetDetailView > .story-detail-hero > .story-detail-copy,
html body.story-asset-detail-active #storyAssetDetailView .story-detail-page-quick-editor,
html body.story-asset-detail-active #storyAssetDetailView .story-detail-page-inline-editor {
  background: var(--tryva-app-ground) !important;
}

html body.story-asset-detail-active #storyAssetDetailView.story-detail-has-custom-page > .story-detail-hero > .story-detail-copy {
  background: transparent !important;
}

/* -------------------------------------------------------------------------
   Responsive collection scale. Desktop keeps the same four-card contract.
   Mobile remains a separate presentation but still consumes shared tokens.
   ------------------------------------------------------------------------- */
@media (min-width: 681px) and (max-width: 900px) {
  :root {
    --tryva-character-card-width: 190px;
    --tryva-story-grid-columns: 3;
  }

  html body #playView #homeStoryShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card),
  html body #playView #homeWorldShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card) {
    flex-basis: 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;
  }
}

@media (max-width: 680px) {
  :root {
    --tryva-card-collection-gap: 10px;
    --tryva-character-card-width: min(176px, calc((100vw - (var(--tryva-mobile-gutter, 16px) * 2) - var(--tryva-card-collection-gap)) / 2));
    --tryva-story-grid-columns: 2;
  }

  html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character,
  html body.library-active #libraryView #libraryGrid.tryva-card-collection--character,
  html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid.tryva-card-collection--character {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.all-characters-active #allCharactersView #allCharacterGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card),
  html body.library-active #libraryView #libraryGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card),
  html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid.tryva-card-collection--character > :is(.tryva-card--character, .catalog-card, .create-card) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body #playView #homeStoryShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card),
  html body #playView #homeWorldShowcase.tryva-card-collection--story > :is(.tryva-card--story, .tryva-unified-story-card) {
    flex: 0 0 86% !important;
    width: 86% !important;
    min-width: 86% !important;
    max-width: 86% !important;
  }
}

@media (max-width: 479px) {
  :root {
    --tryva-character-card-width: min(154px, calc((100vw - (var(--tryva-mobile-gutter, 14px) * 2) - var(--tryva-card-collection-gap)) / 2));
    --tryva-story-grid-columns: 1;
  }

  html body.all-characters-active #allCharactersView #exploreStoryGrid.tryva-card-collection--story,
  html body.library-active #libraryView #libraryGrid.tryva-card-collection--story,
  html body.story-active #storyView #storyScenarioGrid.tryva-card-collection--story {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* -------------------------------------------------------------------------
   Shared card-corner actions. Character/story and Home/Explore/Library use
   the same markup, hit area and ordering. Only availability differs.
   ------------------------------------------------------------------------- */
html body #playView :is(#characterGrid, #newCharacterRail, #homeStoryShowcase, #homeWorldShowcase) > .tryva-card > .tryva-card-corner-actions,
html body.all-characters-active #allCharactersView :is(#allCharacterGrid, #exploreStoryGrid) > .tryva-card > .tryva-card-corner-actions,
html body.library-active #libraryView #libraryGrid > .tryva-card > .tryva-card-corner-actions,
html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid > .tryva-card > .tryva-card-corner-actions,
html body.story-active #storyView #storyScenarioGrid > .tryva-card > .tryva-card-corner-actions {
  position: absolute !important;
  z-index: 10 !important;
  top: 11px !important;
  right: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  height: 29px !important;
  pointer-events: none !important;
}

html body #playView :is(#characterGrid, #newCharacterRail, #homeStoryShowcase, #homeWorldShowcase) > .tryva-card > .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button),
html body.all-characters-active #allCharactersView :is(#allCharacterGrid, #exploreStoryGrid) > .tryva-card > .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button),
html body.library-active #libraryView #libraryGrid > .tryva-card > .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button),
html body.creator-profile-active #creatorProfileView #creatorProfileCharacterGrid > .tryva-card > .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button),
html body.story-active #storyView #storyScenarioGrid > .tryva-card > .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button) {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 29px !important;
  width: 29px !important;
  min-width: 29px !important;
  max-width: 29px !important;
  height: 29px !important;
  min-height: 29px !important;
  max-height: 29px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(15, 13, 22, .62) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16) !important;
  font-family: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: center !important;
  pointer-events: auto !important;
}

.tryva-card-corner-actions > .tryva-card-edit-button { order: 1 !important; font-size: 0 !important; }
.tryva-card-corner-actions > .tryva-card-wishlist-button { order: 2 !important; font-size: 16px !important; font-weight: 400 !important; }

.tryva-card-corner-actions > .tryva-card-edit-button > .catalog-card-edit-icon,
.tryva-card-corner-actions > .tryva-card-edit-button > .catalog-card-edit-icon > svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 0 !important;
  pointer-events: none !important;
  transform: none !important;
}

.tryva-card-corner-actions > .tryva-card-edit-button > .catalog-card-edit-icon > svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.tryva-card-corner-actions > .tryva-card-wishlist-button.is-wishlisted {
  background: linear-gradient(145deg, rgba(177, 70, 199, .94), rgba(112, 62, 221, .94)) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(157, 63, 202, .34) !important;
}

@media (hover: hover) {
  .tryva-card-corner-actions > :is(.tryva-card-edit-button, .tryva-card-wishlist-button):is(:hover, :focus-visible) {
    background: rgba(28, 22, 39, .82) !important;
    transform: translateY(-1px) scale(1.08) !important;
    box-shadow: 0 9px 24px rgba(0, 0, 0, .24) !important;
  }
}

/* Recent rooms use the pinned scenario/world cover when a story session owns
   the room. This is a single cover, never a participant-avatar collage. */
.recent-room-source-card {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: var(--tryva-app-surface-raised);
}

.recent-room-source-card > .recent-room-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%) !important;
  transform: scale(var(--crop-zoom, 1)) !important;
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%) !important;
}

/* -------------------------------------------------------------------------
   Shared model choice controls
   Native browser selects are intentionally not used for model selection.
   These controls consume the application surface, line, radius and focus
   contracts defined above and are shared by room setup and live play.
   ------------------------------------------------------------------------- */
.tryva-choice-field {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--tryva-app-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .028);
}

.tryva-choice-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tryva-choice-heading > span {
  color: #eeeaf6;
  font-size: 13px;
  font-weight: 800;
}

.tryva-choice-heading > small {
  color: #8f899b;
  font-size: 10.5px;
  line-height: 1.4;
  text-align: right;
}

.tryva-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tryva-choice-card {
  appearance: none;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 68px;
  padding: 11px;
  border: 1px solid var(--tryva-app-line);
  border-radius: 10px;
  background: #121119;
  color: #ded9e8;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.tryva-choice-card:hover {
  border-color: var(--tryva-app-line-strong);
  background: #17151f;
  transform: translateY(-1px);
}

.tryva-choice-card:focus-visible,
.room-actor-model-trigger:focus-visible,
.room-actor-model-option:focus-visible {
  outline: 2px solid rgba(151, 112, 255, .82);
  outline-offset: 2px;
}

.tryva-choice-card.is-selected {
  border-color: rgba(151, 112, 255, .78);
  background: linear-gradient(145deg, rgba(116, 76, 219, .18), rgba(20, 17, 29, .96));
  box-shadow: inset 0 0 0 1px rgba(151, 112, 255, .18);
}

.tryva-choice-card:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

.tryva-choice-card-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.tryva-choice-card.is-selected .tryva-choice-card-mark {
  border-color: transparent;
  background: #8d6aff;
}

.tryva-choice-card-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.tryva-choice-card-copy strong {
  overflow: hidden;
  color: #f2eff8;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tryva-choice-card-copy small,
.tryva-choice-card > em {
  color: #948da0;
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.tryva-choice-card > em {
  color: #bca9f7;
  white-space: nowrap;
}

.tryva-choice-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #948da0;
  font-size: 12px;
}

.room-actor-model-control {
  display: grid;
  min-width: 0;
  border: 1px solid var(--tryva-app-line);
  border-radius: 12px;
  background: #111016;
  overflow: hidden;
}

.room-actor-model-trigger {
  appearance: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-width: 0;
  min-height: 68px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #e9e5ef;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.room-actor-model-trigger:hover,
.room-actor-model-trigger.is-open {
  background: rgba(255, 255, 255, .035);
}

.room-actor-model-trigger:disabled {
  opacity: .6;
  cursor: wait;
}

.room-image-tier-control {
  margin-bottom: 10px;
}

.room-image-tier-control[data-image-tier="b"] .room-actor-model-mark {
  border-color: rgba(229, 183, 107, .25);
  background: rgba(229, 183, 107, .14);
  color: #ebca91;
}

.room-image-tier-control .room-actor-model-option-mark[data-image-tier="b"] {
  border-color: rgba(229, 183, 107, .25);
  background: rgba(229, 183, 107, .14);
  color: #ebca91;
}

.room-actor-model-mark,
.room-actor-model-option-mark {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(139, 102, 255, .16);
  color: #dcd1ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.room-actor-model-mark {
  width: 36px;
  height: 36px;
}

.room-actor-model-mark[data-family="gemini"],
.room-actor-model-option-mark[data-family="gemini"],
.room-actor-model-mark[data-family="gemma"],
.room-actor-model-option-mark[data-family="gemma"] { background: rgba(78, 135, 255, .15); color: #a9c2ff; }
.room-actor-model-mark[data-family="claude"],
.room-actor-model-option-mark[data-family="claude"] { background: rgba(209, 132, 91, .14); color: #e8b391; }
.room-actor-model-mark[data-family="openai"],
.room-actor-model-option-mark[data-family="openai"] { background: rgba(72, 174, 137, .14); color: #a1ddc7; }

.room-actor-model-current {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.room-actor-model-current > small {
  color: #81798d;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .11em;
}

.room-actor-model-current > strong {
  overflow: hidden;
  color: #f1edf6;
  font-size: 13.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-actor-model-current > em {
  overflow: hidden;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-style: normal;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-actor-model-caret {
  color: #777080;
  transition: transform 150ms ease;
}

.room-actor-model-trigger.is-open .room-actor-model-caret { transform: rotate(180deg); }

.room-actor-model-menu {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.room-actor-model-menu.hidden { display: none; }

.room-actor-model-help {
  margin: 10px 2px 0;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-weight: 550;
  line-height: 1.5;
}

.room-actor-model-groups {
  display: grid;
  gap: 11px;
  max-height: min(44vh, 430px);
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(143, 109, 255, .45) transparent;
}

.room-actor-model-group {
  display: grid;
  gap: 5px;
}

.room-actor-model-group > h3 {
  margin: 0 2px;
  color: #8f879b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.room-actor-model-group > div {
  display: grid;
  gap: 5px;
}

.room-actor-model-option {
  appearance: none;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: #15131b;
  color: #ddd8e5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.room-actor-model-option:hover { border-color: rgba(255, 255, 255, .15); background: #191720; }

.room-actor-model-option.is-selected {
  border-color: rgba(148, 108, 255, .68);
  background: rgba(117, 78, 211, .13);
}

.room-actor-model-option-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.room-actor-model-option > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.room-actor-model-option strong {
  overflow: hidden;
  color: #ece8f2;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-actor-model-option small {
  overflow: hidden;
  color: var(--tryva-meta-text);
  font-size: var(--tryva-meta-font-size);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-actor-model-option > i,
.room-actor-model-option-check {
  color: #ac91ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.room-actor-model-option-tail {
  display: grid;
  grid-template-columns: auto 18px;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.room-actor-model-option-price {
  color: var(--tryva-meta-text) !important;
  font-size: 10px !important;
  font-weight: 750;
  letter-spacing: -.01em;
}

.room-actor-model-option.is-selected .room-actor-model-option-price {
  color: #d3c7f7 !important;
}

.room-actor-model-notice {
  margin: 0 2px;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-weight: 550;
  line-height: 1.45;
}

.room-actor-model-notice:empty { display: none; }
.room-actor-model-notice[data-tone="success"] { color: #95d6bb; }
.room-actor-model-notice[data-tone="error"] { color: #e7a6aa; }
.room-actor-model-notice[data-tone="loading"] { color: #b9a6ef; }

.start-model-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.start-model-control,
.start-model-control.room-image-tier-control {
  margin: 0;
}

.start-model-control .room-actor-model-menu {
  position: relative;
}

.start-voice-block {
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--tryva-app-line);
  border-radius: 12px;
  background: #111016;
}

.start-voice-block .start-voice-cast {
  margin: 0;
}

@media (max-width: 640px) {
  .tryva-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .tryva-choice-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .tryva-choice-heading > small { text-align: left; }
  .start-model-controls { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tryva-choice-card,
  .room-actor-model-caret { transition: none; }
}

.insight-compact-group {
  padding: 0;
  overflow: hidden;
}

.insight-compact-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  color: #e5dfeb;
  cursor: pointer;
  list-style: none;
}

.insight-compact-group > summary::-webkit-details-marker { display: none; }
.insight-compact-group > summary::after { content: "＋"; color: #756e7e; font-size: 11px; }
.insight-compact-group[open] > summary::after { content: "－"; }
.insight-compact-group > summary > span { font-size: 12px; font-weight: 800; }
.insight-compact-group > summary > small { margin-left: auto; color: var(--tryva-meta-text); font-size: var(--tryva-meta-font-size); }
.insight-compact-group[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, .055); }
.insight-compact-group > ul,
.insight-compact-group > p,
.insight-compact-group > .relationship-summary-list { margin: 0; padding: 11px 13px 13px; }
.insight-empty-copy { color: #817a89 !important; }

@media (min-width: 901px) {
  body.chat-active #newRoomBtn { display: none; }
  body.chat-active .chat-header { grid-template-columns: minmax(0, 1fr) auto; }
}

#summaryPanel:not(.hidden) {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 10px !important;
}

.insight-settings-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111016;
}

.insight-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 8px;
}

.insight-settings-head > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.insight-settings-head strong {
  color: #e9e5ef;
  font-size: 12px;
  font-weight: 800;
}

.insight-settings-head span {
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-weight: 550;
}

.insight-reset-card:focus-visible {
  outline: 2px solid rgba(151, 112, 255, .72);
  outline-offset: 1px;
}

#summaryPanel .response-settings-note {
  margin: 3px 0 0;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-weight: 550;
  line-height: 1.45;
  text-align: right;
}

#summaryPanel .response-settings-note:empty { display: none; }

/* v177 · the status panel owns model and response controls. The composer keeps
   its original single-row writing width, while the right rail stays compact. */
.user-form > #userInput {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

#summaryPanel.hidden { display: none !important; }

#summaryPanel .insight-model-card {
  flex: 0 0 auto;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111016;
}

#summaryPanel .insight-model-card .room-actor-model-trigger {
  grid-template-columns: 32px minmax(0, 1fr) 12px;
  min-height: 58px;
  gap: 10px;
  padding: 10px 11px;
}

#summaryPanel .insight-model-card .room-actor-model-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 10px;
}

#summaryPanel .insight-model-card .room-actor-model-current > small {
  font-size: 8px;
  letter-spacing: .06em;
}

#summaryPanel .insight-model-card .room-actor-model-current > strong { font-size: 12.5px; }
#summaryPanel .insight-model-card .room-actor-model-current > em { font-size: var(--tryva-support-font-size); }
#summaryPanel .insight-model-card .room-actor-model-menu { padding: 0 9px 9px; }
#summaryPanel .insight-model-card .room-actor-model-groups { max-height: 310px; }
#summaryPanel .insight-model-card .room-actor-model-option { min-height: 46px; padding: 7px 8px; }

.room-music-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111016;
}

.room-music-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 9px;
}

.room-music-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.room-music-head small {
  color: #81798c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
}

.room-music-head strong {
  overflow: hidden;
  color: #ece8f4;
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-music-head > div > span {
  overflow: hidden;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  font-weight: 550;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-music-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(151, 112, 255, .34);
  border-radius: 10px;
  color: #dcd3f1;
  background: rgba(133, 96, 226, .12);
  cursor: pointer;
}

.room-music-toggle:hover:not(:disabled),
.room-music-toggle:focus-visible {
  border-color: rgba(166, 135, 255, .68);
  background: rgba(133, 96, 226, .2);
  outline: none;
}

.room-music-toggle:disabled { cursor: default; opacity: .34; }
.room-music-toggle span { font-size: 11px; line-height: 1; }

.room-music-volume {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 11px;
  border-top: 1px solid rgba(255, 255, 255, .045);
}

.room-music-volume > span,
.room-music-volume output {
  color: #746d7d;
  font-size: 8px;
  font-weight: 700;
}

.room-music-volume output { text-align: right; }
.room-music-volume input { width: 100%; accent-color: #8f70e7; }

:is(.room-music-history, .response-settings-disclosure) {
  border-top: 1px solid rgba(255, 255, 255, .055);
}

:is(.room-music-history, .response-settings-disclosure) > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  color: #aaa2b5;
  cursor: pointer;
  list-style: none;
}

:is(.room-music-history, .response-settings-disclosure) > summary::-webkit-details-marker { display: none; }
:is(.room-music-history, .response-settings-disclosure) > summary span { font-size: 10.5px; font-weight: 750; }
:is(.room-music-history, .response-settings-disclosure) > summary small { margin-left: auto; color: var(--tryva-meta-text); font-size: var(--tryva-meta-font-size); }
:is(.room-music-history, .response-settings-disclosure) > summary::after { content: "＋"; color: #756e7e; font-size: 10px; }
:is(.room-music-history, .response-settings-disclosure)[open] > summary::after { content: "－"; }

.room-music-history-list {
  display: grid;
  max-height: 230px;
  padding: 4px 7px 8px;
  overflow-y: auto;
}

.room-music-history-list > p {
  margin: 0;
  padding: 11px 8px;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  line-height: 1.45;
}

.room-music-history-item {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 45px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: #bdb5ca;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.room-music-history-item:hover,
.room-music-history-item:focus-visible {
  background: rgba(255, 255, 255, .045);
  outline: none;
}

.room-music-history-item.is-playing { color: #f0eaff; background: rgba(132, 93, 229, .11); }
.room-music-history-index { color: #8978b7; font-size: 9px; text-align: center; }
.room-music-history-item > span:last-child { display: grid; min-width: 0; gap: 2px; }
.room-music-history-item strong {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-music-history-item small { color: var(--tryva-meta-text); font-size: var(--tryva-meta-font-size); }

#summaryPanel .response-settings {
  display: grid;
  gap: 0;
  padding: 0 12px 10px;
}

#summaryPanel .response-setting-field,
#summaryPanel .response-guidance-field {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

#summaryPanel .response-setting-field:first-child { border-top: 0; padding-top: 4px; }

#summaryPanel .response-setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

#summaryPanel .response-setting-heading > b {
  color: #a59eae;
  font-size: 10.5px;
  font-weight: 700;
}

#summaryPanel .response-setting-heading > output,
#summaryPanel .response-setting-heading > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d3c7f7;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

#summaryPanel .response-setting-heading > span > button {
  height: 24px;
  min-width: 38px;
  padding: 0 8px;
  border: 1px solid rgba(151, 112, 255, .32);
  border-radius: 6px;
  background: rgba(139, 102, 255, .09);
  color: #b9acd8;
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

#summaryPanel .response-setting-heading > span > button:hover {
  border-color: rgba(151, 112, 255, .58);
  background: rgba(139, 102, 255, .15);
  color: #e0d8f4;
}

#summaryPanel .response-setting-heading > span > button:disabled { opacity: .35; cursor: default; }

#summaryPanel .response-setting-field input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

#summaryPanel .response-setting-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8d72e7 0 var(--range-progress, 50%), #292631 var(--range-progress, 50%) 100%);
}

#summaryPanel .response-setting-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid #eee9ff;
  border-radius: 50%;
  background: #8f73ec;
  box-shadow: 0 0 0 3px rgba(139, 102, 255, .13);
}

#summaryPanel .response-setting-field input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #292631;
}

#summaryPanel .response-setting-field input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #8d72e7;
}

#summaryPanel .response-setting-field input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #eee9ff;
  border-radius: 50%;
  background: #8f73ec;
}

#summaryPanel .response-setting-field input[type="range"]:focus-visible {
  outline: 2px solid rgba(151, 112, 255, .58);
  outline-offset: 2px;
  border-radius: 999px;
}

#summaryPanel .response-setting-field.is-disabled { opacity: .46; }
#summaryPanel .response-setting-field input[type="range"]:disabled { cursor: default; }

#summaryPanel .response-setting-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  color: var(--tryva-meta-text);
  font-size: var(--tryva-meta-font-size);
  line-height: 1;
}

#summaryPanel .response-setting-scale > i { font-style: normal; }
#summaryPanel .response-setting-scale-four > i { min-width: 0; }

#summaryPanel .response-cost-estimate {
  margin: 2px 0;
  border: 1px solid rgba(151, 112, 255, .2);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 102, 255, .10), rgba(139, 102, 255, .035));
}

#summaryPanel .response-cost-estimate > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 10px;
  list-style: none;
  cursor: pointer;
}

#summaryPanel .response-cost-estimate > summary::-webkit-details-marker { display: none; }
#summaryPanel .response-cost-estimate > summary > span { display: grid; gap: 2px; min-width: 0; }
#summaryPanel .response-cost-estimate > summary b { color: #c8bedc; font-size: 11px; }
#summaryPanel .response-cost-estimate > summary small { color: var(--tryva-meta-text); font-size: var(--tryva-meta-font-size); font-weight: 600; }
#summaryPanel .response-cost-estimate > summary strong {
  flex: 0 0 auto;
  color: #e7ddff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.02em;
}

#summaryPanel .response-cost-estimate-detail {
  display: grid;
  gap: 5px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, .05);
}

#summaryPanel .response-cost-estimate-detail:empty { display: none; }
#summaryPanel .response-cost-estimate-detail p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: #8f8799;
  font-size: 9px;
}
#summaryPanel .response-cost-estimate-detail p strong { color: #beb2d7; font-weight: 700; }
#summaryPanel .response-cost-estimate-detail > small { color: var(--tryva-support-text); font-size: var(--tryva-support-font-size); line-height: 1.45; }

#summaryPanel .response-guidance-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  max-height: 110px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 9px;
  outline: 0;
  background: #0c0b11;
  color: #dcd7e3;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
}

/* One input is one billable turn. The chat log alone shows its settled total;
   expanding the divider reveals the ledger projection without crowding play. */
.insight-messages .turn-point-receipt {
  margin: 7px 2px 12px;
  color: #8b8298;
}

.insight-messages .turn-point-receipt > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.insight-messages .turn-point-receipt > summary::-webkit-details-marker { display: none; }
.insight-messages .turn-point-receipt > summary > span {
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, .09);
}
.insight-messages .turn-point-receipt > summary > small {
  overflow: hidden;
  max-width: 62%;
  color: #71697d;
  font-size: 8px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insight-messages .turn-point-receipt > summary > strong {
  color: #9e93b1;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
}

.insight-messages .turn-point-receipt-detail {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 9px;
  background: rgba(10, 9, 14, .72);
}
.insight-messages .turn-point-receipt-detail header,
.insight-messages .turn-point-receipt-detail footer,
.insight-messages .turn-point-receipt-detail p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.insight-messages .turn-point-receipt-detail header { padding-bottom: 4px; color: #d9d1e8; font-size: 10px; }
.insight-messages .turn-point-receipt-detail header small { overflow: hidden; color: #6f6878; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.insight-messages .turn-point-receipt-detail p { color: #837b8d; font-size: 9px; }
.insight-messages .turn-point-receipt-detail p strong { color: #b8aec8; }
.insight-messages .turn-point-receipt-detail em { color: #8976be; font-size: 8.5px; font-style: normal; }
.insight-messages .turn-point-receipt-detail footer { padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .05); color: #a39aaa; font-size: 9px; }
.insight-messages .turn-point-receipt-detail .turn-point-receipt-total {
  margin-top: 4px;
  color: #d8cfee;
  font-weight: 800;
}

#summaryPanel .response-guidance-field textarea:focus {
  border-color: rgba(151, 112, 255, .45);
  box-shadow: 0 0 0 2px rgba(139, 102, 255, .08);
}

#summaryPanel .response-guidance-field textarea::placeholder { color: #5e5867; }
#summaryPanel .response-setting-heading > small { color: var(--tryva-support-text); font-size: var(--tryva-support-font-size); }
.chat-title-row > .room-id-badge {
  position: static !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .025) !important;
  color: #746d7e !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.chat-title-row > .room-id-badge:hover,
.chat-title-row > .room-id-badge:focus-visible {
  border-color: rgba(151, 112, 255, .34) !important;
  color: #b9add0 !important;
}

.chat-title-row > .room-id-badge.hidden { display: none !important; }

@media (min-width: 901px) {
  body.chat-active .chat-view {
    height: 100dvh !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  body.chat-active .chat-panel,
  body.chat-active .insight-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body.chat-active .insight-panel {
    align-self: stretch !important;
    overflow: hidden !important;
  }

  body.chat-active .insight-pane {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

.insight-reset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 112, 122, .22);
  border-radius: 12px;
  background: #111016;
  color: #a98186;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.insight-reset-card > span:first-child {
  display: grid;
  gap: 3px;
}

.insight-reset-card strong {
  color: #c6979d;
  font-size: 11px;
  font-weight: 800;
}

.insight-reset-card small {
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  line-height: 1.4;
}

.insight-reset-card > span:last-child {
  color: #8f6870;
  font-size: 19px;
}

.insight-reset-card:hover {
  border-color: rgba(224, 119, 129, .4);
  background: rgba(197, 75, 86, .07);
  color: #dfa3aa;
}

#summaryPanel .room-generated-images-open {
  min-height: 52px;
  padding: 10px 12px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111016;
}

#summaryPanel .room-generated-images-open strong { font-size: 12px; }
#summaryPanel .room-generated-images-open small { font-size: 9.5px; }
#summaryPanel .room-generated-images-open-arrow { font-size: 19px; }

#summaryPanel .memory-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

#summaryPanel .insight-compact-group {
  border-color: rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #111016;
}

#summaryPanel .insight-compact-group > summary {
  min-height: 44px;
  padding: 10px 12px;
}

#summaryPanel .insight-compact-group > summary > span { font-size: 11px; }
#summaryPanel .insight-compact-group > summary > small { font-size: var(--tryva-meta-font-size); }

@media (min-width: 901px) {
  .chat-header .controls { gap: 8px !important; }
  .chat-header .tool-button {
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
}

/* -------------------------------------------------------------------------
   v5.34.72.221 · Atomic home foundation

   Home is the only index route deliberately exposed before client routing.
   Its outer geometry therefore cannot depend on the late `play-active` class.
   The old second track belonged to a retired right rail and caused the whole
   page to grow after hydration. Keep shared card primitives, while preserving
   the home-only banner and horizontal rail presentation.
   ------------------------------------------------------------------------- */
#playView {
  --tryva-home-card-w: var(--tryva-character-card-width);
  --tryva-home-card-hover-w: 292px;
  --tryva-home-card-h: 198px;
  --tryva-home-card-gap: 18px;
}

html body #playView .tryva-home-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

html body #playView .tryva-home-main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html body #playView .tryva-home-rail {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Never tween provisional geometry into the real home layout. Hover and
   carousel motion resume after the initial route has committed. */
html body:not(.route-boot-ready) #playView :is(
  .tryva-home-layout,
  .tryva-home-main,
  .tryva-featured-hero,
  .character-section,
  .tryva-story-section,
  .play-rail-row,
  .mini-rail-block,
  .tryva-home-card-carousel,
  .character-tile,
  .tryva-unified-story-card
) {
  transition: none !important;
}

#summaryPanel .response-cost-note {
  margin: 4px 0 0;
  color: var(--tryva-support-text);
  font-size: var(--tryva-support-font-size);
  line-height: 1.5;
}