/* Install and connection UI stays small, outside the writing surface. */
[hidden] { display: none !important; }
.pwa-notice { position: fixed; z-index: 110; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: min(580px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid #b9cfc3; border-radius: 12px; background: #f8f7f2; color: #30453e; box-shadow: 0 6px 30px #091c2633; font: 13px/1.5 system-ui, sans-serif; }
.pwa-notice button { border: 0; border-radius: 7px; padding: 10px; background: #294b46; color: #f2f6ee; font: inherit; cursor: pointer; }
.local-draft-status { color: #b9cfc3; font: 11px/1.5 'DM Sans', sans-serif; margin: 7px 0 0; }
.local-draft-status:empty { display: none; }
.app { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.idea-drawer .idea-detail { padding-top: calc(32px + env(safe-area-inset-top)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.view, .chat-messages, .idea-detail { overscroll-behavior-y: contain; }
@media (max-width: 640px) {
  .app { height: var(--visible-height, 100dvh); min-height: 0; }
  .app .nav { min-width: 0; gap: 12px; }
  .app .nav-links { overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; padding: 3px; }
  .app .nav-item { flex: 0 0 44px; width: 44px; height: 44px; }
  .app .brand { flex-shrink: 0; }
  .app .tiny-btn, .app .send-btn, .app .tool-text, .app .quiet-link { min-width: 44px; min-height: 44px; }
  .app .top-actions { gap: 4px; }
  .app .session-state { display: none; }
  .app .workspace-top { flex-shrink: 0; }
  .app .chat-wrap { overflow: hidden; }
  .app .chat-compose textarea, .app .evening-input input, .app .writing-editor,
  .app .markdown-editor, .app input:not([type=checkbox]):not([type=radio]), .app select { font-size: max(16px, var(--chat-font, 16px)); }
  .app .chat-compose textarea { min-height: 48px; }
  .app .compose-row { flex-wrap: wrap; }
  .app .compose-tools { flex-wrap: wrap; }
  /* The compose box and the links stay in view; what is read scrolls. The intro (greeting, mood chips, the morning card) is capped at
     about a third of the screen and scrolls inside itself when it is longer, so on a short phone it cannot push the rest out of reach
     and clip it (this column does not scroll as a whole). The conversation takes what is left and scrolls inside that. */
  .app .session-intro { flex: 0 1 auto; max-height: 35dvh; overflow-y: auto; overscroll-behavior-y: contain; }
  .app .chat-messages { min-height: 100px; }
  .app .chat-bottom-actions { flex-wrap: wrap; }
  .app .writing-top { height: auto; min-height: 58px; padding: 12px 15px; flex-wrap: wrap; gap: 10px; }
  .app .writing-top-right { flex-wrap: wrap; }
  .app .settings-row { flex-wrap: wrap; }
  .app .evening-input { flex-wrap: wrap; }
  .app .evening-input input { min-width: 0; }
  .idea-drawer { height: var(--visible-height, 100dvh); }
  .keyboard-open .app .session-intro, .keyboard-open .app .chat-bottom-actions { display: none; }
  .keyboard-open .pwa-notice { bottom: auto; top: max(8px, env(safe-area-inset-top)); }
  .app.welcome-app { display: block; overflow-y: auto; }
  .welcome-app .workspace { min-height: 100%; padding: 24px 0; }
  .welcome-card { max-width: 100%; }
}
@media (display-mode: standalone) {
  body { background: #151f26; }
}

/* The reading pane and navigation can each reach their own end on short windows. */
@media (min-width: 641px) {
  .app { min-height: 0; }
  .app > .nav { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #66867e66 transparent; }
  .app > .nav > * { flex-shrink: 0; }
}