/* =====================================================================
   COLLABORATION - CHAT SURFACE  (.co-*)
   ---------------------------------------------------------------------
   The net-new visual layer for the Internal Team Collaboration System:
   avatars, message rows/bubbles, threaded replies, reactions, mentions,
   the composer, the AI Daily Brief, the notifications inbox, the activity
   timeline, and the conversations list.

   Consumes design-system tokens (--ds-*) ONLY, so it re-themes with the
   light/dark/system switch automatically. Reuses .ds-insight / .ds-chip /
   .ds-btn / .ds-textarea / .ds-segment / .ds-empty from design-system.css.
   ===================================================================== */

/* ---------- avatars (net-new DS gap: no shared avatar primitive) ------ */
.co-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-pill);
  background: var(--ds-surface-3); color: var(--ds-text-hi);
  font: 600 12px/1 var(--font-ui); letter-spacing: .02em;
  border: 1px solid var(--ds-hairline-strong); overflow: hidden; user-select: none;
}
.co-av--sm { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
.co-av--lg { width: 42px; height: 42px; flex-basis: 42px; font-size: 14px; }
.co-av--ai {
  background: linear-gradient(150deg, var(--ds-gold-200), var(--ds-gold-400));
  color: var(--ds-on-gold); border-color: var(--ds-gold-500);
}
.co-av__ai-dot {
  position: absolute; margin: 22px 0 0 22px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ds-accent); border: 2px solid var(--ds-surface-2);
  font-size: 7px; color: var(--ds-on-gold); display: grid; place-items: center;
}

/* ---------- role lens bar (Boss ⇄ My Dashboard toggle) --------------- */
.co-lensbar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ds-hairline);
}
.co-lensbar__as {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 12px/1 var(--font-ui); color: var(--ds-text-lo);
}
.co-lensbar__as .ds-select { min-width: 190px; }
.co-lensbar__hint {
  font: 400 12.5px/1.4 var(--font-ui); color: var(--ds-text-mute); margin-left: auto;
}
@media (max-width: 700px) { .co-lensbar__hint { margin-left: 0; width: 100%; } }

/* ---------- section card padding (reused .ds-card containers) --------- */
.co-card { padding: var(--sp-4) var(--sp-4) var(--sp-4); }

/* =====================================================================
   DAILY BRIEF
   ===================================================================== */
.co-brief {
  border: 1px solid var(--ds-hairline); border-radius: var(--r-lg);
  background: var(--ds-surface-2); box-shadow: var(--el-1); overflow: hidden;
}
.co-brief__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ds-hairline);
  background: linear-gradient(180deg, var(--ds-surface-glass), transparent);
}
.co-brief__mark {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(150deg, var(--ds-gold-200), var(--ds-gold-400));
  color: var(--ds-on-gold); box-shadow: var(--el-glow);
}
.co-brief__titles { min-width: 0; }
.co-brief__eyebrow {
  font: 600 11px/1 var(--font-ui); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--ds-accent); margin: 0 0 4px;
}
.co-brief__title { font: 600 18px/1.2 var(--font-display); color: var(--ds-text-hi); margin: 0; }
.co-brief__sub { font: 400 13px/1.4 var(--font-ui); color: var(--ds-text-lo); margin: 4px 0 0; }
.co-brief__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4); padding: var(--sp-5);
}
.co-briefcol { min-width: 0; }
.co-briefcol__h {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2);
  font: 600 12px/1 var(--font-ui); letter-spacing: .02em; color: var(--ds-text);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
}
.co-briefcol__count {
  font-size: 10px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--ds-surface-3); color: var(--ds-text-lo);
}
.co-briefitem {
  display: block; width: 100%; text-align: left; cursor: default;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--ds-hairline); background: var(--ds-surface-1);
  margin-bottom: var(--sp-2); position: relative; padding-left: var(--sp-4);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.co-briefitem::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ds-hairline-strong);
}
.co-briefitem[data-drill] { cursor: pointer; }
.co-briefitem[data-drill]:hover { border-color: var(--ds-hairline-strong); background: var(--ds-surface-2); }
.co-briefitem--risk::before { background: var(--ds-danger); }
.co-briefitem--act::before  { background: var(--ds-accent); }
.co-briefitem--opp::before  { background: var(--ds-positive); }
.co-briefitem--ok::before   { background: var(--ds-positive); }
.co-briefitem--soft::before { background: var(--ds-text-mute); }
.co-briefitem__text { font: 500 13px/1.35 var(--font-ui); color: var(--ds-text-hi); }
.co-briefitem__meta { font: 400 12px/1.35 var(--font-ui); color: var(--ds-text-lo); margin-top: 2px; }

