/* Work > WhatsApp (whatsapp-work.js). Reuses the Mail shell classes (mail-rail, mail-list-pane,
   mail-reader, mail-item, work-folder-col) and adds only what WhatsApp needs, under wa-.
   Colours come from the design tokens, so light and dark follow the theme. */

.wa-muted { color: var(--mute); font-size: 12px; }
.wa-grow { flex: 1 1 auto; }
.wa-centered { text-align: center; padding: 24px 0; }
.wa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wa-link {
  border: 0; background: transparent; padding: 0; color: var(--accent);
  font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.wa-link:disabled { opacity: .5; cursor: not-allowed; }

/* ---- folder column */
/* overflow-x: clip, not hidden: a label wider than the column raised a horizontal scrollbar over its foot, and hidden would make the column its own vertical scroller. The clip margin keeps focus rings whole. */
.wa-folders { display: flex; flex-direction: column; gap: 2px; min-height: 100%; min-width: 0; overflow-x: clip; overflow-clip-margin: 4px; }
.wa-new {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; margin-bottom: 6px; padding: 0 12px;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer;
}
.wa-new:disabled { opacity: .5; cursor: not-allowed; }
.wa-folder { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-family: var(--ui); font-size: 13px; text-align: left; cursor: pointer; }
.wa-folder:hover { background: var(--work-rail-hover); }
.wa-folder-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-account { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px; font-family: var(--ui); }
.wa-account-dot {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--trust-green) 16%, transparent); color: var(--trust-green);
  font-size: 11px; font-weight: 700;
}
.wa-account-text { min-width: 0; }
.wa-account-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-foot {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; margin-top: auto; min-height: 36px; padding: 0 8px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--work-rail-mute);
  font-family: var(--ui); font-size: 12.5px; text-align: left; cursor: pointer;
}
.wa-foot:hover { background: var(--work-rail-hover); color: var(--work-rail-ink); }

/* ---- chat list */
.wa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; }
.wa-chip {
  height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-family: var(--ui); font-size: 12px; cursor: pointer;
}
.wa-chip.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.wa-view-title { padding: 6px 12px 0; color: var(--mute); font-family: var(--ui); font-size: 12px; font-weight: 600; }
.wa-row { align-items: flex-start; gap: 10px; }
.wa-row-main { flex: 1 1 auto; min-width: 0; }
.wa-row.is-unread .mail-item-from, .wa-row.is-unread .mail-item-preview { font-weight: 600; color: var(--ink); }
.wa-row-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wa-tag { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--mute); font-family: var(--ui); font-size: 10.5px; }
.wa-tag.is-wa { background: color-mix(in srgb, var(--trust-green) 16%, transparent); color: var(--trust-green); }
.wa-tag.is-need { background: var(--accent-soft); color: var(--accent); }
.wa-unread {
  margin-left: auto; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--trust-green); color: var(--on-accent);
  font-family: var(--ui); font-size: 11px; font-weight: 700;
}

