/* ============ team — Presence + Direct Messages (warm-paper, iMessage-clean) ============
   All classes tm- prefixed. Existing app.css tokens only (no new palette). Two-pane:
   a calm roster rail on the left, a focused DM thread on the right. */

/* ---- shell: two-pane, fills the view height under the sticky topbar ---- */
.tm-wrap{
  display:grid; grid-template-columns:308px 1fr; gap:16px;
  height:calc(100vh - 152px); min-height:440px;
}
@media(max-width:900px){
  .tm-wrap{ grid-template-columns:1fr; height:auto; }
}

/* ---- LEFT: roster rail ---- */
.tm-side{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:0;
}
.tm-list{ overflow-y:auto; padding:8px; flex:1; min-height:0; }
.tm-list__hd{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:6px 8px 10px; margin:0 2px 4px; border-bottom:1px solid var(--line);
}
.tm-list__t{ font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink); }
.tm-list__n{ font-size:10px; letter-spacing:.05em; color:var(--mute); }

.tm-row{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm);
  cursor:pointer; transition:.12s; margin-bottom:1px; position:relative;
}
.tm-row:hover{ background:var(--panel); }
.tm-row.on{ background:var(--gold-soft); }
.tm-row.on .tm-row__name{ color:var(--gold-deep); }
.tm-row--me{ cursor:default; }
.tm-row--me:hover{ background:transparent; }
.tm-row__main{ flex:1; min-width:0; }
.tm-row__top{ display:flex; align-items:center; gap:7px; }
.tm-row__name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-you{ font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--panel-2); color:var(--mute); padding:1px 5px; border-radius:5px; font-weight:700; }
.tm-row__role{ margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); flex:none; }
.tm-row__sub{ font-size:11.5px; color:var(--mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-row__sub--on{ color:var(--grn); font-weight:500; }

.tm-unread{
  flex:none; min-width:19px; height:19px; padding:0 6px; border-radius:19px;
  background:var(--gold); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; letter-spacing:.02em;
}

/* ---- avatar + presence dot ---- */
.tm-av{
  position:relative; flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:13px; font-weight:700; color:#fff; letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.tm-av--gold{ background:linear-gradient(135deg,#a98a45,#7d6428); }
.tm-av--grn{ background:linear-gradient(135deg,#4c7d58,#3f6f4a); }
.tm-av--blue{ background:linear-gradient(135deg,#456986,#37566f); }
.tm-av--red{ background:linear-gradient(135deg,#a8483b,#9a3b2f); }
.tm-av--amber{ background:linear-gradient(135deg,#c1893a,#a06e26); }
.tm-pres{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--paper);
}
.tm-pres.on{ background:var(--grn); box-shadow:0 0 0 1px var(--grn-soft); }
.tm-pres.off{ background:var(--faint); }
.tm-row.on .tm-pres, .tm-thread__hd .tm-pres{ border-color:var(--paper); }

/* ---- RIGHT: thread ---- */
.tm-thread{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:0;
}
.tm-thread--empty{ align-items:center; justify-content:center; }
@media(max-width:900px){ .tm-thread{ min-height:420px; } }

.tm-thread__hd{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--line); background:var(--paper); flex:none;
}
.tm-thread__id{ min-width:0; }
.tm-thread__name{ font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); }
.tm-thread__meta{ font-size:11.5px; color:var(--mute); margin-top:1px; }
.tm-thread__meta .tm-on{ color:var(--grn); font-weight:600; }
.tm-thread__meta .tm-off{ color:var(--mute); }

/* message scroll area */
.tm-thread__bd{
  flex:1; min-height:0; overflow-y:auto; padding:20px 22px;
  display:flex; flex-direction:column; gap:3px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(155,125,59,.03), transparent 60%),
    var(--panel);
}
.tm-thread__none{ text-align:center; color:var(--mute); font-size:12.5px; padding:30px 20px; margin:auto; }

/* day separator */
.tm-daysep{ text-align:center; margin:12px 0 8px; }
.tm-daysep span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); background:var(--panel-2); padding:3px 10px; border-radius:20px;
}

/* bubbles */
.tm-b{ max-width:76%; display:flex; flex-direction:column; margin-bottom:5px; }
.tm-b__body{
  padding:9px 13px; border-radius:15px; font-size:13.5px; line-height:1.5;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow);
}
.tm-b__foot{ font-family:var(--mono); font-size:9.5px; color:var(--faint); margin-top:3px; padding:0 3px; }
.tm-b--peer{ align-self:flex-start; }
.tm-b--peer .tm-b__body{
  background:var(--paper); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px;
}
.tm-b--peer .tm-b__foot{ text-align:left; }
.tm-b--me{ align-self:flex-end; }
.tm-b--me .tm-b__body{
  background:linear-gradient(135deg,var(--gold),#886b30); color:#fff; border-bottom-right-radius:5px;
}
.tm-b--me .tm-b__foot{ text-align:right; }
.tm-b--pending .tm-b__body{ opacity:.72; }
.tm-b--failed .tm-b__body{
  background:var(--red-soft); color:var(--red); border:1px solid var(--red); cursor:pointer;
}
.tm-b--failed{ cursor:pointer; }
.tm-b__fail{ color:var(--red); font-weight:700; }
.tm-b__time{ font-variant-numeric:tabular-nums; }

/* composer */
.tm-composer{
  flex:none; display:flex; align-items:flex-end; gap:10px; padding:12px 16px;
  border-top:1px solid var(--line); background:var(--paper);
}
.tm-input{
  flex:1; font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--ink);
  padding:10px 14px; border:1px solid var(--rule); border-radius:18px; background:var(--paper);
  outline:none; resize:none; max-height:150px; transition:.12s; min-height:40px;
}
.tm-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.tm-input::placeholder{ color:var(--faint); }
.tm-send{ flex:none; border-radius:18px; padding:9px 18px; }

/* empty (no peer picked) state */
.tm-thread__empty{ text-align:center; max-width:340px; padding:20px; }
.tm-empty-mark{
  width:60px; height:60px; margin:0 auto 16px; border-radius:16px;
  display:grid; place-items:center; color:var(--gold);
  background:var(--gold-soft); border:1px solid var(--line);
}
.tm-empty-mark svg{ width:28px; height:28px; }
.tm-empty-h{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); }
.tm-empty-p{ font-size:12.5px; color:var(--mute); line-height:1.6; margin-top:7px; }

/* shared empties + skeletons */
.tm-empty{ text-align:center; color:var(--mute); padding:26px 16px; font-size:12.5px; }
.tm-empty.sm{ padding:16px 12px; font-size:12px; }
.tm-row--skel{ cursor:default; pointer-events:none; }
.tm-row--skel .tm-av{ background:var(--panel-2); box-shadow:none; }
.tm-skl-l{ height:11px; width:60%; border-radius:5px; }
.tm-skl-s{ height:9px; width:40%; border-radius:5px; margin-top:7px; }