/* Instant-messaging 3-pane layout.
   Uses the global design tokens from tokens.css so the IM views inherit
   the same look as the rest of the app and adapt to dark/light themes. */

/* Ensure the HTML `hidden` attribute always wins over our display rules
   (otherwise display:flex on .im-modal / .im-mention-pop overrides it). */
.im-modal[hidden],
.im-mention-pop[hidden],
.im-composer-attachments[hidden] { display: none !important; }

.im-root {
  display: grid;
  grid-template-columns: 240px 280px 1fr;
  height: calc(100vh - var(--topbar-height, 54px) - 34px);
  min-height: 480px;
  gap: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.im-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-default);
  min-height: 0;
  background: var(--bg-elevated);
}
.im-pane:last-child { border-right: 0; }

.im-pane-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--bg-elevated);
}
.im-pane-header h3 {
  margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Stacked variant: title on top, a small hint line below.
   Used by the Departments pane where the "auto-grouped by user profile"
   subtitle needs its own row instead of fighting the title for space. */
.im-pane-header--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-bottom: 8px;
}
.im-pane-subhint {
  font-size: 9px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-muted);
  opacity: 0.7;
  letter-spacing: 0;
  text-transform: none;
  margin-top: -1px;
}

.im-iconbtn {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 16px; cursor: pointer; padding: 2px 8px; border-radius: var(--r-sm);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.im-iconbtn:hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}

/* roster pane */
.im-search {
  width: 100%;
  padding: 4px 8px;
  font-size: var(--fs-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
}
.im-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-muted);
}

.im-teams, .im-roster, .im-conv-list { overflow-y: auto; flex: 1 1 auto; }
.im-teams { max-height: 30vh; }

.im-team-row, .im-roster-row, .im-conv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  border-left: 2px solid transparent;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  transition: background var(--tr-fast), color var(--tr-fast);
}
.im-team-row { padding-right: 64px; }
.im-team-row .im-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-team-row .im-meta { flex: 0 0 auto; margin-left: 4px; }
.im-team-row:hover, .im-roster-row:hover, .im-conv-row:hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
.im-conv-row.active, .im-team-row.active {
  background: var(--accent-muted);
  border-left-color: var(--accent);
  color: var(--text-primary);
}

.im-avatar {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent) 0%, var(--clr-purple, var(--accent-active)) 100%);
  color: var(--text-inverse);
  font-size: 11px; font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 24px;
}

.im-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.im-badge {
  background: var(--danger); color: var(--text-inverse);
  font-size: 11px; font-weight: var(--fw-bold);
  padding: 1px 7px; min-width: 18px; height: 18px;
  line-height: 16px; text-align: center;
  border-radius: var(--r-full);
  margin-left: auto;
  box-shadow: 0 0 6px rgba(220, 53, 69, 0.35);
}

/* Whole-row treatment for conversations with unread messages: brighter
   title, subtle left accent stripe, faint background tint. Cleared as
   soon as the user opens the conversation (server-side mark_read +
   client-side re-render). */
.im-conv-row.has-unread {
  background: linear-gradient(
      to right,
      var(--danger) 0,
      var(--danger) 3px,
      var(--bg-elevated) 3px,
      var(--bg-elevated) 100%);
  font-weight: var(--fw-semibold, 600);
}
.im-conv-row.has-unread .im-name { color: var(--text-default); }
.im-conv-row.has-unread .im-conv-preview { color: var(--text-default); }
.im-conv-row.has-unread.active {
  background: linear-gradient(
      to right,
      var(--danger) 0,
      var(--danger) 3px,
      var(--accent-soft, rgba(74, 144, 226, 0.18)) 3px,
      var(--accent-soft, rgba(74, 144, 226, 0.18)) 100%);
}

/* Roster row unread badge (per-peer unread DMs). Smaller than the
   conversation list pill — the roster row is denser. */
.im-roster-row .im-roster-badge {
  margin-left: auto;
  background: var(--danger);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 1px 6px;
  min-width: 16px; height: 16px;
  line-height: 14px;
  text-align: center;
  border-radius: var(--r-full);
  flex: 0 0 auto;
}
.im-roster-row.has-unread { background: var(--bg-elevated); }
.im-roster-row.has-unread .im-name { font-weight: var(--fw-semibold, 600); }

