/* Cindrly — responsive layout.
   Loaded after app.css (index.html), so a rule here wins over app.css at equal specificity. */

/* ------------------------------------------------------------------ dialogs and sheets on short screens */
/* A dialog keeps its title and its buttons in sight and scrolls what's between them, however short the screen: a
   phone held sideways, a desktop zoomed to 200%. (The body could grow past the dialog's own limit before: a flex
   item doesn't shrink below its content unless told it may.) */
.modal-head, .modal-foot { flex: none; }
.modal-body { min-height: 0; }
/* The phone layout's dialogs (cards from the bottom): never taller than what's visible. --app-h is the visible
   height in px (js/viewport.js), and 100dvh the screen's in case it's bigger. Should one still not fit (a dialog
   that doesn't scroll inside), the backdrop scrolls instead of cutting it off. */
body.m-ui .modal-backdrop { overflow-y: auto; overscroll-behavior: contain; }
body.m-ui .modal:not(.modal-full):not(.modal-search):not(.modal-lightbox) {
  max-height: calc(min(var(--app-h, 100dvh), 100dvh) - env(safe-area-inset-top) - 12px);
}

/* ------------------------------------------------------------------ the side panel on laptops and tablets */
/* 761–1240px wide (not the phone layout): the members list, a thread, pinned messages, photos & videos, the side view
   float over the conversation. They sit between its header and its message box (app.js dockPanel measures where
   those are), so neither is ever covered; the see-through .panel-scrim over the rest closes the panel at a touch. */
.panel-back { display: none; }
@media (max-width: 1240px) {
  body:not(.m-ui) #members.docked { top: calc(var(--dock-t, 0px) + var(--gap)); bottom: calc(var(--dock-b, 0px) + var(--gap)); }
  body:not(.m-ui) .panel-scrim { position: absolute; z-index: 19; background: transparent; }
}
/* 761–900px: next to the sidebar the conversation has no room for a panel beside anything (a sliver of it was left
   showing), so the panel takes its whole place, with a Back arrow in its header, as on a phone. */
@media (max-width: 900px) {
  body:not(.m-ui) #members.docked {
    top: var(--main-t, var(--gap)); bottom: var(--main-b, var(--gap)); left: var(--main-l, auto); right: auto; width: var(--main-w, var(--thread-w));
    box-shadow: none; animation: none;
  }
  body:not(.m-ui) #members.docked > .resize-handle { display: none; }
  body:not(.m-ui) #members.docked > .panel-head { padding-left: 6px; }
  body:not(.m-ui) #members.docked > .panel-head > .panel-back { display: inline-flex; }
  body:not(.m-ui) #members.docked > .panel-head > .panel-close { display: none; }
  /* (Tablets: the call's encryption note doesn't fit in the header beside the call's buttons.) */
  .call-note { display: none; }
}

/* ------------------------------------------------------------------ an incoming call */
/* On a computer or tablet the ringing card comes in at the top right, under the header, where it never covers the
   message box and its Send button (the phone layout keeps it at the bottom, above the tab bar: app.css). */
@media (min-width: 761px) {
  body:not(.m-ui) .ring-card { top: calc(var(--head-h) + 12px); bottom: auto; right: 20px; }
}

/* ------------------------------------------------------------------ short conversations sit at the bottom */
/* A conversation with a few messages starts just above the message box, as a long one does, rather than at the top
   of the screen with a gap under it. .messages is still what scrolls (scrollTop works as before), and the empty
   space before the first message is a spacer that grows into room left over, so it's nothing once there's more
   than fits (never space that can't be scrolled to, as justify-content: flex-end would leave). The margins
   between messages, dividers and notes stop merging in a flex column; each keeps the space above it and none
   below, so they're spaced exactly as before. */
.messages { display: flex; flex-direction: column; }
.messages > * { flex: none; }
.messages::before { content: ''; flex: 1 0 0; }
.messages > .day-div, .messages > .new-div, .messages > .sys-line { margin-bottom: 0; }

/* ------------------------------------------------------------------ file cards */
/* The line under a file's name wraps between its pieces, never inside one ("1.2 / MB"). */
.att-size { flex-wrap: wrap; row-gap: 2px; }
.att-sz, .att-kind, .att-enc { white-space: nowrap; }
/* Phones: Download (and Copy link) are icons a finger's size, so the name keeps the room; a download under way
   still shows how far it's got. */
