/* ---- Teams pane (read-only in Phase 1) ---- */
  #teams { width: min(920px, 96vw); }
  .tm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .tm-head h2 { margin: 0; font-size: 18px; color: var(--crimson); }
  .tm-head .sp { flex: 1; }
  .tm-wrap { display: flex; gap: 14px; }
  .tm-list { width: 260px; flex: none; border-right: 1px solid var(--line); padding-right: 10px; height: 72vh; overflow-y: auto; }
  /* Fixed height, not max-height: the composer can only dock to the bottom of a
     container that actually has a bottom, even in a short conversation. */
  /* Explicit background so the sticky search bar and docked composer have
     something opaque to sit on — in the pop-out window the pane would otherwise
     sit on the page colour and both would show as mismatched strips. */
  .tm-view { flex: 1; height: 72vh; overflow-y: auto; display: flex; flex-direction: column;
    padding-right: 4px; background: var(--surface); }
  .tm-view > .tm-compose.dock { margin-top: auto; }
  /* Without this, a flex column squashes its children to fit instead of scrolling. */
  .tm-view > * { flex-shrink: 0; }
  .tm-grp { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--grey); margin: 12px 0 6px; }
  .tm-conv { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
  .tm-conv:hover { background: var(--surface2); }
  .tm-conv.on { background: var(--crimson); color: #fff; }
  .tm-conv .n { font-weight: 700; font-size: 13px; display: block; }
  .tm-conv .p { font-size: 11px; color: var(--grey); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tm-conv.on .p { color: rgba(255,255,255,.8); }
  /* conversation row: name + unread dot + notification cycle */
  .tm-convrow { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
  .tm-convrow:hover { background: var(--surface2); }
  .tm-convrow.on { background: var(--crimson); }
  .tm-convrow.on .tm-conv, .tm-convrow.on .tm-conv .p { color: #fff; }
  .tm-convrow .tm-conv { flex: 1; min-width: 0; background: none; }
  .tm-convrow .tm-conv:hover { background: none; }
  .tm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }
  .tm-dot.men { background: var(--crimson); box-shadow: 0 0 0 2px var(--surface); }
  /* Unread rows carry the weight — a bare 8px dot was too easy to skim past. */
  .tm-convrow.unread { background: var(--surface2); box-shadow: inset 3px 0 0 var(--grey); }
  .tm-convrow.unread .tm-conv .n { font-weight: 800; }
  .tm-convrow.mentioned { box-shadow: inset 3px 0 0 var(--crimson); background: var(--old-bg); }
  .tm-convrow.mentioned .tm-conv .n { color: var(--crimson); }
  .tm-convrow.on, .tm-convrow.on.unread, .tm-convrow.on.mentioned { background: var(--crimson); box-shadow: none; }
  .tm-convrow.on .tm-conv .n { color: #fff; }
  .tm-bell { background: none; border: 0; cursor: pointer; font-size: 11px; padding: 4px 6px; flex: none;
    border-radius: 6px; opacity: .45; color: inherit; font-weight: 800; }
  .tm-bell:hover { opacity: 1; background: var(--surface); }
  .tm-bell.off { opacity: .3; }
  .tm-bell.mentions { opacity: .8; color: var(--crimson); }
  .tm-convrow.on .tm-bell { color: #fff; }
  /* A bell on every single row was clutter. Hide the ones still on their
     default setting until you hover the row — a changed setting stays visible,
     because that's the one worth seeing at a glance. */
  .tm-bell.default { visibility: hidden; }
  .tm-convrow:hover .tm-bell.default, .tm-convrow.on .tm-bell.default { visibility: visible; }
  /* All / Unread filter */
  .tm-filter { display: flex; gap: 4px; margin-bottom: 8px; }
  .tm-filter button { flex: 1; background: none; border: 1px solid var(--line); border-radius: 8px;
    padding: 5px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--grey); }
  .tm-filter button.on { background: var(--crimson); border-color: var(--crimson); color: #fff; }
  /* header unread pill */
  .tm-count { background: var(--crimson); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px;
    padding: 1px 7px; margin-left: 6px; }
  /* reactions */
  .tm-rxbar { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
  .tm-rx { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    font-size: 11px; padding: 1px 7px; color: inherit; line-height: 1.7; }
  .tm-rx:hover { border-color: var(--crimson); }
  .tm-rx.mine { border-color: var(--crimson); background: var(--old-bg); font-weight: 700; }
  .tm-rx.add { opacity: 0; transition: opacity .12s; }
  .tm-row:hover .tm-rx.add, .tm-post:hover .tm-rx.add { opacity: .55; }
  .tm-rx.add:hover { opacity: 1; }
  .tm-row.me .tm-rxbar { justify-content: flex-end; }
  /* search */
  /* Sticks to the top of the scrolling view — otherwise you had to scroll a
     long conversation back to the top just to reach the box. Pairs with the
     composer docked at the bottom: both stay put, the messages move between. */
  .tm-search { display: flex; gap: 6px; position: sticky; top: 0; z-index: 4;
    background: var(--surface); padding: 2px 0 10px; }
  .tm-search input { flex: 1; font: inherit; font-size: 13px; padding: 7px 11px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--surface); color: var(--ink); }
  .tm-search input:focus { outline: none; border-color: var(--crimson); }
  .tm-stick { position: sticky; top: 0; z-index: 4; background: var(--surface); }
  .tm-stick .tm-search { position: static; padding-bottom: 6px; }
  .tm-srhead { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--grey);
    padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .tm-srhead .sp { flex: 1; }
  .tm-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 700;
    color: var(--crimson); cursor: pointer; text-decoration: none; }
  .tm-link:hover { text-decoration: underline; }
  .tm-hit { padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; }
  .tm-hit:hover { background: var(--surface2); }
  .tm-hit .h { display: flex; align-items: center; gap: 8px; }
  .tm-hit .who { font-weight: 700; font-size: 12.5px; }
  .tm-hit .when { font-size: 10.5px; color: var(--grey); }
  .tm-hit .s { font-size: 13px; line-height: 1.5; margin-top: 3px; padding-left: 34px; word-wrap: break-word; }
  .tm-hit mark { background: var(--yellow); color: var(--on-yellow, #3a3a3a); padding: 0 2px; border-radius: 3px; }
  /* "new since you last looked" */
  .tm-newline { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
  .tm-newline::before, .tm-newline::after { content: ''; flex: 1; height: 1px; background: var(--crimson); opacity: .45; }
  .tm-newline span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--crimson); }
  .tm-row.new .tm-bub { box-shadow: 0 0 0 1.5px var(--crimson); }
  .tm-post.new { background: var(--old-bg); box-shadow: inset 3px 0 0 var(--crimson); }
  .tm-replies .tm-post.new:nth-child(odd) { background: var(--old-bg); }
  /* ---- chat bubbles ---- */
  .tm-row { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
  .tm-row.grouped { margin-top: 2px; }          /* same person, straight after */
  .tm-row.me { flex-direction: row-reverse; }
  .tm-ava { width: 26px; height: 26px; border-radius: 50%; flex: none; color: #fff; font-size: 9.5px;
    font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
  .tm-ava.blank { visibility: hidden; }
  .tm-bub { max-width: 76%; min-width: 0; padding: 8px 12px; border-radius: 14px; background: var(--surface2);
    font-size: 13.5px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
  .tm-row:not(.grouped) .tm-bub { border-bottom-left-radius: 4px; }
  .tm-row.me:not(.grouped) .tm-bub { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
  .tm-row.me .tm-bub { background: var(--crimson); color: #fff; }
  .tm-bub a { color: var(--link); }
  .tm-row.me .tm-bub a { color: var(--yellow); }
  .tm-bub .nm { font-size: 11px; font-weight: 800; margin-bottom: 2px; }
  .tm-bub .tm { font-size: 10px; opacity: .55; margin-top: 3px; text-align: right; }
  /* ---- channel threads ---- */
  .tm-thread { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
    background: var(--surface); }
  .tm-thread .subj { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
  .tm-post { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; }
  .tm-post .pc { flex: 1; min-width: 0; }
  .tm-post .who { font-weight: 700; font-size: 12.5px; }
  .tm-post .when { font-size: 10.5px; color: var(--grey); margin-left: 6px; }
  .tm-post .body { font-size: 13px; line-height: 1.5; margin-top: 2px; word-wrap: break-word; overflow-wrap: anywhere; }
  .tm-post .body a { color: var(--link); }
  .tm-post.root { padding-left: 0; padding-top: 0; }
  .tm-replies { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); }
  /* Neil, 2026-08-26: consecutive replies were hard to tell apart — zebra them. */
  .tm-replies .tm-post:nth-child(odd) { background: var(--surface2); }
  .tm-replies .tm-post.mine { box-shadow: inset 2px 0 0 var(--crimson); }
  .tm-note { font-size: 12px; color: var(--grey); padding: 10px; background: var(--surface2); border-radius: 8px; margin-bottom: 10px; }
  .tm-note.warn { color: var(--crimson); }
  .tm-empty { color: var(--grey); font-size: 13px; padding: 30px 10px; text-align: center; }
  /* compose (Phase 2) */
  .tm-compose { display: flex; gap: 6px; align-items: flex-end; margin-top: 10px; position: relative; }
  .tm-mbox { position: absolute; bottom: 100%; left: 0; z-index: 5; margin-bottom: 4px; min-width: 220px;
    max-height: 180px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .tm-mbox button { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit;
    padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; }
  .tm-mbox button:hover, .tm-mbox button.on { background: var(--crimson); color: #fff; }
  .tm-mbox .none { padding: 8px 10px; font-size: 12px; color: var(--grey); }
  .tm-chipbar { font-size: 11px; color: var(--grey); margin-top: 4px; }
  .tm-chipbar b { color: var(--crimson); }
  .tm-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .tm-file { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 8px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface2); }
  .tm-file.err { border-color: var(--crimson); color: var(--crimson); }
  .tm-file .x { cursor: pointer; font-weight: 800; opacity: .6; }
  .tm-file .x:hover { opacity: 1; }
  .tm-file .bar { width: 46px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .tm-file .bar i { display: block; height: 100%; background: var(--crimson); transition: width .15s; }
  .tm-clip { background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
    font-size: 15px; padding: 7px 10px; color: inherit; }
  .tm-clip:hover { border-color: var(--crimson); }
  .tm-compose textarea { flex: 1; width: 100%; resize: vertical; min-height: 46px; max-height: 240px; font: inherit;
    font-size: 14px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--ink); }
  /* The DM composer docks to the bottom of the scrolling view so it never
     scrolls away mid-conversation. Thread reply boxes deliberately don't —
     they belong to the thread they sit in. */
  .tm-compose.dock { position: sticky; bottom: 0; z-index: 3; margin-top: 8px; padding: 10px 0 2px;
    background: var(--surface); border-top: 1px solid var(--line); }
  .tm-compose.dock textarea { min-height: 84px; }
  .tm-compose textarea:focus { outline: none; border-color: var(--crimson); }
  .tm-compose input.subj { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; margin-bottom: 6px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
  .tm-compose .col { flex: 1; }
  .tm-newpost { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
  .tm-newpost .lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--grey); }
  .tm-replybtn { background: none; border: 0; color: var(--crimson); font: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; padding: 4px 0 0; }
  .tm-replybtn:hover { text-decoration: underline; }
  .tm-hint { font-size: 11px; color: var(--grey); margin-top: 4px; }
  @media (max-width: 700px) {
    .tm-wrap { flex-direction: column; }
    .tm-list { width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; height: 26vh; }
    .tm-view { height: 52vh; }
    .tm-compose.dock textarea { min-height: 64px; }
  }