/* ---- conversation */
.wa-reader { min-height: 0; }
/* One header row: who, then Suggest actions, Translate and a ⋯ menu for the rest. */
.wa-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.wa-head-text { flex: 1 1 auto; min-width: 0; }
.wa-head-text h2 { margin: 0; font-family: var(--ui); font-size: 15px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-head-text .wa-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.wa-suggest {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); font-family: var(--ui); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wa-suggest:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.wa-suggest:disabled { cursor: progress; opacity: .7; }
.wa-list-folded { display: none; }
.mail-shell:has(> .wa-list-folded) { grid-template-columns: var(--work-rail-w, 190px) minmax(0, 1fr) 0; }
.mail-shell.work-assist-open:has(> .wa-list-folded) { grid-template-columns: var(--work-rail-w, 190px) minmax(0, 1fr) 296px; }
.mail-shell:has(> .wa-list-folded) > .work-list-grip { display: none; }
/* Folders hidden (the Work rail's ‹): only the 52px app rail keeps the first track. */
@media (min-width: 901px) {
  .mail-shell:has(> .mail-rail.wa-folders-off) { grid-template-columns: 52px var(--work-list-w, 340px) minmax(0, 1fr) 0; }
  .mail-shell.work-assist-open:has(> .mail-rail.wa-folders-off) { grid-template-columns: 52px var(--work-list-w, 340px) minmax(0, 1fr) 296px; }
  .mail-shell:has(> .mail-rail.wa-folders-off):has(> .wa-list-folded) { grid-template-columns: 52px minmax(0, 1fr) 0; }
  .mail-shell.work-assist-open:has(> .mail-rail.wa-folders-off):has(> .wa-list-folded) { grid-template-columns: 52px minmax(0, 1fr) 296px; }
  .mail-shell:has(> .mail-rail.wa-folders-off) > .work-rail-grip { display: none; }
  .mail-shell:has(> .mail-rail.wa-folders-off) > .work-list-grip { left: calc(52px + var(--work-list-w, 340px)); }
}
.wa-advice { margin: 10px 16px 0; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-family: var(--ui); font-size: 12.5px; }
.wa-advice-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* A quiet dotted paper behind the thread, the way a chat app reads, in both themes. */
.wa-thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px clamp(14px, 4%, 56px) 16px;
  display: flex; flex-direction: column; gap: 2px; background-color: var(--surface-2);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px); background-size: 16px 16px;
}
.wa-day {
  position: sticky; top: 4px; z-index: 1; align-self: center; margin: 10px 0 4px; padding: 3px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2); font-family: var(--ui); font-size: 11px; font-weight: 600; box-shadow: 0 1px 2px var(--line-soft);
}
.wa-bubble {
  max-width: min(72%, 640px); align-self: flex-start; margin-top: 8px; padding: 7px 11px 5px;
  border: 0; border-radius: 4px 16px 16px 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 1.5px var(--line);
  font-family: var(--ui); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere;
}
/* Yours: solid, so your side of the conversation reads at a glance. */
.wa-bubble.is-out {
  align-self: flex-end; border-radius: 16px 4px 16px 16px;
  background: var(--accent); color: var(--on-accent); box-shadow: none;
}
.wa-bubble.is-out .wa-time, .wa-bubble.is-out .wa-tr-bar, .wa-bubble.is-out .wa-muted { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.wa-bubble.is-out .wa-link, .wa-bubble.is-out .wa-file-actions > a { color: var(--on-accent); text-decoration: underline; }
.wa-bubble.is-out .wa-tr { border-top-color: color-mix(in srgb, var(--on-accent) 35%, transparent); }
.wa-bubble.is-out .wa-file { color: var(--ink); }
/* A run from one person: no repeated name, a tight gap, and only the first bubble keeps its tail. */
.wa-bubble.is-cont { margin-top: 0; border-radius: 16px; }
.wa-bubble.has-media { padding: 4px 4px 5px; }
.wa-bubble.has-media > :not(.wa-media-img):not(.wa-media-wait) { margin-left: 7px; margin-right: 7px; }
/* A group run: the person's badge, then their bubbles. */
.wa-msg { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.wa-msg.is-cont { margin-top: 2px; }
.wa-msg > .wa-bubble { margin-top: 0; }
.wa-av {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, currentColor 15%, var(--surface)); font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.wa-av.is-gap { visibility: hidden; }
.wa-sender { margin-bottom: 1px; color: var(--ink-2); font-size: 12px; font-weight: 650; }
.wa-sender.is-unknown { color: var(--mute); font-weight: 500; }
/* Mixed with ink so each tint keeps contrast in light and dark themes. */
.wa-tint-0 { color: color-mix(in srgb, var(--teal) 70%, var(--ink)); } .wa-tint-1 { color: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.wa-tint-2 { color: color-mix(in srgb, var(--trust-green) 70%, var(--ink)); } .wa-tint-3 { color: color-mix(in srgb, var(--warning) 70%, var(--ink)); }
.wa-tint-4 { color: color-mix(in srgb, var(--danger) 60%, var(--ink)); } .wa-tint-5 { color: color-mix(in srgb, color-mix(in srgb, var(--teal) 50%, var(--accent)) 65%, var(--ink)); }
.wa-text { white-space: pre-wrap; }
.wa-time { margin-top: 1px; text-align: right; color: var(--mute); font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* The translation sits in the bubble; where it came from is one small line under it. */
.wa-tr { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.wa-tr:first-child, .wa-sender + .wa-tr { margin-top: 0; padding-top: 0; border-top: 0; }
.wa-tr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; color: var(--mute); font-size: 11px; }
.wa-tr-bar .wa-link { font-size: 11px; font-weight: 600; }
.wa-media-img { display: block; max-width: 100%; max-height: 360px; min-width: 120px; min-height: 80px; border-radius: 12px; background: var(--surface-2); object-fit: cover; color: transparent; }
.wa-media-wait {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 240px; max-width: 100%; height: 160px;
  border-radius: 12px; background: var(--surface-2); color: var(--mute); font-size: 12px;
}
.wa-voice { display: flex; flex-direction: column; gap: 4px; }
.wa-voice audio { max-width: 100%; }
.wa-file { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.wa-file-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-file-actions { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }

/* ---- composer: one rounded bar (attach, message, language, Send), a hint line under it */
.wa-composer { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.wa-pill {
  display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper);
}
.wa-pill:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wa-pill > .icbtn { flex: none; border-radius: 50%; }
.wa-input {
  box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: auto; min-height: 36px; max-height: 160px; margin: 0; padding: 8px 4px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; resize: none; field-sizing: content; font-size: 13.5px; line-height: 1.4; outline: none;
}
.wa-lang {
  flex: none; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 2px 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); font-family: var(--ui); font-size: 12px; font-weight: 600;
}
.wa-lang select { max-width: 130px; height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.wa-send {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-family: var(--ui); font-size: 13px; font-weight: 600; cursor: pointer;
}
.wa-send.has-label { width: auto; padding: 0 14px; border-radius: var(--r-pill); white-space: nowrap; }
.wa-send:disabled { background: var(--surface-2); color: var(--mute); cursor: default; }
.wa-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0 6px; font-size: 11.5px; }
.wa-hint .wa-link { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; }
.wa-keys { margin-left: auto; font-size: 11px; }
.wa-attached { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.wa-attached-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.wa-progress { width: 120px; max-width: 100%; }
.wa-filerow { cursor: default; align-items: flex-start; gap: 10px; }
.wa-download { display: inline-flex; align-items: center; gap: 2px; }
.wa-preview { margin: 0; }
.wa-preview-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.wa-newchat .mail-compose-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.wa-newchat textarea.mail-compose-text { width: 100%; min-height: 90px; }

/* ---- not linked */
.wa-empty { max-width: 420px; margin: 12vh auto 0; padding: 0 20px; text-align: center; color: var(--ink); font-family: var(--ui); }
.wa-empty h2 { margin: 0 0 8px; font-size: 18px; }
.wa-empty p { margin: 0 0 16px; color: var(--ink-2); font-size: 13px; line-height: 1.5; }

/* ---- keyboard focus */
.wa-new:focus-visible, .wa-folder:focus-visible, .wa-foot:focus-visible, .wa-chip:focus-visible,
.wa-link:focus-visible, .wa-row:focus-visible, .wa-lang select:focus-visible, .wa-suggest:focus-visible, .wa-send:focus-visible,
.wa-bubble button:focus-visible, .wa-bubble a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-folder:focus-visible, .wa-foot:focus-visible { outline-offset: -2px; }

/* ---- phone: same design, thumb-sized targets, the header's Suggest shrinks to its icon */
@media (max-width: 600px) {
  .wa-bubble { max-width: 84%; }
  .wa-head { gap: 4px; padding: 6px 6px 6px 4px; }
  .wa-suggest { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .wa-suggest-text { display: none; }
  .wa-thread { padding: 8px 10px 12px; }
  .wa-av { width: 24px; height: 24px; font-size: 9.5px; }
  .wa-msg { gap: 6px; }
  .wa-folder, .wa-foot { min-height: 44px; }
  .wa-chip { height: auto; min-height: 40px; padding: 0 14px; }
  .wa-link { min-height: 40px; padding: 0 6px; }
  .wa-tr-bar .wa-link { min-height: 44px; }
  .wa-composer { padding: 8px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .wa-input { font-size: 16px; }
  .wa-lang { padding-left: 8px; }
  .wa-lang { height: 44px; }
  /* 16px like the message box, so iOS does not zoom when the picker is tapped. */
  .wa-lang select { max-width: 84px; height: 44px; font-size: 16px; }
  .wa-send { width: 44px; height: 44px; }
  .wa-keys { display: none; }
}