/* =====================================================================
   CONVERSATIONS LIST
   ===================================================================== */
.co-convlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.co-conv {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%;
  text-align: left; cursor: pointer; padding: var(--sp-3);
  border: 1px solid var(--ds-hairline); border-radius: var(--r-md);
  background: var(--ds-surface-1);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.co-conv:hover { border-color: var(--ds-hairline-strong); box-shadow: var(--el-1); transform: translateY(-1px); }
.co-conv__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 16px;
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
}
.co-conv__body { min-width: 0; flex: 1; }
.co-conv__top { display: flex; align-items: baseline; gap: var(--sp-2); justify-content: space-between; }
.co-conv__title { font: 600 14px/1.3 var(--font-ui); color: var(--ds-text-hi); }
.co-conv__type {
  font: 600 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ds-text-lo); padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--ds-surface-3); white-space: nowrap;
}
.co-conv__sub { font: 400 12px/1.4 var(--font-ui); color: var(--ds-text-lo); margin-top: 1px; }
.co-conv__last {
  font: 400 12px/1.45 var(--font-ui); color: var(--ds-text); margin-top: var(--sp-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.co-conv__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.co-conv__count { font: 400 11px/1 var(--font-ui); color: var(--ds-text-mute); }

/* =====================================================================
   DISCUSSION THREAD
   ===================================================================== */
.co-thread-page { max-width: 880px; margin: 0 auto; }
.co-thread { display: flex; flex-direction: column; min-height: 0; }
.co-thread__head {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--ds-hairline);
}
.co-thread__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; font-size: 20px;
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
}
.co-thread__titles { min-width: 0; flex: 1; }
.co-thread__type {
  font: 600 11px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--ds-accent); margin-bottom: 3px;
}
.co-thread__title { font: 600 20px/1.2 var(--font-display); color: var(--ds-text-hi); margin: 0; }
.co-thread__sub { font: 400 13px/1.4 var(--font-ui); color: var(--ds-text-lo); margin-top: 2px; }

.co-msgs { display: flex; flex-direction: column; gap: var(--sp-4); }

/* message row */
.co-msg { display: flex; gap: var(--sp-3); align-items: flex-start; position: relative; }
.co-msg--reply { margin-left: 46px; }
.co-msg--reply::before {
  content: ''; position: absolute; left: -22px; top: -14px; height: 30px; width: 16px;
  border-left: 2px solid var(--ds-hairline); border-bottom: 2px solid var(--ds-hairline);
  border-bottom-left-radius: 8px;
}
.co-msg__body { min-width: 0; flex: 1; }
.co-msg__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.co-msg__author { font: 600 13px/1.3 var(--font-ui); color: var(--ds-text-hi); }
.co-msg__badge {
  font: 600 9px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em;
  color: var(--ds-on-gold); background: var(--ds-accent);
  padding: 2px 6px; border-radius: var(--r-pill);
}
.co-msg__when { font: 400 11px/1 var(--font-ui); color: var(--ds-text-mute); }
.co-msg__bubble {
  margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-3);
  border: 1px solid var(--ds-hairline); border-radius: var(--r-md);
  background: var(--ds-surface-1); color: var(--ds-text);
  font: 400 14px/1.55 var(--font-ui); white-space: pre-wrap; word-wrap: break-word;
}
.co-msg--ai .co-msg__bubble {
  background: var(--ds-surface-glass); border-color: var(--ds-gold-300);
}
.co-mention {
  color: var(--ds-accent); font-weight: 600; background: var(--ds-gold-100);
  padding: 0 3px; border-radius: 4px;
}
.co-code {
  display: block; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
  border-radius: var(--r-sm); font: 400 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ds-text-hi); overflow-x: auto; white-space: pre;
}