/* conversation list */
.im-conv-preview {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* thread pane — explicit grid so the composer is pinned at the bottom and
   the messages list takes the leftover vertical room. Without this the
   textarea could push the send button below the visible viewport on
   shorter screens. */
.im-pane-thread {
  background: var(--bg-base);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "head" "selbar" "msgs" "composer";
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.im-pane-thread > .im-thread-header { grid-area: head; }
.im-pane-thread > .im-select-bar    { grid-area: selbar; }
.im-pane-thread > .im-messages      { grid-area: msgs; }
.im-pane-thread > .im-composer      { grid-area: composer; align-self: end; }
.im-thread-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-muted);
  background: var(--bg-elevated);
}
.im-thread-titlewrap { min-width: 0; }
.im-thread-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.im-thread-title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.im-thread-meta {
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;
}

.im-messages {
  overflow-y: auto;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-base);
  min-height: 0;
}

.im-message {
  display: grid;
  grid-template-columns: 0 32px 1fr;
  gap: 10px;
  align-items: start;
  transition: background-color 120ms ease;
}
.im-pane-thread.selecting .im-message {
  grid-template-columns: 22px 32px 1fr;
  cursor: pointer;
}
.im-pane-thread.selecting .im-message:hover {
  background: var(--bg-subtle, rgba(127,127,127,0.06));
}
.im-msg-check {
  width: 18px; height: 18px;
  margin: 6px 0 0;
  visibility: hidden;
  cursor: pointer;
}
.im-pane-thread.selecting .im-msg-check { visibility: visible; }
.im-message .im-avatar { width: 32px; height: 32px; font-size: 13px; flex: 0 0 32px; }
.im-msg-body { min-width: 0; }
.im-msg-author {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-right: 6px;
  color: var(--text-primary);
}
.im-msg-time { font-size: var(--fs-xs); color: var(--text-muted); }
.im-msg-text {
  margin-top: 2px;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  white-space: pre-wrap; word-wrap: break-word;
}
.im-msg-attach {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.im-attach-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--text-secondary);
  max-width: 280px;
}
.im-attach-card:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.im-attach-img {
  max-width: 360px; max-height: 240px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
}
.im-attach-size { color: var(--text-muted); font-size: var(--fs-xs); }

/* mention chips inside message body — built on --accent / semantic tokens
   plus a few category accent colors so each chip kind is visually distinct
   in both dark and light themes. */
