/* Planning sessions and their workspaces: the conversation beside its plan,
   plan annotations, and the Hand off dialog. */

/* ── Conversation ──────────────────────────────────────────────────────── */

.session-chat { min-height: 0; }

.session-scroll {
  flex: 1;
  overflow-y: auto;
}

.conversation {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-4);
  margin: 0;
  padding: var(--nax-space-4) var(--nax-space-5);
  list-style: none;
}

.message {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-1);
  max-width: 100%;
}

.message[data-role="user"] {
  align-self: flex-end;
  max-width: 80%;
  padding: var(--nax-space-2) var(--nax-space-3);
  border-radius: var(--nax-r-lg);
  background: var(--nax-accent-lt);
}

.message-text {
  margin: 0;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-status {
  margin: 0;
  color: var(--nax-accent);
  font-size: 12px;
}

.message[data-status="failed"] .message-status { color: var(--nax-red-text); }

/* While the agent works: a pulsing dot, and the words shimmer across. */
.message[data-status="pending"] .message-status {
  display: inline-flex;
  align-items: center;
  gap: var(--nax-space-2);
  align-self: flex-start;
  background: linear-gradient(90deg, var(--nax-accent) 0%, var(--nax-accent) 40%, var(--nax-accent-lt) 50%, var(--nax-accent) 60%, var(--nax-accent) 100%);
  background-size: 250% 100%;
  background-clip: text;
  color: transparent;
  font-size: 13px;
  font-weight: 500;
  animation: message-shimmer 2s linear infinite;
}

.message[data-status="pending"] .message-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nax-accent);
  animation: message-pulse 1.2s ease-in-out infinite;
}

@keyframes message-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes message-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .message[data-status="pending"] .message-status,
  .message[data-status="pending"] .message-status::before { animation: none; }
  .message[data-status="pending"] .message-status { color: var(--nax-accent); background: none; }
}

.message-files summary {
  color: var(--nax-ink-70);
  font-size: 12px;
  cursor: pointer;
}

.message-files ul,
.files-read {
  margin: 0;
  padding: var(--nax-space-1) 0 0 var(--nax-space-4);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.files-read { padding: var(--nax-space-2) var(--nax-space-3) var(--nax-space-2) var(--nax-space-6); }

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nax-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.message-attachments img {
  display: block;
  max-inline-size: min(100%, var(--nax-detail-pane-w));
  block-size: auto;
  border-radius: var(--nax-r);
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  padding: var(--nax-space-3) var(--nax-space-4);
  border: 1px solid var(--nax-accent-dim);
  border-radius: var(--nax-r);
  color: inherit;
  text-decoration: none;
}

.plan-card-meta {
  color: var(--nax-ink-70);
  font-size: 11px;
}

.plan-card-title { font-weight: 600; }

.session-composer { flex-direction: column; align-items: stretch; }

.session-composer-row {
  display: flex;
  align-items: center;
  gap: var(--nax-space-2);
}

.session-composer-row input[type="file"]:focus-visible + label {
  outline: 2px solid var(--nax-accent);
  outline-offset: 2px;
}

.session-composer-row input[type="file"]:disabled + label { opacity: 0.5; }

.session-composer-files {
  margin: 0;
  padding: 0 0 0 var(--nax-space-4);
  color: var(--nax-ink-70);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.session-composer-files:empty { display: none; }

.session-composer-agent {
  flex: 1;
  color: var(--nax-ink-70);
  font-size: 12px;
}

/* ── Plan panel ────────────────────────────────────────────────────────── */

.plan-panel .details-card-header .segmented { flex-wrap: wrap; }

.plan-annotation {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-3);
}

.plan-body { padding: var(--nax-space-3) var(--nax-space-4); }

.plan-body mark {
  background: var(--nax-amber-bg);
  box-shadow: inset 0 -2px 0 var(--nax-amber);
  color: inherit;
}

.plan-body del { color: var(--nax-red-text); }

/* A code span naming a file the agent read links to it on GitLab. */
.plan-body a code { color: inherit; }

/* A plan's lines are prose, so its Changes wrap in the narrow panel. */
.plan-panel .diff-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.plan-panel .diff-line-number { vertical-align: top; }

.plan-note-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nax-space-2);
}

.plan-note-form .nax-field { align-self: stretch; }

.plan-note-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nax-space-3);
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: none;
}

.plan-note-kinds legend { float: left; }

.plan-note-count {
  margin-left: auto;
  color: var(--nax-ink-70);
  font-size: 11px;
}

.plan-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nax-space-1);
  padding: var(--nax-space-2) var(--nax-space-3);
  border-bottom: 1px solid var(--nax-ink-10);
}

.plan-note:last-child { border-bottom: none; }

.plan-note p {
  margin: 0;
  overflow-wrap: anywhere;
}

.plan-note-quote {
  margin: 0;
  padding-left: var(--nax-space-2);
  border-left: 3px solid var(--nax-amber);
  color: var(--nax-ink-70);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.plan-note[data-kind="strike"] .plan-note-quote {
  border-left-color: var(--nax-red);
  text-decoration: line-through;
}

/* ── Hand off ──────────────────────────────────────────────────────────── */

.hand-off {
  align-items: flex-start;
  padding-top: var(--nax-space-8);
}

.hand-off-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hand-off-body {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-3);
}

.hand-off-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.hand-off-host { margin: 0; padding: var(--nax-space-2) 0; }

.hand-off-footer { flex-wrap: wrap; }

.hand-off-next {
  margin-right: auto;
  font-size: 11px;
}

@media (max-width: 700px) {
  .conversation { padding: var(--nax-space-3); }
  .message[data-role="user"] { max-width: 100%; }
  .hand-off { padding: var(--nax-space-3); }
}

/* ── Kevin's chat on the swarm page ────────────────────────────────────── */

/* Kevin's replies show at their full height: the main card scrolls, not the
   conversation, and the composer stays at the card's foot. */
.main-card:has(> .kevin-chat) { overflow-y: auto; }

.table-scroll:has(> .swarm-steps) { flex: none; }

.kevin-chat { border-top: 1px solid var(--nax-ink-10); }

.kevin-chat > .composer {
  position: sticky;
  bottom: 0;
  background: var(--nax-surface);
}

.kevin-chat > .eyebrow,
.kevin-chat > .field-hint { padding: var(--nax-space-3) var(--nax-space-4); }

.follow-up-draft,
.kevin-suggestion {
  display: flex;
  flex-direction: column;
  gap: var(--nax-space-2);
  padding: var(--nax-space-3) var(--nax-space-4);
  border: 1px solid var(--nax-accent-dim);
  border-radius: var(--nax-r);
}

.follow-up-draft header,
.kevin-suggestion header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nax-space-2);
  color: var(--nax-ink-70);
}

.follow-up-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.follow-up-draft form,
.kevin-suggestion form { align-self: flex-start; }

/* ── Workspaces ────────────────────────────────────────────────────────── */

.workspace-notes { margin: var(--nax-space-4); }

.workspace-notes > :not(h3) { padding: var(--nax-space-3) var(--nax-space-4); }

.plan-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nax-space-2);
}