/* attachments */
.co-atts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.co-att {
  display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-ui);
  color: var(--ds-text); padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
}

/* reactions */
.co-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); align-items: center; }
.co-react {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font: 500 12px/1 var(--font-ui); color: var(--ds-text);
  padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.co-react:hover { border-color: var(--ds-hairline-strong); }
.co-react.is-mine { background: var(--ds-gold-100); border-color: var(--ds-gold-400); color: var(--ds-text-hi); }
.co-react__n { color: var(--ds-text-lo); font-size: 11px; }
.co-msg__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.co-actbtn {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  font: 500 12px/1 var(--font-ui); color: var(--ds-text-lo);
}
.co-actbtn:hover { color: var(--ds-accent); }
.co-addreact { position: relative; }
.co-emojipop {
  position: absolute; z-index: 20; bottom: 24px; left: 0; display: flex; gap: 2px;
  padding: 5px; border-radius: var(--r-pill); background: var(--ds-surface-2);
  border: 1px solid var(--ds-hairline-strong); box-shadow: var(--el-2);
}
.co-emojipop button { background: none; border: none; cursor: pointer; font-size: 16px; padding: 3px 5px; border-radius: var(--r-sm); }
.co-emojipop button:hover { background: var(--ds-surface-3); }

/* =====================================================================
   COMPOSER
   ===================================================================== */
.co-composer {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--ds-hairline); position: relative;
}
.co-composer--reply { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: none; margin-left: 46px; }
.co-replyctx {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2);
  font: 400 12px/1.3 var(--font-ui); color: var(--ds-text-lo);
}
.co-replyctx button { background: none; border: none; color: var(--ds-accent); cursor: pointer; font: 500 12px/1 var(--font-ui); }
.co-composer .ds-textarea { min-height: 76px; }
.co-composer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.co-composer__tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.co-toolbtn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font: 500 12px/1 var(--font-ui); color: var(--ds-text-lo);
  padding: 6px 10px; border-radius: var(--r-pill);
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline);
}
.co-toolbtn:hover { border-color: var(--ds-hairline-strong); color: var(--ds-text); }
.co-hint { font: 400 11px/1.3 var(--font-ui); color: var(--ds-text-mute); }

