/* Folded phone → unfolded phone/tablet → desktop. Keep the existing single-page navigation. */
:root {
  --app-width: 1080px;
  --reading-width: 960px;
  --sheet-width: 640px;
  --viewport-height: 100dvh;
  --viewport-top: 0px;
  --viewport-bottom: 0px;
}
body {
  position: fixed;
  top: var(--viewport-top); left: 0; right: 0;
  width: 100%; max-width: var(--app-width);
  height: 100vh; height: var(--viewport-height);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tab-page, #chatScroll, #groupList, #kitList, .mem-list,
.nest-sub, .nest-sub-body, .nest-health-frame, .kit-overlay iframe {
  min-width: 0; min-height: 0;
}
#input, #groupInput, #kitInput, .mem-search input, .mem-modal-select { min-width: 0; }
.h-back, .h-left, #speakerBtn { flex-shrink: 0; }
.h-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#list, #draftTray, .draft-notice { width: 100%; max-width: var(--reading-width); margin-inline: auto; }
#groupList, #kitList { padding-inline: max(20px, calc((100% - var(--reading-width)) / 2 + 20px)); }
.chat-footer { padding-inline: max(14px, calc((100% - var(--reading-width)) / 2 + 14px)); }
.bubble, .quote-ref { max-width: min(82%, 680px); min-width: 0; overflow-wrap: anywhere; }
.row.ai .bubble, .row.codex .bubble { max-width: min(94%, 760px); }
.row.q .bubble { max-width: min(88%, 720px); }
.g-img { max-width: 100%; max-height: 320px; object-fit: contain; }
.bubble.g-imgwrap { max-width: min(82%, 360px); }
.mem-card-content, .hb-body, .ms-body { overflow-wrap: anywhere; }
.mem-filters, .hb-filters, .pr-bar, .rewind-btns { flex-wrap: wrap; }
.rewind-btn { flex-basis: 80px; }
.nest-card { min-width: 0; }
.nest-card-desc { overflow-wrap: anywhere; }
.nest-sub-bar { padding-top: 6px; } /* The main header already includes the top safe area. */

/* Fixed overlays follow the visual viewport when the keyboard covers the layout viewport. */
.mood-popup, .rewind-overlay, .mem-modal-overlay, .kit-overlay, .pr-viewer {
  top: var(--viewport-top); bottom: auto;
  height: var(--viewport-height);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.mood-popup-card, .rewind-sheet, .mem-modal {
  max-width: var(--sheet-width);
  max-height: calc(var(--viewport-height) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mood-popup-feed { min-height: 0; }
.mem-modal { padding-bottom: calc(16px + var(--safe-b)); }
.rewind-preview.draft-preview-img img { max-height: calc(var(--viewport-height) * .45); }
.pr-viewer img { max-height: calc(var(--viewport-height) - 48px); }
.about-acc-body { max-height: calc(var(--viewport-height) * .3); }
.trim-menu { max-height: calc(var(--viewport-height) - 100px); overflow-y: auto; }
#plusMenu {
  max-width: min(calc(100vw - 24px), 560px);
  max-height: calc(var(--viewport-height) - 160px); overflow-y: auto;
  left: max(12px, calc((100% - var(--reading-width)) / 2 + 12px));
}
.toast { bottom: calc(var(--viewport-bottom) + 80px); max-width: calc(100vw - 32px); overflow-wrap: anywhere; }

@media (min-width: 600px) {
  header { padding-inline: 24px; }
  .nest-hub { padding-inline: 24px; }
  .nest-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nest-sub-body { padding-inline: 24px; }
  .mem-header, .mem-list, .mem-add-bar { padding-inline: 24px; }
  .about-acc { margin-inline: 24px; }
  .conv-row { padding-inline: 24px; }
  .tab-bar { padding-inline: max(0px, calc((100% - 720px) / 2)); }
}
@media (max-width: 599px) {
  /* Give the input a full row; every existing group action remains reachable. */
  #page-group .chat-footer { display: grid; grid-template-columns: repeat(5, 34px) minmax(0, 1fr) 34px; }
  #groupInput { grid-row: 2; grid-column: 1 / -2; width: 100%; }
  #groupSend { grid-row: 2; grid-column: -2; }
}
@media (max-width: 359px) {
  header { gap: 7px; padding-inline: 12px; }
  .h-avatar { width: 34px; height: 34px; }
  .h-ctx { font-size: 10px; letter-spacing: 0; }
  #list, #groupList, #kitList { padding-inline: 12px; }
  #draftTray { padding-inline: 12px; }
}
@media (max-height: 500px) {
  header { padding-top: calc(var(--safe-t) + 5px); padding-bottom: 5px; }
  .h-avatar { width: 32px; height: 32px; }
  .chat-footer { padding-top: 6px; padding-bottom: 6px; }
  .tab-item { padding-top: 4px; }
  .tab-icon { font-size: 16px; margin-bottom: 1px; }
  .tab-item::after { margin-top: 1px; }
  #input, #groupInput, #kitInput { max-height: 64px; }
}
/* visualViewport can shrink without changing CSS media-query height. */
html.keyboard-open { --safe-b: 0px; }
html.keyboard-open .tab-bar { display: none; }
html.keyboard-open header { padding-top: calc(var(--safe-t) + 5px); padding-bottom: 5px; }
html.keyboard-open .chat-footer { padding-top: 6px; padding-bottom: 6px; }
html.keyboard-open #input, html.keyboard-open #groupInput, html.keyboard-open #kitInput { max-height: 64px; }