/* Product layout. Loaded after component styles; existing screen/state classes stay intact. */
:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #17191e;
  --panel-2: #202228;
  --border: #2b2d33;
  --text: #f1f1f3;
  --muted: #aaadb6;
  --accent: #ff806b;
  --accent-2: #ffa18e;
  --user-bubble: #342627;
  --bot-bubble: #1b1d22;
  --room-accent: #ff806b;
  --room-accent-ink: #281510;
  --product-accent-soft: #302321;
}

/* One navigation shell for discovery, private conversations and shared rooms. */
.sidebar { width: 220px; flex-basis: 220px; background: #141519; border-color: var(--border); }
.sidebar-head { min-height: 72px; padding: 14px 16px; border-bottom: 0; gap: 6px; }
.sidebar-head .brand { font-size: 15px; letter-spacing: -.35px; white-space: nowrap; }
.brand-home { width: fit-content; min-height: 36px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; }
.brand-home:hover { color: var(--accent-2); }
.brand-home:focus-visible, [data-sidebar-open]:focus-visible, #sidebarToggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar > [data-sidebar-open] { display: none; flex-shrink: 0; }
.app-shell.sidebar-collapsed .topbar > [data-sidebar-open] { display: grid; }
#recentScreen .topbar { justify-content: flex-start; }
.sidebar-head .icon-btn { width: 28px; height: 36px; font-size: 20px; flex-shrink: 0; }
.brand .dot { width: 7px; height: 7px; background: var(--accent); box-shadow: none; }
.sidebar-nav { padding: 6px 12px 18px; gap: 5px; }
.side-item { min-height: 44px; padding: 11px 12px; border-radius: 8px; color: #babcc4; font-size: 14px; font-weight: 500; }
.side-item:hover { color: var(--text); background: #202126; }
.side-item.active { color: var(--text); background: #27282e; box-shadow: none; }
.side-item.active .si-ic { color: var(--accent); }
.si-ic, .bn-ic { display: inline-flex; align-items: center; justify-content: center; }
.si-ic svg, .bn-ic svg { width: 20px; height: 20px; }
.sidebar-recent { padding: 22px 12px; }
.sidebar-recent-title { margin: 0 12px 12px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: #90939e; }
.recent-item { width: 100%; padding: 10px 9px; gap: 9px; border: 0; color: inherit; background: transparent; font-family: inherit; text-align: left; }
.recent-item:hover, .recent-item.active { background: #23252c; }
.recent-av { width: 34px; height: 34px; background: #2a2c32; }
.recent-name { font-size: 13px; font-weight: 500; }
.recent-time, .recent-snippet { font-size: 12px; }
.recent-empty { font-size: 12px; line-height: 1.7; padding: 8px 12px; }
.topbar { background: var(--bg); border-color: var(--border); }
.ui-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.bottom-nav { background: #17181d; border-color: var(--border); }
.bn-item { font-size: 12px; color: #a2a5af; gap: 5px; }
.bn-item.active { color: #fff; }
.bn-item.active .bn-ic { color: var(--accent); }
.bn-item .bn-ic { font-size: 21px; }

/* Persistent search is the visual anchor; the library starts immediately below. */
#galleryScreen .home-topbar { min-height: 72px; padding: 13px 32px; gap: 18px; background: var(--bg); backdrop-filter: none; }
.home-topbar > .brand { display: none; }
.home-actions { margin-left: auto; gap: 10px; flex-shrink: 0; }
.install-pill { background: transparent; color: #cbccd2; border-radius: 7px; border-color: var(--border); font-size: 12px; font-weight: 500; height: 36px; }
.install-pill:hover { background: var(--panel-2); }
.account-trigger { width: 36px; height: 36px; border-color: #3b3d44; padding: 2px; }
.top-action { color: var(--muted); width: 36px; height: 36px; }
.top-action svg { width: 20px; height: 20px; }
#librarySearchForm { display: flex; align-items: center; flex: 1; gap: 10px; width: 100%; max-width: 480px; min-width: 0; height: 44px; margin: 0; padding: 0 8px 0 14px; border: 1px solid #34363e; border-radius: 9px; background: #1c1e24; }
#librarySearchForm:focus-within { border-color: #888b96; background: #202228; }
#librarySearchForm > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
#librarySearchInput { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.4; }
#librarySearchInput::placeholder { color: #a2a5b0; }
#librarySearchForm #homeSearchBtn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; flex-shrink: 0; border: 0; border-radius: 6px; color: #b6b8c2; background: transparent; cursor: pointer; }
#librarySearchForm #homeSearchBtn:hover { color: #fff; background: #33353d; }
#galleryScreen .home-feed { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 90px; background: var(--bg); overscroll-behavior-y: contain; }
.library-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.library-intro h1 { margin: 0; font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: -.8px; }
.library-intro p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.library-count, #libraryCharacterCount { flex-shrink: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* A work title sits beside its original cover; no lettering is baked into art. */
.library-feature { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 360px; margin: 0 0 30px; overflow: hidden; border: 1px solid #393735; border-radius: 14px; background: #232321; }
.library-feature[hidden] { display: none; }
.library-feature::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #232321 12%, #232321f5 33%, #232321a6 52%, #23232100 72%); }
.library-feature-art { position: absolute; z-index: -2; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: center 28%; }
.library-feature-copy { width: 58%; min-width: 0; padding: 34px 38px; }
.library-feature-category { margin: 0 0 14px; color: #eed9b8; font-size: 12px; font-weight: 650; letter-spacing: .04em; }
.library-feature h2 { margin: 0; color: #fff7eb; font-size: clamp(28px, 3.1vw, 43px); line-height: 1.22; font-weight: 750; letter-spacing: -.045em; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.library-feature-byline { margin: 13px 0 0; color: #eee1d0; font-size: 13px; line-height: 1.5; }
.library-feature-subtitle { max-width: 38ch; margin: 14px 0 0; color: #d0cbc2; font-size: 14px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.library-feature-open { display: inline-flex; align-items: center; min-height: 42px; margin-top: 23px; padding: 10px 18px; border: 1px solid #f0e5d5; border-radius: 7px; background: #f0e5d5; color: #27231e; font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1.5; cursor: pointer; }
.library-feature-open:hover { background: #fff7eb; }
.library-feature-open:focus-visible { outline: 2px solid #fff7eb; outline-offset: 4px; }
.character-byline { margin: 5px 0 0; color: #d3c8b9; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.library-profile-copy .character-byline { margin-top: 9px; font-size: 14px; }

/* A small route into shared play, adjacent to the personal library. */
#galleryScreen .home-play-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px; background: #191b20; }
#galleryScreen .home-play-entry > div { min-width: 0; }
.home-play-label { display: none; }
#galleryScreen .home-play-entry h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -.25px; word-break: keep-all; }
#galleryScreen .home-play-entry p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#galleryScreen .home-play-entry .room-btn { min-height: 38px; width: auto; margin: 0; padding: 8px 12px; gap: 8px; border-color: #44464e; color: var(--text); background: #25272e; font-size: 12px; font-weight: 600; white-space: nowrap; }
#galleryScreen .home-play-entry .room-btn:hover { border-color: #777a85; background: #30323a; }
#galleryScreen .home-play-entry .room-btn > span, #galleryScreen .home-play-entry .room-btn > svg { color: var(--accent); }

/* Keep only recent conversations horizontal; the main collection is a real grid. */
#galleryScreen #continueSection { margin: 0 0 22px; }
#continueSection .home-section-head { margin: 0 0 10px; }
#continueSection .home-section-head h2 { color: #cbccd3; font-size: 14px; font-weight: 500; }
.home-recent-rail { grid-auto-columns: minmax(250px, 300px); gap: 10px; padding: 0 0 2px; margin: 0; }
.continue-card { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; min-height: 74px; max-height: 84px; padding: 11px 12px; color: var(--text); background: #191b20; border-color: var(--border); border-radius: 9px; font-family: inherit; text-align: left; }
.continue-card:hover { background: #23252b; border-color: #454750; }
.continue-card img { width: 48px; height: 54px; border-radius: 6px; }
.continue-card b { font-size: 13px; font-weight: 600; }
.continue-card span { font-size: 12px; margin-top: 4px; }
.continue-card small { display: none; }
.text-action { font-size: 12px; color: var(--muted); }
#galleryScreen .topic-strip { gap: 8px; padding: 0 0 3px; margin: 0 0 21px; }
.topic-chip { min-height: 36px; padding: 7px 13px; font-family: inherit; font-size: 13px; font-weight: 500; color: #c1c3cc; background: transparent; border: 1px solid #34363f; border-radius: 7px; }
.topic-chip:hover { color: var(--text); background: #25272e; border-color: #565962; }
.topic-chip.active { color: #18191d; background: #eeeeef; border-color: #eeeeef; }
#galleryScreen .home-section { margin-top: 30px; }
#galleryScreen .topic-strip + .home-section { margin-top: 0; }
.home-section-head { margin: 0 0 15px; gap: 14px; align-items: center; }
.home-section-head h2 { font-size: 19px; font-weight: 650; letter-spacing: -.4px; }
.home-section-head p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.section-count { color: var(--muted); font-size: 12px; }
#galleryScreen #cards { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 28px 18px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
#galleryScreen .home-rail:not(#cards):not(.home-recent-rail) { grid-auto-columns: minmax(170px, 210px); gap: 18px; margin-right: 0; padding: 0 0 6px; }
#galleryScreen .home-empty-card, .search-results .home-empty-card { grid-column: 1 / -1; min-height: 160px; border-color: var(--border); border-radius: 10px; color: var(--muted); background: var(--panel); font-size: 14px; line-height: 1.7; }

/* Cards keep readable titles beneath the image, separate from the feature. */
#galleryScreen .card, .search-results .card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; transition: none; }
#galleryScreen .card:hover, .search-results .card:hover { border: 0; }
#galleryScreen .card:active, .search-results .card:active { transform: none; }
#galleryScreen .card .poster-bg, .search-results .card .poster-bg { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 11px; object-fit: cover; object-position: center top; background: #23252c; }
#galleryScreen .card:hover .poster-bg, .search-results .card:hover .poster-bg { filter: brightness(1.06); }
#galleryScreen .card .poster-grad, .search-results .card .poster-grad { display: none; }
.work-cover { --cover-ink: #fff7eb; --cover-accent: #f0cf93; position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: #25262a; }
.work-cover > .poster-bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.work-cover::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 32%, #12101612 45%, #121016b8 74%, #121016f0 100%); }
.work-cover-copy { position: absolute; z-index: 1; inset: auto 9% 8%; pointer-events: none; }
.work-cover-title { display: block; color: var(--cover-ink); font-size: clamp(27px, 17cqw, 58px); font-weight: 800; letter-spacing: -.05em; line-height: 1.16; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 2px 14px #0009; }
.work-cover[data-mood="classic"] .work-cover-title, .work-cover[data-mood="soft"] .work-cover-title, .work-cover[data-mood="noir"] .work-cover-title { font-family: "AppleMyungjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang", serif; font-weight: 700; line-height: 1.26; letter-spacing: -.06em; }
.work-cover[data-mood="soft"] { --cover-ink: #fff5ed; --cover-accent: #f1c6ca; }
.work-cover[data-mood="soft"] .work-cover-copy { text-align: center; }
.work-cover[data-mood="noir"] { --cover-ink: #f7eeee; --cover-accent: #ffb2a5; }
.work-cover[data-mood="signal"] { --cover-ink: #f0fbff; --cover-accent: #afe2f1; }
.work-cover[data-mood="signal"] .work-cover-title { letter-spacing: -.075em; font-weight: 850; }
.work-cover[data-placement$="left"] .work-cover-copy { text-align: left; }
.work-cover[data-placement$="center"] .work-cover-copy { text-align: center; }
.work-cover[data-placement$="right"] .work-cover-copy { text-align: right; }
.work-cover[data-placement^="top"] .work-cover-copy { inset: 3.5% 7% auto; }
.work-cover[data-placement^="top"]::after { background: linear-gradient(0deg, transparent 35%, #12101612 50%, #121016a8 82%, #121016d9 100%); }
.work-cover[data-face="sans"] .work-cover-title { font-family: inherit; font-weight: 600; letter-spacing: -.055em; line-height: 1.2; }
.work-cover[data-face="heavy"] .work-cover-title { font-family: inherit; font-weight: 850; letter-spacing: -.055em; line-height: 1.14; }
.work-cover[data-face="serif"] .work-cover-title { font-family: "AppleMyungjo", "Noto Serif KR", "Noto Serif CJK KR", "Batang", serif; font-weight: 700; letter-spacing: -.045em; line-height: 1.25; }
.work-cover[data-ink="white"] { --cover-ink: #fff; --cover-accent: #f4f2ed; }
.work-cover[data-ink="ivory"] { --cover-ink: #fff5df; --cover-accent: #ead4ab; }
.work-cover[data-ink="rose"] { --cover-ink: #ffe4e5; --cover-accent: #ffd0d4; }
.work-cover[data-ink="ice"] { --cover-ink: #dff8ff; --cover-accent: #afe7f6; }
.work-cover[data-ink="gold"] { --cover-ink: #ffe1a8; --cover-accent: #ffdfa2; }
.work-cover[data-size="large"] .work-cover-title { font-size: clamp(31px, 20cqw, 68px); }
.work-cover[data-size="small"] .work-cover-title { font-size: clamp(24px, 14cqw, 48px); }
.work-cover-long .work-cover-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: clamp(16px, 8.5cqw, 29px); }
#galleryScreen .card .work-cover .poster-bg, .search-results .card .work-cover .poster-bg { height: 100%; border-radius: 0; }
#galleryScreen .card .poster-info, .search-results .card .poster-info { position: static; padding: 11px 1px 0; min-width: 0; }
#galleryScreen .card .cname, .search-results .card .cname { color: var(--text); font-size: 16px; font-weight: 650; line-height: 1.45; letter-spacing: -.3px; text-shadow: none; -webkit-line-clamp: 2; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
#galleryScreen .card .ctag, .search-results .card .ctag { min-height: 38px; margin-top: 5px; color: #b0b3bd; font-size: 13px; line-height: 1.5; text-shadow: none; -webkit-line-clamp: 2; }
.character-tags { gap: 5px; margin-top: 9px; padding: 0 0 3px; scrollbar-color: #4c4e58 transparent; }
.character-tag { max-width: 180px; min-height: 27px; padding: 4px 7px; border: 0; border-radius: 5px; color: #b7bac5; background: #24262d; font-size: 12px; font-weight: 400; line-height: 1.4; }
.character-tag:hover { color: #fff; background: #363840; border: 0; }
.card-badge { top: 8px; left: 8px; min-height: 25px; border: 0; border-radius: 5px; background: #141519d9; backdrop-filter: none; color: #eeeeef; font-size: 12px; font-weight: 600; }
.card.has-images .card-badge { top: 43px; }
#galleryScreen .card .del, #galleryScreen .card .view-images, .search-results .card .del, .search-results .card .view-images { min-width: 30px; min-height: 30px; border-color: #656772; background: #18191edf; border-radius: 6px; }
.card:focus-within .del { display: block; }
.card:focus-within .view-images { display: grid; }
#galleryScreen .fab { right: 25px; bottom: 25px; width: 46px; height: 46px; border-radius: 10px; color: #281510; background: var(--accent); box-shadow: 0 3px 12px #0003; }

/* Search shares the same card system and keeps active filters distinct. */
.search-overlay { background: var(--bg); animation: none; }
.search-head { min-height: 76px; background: var(--bg); border-color: var(--border); }
.search-field { height: 48px; border-color: #4b4e59; border-radius: 9px; background: #1e2027; }
.search-field:focus-within { border-color: #9598a3; }
.search-field input { font-size: 16px; font-weight: 400; }
.search-field input::placeholder { color: #a3a6b1; }
.search-body { max-width: 1180px; padding: 26px 32px 70px; }
.search-section-title h2, .search-result-meta b { font-size: 17px; font-weight: 600; }
.search-section-title button, .search-section-title span, .search-result-meta span { font-size: 12px; color: var(--muted); }
.search-results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.search-tag-section { margin-bottom: 24px; padding-bottom: 21px; border-color: var(--border); }
.search-chip, .search-tag-facet, .tag-suggestion { background: #1c1e24; border-color: #363840; border-radius: 6px; color: #c0c2cd; font-size: 12px; }
.search-chip:hover, .search-tag-facet:hover, .tag-suggestion:hover { border-color: #71747f; color: #fff; background: #2a2c34; }
.search-selected-tags { gap: 7px; }
.selected-search-tag, .search-tag-facet[aria-pressed="true"] { background: var(--product-accent-soft); border-color: #a86256; border-radius: 6px; color: #ffc0b3; font-size: 12px; }
.search-tag-facet small, .search-tag-facet[aria-pressed="true"] small { color: var(--muted); font-size: 12px; }
.search-tag-input-label input { background: #1a1c22; border-color: #3d3f49; font-size: 14px; }
.search-tag-input-label input::placeholder { color: #a2a5af; }
.popular-title { margin-top: 28px; }
.popular-keyword { color: #d4d6df; font-size: 13px; }
.popular-keyword b { color: var(--accent); font-size: 12px; }
.search-empty-recent { font-size: 12px; color: var(--muted); }

/* The same neutral surfaces carry through the creator and its tag editor. */
.creator-screen { background: var(--bg); }
.creator-steps { background: #141519f5; backdrop-filter: none; border-color: var(--border); }
.creator-step { color: var(--muted); font-size: 13px; }
.creator-step.active { color: var(--text); }
.creator-step.active b { color: #281510; background: var(--accent); }
.creator-page-head h1 { font-size: 26px; font-weight: 650; letter-spacing: -.7px; }
.creator-page-head p { font-size: 14px; line-height: 1.7; }
.creator-page-head .eyebrow { display: none; color: var(--muted); font-size: 12px; letter-spacing: .04em; font-weight: 500; }
.field > span { font-size: 14px; }
.field em, .default-avatar-picker span, .creator-top-title span, .choice-title, .tag-hint, .preview-note, .preview-label, .preview-summary span, .preview-checks span, .scenario-state-title span { font-size: 12px; }
.field input, .field textarea, .field select { border-radius: 8px; border-color: #3b3d46; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #a5a8b2; box-shadow: none; }
.tag-editor { background: #15171c; border-color: #3b3d46; border-radius: 8px; }
.editable-tag { background: #2c2e36; border-color: #484a55; color: #e2e3e9; }
.editable-tag button { color: #b9bbc6; }
.tag-editor-entry button { min-height: 32px; border-color: #484b56; border-radius: 5px; background: #2a2c35; color: #e2e3e9; font-size: 12px; }
.tag-suggestion { padding: 6px 8px; }
.tag-error { color: #ffb6a6; }
.segmented input:checked + span { color: #ffd0c6; background: var(--product-accent-soft); border-color: #a86256; }
.persona-item.selected { background: #29242a; border-color: #a86256; }
.asset-guide { background: #202228; border-color: #3b3e48; }
.asset-guide code, .state-guide b { color: #dadce5; }
.editor-card-head b { background: #30323b; color: #d6d8e2; }
.preview-art { background-color: #30323a; background-image: none; }
.preview-checks span.ok { color: #d4d6df; border-color: #545862; }
.btn:not(.ghost):not(.danger), .panel-btn:not(.ghost):not(.danger) { color: #281510; background: var(--accent); }
.persona-detail-scope, .pi-badge { color: #281510; }

/* Private chat keeps its controls and message layout, with calmer reading surfaces. */
#chatScreen { background: var(--bg); }
.chat-stage { border-color: var(--border); box-shadow: none; }
.chat-top { background: var(--bg); border-color: var(--border); }
.chat-title .avatar, .avatar, .recent-av { background: #2c2e37; }
.chat-tag { font-size: 12px; }
.messages { background: var(--bg); }
.bubble { line-height: 1.75; }
.row.bot .bubble { color: var(--text); border-color: var(--border); }
.row.user .bubble { color: #f6e6e2; }
.message-actions { opacity: .82; background: #202228; box-shadow: none; border-color: #363942; }
.message-action { color: #bfc2cc; }
.message-more-menu { background: #202228; border-color: #3b3d47; }
.composer, .suggested-replies { background: var(--bg); border-color: var(--border); }
#input { background: #202228; border-color: #3b3d47; border-radius: 10px; font-size: 16px; }
.tool-btn { background: #202228; border-color: #3a3c45; border-radius: 7px; font-size: 12px; }
.tool-btn svg { color: #c5c7d1; }
.tool-btn.active, .tool-btn.active svg { color: #281510; }
#sendBtn { color: #281510; background: var(--accent); border-radius: 10px; }
.suggested-replies button { color: #dcdee5; background: #25272e; border-color: #555863; }
.scenario-play-guide, .scenario-current small { font-size: 12px; }
.solo-invite-btn { color: #f1d1c9; border-color: #604840; background: #292120; }
.solo-invite-btn:hover { color: #fff; border-color: #9e7264; background: #352927; }
.account-popover, .notification-popover { color: var(--text); background: #1c1e24; border-color: #3b3d47; }
.account-menu-icon { color: #ffc2b5; background: #342827; }
.account-profile-row { background: #23252d; border-color: #383b45; box-shadow: none; }
.account-status { font-size: 12px; color: var(--muted); }
.account-status .status-dot { background: #a6b7a1; box-shadow: none; }

/* Shared play retains its verified scroll/composer layout; only density and surfaces change. */
.rooms-screen, .room-topbar { background: var(--bg); }
.room-topbar { min-height: 66px; border-color: var(--border); }
.room-heading strong { font-size: 16px; }
.room-heading > span, .room-connection { font-size: 12px; color: var(--muted); }
.room-connection.is-offline { color: #edbb9b; }
.rooms-hub { padding-top: 32px; }
.room-eyebrow { color: var(--muted); font-size: 12px; }
.room-hub-intro h1 { margin: 10px 0 12px; font-size: 30px; letter-spacing: -.9px; }
.room-hub-intro p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.room-entry-grid { gap: 14px; margin-top: 25px; }
.room-entry-card, .room-entry-card:nth-child(2) { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 5px 12px; padding: 18px; background: #1c1e24; border-color: #3b3d47; border-radius: 10px; }
.room-entry-card:hover { background: #25272e; border-color: #747782; }
.room-entry-icon { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; font-size: 24px; border-radius: 7px; background: #29252a; color: #ffb6a6; border-color: #67504b; }
.room-entry-card strong { grid-column: 2; margin: 0; font-size: 16px; line-height: 1.5; }
.room-entry-card > span:not(.room-entry-icon):not(.room-entry-arrow) { grid-column: 2; color: var(--muted); font-size: 12px; }
.room-entry-arrow { position: static; grid-column: 3; grid-row: 1 / 3; color: #b9bbc6; font-size: 19px; }
.room-list-section { margin-top: 34px; }
.room-list-item { background: #1c1e24; border-color: var(--border); border-radius: 9px; }
.room-list-item:hover { background: #25272e; border-color: #777984; }
.room-list-item small, .room-list-item > span { color: var(--muted); font-size: 12px; }
.room-empty { color: var(--muted); border-color: #393c45; font-size: 14px; }
.room-details { background: var(--panel); border-color: var(--border); }
.room-detail-top .room-note { color: var(--muted); }
.room-status-tag { color: #f4bfb1; background: #342623; font-size: 12px; }
.room-section-heading h3 { font-size: 13px; }
.room-note { color: var(--muted); font-size: 12px; }
.room-member-name { font-size: 14px; }
.room-member-avatar { color: #d0d2dc; background: #2d2f38; border-color: #4b4e58; }
.room-member small { font-size: 12px; color: var(--muted); }
.room-member.is-current .room-member-avatar { border-color: var(--accent); box-shadow: 0 0 0 2px #ff806b22; }
.room-member.is-empty, .room-member.is-empty .room-member-avatar { color: #8a8e9b; border-color: #4a4d59; }
.room-invite { border-color: var(--border); }
.room-invite .room-note { font-size: 12px; }
.room-invite-code { background: #101216; border-color: #444750; }
.room-invite-code code { color: #f5e4de; }
.room-link { font-size: 12px; color: #d0c4bf; }
.room-link:hover { color: #fff; }
.room-leave { color: #c1a4a0; }
.room-play-status { background: #1a1c22; border-color: var(--border); }
.room-play-status strong { font-size: 13px; }
.room-turn-dot { background: var(--accent); }
.room-ai-notice { color: #d9c5b0; background: #2b2621; font-size: 12px; }
.room-message-head strong { color: #bfc2ce; font-size: 13px; }
.room-message-head time { color: #989caa; font-size: 12px; }
.room-message-content { color: #e0e1e7; font-size: 15px; line-height: 1.8; }
.room-message.is-model { border-color: #936358; }
.room-message.is-model .room-message-head strong { color: #ffc5b8; }
.room-message.is-mine .room-message-head strong { color: #d8dbe7; }
.room-message.is-system .room-message-content { color: #a1a5b1; font-size: 12px; }
.room-transcript-empty { color: var(--muted); }
.room-transcript-empty strong { color: var(--text); }
.room-generating { color: #dfb5a9; font-size: 12px; }
.room-composer { background: #202228; border-color: #4b4e59; border-radius: 10px; }
.room-composer:focus-within { border-color: #a1a4b0; }
.room-composer textarea { color: var(--text); font-size: 16px; }
.room-composer textarea::placeholder { color: #a2a5b1; }
.room-composer-bottom > span { color: var(--muted); font-size: 12px; }
.room-btn { border-color: #484b55; border-radius: 7px; color: #e7e8ee; font-size: 13px; }
.room-btn:hover { background: #2e3039; border-color: #777a86; }
.room-btn-primary { color: #281510; background: var(--accent); border-color: var(--accent); }
.room-btn-primary:hover { color: #281510; background: #ff9c89; border-color: #ff9c89; }
.room-feedback { background: #362824; color: #ffd0be; border-color: #916554; }
.room-dialog { background: #1b1d23; border-color: #494c56; border-radius: 12px; }
.room-dialog::backdrop { background: #08090bd9; backdrop-filter: none; }
.room-dialog-tabs { border-color: #3b3e48; }
.room-dialog-tabs button { font-size: 14px; color: var(--muted); }
.room-dialog-tabs button[aria-pressed="true"] { color: #ffb6a6; border-color: var(--accent); }
.room-dialog-footer { background: #1b1d23; border-color: #3b3e48; }
.room-field, .room-fieldset legend { font-size: 14px; }
.room-optional, .room-fieldset legend span, .room-setup-form > .room-note { font-size: 12px; color: var(--muted); }
.room-field input, .room-field select, .room-field textarea { background: #13151a; border-color: #494c56; color: var(--text); font-size: 14px; }
.room-field input:focus, .room-field select:focus, .room-field textarea:focus { border-color: #a7aab5; box-shadow: none; }
.room-field input::placeholder, .room-field textarea::placeholder { color: #9498a5; }
.room-capacity-options label > span, .room-mode-options label > span { background: #191b21; border-color: #464954; color: #c3c6d1; }
.room-capacity-options input:checked + span, .room-mode-options input:checked + span { background: var(--product-accent-soft); border-color: #c37b6b; color: #ffd7cd; }
.room-capacity-options input:focus-visible + span, .room-mode-options input:focus-visible + span { outline-color: var(--accent); }
.room-mode-options small { color: var(--muted); font-size: 12px; }
.room-confirm-dialog p { color: #c1c4cf; font-size: 14px; }
.room-toast { color: #f2e5e1; background: #302826; border-color: #74605a; font-size: 13px; }

@media (min-width: 1100px) {
  #galleryScreen #cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  #galleryScreen #cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  #chatScreen { padding: 0 20px; }
  .chat-stage { max-width: 1000px; border: 0; border-radius: 0; box-shadow: none; }
  .chat-top { min-height: 72px; padding-inline: 20px; }
}
@media (min-width: 701px) and (max-width: 999px) {
  #galleryScreen .home-topbar { padding-inline: 22px; }
  #galleryScreen .home-feed { padding-inline: 22px; }
  .install-pill { display: none; }
  .home-play-entry p { max-width: 240px; }
  .search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #galleryScreen .home-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; min-height: 104px; padding: 8px 16px 10px; flex-shrink: 0; }
  .home-topbar > .brand { display: flex; grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 650; letter-spacing: -.35px; }
  .home-topbar .home-actions { grid-column: 2; grid-row: 1; gap: 8px; }
  .account-trigger { width: 36px; height: 36px; }
  #librarySearchForm { grid-column: 1 / -1; grid-row: 2; height: 42px; max-width: none; padding-left: 12px; }
  #librarySearchInput { font-size: 16px; }
  #librarySearchForm #homeSearchBtn { width: 34px; height: 34px; }
  #galleryScreen .home-feed { padding: 16px 16px 100px; }
  .library-intro { margin-bottom: 14px; gap: 10px; }
  .library-intro h1 { font-size: 23px; line-height: 1.3; letter-spacing: -.65px; }
  .library-intro p { font-size: 12px; }
  .library-count, #libraryCharacterCount { font-size: 12px; }
  .library-intro { flex-wrap: wrap; }
  .library-intro h1 { flex: 1; }
  .library-intro .text-action { margin-left: auto; }
  .library-feature { min-height: 370px; align-items: end; margin-bottom: 23px; border-radius: 11px; }
  .library-feature-art { width: 100%; height: 100%; object-position: center 20%; }
  .library-feature::after { background: linear-gradient(0deg, #171a1bf5 0%, #171a1be6 27%, #171a1b9c 48%, #171a1b00 80%); }
  .library-feature-copy { width: 100%; padding: 105px 22px 23px; }
  .library-feature-category { margin-bottom: 10px; font-size: 11px; }
  .library-feature h2 { max-width: 18ch; font-size: 30px; line-height: 1.25; }
  .library-feature-byline { margin-top: 8px; font-size: 12px; }
  .library-feature-subtitle { max-width: 34ch; margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .library-feature-open { margin-top: 17px; }
  #galleryScreen .home-play-entry { min-height: 72px; gap: 10px; padding: 11px 12px; margin-bottom: 14px; border-radius: 8px; }
  #galleryScreen .home-play-entry h2 { font-size: 14px; line-height: 1.5; letter-spacing: -.25px; }
  #galleryScreen .home-play-entry p { max-width: 190px; font-size: 12px; line-height: 1.5; }
  #galleryScreen .home-play-entry .room-btn { min-height: 38px; padding: 8px 9px; max-width: 130px; gap: 5px; font-size: 12px; }
  #galleryScreen #continueSection { margin-bottom: 13px; }
  #continueSection .home-section-head { margin-bottom: 8px; }
  #continueSection .home-section-head h2 { font-size: 13px; }
  .home-recent-rail { grid-auto-columns: 258px; gap: 9px; padding-bottom: 1px; }
  .continue-card { min-height: 58px; max-height: 64px; padding: 7px 9px; gap: 9px; grid-template-columns: 36px minmax(0, 1fr); }
  .continue-card img { width: 36px; height: 44px; }
  .continue-card b { font-size: 13px; }
  .continue-card span { font-size: 12px; }
  #galleryScreen .topic-strip { gap: 7px; margin-bottom: 14px; padding: 0 0 2px; }
  .topic-chip { min-height: 34px; padding: 6px 12px; font-size: 13px; }
  #galleryScreen .home-section { margin-top: 26px; }
  #galleryScreen .topic-strip + .home-section { margin-top: 0; }
  .home-section-head { margin-bottom: 10px; gap: 10px; }
  .home-section-head h2 { font-size: 17px; letter-spacing: -.35px; }
  .home-section-head p { font-size: 12px; line-height: 1.5; }
  #galleryScreen #cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 12px; }
  #galleryScreen .home-rail:not(#cards):not(.home-recent-rail) { grid-auto-columns: 160px; gap: 12px; }
  #galleryScreen .card .poster-bg, .search-results .card .poster-bg { border-radius: 9px; }
  #galleryScreen .card .poster-info, .search-results .card .poster-info { padding: 9px 0 0; }
  #galleryScreen .card .cname, .search-results .card .cname { font-size: 15px; line-height: 1.4; font-weight: 600; }
  #galleryScreen .card .ctag, .search-results .card .ctag { margin-top: 4px; font-size: 13px; min-height: 38px; line-height: 1.5; }
  .character-tags { margin-top: 8px; gap: 5px; }
  .character-tag { min-height: 29px; max-width: 144px; padding: 5px 7px; font-size: 12px; }
  .bottom-nav { min-height: 65px; padding: 7px 0 calc(7px + env(safe-area-inset-bottom)); }
  .bn-item { min-height: 44px; font-size: 12px; gap: 5px; }
  .home-popover { top: 52px; max-height: calc(100dvh - 125px); }
  .search-head { min-height: 68px; gap: 8px; padding: 10px 12px; }
  .search-field { min-height: 46px; border-radius: 8px; }
  .search-body { padding: 22px 16px 90px; }
  .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 12px; }
  .search-tag-section { margin-bottom: 20px; padding-bottom: 19px; }
  .search-tag-facet, .selected-search-tag { font-size: 12px; min-height: 36px; }
  .tag-editor-entry input, .search-tag-input-label input { font-size: 16px; }
  .creator-steps { display: flex; gap: 5px; overflow-x: auto; padding: 9px 12px; scrollbar-width: none; }
  .creator-step { flex: 0 0 auto; min-height: 36px; padding: 7px 9px; gap: 6px; font-size: 12px; }
  .creator-step span { display: inline; }
  .creator-step:not(:last-child)::after { display: none; }
  .creator-step b { width: 21px; height: 21px; font-size: 12px; }
  .creator-page-head h1 { font-size: 22px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .room-topbar { min-height: 62px; padding-inline: 12px; }
  .room-heading strong { font-size: 15px; }
  .room-heading > span, .room-connection { font-size: 12px; }
  .rooms-hub { padding: 25px 18px 100px; }
  .room-hub-intro h1 { font-size: 27px; margin: 10px 0 12px; }
  .room-hub-intro p { font-size: 13px; line-height: 1.7; }
  .room-entry-grid { gap: 10px; margin-top: 22px; }
  .room-entry-card, .room-entry-card:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .room-entry-icon { width: 30px; height: 30px; font-size: 22px; }
  .room-entry-card strong { margin: 0; font-size: 14px; }
  .room-entry-card > span:not(.room-entry-icon):not(.room-entry-arrow) { font-size: 12px; }
  .room-entry-arrow { position: absolute; top: 19px; right: 14px; }
  .room-list-section { margin-top: 29px; }
  .room-details { padding: 16px 18px; }
  .room-session.is-playing .room-member-name, .room-session.is-playing .room-member small { font-size: 12px; }
  .room-session.is-playing .room-member-avatar { width: 25px; height: 25px; font-size: 12px; }
  .room-session.is-playing .room-host-tools .room-btn, .room-session.is-playing .room-invite .room-wide { font-size: 12px; }
  .room-play-status { padding: 12px 18px; }
  .room-ai-notice { font-size: 12px; }
  .room-message-content { font-size: 15px; }
  .room-composer-bottom > span { font-size: 12px; }
  .room-composer textarea, .room-field input, .room-field select, .room-field textarea { font-size: 16px; }
  .room-dialog h2 { font-size: 21px; }
  .room-field, .room-fieldset legend { font-size: 14px; }
  .room-mode-options small { font-size: 12px; }
  /* Do not change .is-playing scroll owners or textarea sizing here: the
     transcript scrolls independently and the composer remains in view. */
}

/* Let the library and the search share one alignment on wider screens. */
@media (min-width: 1000px) {
  #galleryScreen .home-topbar { padding-inline: max(32px, calc((100% - 1296px) / 2)); }
  #galleryScreen .home-feed { padding-top: 22px; }
  .library-shortcuts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 22px; margin-bottom: 22px; }
  .library-shortcuts:has(#continueSection.hidden) { grid-template-columns: 1fr; }
  #galleryScreen .library-shortcuts #continueSection,
  #galleryScreen .library-shortcuts .home-play-entry { min-width: 0; margin: 0; }
  .library-shortcuts .home-recent-rail { overflow-x: auto; }
}

#galleryScreen .card .ctag:empty, .search-results .card .ctag:empty { display: none; }

.card .view-images { display: grid; width: 34px; height: 34px; padding: 6px; cursor: pointer; }

.creator-image-settings {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line, #30333c);
  border-radius: 14px;
  background: var(--panel, #17191f);
}
.creator-image-settings summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.creator-image-settings > .hint { margin: 12px 0 16px; color: var(--muted, #979ba7); font-size: 12px; line-height: 1.7; }
.creator-image-settings .field + .field { margin-top: 14px; }

.generated-scene { display: block; }
.generated-scene small { display: block; color: var(--muted, #979ba7); margin: 6px 0; }