/* =============================================================================
   mh-teams.css  -  Teams chat, "Editorial" re-skin (KICKOFF 02 · P1).
   Re-skinned IN PLACE on the existing .tm-* scaffold (one source of truth; the
   MHchat JS hooks and every wiring path are preserved). Ported from DESIGN's
   Editorial direction (team/dir3 + chat). All colour comes from the shared --mh-*
   theme tokens, so light + dark follow body.dark automatically. The mock's
   slate-teal accent is single-sourced to the brand pine --mh-green (outgoing
   bubble, send button, primary CTAs). Plain hyphens only.
   ========================================================================== */

.tm-page { display:flex; gap:16px; height:calc(calc(100 * var(--mh-vh)) - 124px); min-height:520px; min-width:0; }

/* ---- sidebar (Editorial .side) ---- */
.tm-page .tm-list { width:360px; flex:none; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-lhead { padding:20px 20px 16px; border-bottom:1px solid var(--mh-line-cool); }

/* user header (.me) + read-only status display (write wiring is P2) */
.tm-page .tm-me { display:flex; align-items:center; gap:13px; }
.tm-page .tm-me-av { width:50px; height:50px; font-size:17px; font-family:var(--mh-font-head); flex:none; }
.tm-page .tm-me-info { flex:1; min-width:0; }
.tm-page .tm-me-nm { font-family:var(--mh-font-head); font-size:21px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.015em; line-height:1.08; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-me-statuswrap { position:relative; margin-top:6px; }
.tm-page .tm-me-status { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600; color:var(--mh-slate); padding:5px 10px 5px 9px; border-radius:20px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); cursor:pointer; transition:.14s; }
.tm-page .tm-me-status:hover, .tm-page .tm-me-status.open { border-color:var(--mh-green); color:var(--mh-ink); }
.tm-page .tm-me-status .dot { width:9px; height:9px; border-radius:50%; flex:none; background:#8A8B83; }
.tm-page .tm-me-status .chev { display:grid; place-items:center; color:var(--mh-muted); transition:transform .18s; }
.tm-page .tm-me-status.open .chev { transform:rotate(180deg); }
.tm-page .tm-me-status .chev svg { width:14px; height:14px; }
/* status dropdown menu */
.tm-page .tm-me-menu { position:absolute; top:calc(100% + 7px); left:0; z-index:30; width:214px; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:14px; box-shadow:var(--mh-shadow,0 8px 24px rgba(52,69,77,.10)); padding:6px; }
.tm-page .tm-mi { display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:none; background:none; border-radius:10px; font:inherit; font-size:14px; font-weight:600; color:var(--mh-ink); text-align:left; cursor:pointer; transition:background .12s; }
.tm-page .tm-mi:hover, .tm-page .tm-mi.on { background:var(--mh-cream-2); }
.tm-page .tm-mi .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.tm-page .tm-mi .lab { flex:1; }
.tm-page .tm-mi .ck { color:var(--mh-green-d); display:grid; place-items:center; }
.tm-page .tm-mi .ck svg { width:15px; height:15px; }
.tm-page .tm-statusback { position:fixed; inset:0; z-index:20; border:none; background:transparent; cursor:default; }
/* SECOND-PASS FIX: the status note is a LIGHT TEXT affordance (Slack-style), NOT a
   second bordered pill - so it never reads as a duplicate of the search field below.
   ONLY the search keeps the bordered pill spec. */
.tm-page .tm-searchrow .tm-search { height:44px; border-radius:22px; padding:0 14px; }

.tm-page .tm-me-statusbar { margin-top:12px; }
/* KICKOFF 08 B - "Set a status" / status-show are now the BIG full-width button,
   the SAME size as the search pill below (44px / radius 22) so they stack cleanly. */
.tm-page .tm-me-statusadd,
.tm-page .tm-me-statusshow { display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 16px; border:1px solid var(--mh-line-cool); border-radius:22px; background:var(--mh-cream-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .14s, background .14s, color .14s; }
.tm-page .tm-me-statusadd { color:var(--mh-slate); }
.tm-page .tm-me-statusadd:hover { border-color:var(--mh-green); color:var(--mh-green-d); }
.tm-page .tm-me-statusadd svg { width:16px; height:16px; flex:none; }
.tm-page .tm-me-statusshow:hover { border-color:var(--mh-green); }
.tm-page .tm-me-statusshow .si { color:#D89B3D; flex:none; display:grid; place-items:center; }
.tm-page .tm-me-statusshow .si svg { width:16px; height:16px; }
.tm-page .tm-me-statusshow .txt { flex:1; min-width:0; font-size:13px; color:var(--mh-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-me-statusshow .pen { color:var(--mh-muted); flex:none; display:grid; place-items:center; opacity:0; transition:opacity .14s; }
.tm-page .tm-me-statusshow:hover .pen { opacity:1; }
.tm-page .tm-me-statusshow .pen svg { width:13px; height:13px; }
/* KICKOFF 08 - editing matches the Set-a-status button + search size (44px / radius 22)
   so the stack stays uniform; single box via :focus-within only. */
.tm-page .tm-me-statusedit { display:flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:22px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); transition:border-color .14s, box-shadow .14s; }
.tm-page .tm-me-statusedit:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-me-statusedit .si { color:#D89B3D; flex:none; display:grid; place-items:center; }
.tm-page .tm-me-statusedit .si svg { width:16px; height:16px; }
.tm-page .tm-me-statusedit input { flex:1; min-width:0; border:none; outline:none; background:none; font:inherit; font-size:13.5px; color:var(--mh-ink); font-weight:600; }
.tm-page .tm-me-statusedit input::placeholder { color:var(--mh-muted); font-weight:500; }
/* KICKOFF 08 E - the New Group button moved to the header row, so the search is now
   FULL-WIDTH, the same size as the Set-a-status button above it. */
.tm-page .tm-searchrow { margin-top:10px; }
.tm-page .tm-searchrow .tm-search { width:100%; margin-top:0; }
/* KICKOFF 08 D - New Group button now lives in the header top row (in .tm-me),
   right-aligned across from the avatar; pushed right by .tm-me-info's flex:1. */
.tm-page .tm-me .tm-newgroup { flex:none; align-self:center; }
.tm-page .tm-newgroup { width:42px; height:42px; border:none; border-radius:50%; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 12px rgba(78,124,114,.26); transition:.14s; }
.tm-page .tm-newgroup:hover { filter:brightness(1.07); }
.tm-page .tm-newgroup svg { width:19px; height:19px; }

/* pill search (.s-search) - min-width:0 lets it shrink so the placeholder never pushes under the + button */
.tm-page .tm-search { display:flex; align-items:center; gap:8px; margin-top:12px; min-width:0; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:22px; padding:0 14px; height:44px; transition:.14s; }
.tm-page .tm-search:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-search svg { width:17px; height:17px; color:var(--mh-muted); flex:none; }
.tm-page .tm-search input { flex:1; min-width:0; border:none; background:none; outline:none; font:inherit; font-size:14px; color:var(--mh-ink); text-overflow:ellipsis; }

.tm-page .tm-scroll { flex:1; overflow-y:auto; padding:14px 14px 16px; }
/* clean small-caps section label, no awkward partial divider */
.tm-page .tm-seclbl { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mh-muted); margin:16px 8px 9px; }
.tm-page .tm-scroll > .tm-seclbl:first-child { margin-top:6px; }

/* conversation card (.card) */
.tm-page .tm-row { display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:18px; margin-bottom:6px; cursor:pointer; transition:.16s; border:1.5px solid transparent; background:none; width:100%; text-align:left; position:relative; }
.tm-page .tm-row:hover { background:var(--mh-surface); border-color:var(--mh-line-cool); box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-row.on { background:var(--mh-cream-2); border-color:var(--mh-green); box-shadow:none; }
.tm-page .tm-av { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex:none; position:relative; background-size:cover; background-position:center; }
.tm-page .tm-av .tm-dot { position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--mh-surface); background:#8A8B83; }
.tm-page .tm-dot.av { background:#3FA372; }
.tm-page .tm-dot.na { background:#8A8B83; }
.tm-page .tm-meta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.tm-page .tm-nm { font-size:15px; font-weight:700; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-st { font-size:12.5px; color:var(--mh-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Online presence = the green avatar dot only; the green "Active now" text was removed
   (enterprise standard). Offline keeps a muted text label. */
.tm-page .tm-st .stxt.na { color:var(--mh-muted); }
.tm-page .tm-rowend { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; flex:none; min-width:34px; }
.tm-page .tm-rowtime { font-size:11.5px; color:var(--mh-muted); font-variant-numeric:tabular-nums; line-height:1; }
.tm-page .tm-badge { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--mh-clay,#C97B5A); color:#fff; font-size:11.5px; font-weight:800; display:grid; place-items:center; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 2px 6px rgba(201,123,90,.30); }
.tm-page .tm-roster-empty { padding:24px 14px; color:var(--mh-muted); font-size:13px; text-align:center; }

/* group avatar - real colored disc + glyph (kept; restyled Editorial) */
.tm-page .tm-gav { width:48px; height:48px; border-radius:15px; flex:none; display:grid; place-items:center; color:#fff; }
.tm-page .tm-gav svg { width:22px; height:22px; }
.tm-page .tm-gav.lg { width:46px; height:46px; }

/* avatar size variants */
.tm-page .tm-av.sm { width:38px; height:38px; font-size:13px; }
.tm-page .tm-av.xs { width:30px; height:30px; font-size:11px; }

/* ---- chat panel (.chat) ---- */
.tm-page .tm-chat { flex:1; min-width:0; position:relative; background:var(--mh-cream); border:1px solid var(--mh-line-cool); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-chead { flex:none; display:flex; align-items:center; gap:14px; padding:16px 24px; border-bottom:1px solid var(--mh-line-cool); background:var(--mh-surface); }
.tm-page .tm-chead .tm-av { width:46px; height:46px; }
.tm-page .tm-chmeta { flex:1; min-width:0; }
.tm-page .tm-chead .tm-nm { font-family:var(--mh-font-head); font-size:19px; }
.tm-page .tm-chead .tm-cstatus { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; margin-top:2px; color:var(--mh-green-d); }
/* Chosen-status dot (colour from lkp_PresenceStatus) + the offline muted state. */
.tm-page .tm-chead .tm-cstatus .dot { flex:none; width:8px; height:8px; border-radius:50%; }
.tm-page .tm-chead .tm-cstatus.na { color:var(--mh-muted); }
/* Status note (StatusMessage) below the name, e.g. "Test Account". */
.tm-page .tm-chead .tm-cnote { font-size:12px; font-style:italic; color:var(--mh-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-chacts { display:flex; align-items:center; gap:8px; flex:none; }

/* message scroll (.ch-scroll) + day separators */
.tm-page .tm-msgs { flex:1; overflow-y:auto; padding:24px 28px 14px; display:flex; flex-direction:column; gap:14px; background:var(--mh-cream); }
.tm-page .tm-daysep { align-self:center; font-size:11px; font-weight:700; color:var(--mh-muted); background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:999px; padding:4px 13px; margin:2px 0; }

/* bubbles (.bub) - outgoing single-sourced to brand pine --mh-green */
/* DYNAMIC (Messenger/Teams): the bubble sizes to its CONTENT (fit-content) up to the
   wrapper max-width; text wraps at WORD boundaries only (overflow-wrap breaks only a
   single word too long to fit; word-break:normal so nothing splits mid-character). */
.tm-page .tm-msg { width:fit-content; max-width:100%; padding:11px 15px; border-radius:18px; font-size:14.5px; line-height:1.45; position:relative; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; }
.tm-page .tm-msg .tm-time { display:block; font-size:11px; margin-top:4px; opacity:.62; }
.tm-page .tm-msg.them { align-self:flex-start; background:var(--mh-surface); border:1.5px solid var(--mh-line-cool); color:var(--mh-ink); border-bottom-left-radius:6px; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-msg.me { align-self:flex-end; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); border:1.5px solid var(--mh-green-d); color:#F4F8F6; border-bottom-right-radius:6px; box-shadow:0 6px 16px rgba(78,124,114,.24); }

/* composer (.composewrap + .compose) - rounded pill, our emoji button */
/* KICKOFF 08 follow-up - shorter composer + emoji/send vertically centered with the
   textarea (was align-items:flex-end + a tall 60px textarea that made the box bulky). */
.tm-page .tm-compose { flex:none; display:flex; align-items:center; gap:8px; margin:14px 20px 18px; padding:5px; background:var(--mh-surface); border:1.5px solid var(--mh-line-cool); border-radius:26px; transition:border-color .14s, box-shadow .14s; }
/* KICKOFF 08 A - single subtle ring on the wrapper only (was the thick .45 ring). */
.tm-page .tm-compose:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-compose textarea { flex:1; resize:none; border:none; background:none; padding:8px 10px; font:inherit; font-size:15px; line-height:1.35; color:var(--mh-ink); outline:none; max-height:120px; min-height:24px; }
/* KICKOFF 08 A - composer textarea draws NO box of its own (same single-box reset as
   KICKOFF 07): out-specifies the global .mh-app control base + its :focus ring so the
   wrapper is the only box. Padding stays via the rule above. */
.mh-app .tm-page .tm-compose textarea,
.mh-app .tm-page .tm-compose textarea:focus {
  border:none; outline:none; box-shadow:none; background:transparent; border-radius:0;
}
.tm-page .tm-send { width:44px; height:44px; flex:none; border:none; border-radius:50%; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 14px rgba(78,124,114,.28); transition:.14s; }
.tm-page .tm-send:hover:not(:disabled) { filter:brightness(1.07); }
.tm-page .tm-send:disabled { background:var(--mh-cream-2); color:var(--mh-muted); box-shadow:none; cursor:default; }
.tm-page .tm-send svg { width:18px; height:18px; }

/* ---- empty state (.empty) - floating community bubbles ---- */
.tm-page .tm-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.tm-page .tm-bubbles { position:relative; height:150px; width:330px; margin:0 auto 14px; }
.tm-page .tm-bubbles .bb { position:absolute; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-family:inherit; padding:0; border:4px solid var(--mh-cream); box-shadow:0 12px 26px rgba(52,69,77,.16); background-size:cover; background-position:center; }
/* Only CLICKABLE bubbles get the pointer + float animation - motion must never imply
   interactivity that is not there. The static center (.bb-self) carries neither. */
.tm-page .tm-bubbles .bb-clk { cursor:pointer; animation:tmBbFloat 3.6s ease-in-out infinite alternate; will-change:transform; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(1){ --fl:-9px; animation-duration:3.3s; animation-delay:-.2s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(2){ --fl:-13px; animation-duration:4.2s; animation-delay:-1.2s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(3){ --fl:-7px; animation-duration:4.8s; animation-delay:-.6s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(4){ --fl:-15px; animation-duration:3.0s; animation-delay:-1.7s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(5){ --fl:-12px; animation-duration:3.9s; animation-delay:-.9s; }
.tm-page .tm-bubbles .bb-clk:hover { box-shadow:0 14px 30px rgba(52,69,77,.24); filter:brightness(1.04); }
@keyframes tmBbFloat { from{ transform:translateY(0); } to{ transform:translateY(var(--fl,-10px)); } }
@media (prefers-reduced-motion:reduce){ .tm-page .tm-bubbles .bb-clk{ animation:none; } }
.tm-page .tm-empty h4 { font-family:var(--mh-font-head); font-size:32px; font-weight:700; color:var(--mh-ink); line-height:1.06; letter-spacing:-0.02em; }
.tm-page .tm-empty p { font-size:15px; color:var(--mh-slate); line-height:1.55; margin:16px auto 0; max-width:42ch; }
.tm-page .tm-acts { display:flex; gap:13px; justify-content:center; margin-top:28px; }
.tm-page .tm-cta { height:48px; padding:0 22px; border-radius:24px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:9px; border:1.5px solid transparent; }
.tm-page .tm-cta svg { width:19px; height:19px; }
.tm-page .tm-cta.p { background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; box-shadow:0 10px 22px rgba(78,124,114,.26); }
.tm-page .tm-cta.p:hover { filter:brightness(1.06); }
.tm-page .tm-cta.g { background:var(--mh-surface); border-color:var(--mh-line-cool); color:var(--mh-ink); }
.tm-page .tm-cta.g:hover { border-color:var(--mh-green); color:var(--mh-green-d); }

/* ---- star / pin ---- */
.tm-page .tm-star { flex:none; width:26px; height:26px; border:none; background:none; padding:0; border-radius:8px; display:grid; place-items:center; color:var(--mh-muted); cursor:pointer; opacity:0; transition:.12s; }
.tm-page .tm-star svg { width:16px; height:16px; }
.tm-page .tm-row:hover .tm-star { opacity:.7; }
.tm-page .tm-star:hover { background:var(--mh-cream-2); color:#E0A82E; opacity:1; }
.tm-page .tm-star.on { opacity:1; color:#E0A82E; }
.tm-page .tm-starbtn { flex:none; width:40px; height:40px; border:none; background:var(--mh-cream-2); border-radius:12px; display:grid; place-items:center; color:var(--mh-muted); cursor:pointer; transition:.12s; }
.tm-page .tm-starbtn svg { width:19px; height:19px; }
.tm-page .tm-starbtn:hover { background:var(--mh-cream); color:var(--mh-ink); }
.tm-page .tm-starbtn.on { color:#E0A82E; }

/* header icon buttons (.ch-ic) + close */
.tm-page .tm-iconbtn { flex:none; width:40px; height:40px; border:none; background:var(--mh-cream-2); border-radius:12px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; transition:.14s; }
.tm-page .tm-iconbtn:hover { background:var(--mh-cream); color:var(--mh-ink); }
.tm-page .tm-iconbtn.on { background:rgba(78,124,114,.14); color:var(--mh-green-d); }
.tm-page .tm-iconbtn svg { width:19px; height:19px; }
.tm-page .tm-close:hover { background:rgba(176,70,60,.12); color:var(--mh-danger,#B0463C); }

/* ---- message wrap + own-message edit/delete actions (preserved) ---- */
.tm-page .tm-mwrap { display:flex; flex-direction:column; gap:3px; max-width:76%; }
.tm-page .tm-mwrap.me { align-self:flex-end; align-items:flex-end; }
.tm-page .tm-mwrap.them { align-self:flex-start; align-items:flex-start; }
.tm-page .tm-mwrap .tm-msg { max-width:100%; }
.tm-page .tm-edited { opacity:.7; font-style:italic; }
.tm-page .tm-msg.tomb { background:var(--mh-cream-2); border:1px dashed var(--mh-line-cool); color:var(--mh-muted); font-style:italic; box-shadow:none; }
.tm-page .tm-actions { display:flex; align-items:center; gap:4px; opacity:0; transition:.12s; height:22px; }
.tm-page .tm-mwrap:hover .tm-actions { opacity:1; }
.tm-page .tm-actions button { border:none; background:none; padding:3px; border-radius:7px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-actions button svg { width:15px; height:15px; }
.tm-page .tm-actions button:hover { background:var(--mh-cream-2); color:var(--mh-ink); }
.tm-page .tm-actions.confirm { opacity:1; font-size:12px; font-weight:700; color:var(--mh-muted); gap:6px; }
.tm-page .tm-actions.confirm .yes { color:var(--mh-danger,#C0492F); font-weight:800; }
.tm-page .tm-actions.confirm .no { color:var(--mh-green-d); font-weight:800; }

/* edit-in-place box */
/* EDIT-IN-PLACE BOX (CEO, Aug 5 2026: "the field is so small, make it wider, standard").
   IT WAS width:min(76%,420px) AND THAT PERCENTAGE WAS THE BUG. The editor sits inside
   .tm-mwrap, which is a shrink-to-fit flex item (align-self:flex-end, width:auto) - it
   sizes itself TO ITS CHILD. A percentage width against a parent that has no definite
   width of its own is circular, so the browser drops it during intrinsic sizing and the
   <textarea> falls back to its default ~20-character column. That is the tiny box: not a
   styling choice, a percentage that could never resolve.
   Fixed with a DEFINITE width. --mh-vw, never bare vw, because of the root
   Display-resolution zoom ([[mh-display-resolution]]). min-width means it can never
   collapse to the intrinsic default again, whatever the container does. */
.tm-page .tm-editbox {
  width: min(460px, calc(62 * var(--mh-vw)));
  min-width: min(320px, calc(56 * var(--mh-vw)));
  max-width: 100%;
}
/* The bubble column is capped at 70/76% for READING - comfortable line length. While
   EDITING that cap is just a smaller box, so let the row give the editor its room back. */
.tm-page .tm-mwrap:has(.tm-editbox),
.tm-page .tm-msgs.dmflow .tm-mwrap:has(.tm-editbox) { max-width: 94%; }
.tm-page .tm-mwrap.dm:has(.tm-editbox) .tm-bcol { max-width: 100%; }
.tm-page .tm-editbox textarea { width:100%; resize:vertical; border:1.5px solid var(--mh-green); border-radius:16px; background:var(--mh-surface); padding:11px 14px; font:inherit; font-size:14px; line-height:1.45; color:var(--mh-ink); outline:none; min-height:76px; max-height:240px; box-sizing:border-box; }
.tm-page .tm-edithint { font-size:10.5px; color:var(--mh-muted); margin-top:3px; padding-left:4px; }

/* ---- our emoji picker (KEPT untouched; trigger + popover restyled) ---- */
.tm-page .tm-emojiwrap { position:relative; flex:none; }
.tm-page .tm-emojibtn { width:44px; height:44px; border:none; background:none; border-radius:50%; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; transition:background .14s; }
.tm-page .tm-emojibtn:hover { background:rgba(216,155,61,.18); color:#C49A33; }
.tm-page .tm-emojibtn svg { width:22px; height:22px; }
.tm-page .tm-emojiback { position:fixed; inset:0; z-index:40; border:none; background:transparent; cursor:default; }
.tm-page .tm-emojipop { position:absolute; bottom:54px; left:0; z-index:50; width:328px; height:320px; display:flex; flex-direction:column; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:hidden; }
/* KICKOFF 08 C - the SAME picker opening DOWNWARD for the status note (which sits at
   the top of the sidebar); width kept within the 360px list so overflow never clips it. */
.tm-page .tm-emojipop.down { top:calc(100% + 8px); bottom:auto; left:-4px; width:300px; }
.tm-page .tm-me-statusedit .tm-emojiwrap { position:relative; flex:none; display:grid; place-items:center; }
.tm-page .tm-statusemoji { width:24px; height:24px; border:none; background:none; padding:0; color:#D89B3D; cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-statusemoji:hover { color:#C49A33; }
.tm-page .tm-statusemoji svg { width:16px; height:16px; }
.tm-page .tm-emojisearch { padding:10px 10px 8px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-emojisearch input { width:100%; height:34px; border:1px solid var(--mh-line-cool); border-radius:10px; background:var(--mh-cream-2); padding:0 11px; font:inherit; font-size:13px; color:var(--mh-ink); outline:none; }
.tm-page .tm-emojisearch input:focus { border-color:var(--mh-green); }
.tm-page .tm-emojitabs { display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--mh-line-cool); overflow-x:auto; }
.tm-page .tm-emojitabs button { flex:none; width:30px; height:30px; border:none; background:none; border-radius:8px; font-size:17px; line-height:1; cursor:pointer; }
.tm-page .tm-emojitabs button:hover { background:var(--mh-cream-2); }
.tm-page .tm-emojitabs button.on { background:rgba(78,124,114,.14); }
.tm-page .tm-emojigrid { flex:1; overflow-y:auto; padding:8px 10px 12px; }
.tm-page .tm-emojigl { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mh-muted); padding:4px 2px 6px; }
.tm-page .tm-emojirow { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.tm-page .tm-emojirow button { aspect-ratio:1; border:none; background:none; border-radius:8px; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-emojirow button:hover { background:var(--mh-cream-2); }
.tm-page .tm-emojinone { color:var(--mh-muted); font-size:13px; text-align:center; padding:24px 8px; }

/* ---- groups: body (messages + members panel) ---- */
/* ---- P3: GroupDetails drawer (group "!" -> WhatsApp-style panel; folds the
   existing add/remove/leave management; replaces the old inline members panel) ---- */
.tm-page .tm-gdscrim { position:absolute; inset:0; z-index:30; background:rgba(31,41,38,.30); display:flex; justify-content:flex-end; animation:tmGdFade .18s ease-out; }
@keyframes tmGdFade { from{ opacity:0; } to{ opacity:1; } }
.tm-page .tm-gd { width:340px; max-width:100%; height:100%; background:var(--mh-surface); box-shadow:-14px 0 44px rgba(31,41,38,.20); display:flex; flex-direction:column; animation:tmGdSlide .26s cubic-bezier(.2,.8,.3,1); }
@keyframes tmGdSlide { from{ transform:translateX(100%); } to{ transform:none; } }
.tm-page .tm-gdtop { display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--mh-line-cool); flex:none; }
.tm-page .tm-gdtop h3 { flex:1; font-family:var(--mh-font-head); font-size:17px; font-weight:700; color:var(--mh-ink); }
.tm-page .tm-gdbody { flex:1; overflow-y:auto; }
.tm-page .tm-gdhero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 22px 20px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-gav.xl { width:78px; height:78px; border-radius:24px; margin-bottom:13px; }
.tm-page .tm-gav.xl svg { width:34px; height:34px; }
.tm-page .tm-gdname { font-family:var(--mh-font-head); font-size:22px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.02em; }
.tm-page .tm-gdmeta { font-size:13px; color:var(--mh-muted); margin-top:5px; }
.tm-page .tm-gdsec { padding:16px 20px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-gdsec h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mh-muted); font-weight:700; margin-bottom:11px; }
.tm-page .tm-gdsechead { display:flex; align-items:center; }
.tm-page .tm-gdsechead h4 { flex:1; margin-bottom:0; }
.tm-page .tm-gdabout { font-size:14px; color:var(--mh-slate); line-height:1.55; }
.tm-page .tm-gdmlist { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.tm-page .tm-gdmem { display:flex; align-items:center; gap:11px; padding:8px; border-radius:12px; }
.tm-page .tm-gdmem:hover { background:var(--mh-cream-2); }
.tm-page .tm-gdmem .tm-meta { flex:1; min-width:0; display:flex; align-items:center; gap:7px; }
.tm-page .tm-gdmem:hover .tm-memx { opacity:.7; }
.tm-page .tm-gdleave { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 20px 22px; width:calc(100% - 40px); height:46px; border-radius:13px; border:1.5px solid rgba(176,70,60,.32); color:var(--mh-danger,#B0463C); font:inherit; font-size:14px; font-weight:700; background:none; cursor:pointer; transition:.14s; }
.tm-page .tm-gdleave:hover { background:rgba(176,70,60,.08); }
.tm-page .tm-gdleave svg { width:16px; height:16px; }
/* KICKOFF 21: creator/admin "Delete group" + two-step confirm. Filled-danger Delete
   (heavier than the outlined Leave) so the destructive action reads distinctly. */
.tm-page .tm-gddelete { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 20px 22px; width:calc(100% - 40px); height:46px; border-radius:13px; border:none; color:#fff; font:inherit; font-size:14px; font-weight:700; background:var(--mh-danger,#B0463C); cursor:pointer; transition:.14s; }
.tm-page .tm-gddelete:hover { filter:brightness(1.05); }
.tm-page .tm-gddelete:disabled { opacity:.6; cursor:default; filter:none; }
.tm-page .tm-gddelete svg { width:16px; height:16px; }
.tm-page .tm-gdconfirm { margin:0 20px 22px; padding:14px 15px; border-radius:13px; border:1.5px solid rgba(176,70,60,.32); background:rgba(176,70,60,.06); }
.tm-page .tm-gdconfirm p { font-size:13px; font-weight:600; color:var(--mh-ink); margin:0 0 12px; line-height:1.45; }
.tm-page .tm-gdconfirm-acts { display:flex; gap:9px; }
.tm-page .tm-gdconfirm-acts .tm-gdcancel { flex:1; height:40px; border-radius:11px; border:1px solid var(--mh-line); background:var(--mh-ctrl-fill); color:var(--mh-ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.14s; }
.tm-page .tm-gdconfirm-acts .tm-gdcancel:hover { background:var(--mh-surface); }
.tm-page .tm-gdconfirm-acts .tm-gddelete { flex:1; margin:0; width:auto; height:40px; }
/* reused member-item bits */
.tm-page .tm-addmem { width:28px; height:28px; border:none; background:var(--mh-cream-2); border-radius:9px; color:var(--mh-green-d); cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-addmem:hover { background:rgba(78,124,114,.16); }
.tm-page .tm-addmem svg { width:15px; height:15px; }
.tm-page .tm-leadtag { font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mh-green-d); background:rgba(78,124,114,.14); border-radius:999px; padding:2px 7px; }
.tm-page .tm-memx { flex:none; width:24px; height:24px; border:none; background:none; border-radius:7px; color:var(--mh-muted); cursor:pointer; opacity:0; transition:.12s; display:grid; place-items:center; }
.tm-page .tm-memx:hover { background:var(--mh-cream-2); color:var(--mh-danger,#C0492F); opacity:1; }
.tm-page .tm-memx svg { width:14px; height:14px; }

/* group message sender header (avatar + name) */
.tm-page .tm-sender { display:flex; align-items:center; gap:7px; margin:2px 0 1px 2px; cursor:pointer; }
.tm-page .tm-sendernm { font-size:11.5px; font-weight:700; color:var(--mh-green-d); }

/* ---- pointer cursor on clickable users (P3 surfaces hovercards) ---- */
.tm-page .tm-userclick, .tm-page .tm-mwrap.dm .tm-bava, .tm-page .tm-sender .tm-av { cursor:pointer; }

/* ---- New Group / Add Member modal (unchanged this phase; re-skin is P2) ---- */
.tm-page ~ .tm-modalback, .tm-modalback { position:fixed; inset:0; z-index:120; background:rgba(31,41,38,.42); }
.tm-modal { position:fixed; z-index:121; top:50%; left:50%; transform:translate(-50%,-50%); width:min(460px,calc(94 * var(--mh-vw))); max-height:calc(90 * var(--mh-vh)); display:flex; flex-direction:column; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:0 24px 60px rgba(31,41,38,.34); overflow:hidden; }
body.dark .tm-modal { background:var(--mh-surface); }
.tm-modalhead { display:flex; align-items:center; padding:18px 20px 14px; border-bottom:1px solid var(--mh-line-cool); }
.tm-modalhead h3 { flex:1; font-family:var(--mh-font-head); font-size:19px; color:var(--mh-ink); }
.tm-x { width:32px; height:32px; border:none; background:none; border-radius:9px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; }
.tm-x:hover { background:var(--mh-cream-2); }
.tm-x svg { width:18px; height:18px; }
.tm-modalbody { padding:16px 20px; overflow-y:auto; }
.tm-fld { display:block; margin-bottom:16px; }
.tm-fld > span { display:block; font-size:12px; font-weight:700; color:var(--mh-muted); margin-bottom:7px; }
.tm-fld input { width:100%; height:40px; border:1px solid var(--mh-line-cool); border-radius:11px; background:var(--mh-cream-2); padding:0 13px; font:inherit; font-size:14px; color:var(--mh-ink); outline:none; }
.tm-fld input:focus { border-color:var(--mh-green); }
.tm-swatches { display:flex; gap:8px; }
.tm-swatch { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.tm-swatch.on { border-color:var(--mh-ink); box-shadow:0 0 0 2px var(--mh-surface) inset; }
.tm-pickersearch { margin-bottom:8px; }
.tm-picker { max-height:230px; overflow-y:auto; border:1px solid var(--mh-line-cool); border-radius:12px; padding:6px; }
.tm-pickrow { display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left; }
.tm-pickrow:hover { background:var(--mh-cream-2); }
.tm-pickrow.on { background:rgba(78,124,114,.12); }
.tm-pickrow .tm-nm { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--mh-ink); }
.tm-check { flex:none; width:22px; height:22px; display:grid; place-items:center; color:var(--mh-green-d); }
.tm-check svg { width:16px; height:16px; }
.tm-check.add { color:var(--mh-muted); }
.tm-modalfoot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--mh-line-cool); }
.tm-btn { padding:9px 18px; border-radius:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1px solid var(--mh-line-cool); }
.tm-btn.ghost { background:none; color:var(--mh-ink); }
.tm-btn.ghost:hover { background:var(--mh-cream-2); }
.tm-btn.primary { background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; border-color:transparent; }
.tm-btn.primary:hover { filter:brightness(1.07); }
.tm-btn.primary:disabled { opacity:.45; cursor:default; filter:none; }

/* modal-scoped primitives (modals render OUTSIDE .tm-page, so the .tm-page avatar/
   search rules do not reach them) */
.tm-modal .tm-av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; flex:none; position:relative; background-size:cover; background-position:center; }
.tm-modal .tm-av.sm { width:38px; height:38px; font-size:13px; }
.tm-modal .tm-search { display:flex; align-items:center; gap:11px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:23px; padding:0 16px; height:46px; transition:border-color .14s, box-shadow .14s; }
.tm-modal .tm-search:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-modal .tm-search svg { width:17px; height:17px; color:var(--mh-muted); }
.tm-modal .tm-search input { flex:1; border:none; background:none; outline:none; font:inherit; font-size:14px; color:var(--mh-ink); }
.tm-modal .tm-roster-empty { padding:22px 14px; color:var(--mh-muted); font-size:13px; text-align:center; }

/* Editorial modal skin (.m3): rounded, eyebrow, live preview, pill inputs */
.tm-modal.tm-modal-m3 { border-radius:26px; width:min(560px,calc(94 * var(--mh-vw))); }
.tm-modal-m3 .tm-modalhead { align-items:flex-start; padding:26px 28px 4px; border-bottom:none; }
.tm-modal-m3 .tm-modalhead > div { flex:1; min-width:0; }
.tm-modal-m3 .tm-eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mh-green-d); font-weight:700; }
.tm-modal-m3 .tm-modalhead h3 { font-size:26px; margin-top:7px; }
.tm-modal-m3 .tm-x { width:38px; height:38px; border-radius:50%; background:var(--mh-cream-2); flex:none; }
.tm-modal-m3 .tm-preview { display:flex; align-items:center; gap:15px; margin:18px 28px 0; padding:16px; border-radius:18px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); }
.tm-modal-m3 .tm-pav { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px; flex:none; }
.tm-modal-m3 .tm-pnm { font-size:16px; font-weight:700; color:var(--mh-ink); }
.tm-modal-m3 .tm-pmeta { font-size:13px; color:var(--mh-muted); margin-top:3px; }
.tm-modal-m3 .tm-modalbody { padding:20px 28px; }
.tm-modal-m3 .tm-fld input { height:48px; border-radius:24px; padding:0 18px; }
.tm-modal-m3 .tm-pickersearch { margin-bottom:10px; }
.tm-modal-m3 .tm-picker { border-radius:18px; padding:6px; }
.tm-modal-m3 .tm-pickrow { border-radius:14px; padding:9px 11px; }
.tm-modal-m3 .tm-modalfoot { padding:18px 28px 22px; }
.tm-modal-m3 .tm-btn { height:48px; border-radius:24px; padding:0 24px; }

/* ===========================================================================
   KICKOFF 07 - SINGLE-BOX inputs across every Teams field.
   For the icon fields the WRAPPER (.tm-search / .tm-me-statusedit) is the ONLY
   visible box; the <input> draws nothing of its own. This out-specifies the
   global .mh-app control base (mh-theme.css :is(input...) ) AND its :focus ring,
   which otherwise gave each input its own border/background/radius + a thick
   teal focus ring nested inside the wrapper ("a field inside a field"). Focus
   lives ONLY on the wrapper via :focus-within - one subtle cool->pine shift,
   identical on every field. Specificity: .mh-app + 2 classes + element (+ :focus)
   beats the global :is() base (0,2,1) and its :focus rule (0,3,1). */
.mh-app .tm-page .tm-search input,
.mh-app .tm-page .tm-me-statusedit input,
.mh-app .tm-modal .tm-search input,
.mh-app .tm-page .tm-search input:focus,
.mh-app .tm-page .tm-me-statusedit input:focus,
.mh-app .tm-modal .tm-search input:focus {
  width:100%; padding:0; margin:0;
  border:none; outline:none; box-shadow:none; background:transparent; border-radius:0;
}

/* Group name has no icon wrapper, so the <input> itself is the single tidy box:
   one cool border, the m3 radius/height kept, and the SAME subtle focus as every
   wrapper above (never the thick global teal ring). Direct child only (>) so the
   nested member-search input inside the same .tm-fld stays boxless (its wrapper
   is the box, handled by the reset above). */
.mh-app .tm-modal .tm-fld > input {
  border:1px solid var(--mh-line-cool); background:var(--mh-cream-2);
  outline:none; box-shadow:none; transition:border-color .14s, box-shadow .14s;
}
.mh-app .tm-modal .tm-fld > input:focus {
  border-color:var(--mh-green); background:var(--mh-cream-2);
  box-shadow:0 0 0 3px rgba(78,124,114,.12);
}

/* ---- DM bubble side-avatar (messenger layout) ---- */
.tm-page .tm-mwrap.dm { flex-direction:row; align-items:flex-end; gap:8px; max-width:76%; }
.tm-page .tm-mwrap.dm.me { flex-direction:row-reverse; }
.tm-page .tm-mwrap.dm .tm-bava { flex:none; align-self:flex-end; margin-bottom:1px; }
.tm-page .tm-mwrap.dm .tm-bcol { display:flex; flex-direction:column; gap:3px; min-width:0; max-width:calc(100% - 42px); }
.tm-page .tm-mwrap.dm.me .tm-bcol { align-items:flex-end; }
.tm-page .tm-mwrap.dm.them .tm-bcol { align-items:flex-start; }

/* ---- Messenger-style DM grouping (dmflow) ----------------------------------
   One avatar per consecutive same-sender run (at the BOTTOM of the run); own
   messages have no avatar. Tight spacing WITHIN a run, clear separation BETWEEN
   runs; connected (stacked) inner corners. Scoped to the DM list so the group
   view is untouched. */
.tm-page .tm-msgs.dmflow { gap:3px; }
/* dynamic bubble cap: sizes to content up to ~70% of the chat column */
.tm-page .tm-msgs.dmflow .tm-mwrap { max-width:70%; }
.tm-page .tm-msgs.dmflow .tm-mwrap.dm { max-width:70%; }
/* The other-person bubble sits inside a shrink-to-fit avatar ROW, so a PERCENTAGE
   max-width there resolves against an indefinite width and collapses a short bubble
   below its own word. Reset the column to hug content and cap the bubble with a
   DEFINITE value (ch/vw) so short words never split; long text still wraps at word
   boundaries within the cap. (The own-side bubble already works via .tm-msg fit-content.) */
.tm-page .tm-msgs.dmflow .tm-mwrap.dm .tm-bcol { flex:0 1 auto; width:auto; min-width:0; max-width:100%; }
.tm-page .tm-msgs.dmflow .tm-mwrap.dm.them .tm-msg { max-width:min(calc(70 * var(--mh-vw)), 62ch); }
.tm-page .tm-msgs.dmflow .tm-mwrap.grpstart { margin-top:12px; }
.tm-page .tm-msgs.dmflow .tm-daysep { margin-top:10px; }
/* avatar-width placeholder so bubbles above the avatar stay aligned (xs = 30px) */
.tm-page .tm-mwrap.dm .tm-bava-spacer { flex:none; width:30px; height:1px; align-self:flex-end; }
/* stacked corners: square the side where a bubble connects to its run neighbour */
.tm-page .tm-msgs.dmflow .tm-mwrap.them:not(.grpstart) .tm-msg.them { border-top-left-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.them:not(.grpend) .tm-msg.them { border-bottom-left-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.me:not(.grpstart) .tm-msg.me { border-top-right-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.me:not(.grpend) .tm-msg.me { border-bottom-right-radius:7px; }
/* Messenger polish: the just-arrived peer message's grouped avatar SLIDES DOWN into its
   new bottom-of-run spot (keyframe plays once on render; only the marked avatar carries
   this class, so nothing animates on initial load). Fixed ~34px slide (approx one row). */
@keyframes tm-bava-drop {
  from { transform:translateY(-34px); opacity:.35; }
  to   { transform:translateY(0);     opacity:1;   }
}
.tm-page .tm-mwrap.dm.them .tm-bava.tm-bava-drop { animation:tm-bava-drop .28s ease-out both; }

/* ---- date/time chip + scheduled badge (preserved) ---- */
.tm-page .tm-datechip { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; font-weight:600; border-radius:4px; padding:0 2px; }
.tm-page .tm-msg.them .tm-datechip { color:var(--mh-green-d); background:rgba(78,124,114,.10); }
.tm-page .tm-msg.them .tm-datechip:hover { background:rgba(78,124,114,.22); }
.tm-page .tm-msg.me .tm-datechip { color:#fff; background:rgba(255,255,255,.18); }
.tm-page .tm-msg.me .tm-datechip:hover { background:rgba(255,255,255,.32); }
.tm-page .tm-schedbadge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--mh-green-d); background:rgba(78,124,114,.12); border:1px solid var(--mh-line-cool); border-radius:999px; padding:3px 9px; margin-top:2px; }
.tm-page .tm-schedbadge svg { width:12px; height:12px; }

/* ---- READ RECEIPTS (CEO, Aug 14 2026) -------------------------------------------
   "below our message the delivered and read message must be present like WhatsApp".

   Sits UNDER my own bubble, inside .tm-bcol, which is already a flex column with
   align-items:flex-end on my side - so it lands under the right-hand edge of the
   bubble with no positioning of its own.

   THE THREE STATES MUST BE TELLABLE APART AT A GLANCE, and colour alone is not
   enough to do that - roughly one man in twelve cannot separate a grey tick from a
   green one reliably, and this is a work tool. So each state differs in SHAPE as
   well as colour: one tick for Sent, two for Delivered and Read, and Read is the
   only one that is filled with the brand pine and weighted. The newest message also
   carries the word, and every one of them carries a title tooltip.
   ---------------------------------------------------------------------------------- */
.tm-page .tm-rcpt {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 1px; padding: 0 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  line-height: 1; user-select: none; cursor: default;
}
.tm-page .tm-rcpt-t { width: 13px; height: 13px; flex: none; }
/* The two-tick mark carries a wider viewBox (29 vs 24) so the pair is not squeezed.
   THE GAP IS DELIBERATELY HAIRLINE - about half a pixel. Three settings were tried
   against the CEO's eye: overlapping (the original, which fused into ONE thick tick
   at this size), 1.6px (his verdict: "you add more space now it's not looks good"),
   and this. The mark has to read as two ticks without reading as two separate
   symbols, which is exactly the balance WhatsApp strikes. */
.tm-page .tm-rcpt-t2 { width: 16px; }

/* Sent - one tick, quiet. It is in the database and waiting for them. */
.tm-page .tm-rcpt.sent { color: var(--mh-muted, #8A8B83); }

/* Delivered - two ticks, still quiet. Their session has been live since it was sent. */
.tm-page .tm-rcpt.delivered { color: var(--mh-muted, #8A8B83); }

/* Read - two ticks in brand pine, and the only state that is weighted. This is the
   one people look for, so it is the one that reads from across a desk. */
.tm-page .tm-rcpt.read { color: var(--mh-green-d, #3D655D); }
.tm-page .tm-rcpt.read .tm-rcpt-t { stroke-width: 3; }
.tm-page .tm-rcpt.read .tm-rcpt-w { font-weight: 800; }

/* Dark mode: the muted token already flips, but pine on a dark ground needs the
   lighter brand step to keep its contrast. */
body.dark .tm-page .tm-rcpt.read { color: var(--mh-green, #4E7C72); filter: brightness(1.35); }

/* ---- Phase 5: @mention pill (theme via CSS vars -> light + dark both work). Toned for
   each bubble: pine on an incoming bubble, translucent white on the author's green one. ---- */
.tm-page .mh-mention { font-weight:700; border-radius:5px; padding:0 4px; white-space:nowrap; }
.tm-page .tm-msg.them .mh-mention { color:var(--mh-green-d); background:rgba(78,124,114,.14); }
.tm-page .tm-msg.me .mh-mention { color:#fff; background:rgba(255,255,255,.22); }

/* ---- Phase 5: @mention picker, floated above the composer (absolute -> stays out of the
   composer flex row). Mouse-down is prevented in markup so a click never blurs the input. ---- */
.tm-page .tm-compose { position:relative; }
/* Width fits the WIDEST name (max-content up to a cap), left-anchored to the composer.
   Vertical side is chosen by JS (MHmentions.place): .mh-pop-above / .mh-pop-below; the
   default here (above) covers the common bottom-of-page composer before JS runs. The tail
   pseudo-elements sit OUTSIDE the box, so the pop is overflow:visible and the SCROLL lives on
   an inner wrapper (.tm-mentionscroll) - otherwise overflow:auto would clip the tail. */
.tm-page .tm-mentionpop { position:absolute; left:12px; width:max-content; min-width:168px; max-width:min(340px,calc(78 * var(--mh-vw))); top:auto; bottom:calc(100% + 11px); z-index:60; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:14px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:visible; }
.tm-page .tm-mentionpop.mh-pop-above { top:auto; bottom:calc(100% + 11px); }
.tm-page .tm-mentionpop.mh-pop-below { bottom:auto; top:calc(100% + 11px); }
.tm-page .tm-mentionscroll { max-height:258px; overflow-y:auto; padding:6px; }
.tm-page .tm-mentionopt { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:7px 9px; border:none; border-radius:11px; background:none; cursor:pointer; text-align:left; color:var(--mh-ink); font:inherit; }
.tm-page .tm-mentionopt:hover, .tm-page .tm-mentionopt.on { background:rgba(78,124,114,.12); }
.tm-page .tm-mentionav { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:12px; background-size:cover; background-position:center; }
.tm-page .tm-mentionnm { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Tail: points DOWN when the menu is above the composer, UP when below (social-style). */
.tm-page .tm-mentionpop.mh-pop-above::before, .tm-page .tm-mentionpop.mh-pop-below::before { content:""; position:absolute; left:21px; width:0; height:0; border:9px solid transparent; }
.tm-page .tm-mentionpop.mh-pop-above::after, .tm-page .tm-mentionpop.mh-pop-below::after { content:""; position:absolute; left:22px; width:0; height:0; border:8px solid transparent; }
.tm-page .tm-mentionpop.mh-pop-above::before { top:100%; border-bottom:0; border-top-color:var(--mh-line-cool); }
.tm-page .tm-mentionpop.mh-pop-above::after { top:100%; border-bottom:0; border-top-color:var(--mh-surface); }
.tm-page .tm-mentionpop.mh-pop-below::before { bottom:100%; border-top:0; border-bottom-color:var(--mh-line-cool); }
.tm-page .tm-mentionpop.mh-pop-below::after { bottom:100%; border-top:0; border-bottom-color:var(--mh-surface); }

/* ---- P3: user info card (minimal hovercard / compact profile card). Positioned at
   the click via MHchat.placeCard; Esc + outside-click close. ---- */
.tm-cardback { position:fixed; inset:0; z-index:130; border:none; background:transparent; cursor:default; }
.tm-uprof { position:fixed; z-index:131; left:0; top:0; width:286px; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:hidden; animation:tmUpPop .15s cubic-bezier(.2,.9,.3,1.1); }
@keyframes tmUpPop { from{ opacity:0; transform:scale(.96) translateY(5px); } to{ opacity:1; transform:none; } }
.tm-uprof .tm-upcover { height:56px; width:100%; }
.tm-uprof .tm-upav { position:absolute; top:30px; left:18px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px; border:3px solid var(--mh-surface); background-size:cover; background-position:center; }
.tm-uprof .tm-updot { position:absolute; right:0; bottom:1px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--mh-surface); }
.tm-uprof .tm-uphead { padding:14px 18px 0; margin-top:16px; }
.tm-uprof .tm-upname { font-family:var(--mh-font-head); font-size:18px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.01em; }
.tm-uprof .tm-upstatus { display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--mh-slate); background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); padding:4px 11px; border-radius:20px; }
.tm-uprof .tm-upstatus .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tm-uprof .tm-upstatus.na { color:var(--mh-muted); }
.tm-uprof .tm-upnote { display:flex; align-items:flex-start; gap:9px; margin:13px 18px 0; padding:11px 13px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:13px; font-size:13.5px; color:var(--mh-ink); font-weight:500; line-height:1.4; }
.tm-uprof .tm-upnote .si { color:#D89B3D; flex:none; display:grid; place-items:center; margin-top:1px; }
.tm-uprof .tm-upnote .si svg { width:16px; height:16px; }
.tm-uprof.mini .tm-upnote { margin-bottom:16px; }
.tm-uprof.full .tm-upnote { margin-bottom:0; }
.tm-uprof.mini { padding-bottom:16px; }
.tm-uprof .tm-upmeta { padding:14px 18px 18px; display:flex; flex-direction:column; gap:11px; }
.tm-uprof .tm-uprow { display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--mh-slate); }
.tm-uprof .tm-uprow .ic { width:30px; height:30px; border-radius:9px; background:var(--mh-cream-2); color:var(--mh-green-d); display:grid; place-items:center; flex:none; }
.tm-uprof .tm-uprow .ic svg { width:16px; height:16px; }

@media(max-width:900px){
  .tm-page { flex-direction:column; height:auto; }
  .tm-page .tm-list { width:100%; }
  .tm-page .tm-chat { min-height:480px; }
  .tm-page .tm-gd { width:100%; }
}

/* STEP 1d: event-draft resume pill in the roster header (appears only when a draft exists). */

/* ---------------------------------------------------------------------------
   T1 (CEO, Aug 5 2026) - THE PHOTO IS A LAYER, NOT THE BACKGROUND.
   The avatar used to BE the photo (background-image + color:transparent) and the
   initials were rendered only when there was no photo on file. A CSS background
   has no error event and is never retried, so one failed fetch left a blank
   tinted circle with nothing underneath - and only re-creating the element (a tab
   switch) ever tried again. That is exactly the bug that was reported.
   Now: the tint + initials are always there, and this <img> sits on top. If the
   bytes are missing its onerror removes it and the initials show through.
   It covers the whole circle and inherits the radius, so every size variant
   (.sm / .xs / .bb / .tm-upav / .tm-mentionav / .tm-modal .tm-av) is handled by
   this one rule - they differ only in width/height/radius, which it inherits.
   z-index 0 keeps it UNDER the presence dot, which is z-index 1 below.
   --------------------------------------------------------------------------- */
.mh-app .tm-avimg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit; display:block;
  z-index:0; pointer-events:none; user-select:none;
}
/* The dot is meaning, not decoration - it stays above the photo. */
.mh-app .tm-av .tm-dot, .mh-app .tm-uprof .tm-updot { z-index:1; }
/* .tm-av, .tm-upav and .tm-modal .tm-av already declare position:relative, and
   .bb is already position:absolute (the ring spots place it), so all of those
   anchor an inset:0 child on their own. .tm-mentionav declares neither. */
.mh-app .tm-page .tm-mentionav { position:relative; }

/* T2 (Aug 5 2026): "last seen" under the status line on the profile card. Quiet by
   design - it is context, not the headline; the status pill above is the headline.
   Rendered only when the person is OFFLINE and we have actually seen them. */
.mh-app .tm-uprof .tm-upseen {
  margin-top:6px; font-size:12px; font-weight:500; color:var(--mh-muted);
  letter-spacing:.005em;
}

/* T4 (Aug 5 2026): the profile-card portrait is the photo-zoom target. Cursor + a small
   lift so it reads as clickable; the transform is on the AVATAR, which is a leaf here
   (the dot is its only child and rides with it), so it traps nothing - unlike the wizard
   photo-menu case where a hover transform buried the popup inside it. */
.mh-app .tm-uprof .tm-upav-zoom { cursor:zoom-in; transition:transform .12s ease, box-shadow .12s ease; }
.mh-app .tm-uprof .tm-upav-zoom:hover { transform:scale(1.04); box-shadow:0 6px 18px rgba(40,60,80,.28); }
.mh-app .tm-uprof .tm-upav-zoom:focus-visible { outline:2px solid var(--mh-green); outline-offset:3px; }
/* Initials sit UNDER the zoomed photo in the lightbox, same rule as the small avatars:
   if the bytes are missing the img hides itself and these show through. */
.mh-app .plb-circle .tm-lbinitials { position:absolute; inset:0; display:grid; place-items:center;
  font-size:130px; font-weight:800; letter-spacing:3px; line-height:1; color:#fff; }

/* =============================================================================
   T5 (CEO, Aug 5 2026) - TEAMS ONTO THE STANDARD FIELD KIT.
   "Teams still uses OLD controls." It did: its fields were cream pills with a
   pine focus ring, from before the app adopted the Inset Cool Field Kit
   ([[mh-inset-cool-field-kit]] / [[mh-default-field-standard]]). Every other
   surface now RECESSES a control into the canvas at rest and LIFTS IT TO WHITE
   on focus. These rules bring Teams to that standard.

   BLAST RADIUS - what else moves, stated before the change (shared-component law):
     * .tm-search is used in FOUR places: the sidebar search AND the three modal
       pickers (New Group members / Add Member / Message Someone), which share
       byte-identical .tm-search.tm-pickersearch markup. All four restyle. Intended.
     * Everything here is scoped to .tm-page or .tm-modal. NOTHING outside the
       Teams page or its modals is touched - no other screen shares these classes.
     * The KICKOFF 07/08 "single box" resets stay exactly as they are: the visible
       box must remain the WRAPPER only, never wrapper + the input's own box.

   Tokens are declared locally rather than imported, matching how detail-view.css
   and enroll-wizard.css each declare their own - same VALUES, so the recess, the
   lift and the dark variants are identical to every other field in the app.
   ============================================================================= */
.mh-app .tm-page, .mh-app .tm-modal {
  --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10);
  --f-hover-bg:#E6EAEF;
  --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14);
  --f-t:.16s ease;
}
[data-theme="dark"] .mh-app .tm-page, [data-theme="dark"] .mh-app .tm-modal,
.mh-app.dark .tm-page, .mh-app.dark .tm-modal {
  --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4);
  --f-hover-bg:#172128;
  --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5);
}

/* ---- the recessed shell, applied to every Teams field ---- */
.mh-app .tm-page .tm-searchrow .tm-search,
.mh-app .tm-page .tm-me-statusadd,
.mh-app .tm-page .tm-me-statusshow,
.mh-app .tm-page .tm-me-statusedit,
.mh-app .tm-page .tm-compose,
.mh-app .tm-modal .tm-search,
.mh-app .tm-modal .tm-fld > input {
  background:var(--f-rest-bg);
  border:1px solid var(--f-rest-bd);
  box-shadow:var(--f-rest-sh);
  transition:background var(--f-t), border-color var(--f-t), box-shadow var(--f-t);
}
/* Hover only when NOT focused - a focused field is already lifted, and re-tinting
   it on hover reads as the focus being lost. */
.mh-app .tm-page .tm-searchrow .tm-search:hover:not(:focus-within),
.mh-app .tm-page .tm-me-statusedit:hover:not(:focus-within),
.mh-app .tm-page .tm-compose:hover:not(:focus-within),
.mh-app .tm-modal .tm-search:hover:not(:focus-within),
.mh-app .tm-modal .tm-fld > input:hover:not(:focus) { background:var(--f-hover-bg); }
.mh-app .tm-page .tm-me-statusadd:hover,
.mh-app .tm-page .tm-me-statusshow:hover { background:var(--f-hover-bg); border-color:var(--f-rest-bd); }

/* LIFT TO WHITE. This replaces the old pine ring
   (border-color:var(--mh-green) + 0 0 0 3px rgba(78,124,114,.12)) everywhere. */
.mh-app .tm-page .tm-searchrow .tm-search:focus-within,
.mh-app .tm-page .tm-me-statusedit:focus-within,
.mh-app .tm-page .tm-compose:focus-within,
.mh-app .tm-modal .tm-search:focus-within,
.mh-app .tm-modal .tm-fld > input:focus {
  background:var(--f-focus-bg);
  border-color:var(--f-focus-bd);
  box-shadow:var(--f-focus-sh);
}

/* The status dropdown is a CONTROL, not a chip - same recess, and .open counts as
   focus because the menu is what the user is looking at. */
.mh-app .tm-page .tm-me-status {
  background:var(--f-rest-bg); border-color:var(--f-rest-bd); box-shadow:var(--f-rest-sh);
  transition:background var(--f-t), border-color var(--f-t), box-shadow var(--f-t);
}
.mh-app .tm-page .tm-me-status:hover { background:var(--f-hover-bg); border-color:var(--f-rest-bd); color:var(--mh-ink); }
.mh-app .tm-page .tm-me-status.open {
  background:var(--f-focus-bg); border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh); color:var(--mh-ink);
}
/* Keyboard parity - a control reachable by Tab must show it, and :focus-visible
   never fires on a mouse click, so this costs the mouse user nothing. */
.mh-app .tm-page .tm-me-status:focus-visible,
.mh-app .tm-page .tm-me-statusadd:focus-visible,
.mh-app .tm-page .tm-me-statusshow:focus-visible {
  background:var(--f-focus-bg); border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh); outline:none;
}

/* ERROR PARITY. The kit requires a visible error face; Teams had none because it
   had no failing field yet. Declared now so the first one that needs it inherits
   the standard instead of inventing a red of its own. */
.mh-app .tm-page .tm-search.is-error,
.mh-app .tm-page .tm-compose.is-error,
.mh-app .tm-modal .tm-fld > input.is-error {
  border-color:#B0463C; box-shadow:0 0 0 3px rgba(176,70,60,.14);
}
/* LOCKED / read-only parity: recessed, dimmed, and it does not lift. */
.mh-app .tm-page .tm-search.is-locked,
.mh-app .tm-modal .tm-fld > input[readonly],
.mh-app .tm-modal .tm-fld > input:disabled {
  background:var(--f-rest-bg); opacity:.75; cursor:default; box-shadow:var(--f-rest-sh);
}
.mh-app .tm-modal .tm-fld > input[readonly]:focus,
.mh-app .tm-modal .tm-fld > input:disabled:focus { background:var(--f-rest-bg); box-shadow:var(--f-rest-sh); }