/* @mention autocomplete */
.co-mentionbox {
  position: absolute; z-index: 30; left: 0; right: 0; max-height: 230px; overflow-y: auto;
  background: var(--ds-surface-2); border: 1px solid var(--ds-hairline-strong);
  border-radius: var(--r-md); box-shadow: var(--el-2); padding: 5px;
}
.co-mentionrow {
  display: flex; gap: var(--sp-2); align-items: center; width: 100%; text-align: left;
  padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; background: none; border: none;
}
.co-mentionrow:hover, .co-mentionrow.is-active { background: var(--ds-surface-3); }
.co-mentionrow__name { font: 600 13px/1.2 var(--font-ui); color: var(--ds-text-hi); }
.co-mentionrow__handle { font: 400 11px/1.2 var(--font-ui); color: var(--ds-accent); }
.co-mentionrow__sub { font: 400 11px/1.3 var(--font-ui); color: var(--ds-text-lo); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   NOTIFICATIONS INBOX
   ===================================================================== */
.co-notifs { display: flex; flex-direction: column; gap: var(--sp-2); }
.co-notif {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%; text-align: left;
  padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--ds-hairline);
  background: var(--ds-surface-1); position: relative; cursor: default;
}
.co-notif[data-drill] { cursor: pointer; }
.co-notif[data-drill]:hover { border-color: var(--ds-hairline-strong); }
.co-notif.is-unread { background: var(--ds-surface-2); border-color: var(--ds-hairline-strong); }
.co-notif.is-unread::before {
  content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ds-accent);
}
.co-notif__ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 13px;
  background: var(--ds-surface-3); border: 1px solid var(--ds-hairline);
}
.co-notif__ic--risk { background: var(--ds-danger-soft); border-color: var(--ds-danger); }
.co-notif__ic--ai { background: linear-gradient(150deg, var(--ds-gold-200), var(--ds-gold-400)); color: var(--ds-on-gold); border-color: var(--ds-gold-500); }
.co-notif__body { min-width: 0; flex: 1; }
.co-notif__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.co-notif__to { font: 600 12px/1.3 var(--font-ui); color: var(--ds-text-hi); }
.co-notif__from { font: 400 11px/1.3 var(--font-ui); color: var(--ds-accent); }
.co-notif__when { font: 400 11px/1 var(--font-ui); color: var(--ds-text-mute); margin-left: auto; }
.co-notif__text { font: 400 13px/1.45 var(--font-ui); color: var(--ds-text); margin-top: 2px; }

/* =====================================================================
   ACTIVITY TIMELINE (permanent per-object timeline)
   ===================================================================== */
.co-timeline { position: relative; padding-left: var(--sp-5); }
.co-timeline::before {
  content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px;
  background: var(--ds-hairline);
}
.co-tl { position: relative; padding-bottom: var(--sp-4); }
.co-tl:last-child { padding-bottom: 0; }
.co-tl__dot {
  position: absolute; left: calc(-1 * var(--sp-5) + 4px); top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ds-surface-1); border: 2px solid var(--ds-hairline-strong);
}
.co-tl__dot--risk { border-color: var(--ds-danger); }
.co-tl__dot--done { border-color: var(--ds-positive); background: var(--ds-positive); }
.co-tl__dot--approval { border-color: var(--ds-accent); }
.co-tl__time { font: 600 11px/1 var(--font-ui); color: var(--ds-text-mute); }
.co-tl__text { font: 400 13px/1.45 var(--font-ui); color: var(--ds-text); margin-top: 2px; }
.co-tl__text b { color: var(--ds-text-hi); font-weight: 600; }
.co-tl__mod { font: 400 11px/1 var(--font-ui); color: var(--ds-text-lo); }

/* =====================================================================
   MY DASHBOARD + BOSS EXTRAS scaffolding
   ===================================================================== */
.co-secgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.co-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.co-agentbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.co-agentchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px;
  border-radius: var(--r-pill); background: var(--ds-surface-2);
  border: 1px solid var(--ds-hairline); font: 500 12px/1 var(--font-ui); color: var(--ds-text);
}
.co-agentchip .co-av { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }

@media (max-width: 900px) {
  .co-secgrid { grid-template-columns: 1fr; }
  .co-brief__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   COLLABORATION HUB (the "Conversations" view)
   ===================================================================== */
.co-hub__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5);
  margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.co-hub__agents { flex: 1 1 320px; min-width: 0; }
.co-hub__agents .co-card { margin: 0; }
.co-hub .co-secgrid { margin-bottom: var(--sp-5); }
.co-hub-grouped { padding-bottom: var(--sp-3); }
.co-hub-group { margin-top: var(--sp-4); }
.co-hub-group:first-of-type { margin-top: var(--sp-2); }
.co-hub-group__h {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2);
  font: 600 12px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--ds-text);
}
@media (max-width: 700px) { .co-hub__head { flex-direction: column; } }