/* Mesaje (plan 6). Values from the approved mockup (36-step6-mesaje-v4,
   admin-a.css INBOX / contact tiles / filter bar), names prefixed msj-. */

/* Filter bar */
.msj-fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.msj-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--faint); width: 260px; }
.msj-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: 13px; color: var(--fg); outline: none; }
.msj-search input::placeholder { color: var(--faint); }
.msj-search input::-webkit-search-cancel-button { cursor: pointer; }
.msj-search:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--accent-ring); }
.msj-search--on { background: var(--accent-soft); color: var(--accent); }
.msj-seg--on .seg button.on { color: var(--accent); }
.msj-ddw { position: relative; }
.msj-dd { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border: 0; border-radius: var(--r-pill); background: #fff; font-size: 13px; color: var(--fg); white-space: nowrap; }
.msj-dd i { font-style: normal; color: var(--muted); }
.msj-dd--on { background: var(--accent-soft); color: var(--accent); }
.msj-dd--on i { color: var(--accent); }
.msj-chev { width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.msj-dd--on .msj-chev { border-color: var(--accent); }
.msj-menu { position: absolute; top: 42px; left: 0; z-index: 10; min-width: 210px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .05), 0 16px 32px -12px rgba(15, 23, 42, .22); }
.msj-fbar .sp + .msj-ddw .msj-menu { left: auto; right: 0; }
/* the second group: on one line with the search on a wide screen, its own row below that */
.msj-fb2 { display: contents; }
.msj-menu button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); text-align: left; white-space: nowrap; }
.msj-menu button:hover { background: var(--canvas); }
.msj-menu button.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.msj-menu button span { color: var(--muted); font-weight: 400; }
.msj-clear { font-size: 12.5px; padding: 0 6px; }

/* Inbox: list + reading pane */
.msj-inbox { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.msj-list { padding: 8px; margin-bottom: 0; }
.msj-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 6px 2px; color: var(--muted); font-size: 12.5px; }
.msj-row { display: block; padding: 12px 14px; border-radius: 14px; }
.msj-row + .msj-row { margin-top: 2px; }
.msj-row:hover { background: #fafafc; }
.msj-top { display: flex; justify-content: space-between; gap: 10px; }
.msj-top b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-t { color: var(--muted); font-size: 12px; white-space: nowrap; }
.msj-tp { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.msj-pv { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msj-row--unread, .msj-row--unread:hover { background: #f6f6fd; }
.msj-row--unread b { font-weight: 650; color: var(--fg); }
.msj-row--unread .msj-pv { color: var(--fg); }
.msj-row--on, .msj-row--on:hover { background: var(--accent-soft); }
.msj-row--on b { color: var(--accent); }
.msj-foot { color: var(--muted); font-size: 12px; text-align: center; padding: 10px; }
.msj-pane { position: sticky; top: 10px; min-width: 0; }
.msj-pane .pnl { margin-bottom: 0; }

/* Reading pane */
.msj-reader { padding: 24px 26px; }
.msj-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.msj-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; min-width: 0; overflow-wrap: anywhere; }
.msj-tag { font-size: 12px; font-weight: 500; background: var(--canvas); color: var(--fg); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.msj-tiles { display: grid; grid-template-columns: 1.25fr 1.15fr .8fr; gap: 10px; margin-top: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.msj-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: #f6f6f9; }
.msj-lb { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.msj-lb svg.ico { width: 14px; height: 14px; }
.msj-vl { font-weight: 500; font-size: 14px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-vl--none { color: var(--muted); font-weight: 400; }
.msj-sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; letter-spacing: 0; margin-top: 6px; }
.msj-ac { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.msj-ac .abtn { padding: 0 10px; white-space: nowrap; }
.msj-body { padding: 20px 0; font-size: 14.5px; line-height: 1.7; max-width: 640px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msj-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.msj-ask { flex: 1 1 260px; min-width: 0; font-weight: 500; }
.msj-act .pill { flex: none; }
.msj-askw { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }

/* Decision 33b, desktop: Mesaje fills the screen and the page itself does
   not scroll. The list scrolls inside its own panel, the pager and the note
   stay under it, and the reading pane stays in view (scrolling on its own
   when a message is long). Below 560px of height the page scrolls again. */
@media (min-width: 900px) {
  .shell:has(.msj) .canvas { display: flex; flex-direction: column; height: calc(100vh - 22px); height: calc(100dvh - 22px); min-height: 560px; }
  .shell:has(.msj) .page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .msj { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .msj-inbox { flex: 1; min-height: 0; align-items: stretch; }
  .msj-list { display: flex; flex-direction: column; min-height: 0; }
  /* relative: holds the rows' sr-only text; 4px padding: room for the rows'
     focus ring (2px outline, 2px offset), which the scrolling box would clip */
  .msj-list { padding: 4px; }
  .msj-rows { position: relative; flex: 1; min-height: 0; padding: 4px; overflow-y: auto; overscroll-behavior: none; }
  .msj-pane { position: static; min-height: 0; overflow-y: auto; overscroll-behavior: none; }
}

/* Decision 35 (72-inbox-narrow, option A), 900 to 1299px: two panes stay;
   the filter bar is two rows (search and Toate / Necitite, then Tip,
   Perioadă and Sortează) and the contact tiles become rows: label, value
   with an ellipsis, the buttons on the right. */
@media (min-width: 900px) and (max-width: 1299.98px) {
  .msj-inbox { grid-template-columns: 300px minmax(0, 1fr); gap: 14px; }
  .msj-search { flex: 1 1 220px; width: auto; }
  .msj-fb2 { display: flex; align-items: center; gap: 8px; width: 100%; }
  .msj-tiles { grid-template-columns: 1fr; gap: 8px; }
  .msj-tile { flex-direction: row; align-items: center; gap: 12px; }
  .msj-lb { flex: none; width: 70px; }
  .msj-sub { margin-top: 2px; }
  .msj-vl { flex: 1; min-width: 0; }
  .msj-ac { display: flex; flex: none; gap: 6px; margin-top: 0; }
  .msj-ac .abtn { height: 40px; padding: 0 12px; font-size: 13.5px; gap: 7px; }
}

/* Phone (decision 24): the list, or the open message full screen with the
   tiles stacked, full-width buttons, Marchează necitit and Șterge in the
   bottom bar. The top bar leads back to the list (decision 31). */
@media (max-width: 899.98px) {
  .msj-inbox { grid-template-columns: 1fr; }
  .msj--open .msj-fbar, .msj--open .msj-list { display: none; }
  .msj:not(.msj--open) .msj-pane { display: none; }
  .msj--open .ph { display: none; }
  .msj-search { width: 100%; }
  .msj-fb2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
  .msj-reader { padding: 16px; }
  .msj-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .msj-tiles { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
  .msj-tile { padding: 10px 12px; }
  .msj-act.pbar { padding-top: 12px; gap: 8px; border-top: 0; }
  .msj-act .sp { display: none; }
  .msj-act.pbar > .pill, .msj-askw .pill { flex: 1; justify-content: center; height: 44px; border-radius: 12px; font-size: 14px; }
  .msj-askw .msj-ask { flex-basis: 100%; }
}