.im-mention {
  display: inline-block;
  padding: 0 6px;
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  margin: 0 1px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.im-mention:hover { text-decoration: none; }

.im-mention-user {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.im-mention-ticker {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  font-family: var(--font-mono);
}
.im-mention-note {
  background: var(--success-bg);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.im-mention-pipeline {
  background: color-mix(in srgb, var(--clr-purple, #d2a8ff) 18%, transparent);
  color: var(--clr-purple, #d2a8ff);
  border-color: color-mix(in srgb, var(--clr-purple, #d2a8ff) 35%, transparent);
}
.im-mention-portfolio {
  background: color-mix(in srgb, var(--clr-orange, #f78166) 18%, transparent);
  color: var(--clr-orange, #f78166);
  border-color: color-mix(in srgb, var(--clr-orange, #f78166) 35%, transparent);
}
.im-mention-universe {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}

/* composer */
.im-composer {
  border-top: 1px solid var(--border-muted);
  padding: 8px 12px;
  background: var(--bg-elevated);
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
}
.im-composer-row { display: flex; align-items: center; gap: 8px; }
.im-composer textarea {
  flex: 1 1 auto;
  resize: none;
  min-height: 36px; max-height: 120px;
  padding: 8px 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  line-height: 1.4;
  font-family: var(--font-sans);
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.im-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.im-composer textarea:disabled { opacity: .5; cursor: not-allowed; }

.im-attach-btn {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 16px;
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.im-attach-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.im-send {
  margin-left: auto;
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  padding: 6px 16px;
  font-weight: var(--fw-semibold);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-base);
  transition: background var(--tr-fast);
}
.im-send:disabled { opacity: .4; cursor: not-allowed; }
.im-send:hover:not(:disabled) { background: var(--accent-hover); }

.im-mention-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.im-composer-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.im-pending-attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.im-pending-attach button {
  border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer;
}

/* mention popup */
.im-mention-pop {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 220px; overflow-y: auto;
  min-width: 240px;
  z-index: var(--z-dropdown, 100);
}
.im-mention-item {
  padding: 6px 10px; cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
  transition: background var(--tr-fast);
}
.im-mention-item:hover,
.im-mention-item.active {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
.im-mention-item .kind {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.im-empty {
  padding: 18px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.im-empty-thread { margin: auto; }
.im-empty-hint { font-size: var(--fs-xs); opacity: .7; }

/* "All users" section divider above directory search hits */
.im-roster-section {
  padding: 8px 12px 4px;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  border-top: 1px solid var(--border-muted);
  margin-top: 4px;
  background: var(--bg-elevated);
}
/* Directory-only rows render the same as roster rows, with a hairline
   left-edge accent to indicate "outside your teams". */
.im-roster-row--ext {
  border-left: 2px solid var(--accent-muted, rgba(88,166,255,0.18));
}

/* modal */
.im-modal {
  position: fixed; inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal, 1500);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.im-modal-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: 18px;
  width: min(440px, 90vw);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
}
.im-modal-card h3 {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--text-primary);
}
.im-modal-card label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.im-modal-card input[type="text"] {
  padding: 6px 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
}
.im-group-members {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-base);
}
.im-group-members label {
  flex-direction: row; align-items: center; gap: 8px;
  color: var(--text-primary);
  font-size: var(--fs-base);
  cursor: pointer;
}
.im-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

.im-btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border: 0;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  transition: background var(--tr-fast);
}
.im-btn-primary:hover { background: var(--accent-hover); }

.im-btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.im-btn-secondary:hover {
  background: var(--bg-elevated-2);
  border-color: var(--border-strong);
}

.im-btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: background var(--tr-fast);
}
.im-btn-danger:hover { background: var(--danger-bg); }

/* admin teams page */
.admin-teams {
  padding: 16px;
  color: var(--text-primary);
}
.admin-teams-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.admin-new-team { display: flex; gap: 8px; }
.admin-new-team input {
  padding: 6px 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
}
.adm-status { font-size: var(--fs-sm); }
.adm-status.ok { color: var(--success); }
.adm-status.err { color: var(--danger); }

.adm-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
}
.adm-teams-list h3,
.adm-team-detail h3,
.adm-team-detail h4 {
  margin: 8px 0 6px;
  color: var(--text-primary);
}
.adm-team-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; cursor: pointer;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.adm-team-row:hover {
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}
.adm-team-row.selected {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--text-primary);
}
.adm-team-name { font-weight: var(--fw-semibold); }
.adm-team-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.adm-detail-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.adm-members { list-style: none; padding: 0; margin: 0; }
.adm-members li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.adm-add-member {
  display: flex; gap: 8px; align-items: center;
}
.adm-add-member select {
  padding: 6px 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  min-width: 280px;
}
.adm-danger {
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--border-muted);
}
.adm-owner-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--accent-muted);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Tablet: hide roster, keep list + thread side-by-side */
@media (max-width: 900px) and (min-width: 721px) {
  .im-root { grid-template-columns: 260px 1fr; }
  .im-pane-roster { display: none; }
  .im-mobile-tabs { display: none; }
  .im-back-btn { display: none; }
  .adm-grid { grid-template-columns: 1fr; }
}

/* Mobile tabs + back button hidden on desktop */
.im-mobile-tabs { display: none; }
.im-back-btn {
  display: none;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  margin: 0 4px 0 -6px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  border-radius: var(--r-full, 999px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.im-back-btn:active { background: var(--bg-elevated-2, rgba(255,255,255,0.06)); }

/* =========================================================================
   Phone / narrow mobile — single-pane IM (list | roster | thread)
   Without this, list+thread squeeze side-by-side and the app is unusable
   on iPhone and other phones.
   ========================================================================= */
@media (max-width: 720px) {
  .im-root {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: calc(100dvh - var(--topbar-height, 56px) - env(safe-area-inset-bottom, 0px) - 8px);
    min-height: 0;
    max-height: calc(100dvh - var(--topbar-height, 56px) - env(safe-area-inset-bottom, 0px) - 8px);
    border-radius: var(--r-md, 8px);
    position: relative;
  }

  /* Only one primary pane visible at a time */
  .im-root > .im-pane { display: none; min-height: 0; height: 100%; }
  .im-root.im-view-list > .im-pane-list { display: flex; grid-row: 1; }
  .im-root.im-view-roster > .im-pane-roster { display: flex; grid-row: 1; }
  .im-root.im-view-thread > .im-pane-thread { display: grid; grid-row: 1; }

  /* Bottom tabs for Chats / People (hidden while in a thread) */
  .im-mobile-tabs {
    display: flex;
    grid-row: 2;
    border-top: 1px solid var(--border-default);
    background: var(--bg-elevated);
    padding: 4px 8px max(6px, env(safe-area-inset-bottom, 0px));
    gap: 4px;
    z-index: 5;
  }
  .im-root.im-view-thread .im-mobile-tabs { display: none; }

  .im-mobile-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .im-mobile-tab-icon { font-size: 18px; line-height: 1; }
  .im-mobile-tab.is-active {
    color: var(--accent, #58a6ff);
    background: var(--accent-muted, rgba(88,166,255,0.12));
  }
  .im-mobile-tab:active { opacity: 0.85; }

  /* Thread: full-screen with back control */
  .im-back-btn { display: inline-flex; }
  .im-thread-header {
    padding: 8px 10px;
    gap: 6px;
    align-items: center;
  }
  .im-thread-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 48%;
  }
  .im-thread-search {
    width: 100%;
    max-width: 140px;
    order: 3;
    flex: 1 1 100%;
  }
  .im-thread-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .im-thread-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Composer: larger touch targets, safe-area for home indicator */
  .im-composer {
    padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px));
  }
  .im-composer textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    min-height: 40px;
  }
  .im-send {
    min-height: 40px;
    min-width: 64px;
    padding: 8px 14px;
  }
  .im-attach-btn, .im-emoji-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .im-mention-help { display: none; } /* save toolbar space on phones */

  /* Conversation / roster rows: denser but tappable */
  .im-conv-row, .im-roster-row, .im-team-row {
    min-height: 52px;
    padding: 10px 14px;
  }
  .im-teams { max-height: none; flex: 0 0 auto; }

  /* Touch: always show row actions that desktop reveals on hover */
  .im-conv-more {
    display: inline-block;
    position: static;
    margin-left: 4px;
    padding: 8px 10px;
    font-size: 18px;
  }
  .im-team-info, .im-team-del {
    opacity: 0.85;
    position: static;
    transform: none;
    width: 32px; height: 32px;
    margin-left: 2px;
  }
  .im-team-row { padding-right: 12px; }

  /* Message actions: no hover on touch — show on open message or always compact */
  .im-msg-actions {
    display: inline-flex;
    position: static;
    margin-top: 6px;
    box-shadow: none;
    border-radius: 10px;
    padding: 2px;
  }
  .im-act {
    padding: 8px 10px;
    font-size: 16px;
    min-width: 36px;
    min-height: 36px;
  }
  .im-message {
    grid-template-columns: 0 36px 1fr;
    gap: 8px;
    padding: 4px 0;
  }
  .im-pane-thread.selecting .im-message {
    grid-template-columns: 28px 36px 1fr;
  }

  /* Search panel full-bleed under header */
  .im-search-panel {
    left: 8px; right: 8px; width: auto; max-width: none;
    top: 52px;
  }

  /* Hide the floating Copilot FAB on /messages mobile — it sat on top of the
     bottom Chats/People tabs and the IM Send button (feedback #8). Users can
     open Copilot from any other page; IM is a dedicated messaging surface. */
  html.page-messages .chat-toggle-fab,
  html.page-messages .chat-fab {
    display: none !important;
  }

  /* Content shell: let IM fill the phone viewport */
  html.page-messages .content-left {
    padding: 6px !important;
    height: auto;
    max-height: none;
  }
  html.page-messages .content-wrapper {
    overflow: hidden;
  }
}

/* Desktop/tablet: ensure default 3-col when wide */
@media (min-width: 901px) {
  .im-mobile-tabs { display: none !important; }
  .im-back-btn { display: none !important; }
  .adm-grid { grid-template-columns: 320px 1fr; }
}

/* Unread badge in the side nav. Bigger + brighter + a subtle pulse so a
   user glancing at the sidebar can't miss new messages. The keyframe rings
   a translucent halo outward from the badge — one second total, runs only
   while .has-new is set (cleared as soon as the user visits /messages). */
.nav-item .im-unread-badge {
  position: absolute; top: 4px; right: 6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: var(--text-inverse);
  font-size: 11px; font-weight: var(--fw-bold);
  line-height: 20px;
  text-align: center; display: none;
  box-shadow: 0 0 0 2px var(--bg-base, #0e1116),
              0 0 8px rgba(220, 53, 69, 0.45);
  letter-spacing: 0;
}
.nav-item .im-unread-badge.visible { display: inline-block; }
.nav-item .im-unread-badge.has-new {
  animation: im-badge-pulse 1.4s ease-out 2;
}
@keyframes im-badge-pulse {
  0%   { box-shadow: 0 0 0 2px var(--bg-base, #0e1116),
                     0 0 0 0   rgba(220, 53, 69, 0.55); }
  70%  { box-shadow: 0 0 0 2px var(--bg-base, #0e1116),
                     0 0 0 14px rgba(220, 53, 69, 0);     }
  100% { box-shadow: 0 0 0 2px var(--bg-base, #0e1116),
                     0 0 0 0   rgba(220, 53, 69, 0);     }
}

/* -------- header actions (Teams pane: + and ⟳) -------- */
.im-pane-actions { display: inline-flex; gap: 4px; }

/* -------- legacy hover-delete button (no longer used; select mode replaces it) */
.im-msg-delete { display: none !important; }

/* -------- multi-select toolbar above the message list -------- */
.im-select-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.im-select-bar[hidden] { display: none; }
.im-select-all {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--text-primary);
}
.im-select-all input { width: 16px; height: 16px; cursor: pointer; }
.im-select-count { color: var(--text-muted); }
.im-btn-danger {
  margin-left: auto;
  background: var(--danger, #d1242f);
  color: var(--text-inverse, #fff);
  border: 1px solid var(--danger, #d1242f);
  padding: 5px 14px;
  border-radius: var(--r-md, 6px);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: opacity 120ms ease, filter 120ms ease;
}
.im-btn-danger:hover { filter: brightness(1.05); }
.im-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

/* -------- team row: hover-revealed delete (owner only) -------- */
.im-team-row { position: relative; }
.im-team-del {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted, #57606a);
  border-radius: var(--r-sm, 4px);
  font-size: 12px; line-height: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.im-team-row:hover .im-team-del { opacity: 0.85; }
.im-team-del:hover {
  background: var(--danger, #d1242f);
  border-color: var(--danger, #d1242f);
  color: var(--text-inverse, #fff);
  opacity: 1;
}

/* -------- emoji button + picker -------- */
.im-emoji-btn {
  background: transparent;
  border: 1px solid transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-md, 6px);
  line-height: 1;
}
.im-emoji-btn:hover { background: var(--bg-subtle, #f6f8fa); }

.im-emoji-pop {
  position: fixed;
  z-index: 60;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #d0d7de);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  max-width: 320px;
  max-height: 260px;
  overflow: auto;
}
.im-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.im-emoji {
  background: transparent;
  border: 1px solid transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-sm, 4px);
  line-height: 1;
}
.im-emoji:hover { background: var(--bg-subtle, #f6f8fa); }

/* per-team-row info button (shows members modal) — sits to the left of the
   delete button so the two never collide. Both icons are absolute so the
   meta count stays in the normal flow. */
.im-team-info {
  position: absolute;
  right: 34px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  padding: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-sm, 4px);
  color: var(--text-muted);
  font-size: 13px; line-height: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.im-team-row:hover .im-team-info { opacity: 0.85; }
.im-team-info:hover {
  opacity: 1;
  background: var(--bg-elevated-2);
  color: var(--text-primary);
}

/* team-members modal (lightweight, reuses im-modal styles) */
.im-members-list {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0 14px;
  padding: 4px 0;
  border-top: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
}
.im-member-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.im-member-row .im-meta {
  margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs);
}

/* =========================================================================
   IM phase-2 features (edit / reply / reactions / typing / presence / mute /
   pin / search / starred / forward / notification banner)
   ========================================================================= */

/* Reply quote header inside a message body */
.im-reply-quote {
  display: block;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-left: 3px solid var(--accent, #4a90e2);
  background: var(--bg-elevated);
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  cursor: pointer;
}
.im-reply-quote:hover { background: var(--bg-hover, var(--bg-elevated)); }
.im-reply-quote .im-reply-author { color: var(--accent, #4a90e2); margin-right: 6px; font-weight: 600; }
.im-reply-quote .im-reply-text   { color: var(--text-muted); }

/* Reply composer bar (sits above the textarea) */
.im-reply-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
.im-reply-bar[hidden] { display: none; }
.im-reply-bar .im-reply-label { color: var(--text-muted); }
.im-reply-bar .im-reply-snippet { color: var(--text-default); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* (edited) suffix + star marker on the message header line */
.im-edited { color: var(--text-muted); font-style: italic; font-size: 11px; }
.im-starred-tag { font-size: 12px; }

/* Reactions strip below the message body */
.im-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.im-rx {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  font-size: 13px; cursor: pointer;
  line-height: 18px;
}
.im-rx:hover { border-color: var(--accent, #4a90e2); }
.im-rx.is-mine {
  background: rgba(74, 144, 226, 0.15);
  border-color: var(--accent, #4a90e2);
}
.im-rx .im-rx-n { font-size: 11px; color: var(--text-muted); }
.im-rx.is-mine .im-rx-n { color: var(--accent, #4a90e2); }

/* Reactions picker popup */
.im-rx-pop {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 2147483000;
  max-width: 220px;
}
.im-rx-pick {
  background: transparent; border: 0; padding: 4px 6px;
  font-size: 18px; cursor: pointer; border-radius: 4px;
}
.im-rx-pick:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); }

/* Per-message hover actions toolbar */
.im-message { position: relative; }
.im-msg-actions {
  position: absolute;
  top: 4px; right: 8px;
  display: none;
  gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1px 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.im-message:hover .im-msg-actions { display: inline-flex; }
.im-act {
  background: transparent; border: 0; padding: 2px 5px;
  font-size: 14px; line-height: 16px; cursor: pointer; border-radius: 8px;
  color: var(--text-default);
}
.im-act:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); }

/* Inline edit textarea + save/cancel */
.im-edit-area {
  width: 100%; box-sizing: border-box;
  font: inherit; padding: 6px 8px;
  border: 1px solid var(--accent, #4a90e2); border-radius: 4px;
  background: var(--bg-base);
  resize: vertical;
}
.im-edit-bar {
  display: flex; gap: 6px; margin-top: 4px;
}

/* Flash highlight when scrolling to a message via reply / search */
.im-message.flash {
  animation: im-msg-flash 1.2s ease-out;
}
@keyframes im-msg-flash {
  0%   { background: rgba(74, 144, 226, 0.30); }
  100% { background: transparent; }
}

/* Starred marker on the row */
.im-message.is-starred .im-msg-body { border-left: 2px solid #f5c518; padding-left: 8px; }

/* Typing indicator suffix in thread header */
.im-typing-tag {
  margin-left: 6px;
  color: var(--accent, #4a90e2);
  font-style: italic;
  font-size: 12px;
}

/* Presence dot on avatar */
.im-avatar { position: relative; }
.im-presence-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
}
.im-presence-dot[data-status="online"] { background: #3aa763; }
.im-presence-dot[data-status="away"]   { background: #d8a017; }

/* Conv row: pin, mute, more, muted-badge variant */
.im-conv-row.is-pinned { background: linear-gradient(to right, rgba(245, 197, 24, 0.18) 0, rgba(245, 197, 24, 0.18) 3px, var(--bg-elevated) 3px); }
.im-conv-row.is-pinned.has-unread { /* keep red stripe on top */ }
.im-conv-row.is-muted .im-name,
.im-conv-row.is-muted .im-conv-preview { opacity: 0.65; }
.im-pin-icon, .im-mute-icon { font-size: 11px; margin-left: 4px; vertical-align: middle; }
.im-badge.is-muted { background: var(--text-muted); box-shadow: none; }

/* ⋯ button on conv rows */
.im-conv-more {
  position: absolute;
  top: 4px; right: 4px;
  display: none;
  background: transparent; border: 0;
  font-size: 16px; line-height: 16px;
  cursor: pointer; padding: 2px 4px; border-radius: 4px;
  color: var(--text-muted);
}
.im-conv-row { position: relative; }
.im-conv-row:hover .im-conv-more { display: inline-block; }
.im-conv-more:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); color: var(--text-default); }

/* Conv-row dropdown menu */
.im-conv-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 180px;
  padding: 4px;
  z-index: 2147483000;
}
.im-conv-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 6px 10px;
  font: inherit; cursor: pointer; border-radius: 4px;
  color: var(--text-default);
}
.im-conv-menu button:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); }
.im-conv-menu button.danger { color: var(--danger, #d33); }
.im-conv-menu button.danger:hover {
  background: var(--danger-bg, rgba(211,51,51,0.10));
  color: var(--danger, #d33);
}

/* Search panel — overlays the thread when active */
.im-thread-search {
  padding: 4px 8px; font-size: 12.5px;
  border: 1px solid var(--border-subtle); border-radius: 4px;
  background: var(--bg-base); color: var(--text-default);
  width: 180px;
}
.im-search-panel {
  position: absolute; top: 48px; right: 16px; left: auto; width: 380px; max-width: 90vw;
  max-height: 60vh; overflow: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 100;
}
.im-search-panel[hidden] { display: none; }
.im-search-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-muted);
}
.im-search-results { padding: 6px 0; }
.im-search-hit {
  display: block; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit;
}
.im-search-hit:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); }
.im-search-where {
  display: block; font-size: 11px; color: var(--accent, #4a90e2); font-weight: 600;
  margin-bottom: 2px;
}
.im-search-body { display: block; font-size: 13px; }
.im-search-ts   { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.im-search-body mark { background: rgba(245, 197, 24, 0.45); color: inherit; }

/* Forward modal */
.im-modal {
  position: fixed; inset: 0; z-index: 2147483002;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.im-modal-card {
  background: var(--bg-elevated); color: var(--text-default);
  border: 1px solid var(--border-default);
  border-radius: 8px; padding: 18px; min-width: 320px; max-width: 480px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
}
.im-modal-card h3 { margin: 0 0 4px 0; }
.im-modal-card .dim { margin: 0 0 8px 0; opacity: 0.7; font-size: 12.5px; }
.im-fw-list { max-height: 240px; overflow: auto; margin-bottom: 10px; }
.im-fw-row { display: block; padding: 4px 0; cursor: pointer; }
.im-fw-comment-row { display: block; margin-bottom: 10px; }
.im-fw-comment-row input { width: 100%; padding: 6px; box-sizing: border-box; }
.im-modal-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Notification opt-in banner */
.im-notif-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(74, 144, 226, 0.12);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12.5px;
}
.im-notif-banner button { font: inherit; padding: 4px 10px; cursor: pointer; }

/* =========================================================================
   /messages page: lift the chat-toggle FAB above the IM composer so the
   round "C" button stops overlapping the Send button on the right (feedback
   #8). The composer is ~90px tall when empty (one-line textarea + toolbar);
   pad to 100px to be safe regardless of attachment row or growing textarea.
   ========================================================================= */
html.page-messages .chat-toggle-fab,
html.page-messages .chat-fab {
  bottom: calc(var(--sp-5) + 100px);
}
@media (max-width: 900px) {
  html.page-messages .chat-toggle-fab,
  html.page-messages .chat-fab {
    bottom: calc(var(--sp-3) + 100px);
  }
}

/* Pathway D Stage D2 — Messages (IM) studio chrome (layout density preserved) */
.im-root {
  border-color: var(--border-soft, var(--border-default));
  border-radius: var(--r-card, 12px);
  background: var(--bg-studio, var(--bg-base));
  box-shadow: var(--shadow-studio, none);
}
.im-pane {
  border-right-color: var(--border-soft, var(--border-default));
  background: var(--bg-studio-elevated, var(--bg-elevated));
}
.im-pane-header {
  border-bottom-color: var(--border-soft, var(--border-muted));
  background: var(--bg-studio-elevated, var(--bg-elevated));
}
.im-pane-header h3 {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-dim, var(--text-muted));
}
.im-search {
  border-radius: var(--r-control, 8px);
  border-color: var(--border-soft-strong, var(--border-default));
}
.im-iconbtn {
  border-radius: var(--r-control, 8px);
}
.im-team-row, .im-roster-row, .im-conv-row {
  border-radius: 0 var(--r-control, 8px) var(--r-control, 8px) 0;
}
.im-thread-header {
  border-bottom-color: var(--border-soft, var(--border-muted));
  background: var(--bg-studio-elevated, var(--bg-elevated));
}
.im-thread-title {
  letter-spacing: -0.01em;
  font-weight: var(--fw-semibold, 600);
}
.im-composer {
  border-top-color: var(--border-soft, var(--border-default));
  background: var(--bg-studio-elevated, var(--bg-elevated));
}
.im-modal-card {
  border-radius: var(--r-card, 12px);
  border-color: var(--border-soft, var(--border-default));
  background: var(--bg-studio-elevated, var(--bg-elevated));
  box-shadow: var(--shadow-studio, none);
}