/* ---------- Page: the conversation fills the screen, and only its message list scrolls ---------- */
body[data-view="messages"] { overflow: hidden; }
body[data-view="messages"] .cloud-app { height: var(--app-height, 100dvh); min-height: 0; }
body[data-view="messages"] .cloud-main { width: 100%; max-width: none; min-height: 0; padding: 0; }
body[data-view="messages"] .cloud-footer { display: none; }
/* Above the box being typed in, which a notice must not cover. */
body[data-view="messages"] .toasts { inset-block-end: 5rem; }

.msg-app { display: grid; grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); height: 100%; min-height: 0; }
.msg-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-inline-end: 1px solid var(--line); }
.msg-side-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .6rem; }
.msg-side-head h1 { font-size: 1.3rem; font-weight: 800; line-height: 1.4; }
.msg-boxes { margin-inline: 1rem; }
.msg-boxes button { flex: 1; min-width: 0; padding-inline: .3rem; font-size: .8rem; }
.msg-list { flex: 1; min-height: 0; padding: .6rem; overflow-y: auto; }
.msg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msg-spinner { margin: 2rem auto; }
.msg-empty, .msg-pane-empty { padding: 3rem 1.5rem; color: var(--muted); font-size: .92rem; text-align: center; }
.msg-pane-empty { margin: auto; }
.msg-more-button { display: block; margin: .6rem auto; }

.msg-side .msg-search { flex-shrink: 0; width: calc(100% - 2rem); margin: 0 1rem .6rem; }
.msg-list-title { padding: .6rem .7rem .2rem; color: var(--muted); font-size: .76rem; font-weight: 600; }
button.msg-row { width: 100%; text-align: start; }

