/* Shared "docked list sidebar + detail pane" module shell.

   Originally built only for Voicemail's master-detail rebuild (hence the
   vm- prefix) - Messaging and Contacts now reuse these same classes
   directly in their own markup instead of each maintaining a hand-copied
   parallel implementation of the same position:fixed-sidebar mechanism.
   One shared implementation means a future fix/tweak here (like the
   right-side phone dialer's own #sp-sidebar-shell in softphone.css,
   which this deliberately mirrors) applies to all three pages at once
   instead of needing to be repeated three times and risking drift.

   This file owns ONLY the shell/workspace/pane structure and its
   responsive breakpoints - each page's own <style> block still owns
   everything content-specific (list row rendering, detail content,
   toolbars, avatars, etc). */

/* flex:1 1 auto + min-height:0 below are no-ops unless #vtn-container
   itself is a flex column bounding the height above them - it's normally
   a plain block (sized to fit its content, not the viewport), so this
   forces it into a flex column whenever any of the three pages using
   this shell is what's rendered. Was previously only declared inside
   Messaging's own <style> block, scoped to .sms-shell specifically -
   Voicemail and Contacts never got it, which didn't matter at >=1200px
   (.vm-list-pane goes position:fixed there, sidestepping this entirely -
   see below) but left their <=760px single-pane list genuinely unbounded
   height, unable to scroll internally at all (the whole shell just grew
   to fit every row instead). Generalized to .vm-shell (the class all
   three pages share) and moved here so every page using this file gets
   it, not just whichever page happened to declare it first. */
#vtn-container:has(.vm-shell) { display: flex; flex-direction: column; }
/* #vtn-container being a flex column only bounds the height of its own
   DIRECT child - each page's own .container div (.sms-page-container/
   .call-page-container/.contacts-page-container - Voicemail's happens to
   share the "call" name with Call Log's own page, unrelated pages that
   just never got distinctly named). Without this, that div is an
   ordinary block sized to fit ITS content, same problem one level down:
   #vtn-container being flex is a no-op if nothing tells this div to
   actually participate in that flex column instead of just sizing to
   fit .vm-page-wrap. Messaging's own page-container already had this
   (declared directly on .sms-page-container, alongside its width/margin
   reset) - generalized here the same way as the rule above, so Voicemail
   and Contacts get it from the same one place instead of needing their
   own copy. */
.container:has(.vm-page-wrap) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* flex:1 1 auto + min-height:0, and display:flex below, are what lets
   the bounded height above flow all the way down to each pane's own
   internal scroll area (e.g. Messaging's #sms-thread) instead of the
   pane growing to fit all its content and pushing what's below it (like
   the message compose box) far off screen. */
.vm-page-wrap {
	width: 100%; max-width: 1760px; margin: 0 auto; box-sizing: border-box;
	flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}

.vm-shell {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	width: 100%; background: var(--bg-surface); border: 1px solid var(--border);
	border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px var(--shadow-card);
	min-height: 320px; flex: 1 1 auto; display: flex; flex-direction: column;
}

/* align-items:stretch (the default - no override here) so
   .vm-list-pane/.vm-detail-pane stretch to match whatever height
   .vm-workspace itself has, which in turn only has a bounded height
   when .vm-shell above it does (see above). flex:1 1 auto + min-height:0
   let it fill whatever's left in .vm-shell after any sibling rows
   (Voicemail's .vm-header/.vm-pager) take their own natural height. */
.vm-workspace { flex: 1 1 auto; min-height: 0; display: flex; }

.vm-list-pane {
	width: 320px; flex-shrink: 0; min-height: 0; background: var(--bg-surface-alt); border-right: 1px solid var(--border); box-sizing: border-box;
}

/* overflow-y:auto matters most for Voicemail: its .vm-detail-pane holds
   the transcript directly with no inner scroll wrapper of its own (a
   long transcript's real height can exceed the pane easily - see the
   live repro: 849px of content in a 693px pane), so without this the
   overflow just spilled past the bottom, uncontained and unscrollable,
   instead of the pane scrolling internally the way .vm-list/
   .contacts-list already do. Contacts' own detail pane already wraps
   its content in .contacts-detail-body with its own overflow-y:auto,
   so this is redundant nesting there rather than a second scroll
   container fighting the first - harmless either way. */
.vm-detail-pane { flex: 1; min-width: 0; min-height: 0; box-sizing: border-box; position: relative; overflow-y: auto; }

/* Tighter two-pane before dropping to single-pane entirely - keeps both
   panes usable a while longer (e.g. a normal desktop with the docked
   dialer open) instead of collapsing as soon as things get snug. Only
   relevant below 1200px - above that .vm-list-pane becomes the fixed
   sidebar in the next block instead of a flex child. */
@media (max-width: 1180px) {
	.vm-list-pane { width: 340px; }
}

/* True docked sidebar, same mechanism as the phone dialer's
   #sp-sidebar-shell (softphone.css) - position:fixed, left edge instead
   of right, same top:118px (below the app's topbar+nav). .vm-page-wrap
   gets a matching padding-left so the shell starts right where the
   sidebar ends, instead of rendering underneath it. */
@media (min-width: 1200px) {
	.vm-page-wrap { padding-left: 320px; }
	.vm-list-pane {
		position: fixed; left: 0; top: 118px; bottom: 0; width: 320px;
		overflow-y: auto; z-index: 200;
	}
}

/* Below this, a side-by-side layout no longer has room to be useful -
   switch to single-pane list/detail navigation. .vm-detail-active (set
   by each page's own JS when an item is opened) picks which one shows. */
@media (max-width: 760px) {
	.vm-list-pane { width: 100%; border-right: none; }
	.vm-detail-pane { width: 100%; }
	.vm-workspace:not(.vm-detail-active) .vm-detail-pane { display: none; }
	.vm-workspace.vm-detail-active .vm-list-pane { display: none; }

	/* Below this width the shell should read as the whole screen, not a
	   card floating on top of it - header.tpl's own .container rule
	   (padding: 24px 32px 0 32px) is meant for pages that actually want a
	   centered/boxed page, and normally a page opts out just by declaring
	   its own padding (see e.g. .sms-page-container) - but that override
	   only ever zeroed the side MARGIN, not this padding, so the 32px
	   side gutters plus .vm-shell's own border/radius/shadow still drew a
	   visibly boxed card, worst on a narrow phone where 64px of total
	   padding is a meaningful chunk of the screen. :has() lets this live
	   here once for all three pages (Voicemail/Messaging/Contacts) that
	   nest .vm-page-wrap in their own container div, instead of each page
	   needing its own copy of the same override. */
	.container:has(.vm-page-wrap) { padding: 0 !important; }
	.vm-shell { border: none; border-radius: 0; box-shadow: none; }
}