/* A compact mobile shell. Desktop and non-chat workspaces keep their own layout. */
#mobile-project-switch { display: none; }
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  html.mobile-chat { --mobile-header: calc(52px + env(safe-area-inset-top)); scrollbar-gutter: auto; }
  html.mobile-chat body { padding: 0; min-width: 0; overflow: hidden; }
  html.mobile-chat body > .sidebar {
    position: fixed; inset: var(--mobile-top, 0px) 0 auto;
    width: 100%; height: var(--mobile-header); min-height: 0;
    padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: 8px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line);
  }
  html.mobile-chat .sidebar > :not(.mode-switcher):not(#mobile-controls) { display: none !important; }
  html.mobile-chat .sidebar .mode-switcher { min-width: 0; margin: 0; flex: 0 1 auto; }
  html.mobile-chat .sidebar #mode-menu-button { min-height: 44px; margin: 0; padding: 4px; gap: 6px; letter-spacing: -.8px; }
  html.mobile-chat .sidebar #mode-menu-button img { width: 28px !important; height: 28px !important; object-fit: contain; }
  html.mobile-chat .sidebar #mode-menu-button b { display: block !important; font-size: 23px; }
  html.mobile-chat .sidebar #mode-menu-button small { font-size: 10px; letter-spacing: 0; }
  html.mobile-chat .sidebar #mode-menu-button > span { align-self: center; margin: 0; }
  html.mobile-chat #mobile-controls { display: flex; flex: none; gap: 0; padding: 0; border: 0; background: transparent !important; }
  html.mobile-chat #mobile-controls button { width: 40px; height: 44px; border-radius: 12px; }
  html.mobile-chat body > main {
    position: fixed; top: calc(var(--mobile-top, 0px) + var(--mobile-header)); left: 0; right: 0;
    width: 100%; height: calc(var(--mobile-height, 100dvh) - var(--mobile-header));
    min-height: 0; margin: 0 !important; padding: 0; overflow: hidden;
  }
  html.mobile-chat main > header,
  html.mobile-chat #study-view > :not(.workspace-grid):not(#mobile-project-switch),
  html.mobile-chat .chat-panel > :is(.panel-header, .tutor-settings) { display: none !important; }
  html.mobile-chat main > #study-view {
    display: flex; flex: 1; width: 100%; max-width: none; min-height: 0;
    height: 100%; padding: 0 !important; margin: 0; gap: 0; overflow: hidden;
  }
  html.mobile-chat #study-view > .workspace-grid {
    display: flex !important; flex: 1; flex-direction: column; width: 100%; max-width: none !important;
    height: 100%; min-height: 0; gap: 0; margin: 0; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; overflow: hidden;
  }
  html.mobile-chat .workspace-grid > .chat-panel {
    display: flex !important; flex-direction: column; flex: 1; width: 100%; max-width: none;
    height: 100% !important; min-height: 0; margin: 0; border: 0 !important; border-radius: 0 !important;
    overflow: hidden; box-shadow: none !important;
  }
  html.mobile-chat .chat-panel > #conversation {
    flex: 1 1 0; width: 100%; max-width: none; height: auto !important; min-height: 0 !important;
    padding: 16px 16px 8px !important; margin: 0; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior-y: contain; scroll-padding-block: 12px; scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
  }
  html.mobile-chat .chat-panel .welcome { width: 100%; max-width: 440px; margin: auto; padding: 16px 0 !important; }
  html.mobile-chat .welcome .mascot { width: 36px; height: 36px; margin: 0 auto 12px; }
  html.mobile-chat .chat-panel .welcome h2 { font-size: 25px !important; line-height: 1.25; margin: 0 0 12px; }
  html.mobile-chat .welcome p { font-size: 13px; margin: 0 0 12px; }
  html.mobile-chat .welcome .suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
  html.mobile-chat .welcome .suggestions button { flex: 1 1 140px; min-height: 40px; padding: 8px 12px; font-size: 12px; border-radius: 12px; }
  html.mobile-chat .message { min-width: 0; max-width: 100%; padding: 0; margin: 0 0 20px; }
  html.mobile-chat .message.user { width: fit-content; max-width: 90%; padding: 10px 14px; margin-left: auto; border-radius: 18px; }
  html.mobile-chat .message-content { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
  html.mobile-chat .message-content :is(pre, .code-block, .message-table-wrap) { max-width: 100%; overflow-x: auto; }
  html.mobile-chat .message-content img { max-width: 100%; height: auto; }
  html.mobile-chat .message-actions { margin-top: 4px; gap: 4px; }
  html.mobile-chat .chat-panel > .composer-wrap {
    flex: 0 0 auto; width: 100%; max-width: none; margin: 0;
    padding: 6px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    position: relative; z-index: 4;
  }
  html.mobile-chat.mobile-keyboard .chat-panel > .composer-wrap { padding-bottom: 8px; }
  html.mobile-chat .chat-panel .composer { margin: 0; padding: 10px 10px 6px; border-radius: 22px; }
  html.mobile-chat .chat-panel #prompt {
    display: block; width: 100%; min-height: 28px; max-height: min(120px, 23dvh, calc(var(--mobile-height, 100dvh) * .25));
    padding: 0 4px; font-size: 16px !important; line-height: 24px; resize: none; overflow-y: auto;
    scroll-padding-block: 4px;
  }
  html.mobile-chat .chat-panel #prompt:placeholder-shown { height: 28px !important; }
  html.mobile-chat .chat-panel .composer-tools { display: flex; flex-wrap: nowrap; gap: 2px; margin-top: 4px; min-width: 0; }
  html.mobile-chat .composer-tools > button,
  html.mobile-chat #composer-strength-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; flex: none; }
  html.mobile-chat #composer-strength { margin-left: auto; }
  html.mobile-chat .composer-tools #voice { display: none; } /* Voice remains on the send button and workspace menu. */
  html.mobile-chat .composer-tools .context-label { display: none; }
  html.mobile-chat .composer-caption { margin: 4px 0 0; min-height: 12px; line-height: 12px; font-size: 9px; }
  html.mobile-chat .composer-caption > :last-child:not(:first-child) { display: none; }
  html.mobile-chat #dictation-status { font-size: 11px; line-height: 16px; margin: 0 4px 4px; }
  html.mobile-chat #creation-mention-menu { left: 10px; right: 10px; width: auto; max-height: min(240px, var(--mobile-popup-height, 30dvh)); }
  html.mobile-chat #composer-strength-panel { max-height: var(--mobile-popup-height, 40dvh); overflow-y: auto; right: -48px; }
  html.mobile-chat #jump-to-reply:not(.hidden) { position: absolute; z-index: 5; top: 8px; right: 12px; padding: 8px 12px; border-radius: 20px; background: var(--surface); box-shadow: 0 2px 8px #0002; }
  html.mobile-chat .workspace-grid > .canvas-panel:not(.expanded),
  html.mobile-chat .workspace-grid > #inline-site-resizer { display: none !important; }
  html.mobile-chat .workspace-grid > .canvas-panel.expanded { position: fixed; inset: calc(var(--mobile-top, 0px) + var(--mobile-header)) 8px 8px !important; width: auto !important; height: calc(var(--mobile-height, 100dvh) - var(--mobile-header) - 8px) !important; max-height: none; z-index: 25; }
  html.mobile-chat.inline-site-active #mobile-project-switch:not([hidden]) { display: flex; flex: none; gap: 4px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
  html.mobile-chat #mobile-project-switch button { flex: 1; min-height: 32px; border-radius: 8px; font-size: 12px; color: var(--muted); }
  html.mobile-chat #mobile-project-switch button[aria-pressed=true] { background: var(--soft); color: var(--ink); }
  html.mobile-chat:not(.mobile-project-preview) .workspace-grid > .inline-site-panel { display: none !important; }
  html.mobile-chat.mobile-project-preview .workspace-grid > .chat-panel { display: none !important; }
  html.mobile-chat.mobile-project-preview .workspace-grid > .inline-site-panel { display: flex; flex: 1; width: 100%; height: 100% !important; min-height: 0 !important; }
  html.mobile-chat .inline-site-panel .inline-site-stage { flex: 1; height: auto; min-height: 0; overflow: auto; }
  html.mobile-chat .inline-site-panel .inline-site-stage iframe { min-height: 0; height: 100%; }
  html.mobile-chat .inline-site-panel > header { gap: 8px; padding: 8px; }
  html.mobile-chat .inline-site-actions { flex-wrap: wrap; gap: 4px; }
  html.mobile-chat .inline-site-actions button { min-height: 36px; }
  html.mobile-chat .inline-site-panel > footer { padding: 6px 8px; }
  html.mobile-chat .inline-site-panel > footer b { display: none; }
  html.mobile-chat :is(#mobile-controls button, #mobile-project-switch button) { transition: background-color 160ms ease, color 160ms ease; }
  html.mobile-chat :is(#mobile-controls button, #mobile-project-switch button):active { background: var(--soft); }
}
@media (max-width: 1000px) and (max-height: 500px) {
  html.mobile-chat .welcome .mascot, html.mobile-chat .welcome .suggestions { display: none; }
  html.mobile-chat .chat-panel .welcome { padding: 8px 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  #mobile-controls button, #mobile-project-switch button { transition: none !important; }
}