/* Shared layout constraints, including long notes and narrow dialogs. */
#import-button { min-width: 44px; min-height: 44px; }
#app-shell, #main-content, .workspace, .listen-column, .library-column,
.detail-body, #detail-panel, #note-editor, .settings-body, .chat-messages {
  min-width: 0;
}
.settings-body select, .settings-body textarea, .settings-body input:not([type=checkbox]),
.field-row select { width: 100%; max-width: 100%; }
.settings-body, .dialog-top h2, .tag, .source-label, .player-state,
.transcript-segment > div, .chat-question, .chat-answer { overflow-wrap: anywhere; }
.transcript-segment > div, .dialog-top > div { min-width: 0; }
.editor-toolbar { gap: 10px; flex-wrap: wrap; }
.editor-toolbar > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.block-prefix { flex: none; }
#live-title { overflow-wrap: anywhere; }
#waveform { max-width: 100%; }
.player-skip { white-space: nowrap; flex: none; min-width: 52px; min-height: 44px; }
.player-skip .icon { width: 18px; height: 18px; }
.player-speed select { min-height: 44px; font-size: 16px; }
.player-heading > a { min-width: 44px; min-height: 44px; display: grid; place-items: center; flex: none; }
.player-heading { margin-bottom: 8px; }
.player-buttons { gap: 10px; }
.compact .player-toggle { width: 44px; height: 44px; }
.player-progress { touch-action: pan-y; }
body:has(.audio-dock:not([hidden])) #main-content { padding-bottom: 260px; }
.audio-dock { bottom: 24px; width: min(380px, calc(100% - 40px)); }
.capture-dialog[open] { display: flex; flex-direction: column; }
.capture-header { flex: none; }
.capture-live { min-height: 0; padding: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.capture-content { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 26px 12px; }
.capture-live .capture-controls { flex: none; margin: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.chat-messages { min-height: 0; }
.chat-toolbar { flex: none; gap: 8px; }
.chat-toolbar select { min-width: 0; }
.small-dialog > .dialog-top { position: sticky; top: 0; z-index: 2; background: var(--bg); }

@media (max-width: 1000px) {
  #main-content { padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right)); }
  .bottom-nav { position: fixed; inset: auto 0 0; max-width: none; width: auto; margin: 0; gap: 0; flex-direction: row; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); }
  .nav-button { min-width: 0; min-height: 48px; flex: 1; width: auto; }
  #main-content { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .audio-dock { bottom: calc(80px + env(safe-area-inset-bottom)); width: min(380px, calc(100% - 24px)); right: 12px; }
  body:has(.audio-dock:not([hidden])) #main-content { padding-bottom: calc(330px + env(safe-area-inset-bottom)); }

}
@media (max-width: 800px) {
  .app-header { padding: calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
  .page-heading > .text-button, .record-button, .nav-record { min-width: 44px; min-height: 44px; }
  .page-heading > div { min-width: 0; }
  .recipes button, .chip, .detail-tab, .block-menu button, .add-block { min-height: 44px; }
  .recipes { margin-right: 0; padding-right: 0; }
  .filters { margin-right: 0; padding-right: 2px; }
  .card-preview { font-size: 14px; }
  .card-heading h3 { font-size: 16px; }
  .memos-link { font-size: 14px; }
  .detail-dialog, .capture-dialog, .chat-dialog {
    inset: var(--visual-top, 0px) 0 auto;
    width: 100%; max-width: 100%; margin: 0;
    height: var(--visual-height, 100dvh); max-height: var(--visual-height, 100dvh);
    border: 0; border-radius: 0;
  }
  .small-dialog { width: calc(100% - 24px); max-height: calc(var(--visual-height, 100dvh) - 24px); }
  .detail-body { padding: 20px max(18px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .detail-head { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
  .settings-body { padding: 20px; }
  .settings-body .secondary { white-space: normal; }
  .note-tools { flex-wrap: wrap; gap: 8px; }
  .note-tools select { flex: 1 1 130px; min-width: 0; max-width: 100%; }
  .note-tools .secondary { flex: 1 1 140px; min-height: 44px; }
  .editor-toolbar button { min-height: 44px; }
  .block-handle { width: 44px; flex-basis: 44px; height: 44px; }
  .note-block [contenteditable], .speaker-tools input, .player-speed select, .chat-toolbar select { font-size: 16px; }
  .note-block { gap: 4px; }
  .block-heading1 [contenteditable] { font-size: 24px; }
  .block-heading2 [contenteditable] { font-size: 20px; }
  .bottom-nav { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .nav-button { min-height: 48px; min-width: 0; flex: 1; width: auto; }
  .audio-dock { bottom: calc(80px + env(safe-area-inset-bottom)); width: min(380px, calc(100% - 24px)); right: 12px; }
  body:has(.audio-dock:not([hidden])) #main-content { padding-bottom: calc(330px + env(safe-area-inset-bottom)); }
  .capture-live { padding: 0; }
  .capture-content { padding: 16px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); }
  .capture-controls .pause-button, .capture-controls .stop-button { min-height: 48px; flex: 1; justify-content: center; }
  .chat-dialog .dialog-top { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .chat-toolbar, .chat-messages, .chat-compose { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .chat-toolbar select { max-width: calc(100% - 52px); }
  .login-screen { padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
}
@media (max-width: 360px) {
  #main-content { padding-inline: 16px; }
  .detail-title { font-size: 24px; }
  .player:not(.compact) .player-buttons { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 8px; }
  .player:not(.compact) .player-speed { grid-column: 1 / -1; justify-self: center; }
  .player:not(.compact) .player-speed .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 13px; margin-right: 8px; }
  .compact .player-buttons { gap: 6px; }
  .compact .player-skip { min-width: 48px; }
  .audio-dock .player { padding-inline: 12px; }
  .editor-toolbar > div { gap: 0; width: 100%; }
  .editor-toolbar > div .secondary { padding-inline: 10px; }
  .speaker-tools label, .speaker-tools input { max-width: 100%; width: 100%; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .capture-live .timer { font-size: 36px; }
  .capture-live h2 { margin: 8px 0; font-size: 18px; }
  .capture-live #waveform { height: 30px; }
  .capture-live .capture-controls { padding-block: 8px; }
  .audio-dock .player-progress, .audio-dock .player-times { display: none; }
  .audio-dock { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .chat-dialog .dialog-top { padding-block: 8px; }
  .chat-dialog .eyebrow { display: none; }
  .chat-compose { padding-block: 8px; }
}