body.m-ui .att-file > .btn { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; flex: none; }
body.m-ui .att-file > .btn .btn-label { display: none; }
body.m-ui .att-file > .btn.busy { width: auto; padding: 0 10px; }
body.m-ui .att-file > .btn.busy .btn-label { display: inline; }

/* ------------------------------------------------------------------ room for a finger */
/* Touch screens: small buttons answer a touch around them (40px) while looking the same. */
@media (pointer: coarse) {
  #sidebar .icon-btn.sm, .invite-nudge-x, .head-badge, .secure-x { position: relative; }
  #sidebar .icon-btn.sm::before, .invite-nudge-x::before, .head-badge::before, .secure-x::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
  /* Home's text buttons (the security card's steps, a section's "All friends"): a finger's height, not a line's. */
  .secure-step .link-btn, .home-sec-head .link-btn { min-height: 40px; }
  .conv-tab { min-height: 40px; }
  /* No keyboard to press Ctrl K with. */
  .find-btn kbd, .kbd-hint, kbd.hint { display: none; }
}
/* Phones: 44px. */
body.m-ui .conv-tab { min-height: 44px; }
body.m-ui .msg-av, body.m-ui .msg-name { position: relative; }
body.m-ui .msg-av::before, body.m-ui .msg-name::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* A file waiting to be sent: Edit and Remove a finger's size each, 8px apart. */
body.m-ui .pending { margin-top: 6px; }
body.m-ui .pending-x, body.m-ui .pending-edit { width: 32px; height: 32px; top: -10px; }
body.m-ui .pending-x { right: -8px; }
body.m-ui .pending-edit { right: 44px; }
body.m-ui .pending-x::before, body.m-ui .pending-edit::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
body.m-ui .pending-x .ic, body.m-ui .pending-edit .ic { width: 16px; height: 16px; }
/* White initials on a coloured tile: the tile a shade darker, for 4.5:1. */
body.m-ui .av-inner:has(> .av-initials) { box-shadow: inset 0 0 0 999px rgb(0 0 0 / .36); }

/* ------------------------------------------------------------------ phones: typing, and held sideways */
/* While the keyboard is up, the Chat | Reels row makes way for the conversation, and the message box grows to at most
   under a third of the screen, so the last messages stay in sight above it. */
html.kb-open body.m-ui .conv-tabs { display: none; }
body.m-ui .composer textarea { max-height: min(260px, 30dvh); }
/* Sideways (a short touch screen): Chat | Reels sit in the header row, between the title and its buttons, rather
   than taking a row of their own; the emoji picker is a sensible width with finger-sized cells. */
@media (pointer: coarse) and (max-height: 500px) {
  body.m-ui .conv-tabs {
    position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + (var(--head-h) + 4px - 36px) / 2); left: 50%; transform: translateX(-50%);
    padding: 0; gap: 4px;
  }
  body.m-ui .conv-tab { min-height: 36px; height: 36px; padding: 0 12px; }
  /* The title gives way before it reaches them. */
  body.m-ui #main-head:has(~ .conv-tabs) .head-title { max-width: calc(50% - 140px); }
  body.m-ui #main-head:has(~ .conv-tabs) .head-tools { margin-left: auto; }
  body.m-ui .emoji-picker { width: min(460px, 100vw - 24px); max-height: calc(min(var(--app-h, 100dvh), 100dvh) - 16px); }
  body.m-ui .emoji-grid { grid-template-columns: repeat(auto-fill, 44px); justify-content: space-between; flex: 1 1 auto; min-height: 0; }
}

/* ------------------------------------------------------------------ wide screens */
/* Lines of a message stop at a readable length on a wide window. */
@media (min-width: 1400px) {
  .msg-body { max-width: 90ch; }
}
.friends-search { max-width: 640px; }
/* "It's just you here": its close button in the corner, the text taking the room left beside it. */
.invite-nudge { position: relative; padding-right: 40px; }
.invite-nudge-x { position: absolute; top: 8px; right: 8px; }