/* Developer floating multi-chat (Phase B). Bottom-right chat heads + panels on
 * /staff/. Namespaced .cdc-. Mounted by cowork-dev-chat.js for engineers/admins. */

:root { --cdc-red: #c9343d; --cdc-red-strong: #a9222d; --cdc-red-soft: #fff1f2; }

.cdc-root {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 900;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--font-body, Inter, sans-serif);
}

.cdc-heads { display: flex; flex-direction: column; gap: 0.5rem; }
.cdc-head {
  position: relative; width: 3rem; height: 3rem; border-radius: 50%; flex: none;
  border: 2px solid #fff; background: var(--cdc-red); color: #fff; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 0.5rem 1.4rem rgb(95 23 31 / 0.3);
  transition: transform 0.15s ease;
}
.cdc-head:hover { transform: translateY(-2px); }
.cdc-head:focus-visible { outline: 2px solid var(--color-ink, #24242a); outline-offset: 2px; }
.cdc-head-initial { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 1rem; }
.cdc-head-dot {
  position: absolute; top: -0.15rem; right: -0.15rem; width: 0.85rem; height: 0.85rem;
  border-radius: 50%; background: #2f9e44; border: 2px solid #fff;
}

.cdc-panels { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 0.75rem; }
.cdc-panel {
  width: min(19rem, calc(100vw - 6rem)); height: min(24rem, calc(100dvh - 4rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-paper, #fff); color: var(--color-ink, #24242a);
  border: 1px solid var(--color-rule-2, #d3d8de); border-radius: 12px;
  box-shadow: 0 1.5rem 3rem rgb(24 24 30 / 0.22);
}
.cdc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-rule, #e7ebef); background: var(--cdc-red-soft);
}
.cdc-panel-title { display: flex; flex-direction: column; min-width: 0; }
.cdc-panel-title strong { font-size: 0.9rem; }
.cdc-panel-sub { font-size: 0.72rem; color: var(--color-neutral, #5a626c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdc-panel-close { background: none; border: none; font-size: 1rem; line-height: 1; color: var(--color-neutral, #5a626c); cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 6px; }
.cdc-panel-close:hover { color: var(--color-ink, #24242a); }

.cdc-session { border-bottom: 1px solid var(--color-rule, #e7ebef); background: #fafbfc; padding: 0.4rem 0.6rem; }
.cdc-session-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cdc-session-label { flex: 1; min-width: 6rem; font-size: 0.72rem; color: var(--color-neutral, #5a626c); }
.cdc-live { color: #1f7a44; font-weight: 600; }
.cdc-sbtn { border: 1px solid var(--cdc-red); background: #fff; color: var(--cdc-red); border-radius: 6px; padding: 0.2rem 0.45rem; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.cdc-sbtn--primary { background: var(--cdc-red); color: #fff; }
.cdc-sbtn[disabled] { opacity: 0.5; cursor: not-allowed; }
.cdc-session-note:not(:empty) { margin-top: 0.3rem; font-size: 0.68rem; color: var(--cdc-red-strong); }
.cdc-rate { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cdc-rate-label { font-size: 0.7rem; color: var(--color-neutral, #5a626c); }
.cdc-stars { display: flex; }
.cdc-star { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: #cdd3da; padding: 0 0.05rem; }
.cdc-star.on { color: #e8a400; }

.cdc-thread { flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cdc-msg { max-width: 88%; font-size: 0.82rem; line-height: 1.5; }
.cdc-msg .cdc-who { display: block; font-family: var(--font-mono, monospace); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted, #6b7280); margin-bottom: 0.1rem; }
.cdc-bubble { border: 1px solid var(--color-rule, #e7ebef); border-radius: 10px; padding: 0.35rem 0.55rem; color: var(--color-ink-2, #363b42); overflow-wrap: anywhere; }
.cdc-msg--me { align-self: flex-end; }
.cdc-msg--me .cdc-bubble { background: var(--cdc-red-soft); border-color: var(--cdc-red); }
.cdc-empty { color: var(--color-muted, #6b7280); font-size: 0.8rem; text-align: center; margin: auto; }

.cdc-compose { border-top: 1px solid var(--color-rule, #e7ebef); padding: 0.5rem; display: flex; gap: 0.4rem; }
.cdc-compose textarea { flex: 1; resize: none; min-height: 2.3rem; max-height: 6rem; font: inherit; font-size: 0.82rem; padding: 0.35rem 0.5rem; border: 1px solid var(--color-rule-strong, #7b828c); border-radius: 8px; }
.cdc-compose textarea:focus-visible { outline: 2px solid var(--cdc-red); }
.cdc-send { border: none; background: var(--cdc-red); color: #fff; border-radius: 8px; padding: 0 0.7rem; font: inherit; font-weight: 600; cursor: pointer; }
.cdc-send:hover:not([disabled]) { background: var(--cdc-red-strong); }
.cdc-send[disabled] { opacity: 0.55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) { .cdc-head { transition: none; } }
@media (max-width: 40rem) { .cdc-panel { height: min(20rem, calc(100dvh - 4rem)); } }