/* ---------- Conversation rows ---------- */
.msg-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: .9rem; transition: background-color .15s; }
.msg-row:hover { background: var(--surface); }
.msg-row[aria-current="true"] { background: color-mix(in oklab, var(--brand-2) 22%, var(--ink-2)); }
.msg-row-main { display: grid; flex: 1; gap: .1rem; min-width: 0; }
.msg-row-top, .msg-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.msg-row-top strong { min-width: 0; overflow: hidden; font-size: .93rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.msg-row-top time { flex-shrink: 0; color: var(--muted); font-size: .72rem; }
.msg-row-preview { min-width: 0; overflow: hidden; color: var(--muted); font-size: .82rem; line-height: 1.7; text-overflow: ellipsis; white-space: nowrap; }
.has-unread .msg-row-preview { color: var(--fg); }
.msg-count {
  flex-shrink: 0;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: 1rem;
  background: var(--brand);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35rem;
  text-align: center;
}

.msg-boxes .msg-count { display: inline-block; margin-inline-start: .25rem; min-width: 1.1rem; padding: 0 .2rem; line-height: 1.1rem; font-size: .66rem; }
.nav-badge { display: inline-block; margin-inline-start: .3rem; min-width: 1.15rem; font-size: .68rem; line-height: 1.15rem; }

.msg-avatar { display: grid; flex-shrink: 0; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff; font-weight: 700; }
.msg-avatar svg { width: 1.25rem; height: 1.25rem; }
.msg-avatar { position: relative; overflow: hidden; }
.msg-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink-2); }
.msg-mini { display: inline-block; width: 1.35rem; height: 1.35rem; margin-inline-end: .4rem; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--ink-2); }
.msg-avatar-0 { background: #4f46e5; }
.msg-avatar-1 { background: #0e7490; }
.msg-avatar-2 { background: #9333ea; }
.msg-avatar-3 { background: #be185d; }
.msg-avatar-4 { background: #15803d; }
.msg-avatar-5 { background: #b45309; }

/* ---------- Conversation head ---------- */
.msg-head { display: flex; flex-shrink: 0; align-items: center; gap: .7rem; min-height: 3.75rem; padding: .55rem 1rem; border-block-end: 1px solid var(--line); background: var(--ink-2); }
.msg-head-main { flex: 1; min-width: 0; }
.msg-head-main strong { display: block; overflow: hidden; font-weight: 700; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.msg-head-main small { display: block; overflow: hidden; color: var(--muted); font-size: .76rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.msg-back { display: none; }

/* ---------- Messages ---------- */
.msg-scroll { flex: 1; min-height: 0; padding: 1rem clamp(.75rem, 3vw, 2rem); overflow-x: clip; overflow-y: auto; }
.msg-items { display: flex; flex-direction: column; gap: .45rem; max-width: 52rem; margin-inline: auto; }
.msg-item { display: flex; align-items: center; gap: .25rem; max-width: 100%; }
.msg-item.is-mine { justify-content: flex-start; }
.msg-item:not(.is-mine) { justify-content: flex-end; }
.msg-bubble {
  display: grid;
  gap: .25rem;
  min-width: 0;
  max-width: min(80%, 36rem);
  padding: .5rem .8rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}
.is-mine .msg-bubble { border-color: color-mix(in oklab, var(--brand-2) 50%, var(--line)); background: color-mix(in oklab, var(--brand-2) 26%, var(--ink-2)); }
.is-pending .msg-bubble { opacity: .75; }
.msg-sender { color: var(--brand); font-size: .8rem; font-weight: 600; line-height: 1.6; }
.msg-text { font-size: .94rem; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-text a { color: var(--brand); text-decoration: underline; }
.msg-gone { color: var(--muted); font-style: italic; }
.msg-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.msg-tick svg { display: block; width: 1rem; height: 1rem; }
.msg-tick:has(path + path) { color: var(--brand); }
.msg-failed { color: #fca5a5; }
.msg-event, .msg-day { color: var(--muted); font-size: .76rem; line-height: 1.7; text-align: center; }
.msg-event { align-self: center; max-width: 90%; padding: .1rem .8rem; border-radius: 1rem; background: var(--surface); }
.msg-day { margin-block: .5rem; }
.msg-day span { padding: .1rem .7rem; border-radius: 1rem; background: var(--ink-2); }

.msg-menu-button { display: grid; flex-shrink: 0; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--muted); opacity: 0; transition: opacity .15s, color .15s; }
.msg-menu-button svg { width: 1rem; height: 1rem; }
.msg-menu-button:hover, .msg-menu-button:focus-visible { color: var(--fg); }
.msg-item:hover .msg-menu-button, .msg-menu-button:focus-visible { opacity: 1; }
.msg-item:not(.is-mine) .msg-menu-button { order: -1; }
.msg-quote { display: grid; min-width: 0; padding: .25rem .6rem; border-inline-start: 3px solid var(--brand); border-radius: .4rem; background: rgb(255 255 255 / .05); font-size: .78rem; line-height: 1.6; text-align: start; }
.msg-quote strong { color: var(--brand); font-weight: 600; }
.msg-quote span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.msg-item.is-found .msg-bubble { outline: 2px solid var(--brand); outline-offset: 2px; }
.msg-reply { display: flex; align-items: center; gap: .6rem; max-width: 52rem; width: 100%; margin-inline: auto; padding-inline-start: .7rem; border-inline-start: 3px solid var(--brand); }
.msg-reply-text { display: grid; flex: 1; min-width: 0; font-size: .8rem; line-height: 1.6; }
.msg-reply-text strong { color: var(--brand); font-weight: 600; }
.msg-reply-text span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.msg-members { max-height: 14rem; overflow-y: auto; }
.msg-members .pill { display: inline-block; margin-inline-start: .35rem; padding: 0 .55rem; border-radius: 1rem; font-size: .72rem; line-height: 1.7; }

/* ---------- Files ---------- */
.msg-files { display: grid; gap: .3rem; }
.msg-file { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: .7rem; background: rgb(255 255 255 / .03); transition: border-color .2s; }
.msg-file:hover { border-color: var(--brand); }
.msg-file svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--brand); }
.msg-file-main { display: grid; min-width: 0; line-height: 1.5; }
.msg-file-main strong { overflow-wrap: anywhere; font-size: .84rem; font-weight: 600; }
.msg-file-main small { color: var(--muted); font-size: .72rem; }
.msg-chips { display: grid; gap: .35rem; max-width: 52rem; width: 100%; max-height: 9rem; margin-inline: auto; overflow-y: auto; }
.msg-chip { display: flex; align-items: center; gap: .55rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: .7rem; }
.msg-chip-main { display: grid; flex: 1; min-width: 0; line-height: 1.5; }
.msg-chip-main strong { overflow: hidden; font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.msg-chip-main small { color: var(--muted); font-size: .72rem; }
.msg-chip-main progress { width: 100%; height: .3rem; accent-color: var(--brand); }
.msg-attach, .msg-record-start { flex-shrink: 0; }
.msg-files { min-width: 0; max-width: 100%; }
.msg-voice { display: flex; align-items: center; gap: .5rem; width: min(16rem, 100%); min-width: 0; max-width: 100%; }
.msg-voice audio { display: none; }
.msg-voice-play { display: grid; flex-shrink: 0; place-items: center; width: 2.15rem; height: 2.15rem; border: 0; border-radius: 50%; background: var(--brand); color: var(--ink); }
.msg-voice-play svg { width: .9rem; height: .9rem; }
.msg-voice-track { position: relative; flex: 1; min-width: 2.5rem; height: .4rem; border-radius: 1rem; background: rgb(255 255 255 / .16); cursor: pointer; }
.msg-voice-fill { position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: 0; border-radius: inherit; background: var(--brand); }
.msg-voice-time { flex-shrink: 0; min-width: 2.2rem; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; text-align: end; }
.msg-clip { display: block; width: 100%; max-width: 16rem; max-height: 14rem; height: auto; border-radius: .7rem; background: #000; }
.msg-record { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; min-width: 0; margin-inline: auto; }
.msg-record-preview { width: 6.5rem; max-width: 38%; height: 4.8rem; border-radius: .7rem; background: #000; object-fit: cover; }
.msg-record-time { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.msg-record .btn { flex-shrink: 0; }
.msg-composer.is-recording .msg-composer-row { display: none; }

/* Mail reads as one full-width letter after another rather than as speech. */
.msg-item.is-mail { justify-content: stretch; }
.is-mail .msg-bubble { flex: 1; max-width: 100%; padding: .85rem 1.1rem; border-radius: var(--radius); }
.is-mail.is-mine .msg-bubble { border-color: var(--line); background: var(--surface); }
.is-mail .msg-sender { font-size: .88rem; }

/* ---------- Composer ---------- */
.msg-composer { display: grid; flex-shrink: 0; gap: .45rem; max-width: 100%; min-width: 0; padding: .6rem clamp(.5rem, 3vw, 2rem); border-block-start: 1px solid var(--line); background: var(--ink-2); }
.msg-composer-row { display: flex; align-items: flex-end; gap: .35rem; max-width: 52rem; width: 100%; min-width: 0; margin-inline: auto; }
.msg-composer .icon-button { width: 2.15rem; height: 2.15rem; flex-shrink: 0; }
.msg-composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 10rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--ink);
  color: var(--fg);
  font: inherit;
  font-size: .94rem;
  line-height: 1.6;
  resize: none;
  transition: border-color .2s;
}
.msg-composer textarea:focus { border-color: var(--brand); outline: none; }
.msg-send { flex-shrink: 0; border-color: transparent; background: var(--brand); color: var(--ink); }
.msg-send:hover { color: var(--ink); opacity: .9; }
.msg-closed { padding: .9rem 1rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: .86rem; text-align: center; }

/* ---------- Dialogs ---------- */
.msg-menu-list { display: grid; gap: .45rem; max-height: 55dvh; overflow-y: auto; }
.msg-people { max-height: 13rem; }
.msg-filter { width: 100%; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--ink); color: var(--fg); font: inherit; font-size: .86rem; }
.msg-filter:focus { border-color: var(--brand); outline: none; }
.field textarea { width: 100%; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--ink); color: var(--fg); font: inherit; line-height: 1.7; resize: vertical; transition: border-color .2s; }
.field textarea:focus { border-color: var(--brand); outline: none; }

/* ---------- Phones: one screen at a time ---------- */
@media (max-width: 40rem) {
  .msg-app { grid-template-columns: minmax(0, 1fr); }
  .msg-side { border-inline-end: 0; padding-block-end: 3.5rem; }
  .msg-pane { display: none; }
  body[data-msg-open] .msg-side { display: none; }
  body[data-msg-open] .msg-pane { display: flex; }
  /* An open conversation takes the whole screen, as the header and tab bar would squeeze it above a keyboard. */
  body[data-msg-open] .cloud-header { display: none; }
  .msg-back { display: grid; flex-shrink: 0; }
  .cloud-nav button { position: relative; }
  .nav-badge { position: absolute; inset-block-start: 0; inset-inline-start: 50%; margin-inline-start: .35rem; }
  .msg-bubble { max-width: min(88%, 100%); }
  .msg-composer .icon-button { width: 2rem; height: 2rem; }
}

@media (pointer: coarse) {
  .msg-composer textarea, .field textarea, .msg-filter { font-size: 1rem; }
  /* Nothing hovers on a touch screen, so the button stays visible at a size a finger can hit. */
  .msg-menu-button { width: 2.25rem; height: 2.25rem; opacity: .7; }
  .msg-boxes button { min-height: 2.5rem; }
}