/* Small-screen presentation; native dialogs and the stable drawer stay unanimated. */
.cy-mobile-nav, .cy-mobile-disclosure, .cy-mobile-chat-title, .cy-mobile-chat-toolbar { display: none; }
@media(max-width:900px) {
  :root { --cy-header: 64px; --cy-mobile-dock: 64px; }
  body { padding-left: 0; padding-bottom: calc(var(--cy-mobile-dock) + env(safe-area-inset-bottom, 0px)); }
  .cy-sidebar { display: none; }
  .member-header { height: var(--cy-header); padding: 0 12px; gap: 8px; }
  .member-wordmark>img { width: 180px; max-width: 48vw; height: 58px; }
  .cy-search, .cy-discover, .provider-funds { display: none; }
  .member-header-actions { margin-left: auto; }
  .member-header-actions :is(a,button) { min-width: 44px; min-height: 44px; }
  .cy-mobile-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 42;
    display: flex; justify-content: space-around; gap: 4px;
    min-height: var(--cy-mobile-dock);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cy-border); background: #0b0d1af5;
  }
  .cy-mobile-nav a { flex: 1; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 48px; padding: 4px; border-radius: 12px; color: var(--cy-muted); font-size: 11px; }
  .cy-mobile-nav a[aria-current=page] { background: #38224c; color: var(--cy-ivory); }
  /* Do not compete with the soft keyboard or cover a focused writing field. */
  body:has(:is(input,textarea,select):focus) .cy-mobile-nav { display: none; }
  body:has(dialog[open]) .cy-mobile-nav { visibility: hidden; }
  .cy-mobile-disclosure { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid #584673; border-radius: 12px; background: #171326; color: var(--cy-ivory); font: 500 14px var(--cy-body-font); }
  .cy-mobile-disclosure:after { content: '+'; font-size: 20px; }
  .cy-mobile-disclosure[aria-expanded=true]:after { content: '−'; }

  .cy-home-hero { height: 260px; padding: 24px; }
  .cy-home-hero h1 { font-size: clamp(30px,7vw,42px); }
  .cy-home-content { margin-top: 0; padding: 0 16px 24px; }
  .cy-home-section>header>div { min-width: 0; }
  .cy-home-section>header a { flex-shrink: 0; }
  .cy-story-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px,70%); grid-template-columns: none; overflow-x: auto; gap: 12px; padding: 2px 2px 12px; scroll-snap-type: x proximity; scroll-padding-left: 2px; }
  .cy-story-shelf>.cy-story-card { scroll-snap-align: start; }
  .cy-card-art { height: 190px; }
  .cy-story-shelf .cy-card-copy h3 { font-size: 19px; }
  .cy-home-section h2 { font-size: 21px; }
  .cy-genres { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cy-genres a { height: 105px; }
  .cy-stories-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }

  .workshop-library { padding: 16px; }
  .workshop-library-hero { display: block; margin-bottom: 0; padding-bottom: 20px; }
  .workshop-library-hero h1 { font-size: 32px; }
  .cy-workshop-actions { margin-top: 16px; display: flex; flex-wrap: wrap; }
  .cy-workshop-actions a { min-height: 44px; display: flex; align-items: center; justify-content: center; flex: 1; }
  .workshop-library-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  .workshop-folder-rail { position: static; min-height: 0; }
  .workshop-folder-rail nav { display: grid; max-height: 280px; overflow: auto; }
  .workshop-folder-rail nav>button, .workshop-folder-row { min-width: 0; }
  .workshop-folder-rail nav button { min-height: 44px; }
  .workshop-projects { padding: 12px; min-height: 0; }
  .cy-library-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .cy-library-tools>label { grid-column: 1/-1; grid-row: 1; min-width: 0; }
  .cy-library-tools .cy-view-toggle { grid-column: 1/-1; }
  .cy-library-tools :is(input,select,button) { min-height: 44px; font-size: 14px; }
  .cy-library-tools select { width: 100%; min-width: 0; }
  .cy-view-toggle button { min-width: 48px; }
  .workshop-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .workshop-project-art { height: 150px; }
  .workshop-project-card>div { padding: 10px; }
  .workshop-project-card h3 { font-size: 16px; overflow-wrap: anywhere; }
  .workshop-project-actions { gap: 6px; }
  .workshop-project-actions :is(a,button) { min-height: 44px; display: grid; place-items: center; flex: 1; font-size: 12px; }
  .workshop-project-titleline>button { min-width: 44px; min-height: 44px; }
  .workshop-project-grid.is-list { grid-template-columns: 1fr; }
  .is-list .workshop-project-card { grid-template-columns: 92px minmax(0,1fr); }
  body .cy-mobile-inspector-dialog { width: min(560px,calc(100vw - 16px)); max-height: calc(100svh - 24px); padding: 12px; background: var(--cy-graphite); color: var(--cy-ivory); border-color: #584673; }
  .cy-mobile-inspector-dialog::backdrop { background: #03050cbb; }
  .cy-mobile-sheet-close { display: block; margin: 0 0 12px auto; min-height: 44px; padding: 8px 16px; background: #241a36; color: var(--cy-ivory); border: 1px solid #584673; }
  body .cy-mobile-inspector-dialog .cy-workshop-inspector { position: static; min-height: 0; padding: 12px; box-shadow: none; }
  .cy-mobile-inspector-dialog .cy-workshop-inspector img { height: 200px; }
  .cy-inspector-actions :is(a,button) { min-height: 44px; }

  .character-workshop, .character-workshop.cy-focus { display: grid; grid-template-columns: minmax(0,1fr); padding: 12px; gap: 12px; }
  .character-rail { grid-column: 1; grid-row: 1; position: static; padding: 8px; }
  .character-rail>h1, .character-rail>.eyebrow, .character-draft-note { display: none; }
  .character-nav { display: flex; overflow-x: auto; gap: 8px; margin: 0; padding: 2px; }
  .character-nav button { flex-shrink: 0; min-height: 48px; padding: 10px 12px; column-gap: 8px; }
  .character-nav button>span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 2px; padding: 0 5px; border: 1px solid #4b3b60; border-radius: 999px; background: #0a0b16; color: #c1a9f0; font-size: 10px; line-height: 1; }
  .character-nav button.is-active>span { border-color: #9b7bc4; background: #2a1d40; color: #f4eeff; }
  .character-form-panel { grid-column: 1; grid-row: 2; }
  .character-stage { grid-column: 1; grid-row: 3; position: static; max-height: none; }
  .character-form-panel :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size: 16px; }
  .cy-editor-toolbar { flex-wrap: wrap; padding: 12px; }
  .character-form-panel [data-save-character] { min-height: 48px; }
  .persona-layout, .lorebook-layout { grid-template-columns: minmax(0,1fr); }

  .character-room { display: flex; flex-direction: column; padding: 12px 12px calc(158px + env(safe-area-inset-bottom,0px)); }
  .cy-mobile-chat-title { display: block; margin: 4px 0 14px; font: 500 24px/1.3 var(--cy-display-font); letter-spacing: -.02em; overflow-wrap: anywhere; }
  .cy-mobile-chat-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
  .cy-mobile-chat-toolbar button { padding: 10px; font-size: 13px; }
  .character-chat-room { display: block; }
  .character-room-hero { position: static; max-height: none; margin-bottom: 12px; }
  .character-chat-sidebar { position: static; height: auto; max-height: none; margin-bottom: 12px; border: 0; background: transparent; overflow: visible; }
  .character-conversation-library { padding: 12px; }
  .conversation-library-scroll { max-height: none; overflow: visible; }
  .conversation-library-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scroll-snap-type: x proximity; }
  .conversation-library-list>a,.conversation-library-draft { flex: 0 0 min(76vw,280px); scroll-snap-align: start; }
  .public-story-list { display: none; }
  .character-live-chat { overflow: visible; border-radius: 16px; }
  .character-live-chat>header { padding: 12px; }
  .character-live-chat>header h2 { font-size: 19px; line-height: 1.35; }
  .character-live-chat .persona-picker { display: grid; grid-template-columns: 70px minmax(0,1fr); padding: 12px; gap: 8px; }
  .character-live-chat .persona-picker>div:first-child small { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .character-live-chat .persona-picker select { font-size: 16px; min-height: 44px; }
  .chat-generation-panel>summary { min-height: 48px; padding: 10px 12px; }
  .character-live-chat .chat-generation-panel>summary { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  .chat-generation-title>span { flex-direction: row; }
  .chat-generation-title small { display: none; }
  .chat-generation-panel>summary>span:last-child { font-size: 10px; text-align: right; }
  .character-room-log { width: 100%; height: auto!important; min-height: 58svh; max-height: none!important; padding: 12px; overflow: visible!important; overscroll-behavior: auto; touch-action: auto; }
  .character-room-log .character-chat-bubble { max-width: 96%; padding-left: 12px; }
  .character-live-chat>.character-room-compose { position: fixed!important; z-index: 44!important; left: 10px; right: 10px; bottom: calc(var(--cy-mobile-dock) + env(safe-area-inset-bottom,0px) + 8px); padding: 8px; gap: 8px; grid-template-columns: minmax(0,1fr) 60px; align-items: end; border:1px solid #675080; border-radius:18px; background:#0c0d1af5!important; box-shadow:0 12px 40px #000a; }
  body:has(.character-room-compose textarea:focus) .character-room-compose { bottom: calc(env(safe-area-inset-bottom,0px) + 6px); }
  .character-room-compose textarea { min-height: 52px; max-height: 144px; font-size: 16px; resize:none; }
  .character-room-compose button { min-height: 48px; padding: 10px; }
  .conversation-controls { flex-direction: row; gap: 8px; padding: 12px; }
  .conversation-controls button { flex: 1; min-height: 44px; }
  .character-live-chat>.conversation-tracker-panel { position:fixed; z-index:43; right:12px; bottom:calc(var(--cy-mobile-dock) + env(safe-area-inset-bottom,0px) + 92px); width:min(330px,calc(100vw - 24px)); max-height:min(56svh,460px); margin:0; overflow:auto; border:1px solid #70578d; border-radius:18px; background:#101120f5; box-shadow:0 16px 42px #000b; }
  .character-live-chat>.conversation-tracker-panel:not([open]) { width:auto; max-width:calc(100vw - 24px); }
  .character-live-chat>.conversation-tracker-panel:not([open])>summary { border:0; border-radius:999px; background:#6f50a0; }
  .character-live-chat>.conversation-tracker-panel:not([open])>summary small { display:none; }
  .character-room .conversation-tracker-panel>summary { min-height: 48px; }
  body:has(.character-room-compose textarea:focus) .character-live-chat>.conversation-tracker-panel { bottom:88px; }
  body :is(.persona-editor, .lorebook-editor, .preprompt-picker, .preprompt-library-dialog, .workshop-dialog)
    :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select) { font-size: 16px; }
}
@media(max-width:360px) {
  .cy-stories-grid { grid-template-columns: 1fr; }
  .workshop-project-grid:not(.is-list) { grid-template-columns: 1fr; }
}

/* The chat transcript is the mobile page; only the composer and compact state control float. */
@media(max-width:900px) {
  .character-room { padding-bottom: calc(166px + env(safe-area-inset-bottom,0px)); }
  .character-room-rail { display: grid; gap: 12px; min-width: 0; }
  .character-room-hero { margin: 0; }
  .character-chat-sidebar { margin: 0; }
  .character-chat-room { margin-top: 12px; }
  .character-live-chat>.character-chat-backdrop>img { min-height: 100svh; }
  .character-chat-dock { position: fixed; z-index: 44; left: 10px; right: 10px; bottom: calc(var(--cy-mobile-dock) + env(safe-area-inset-bottom,0px) + 8px); pointer-events: none; }
  .character-chat-dock>* { pointer-events: auto; }
  .character-chat-dock>.character-room-compose { display: grid; grid-column:1; grid-row:1; grid-template-columns: minmax(0,1fr) 60px; align-items: end; gap: 8px; width:100%; margin: 0; padding: 8px; border:1px solid #70578d; border-radius:18px; background:rgba(10,11,26,.94)!important; box-shadow:0 12px 40px #000b,0 0 20px #9b83d922; backdrop-filter:blur(14px); }
  .character-chat-dock>.conversation-tracker-panel { position:absolute; right:0; bottom:calc(100% + 8px); width:min(330px,calc(100vw - 20px)); max-height:min(56svh,460px); margin:0; overflow:auto; border:1px solid #70578d; border-radius:18px; background:rgba(16,17,32,.96); box-shadow:0 16px 42px #000b; backdrop-filter:blur(14px); }
  .character-chat-dock>.conversation-tracker-panel:not([open]) { width:auto; max-width:calc(100vw - 20px); overflow:visible; }
  .character-chat-dock>.conversation-tracker-panel>summary { position:relative; min-height:48px; padding:11px 38px 11px 14px; border:0; border-radius:18px; background:linear-gradient(135deg,#6f50a0,#49356e); list-style:none; }
  .character-chat-dock>.conversation-tracker-panel>summary::-webkit-details-marker { display:none; }
  .character-chat-dock>.conversation-tracker-panel>summary:after { content:'›'; position:absolute; right:14px; top:50%; color:#eeeaf5; font-size:22px; line-height:1; transform:translateY(-50%); transition:transform .18s ease; }
  .character-chat-dock>.conversation-tracker-panel[open]>summary:after { transform:translateY(-50%) rotate(90deg); }
  .character-chat-dock>.conversation-tracker-panel:not([open])>summary small { display:none; }
  body:has(.character-room-compose textarea:focus) .character-chat-dock { bottom:calc(var(--chat-keyboard-offset,0px) + env(safe-area-inset-bottom,0px) + 6px); }
  .character-room :is(.conversation-save-panel,.conversation-memory-panel) { margin-inline:12px; }
}