/* Feature components. Foundations and theme tokens live in style.css; the shell is in theme.css.
   Every colour here comes from a token, so each feature reads correctly in both themes. */

.tone-green {
  --tone: var(--success);
  --tone-bg: var(--success-bg);
  --tone-ink: var(--success-ink);
}
.tone-amber {
  --tone: var(--warning);
  --tone-bg: var(--warning-bg);
  --tone-ink: var(--warning-ink);
}
.tone-red {
  --tone: var(--danger);
  --tone-bg: var(--danger-bg);
  --tone-ink: var(--danger-ink);
}
.tone-blue {
  --tone: var(--info);
  --tone-bg: var(--info-bg);
  --tone-ink: var(--info-ink);
}
.tone-neutral {
  --tone: var(--ink-3);
  --tone-bg: var(--fill);
  --tone-ink: var(--ink-2);
}
pre {
  max-height: 45svh;
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--code-ink);
  font: 12px/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Inbox ─────────────────────────────────────────────────────────────── */
.inbox {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--canvas);
}
.conversation-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--rule);
  background: var(--surface);
}
.list-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--rule);
}
.list-head .row.between {
  flex-wrap: nowrap;
}
.list-head h1 {
  margin: 0;
  font-size: 26px;
}
.list-head p {
  margin: 4px 0 12px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.list-head .filters {
  display: flex;
  width: 100%;
  margin-top: 10px;
}
.list-head .filters button {
  flex: 1 1 auto;
  padding: 0 10px;
  white-space: nowrap;
}
#group-list {
  flex: 1;
  overflow: auto;
}
.group-row {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
.group-row:hover:not(:disabled) {
  border-color: var(--rule);
  background: var(--hover);
}
.group-row.active,
.group-row.active:hover:not(:disabled) {
  background: var(--hover);
  box-shadow: inset 3px 0 0 var(--indicator);
}
.chat-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--fill);
  color: var(--ink-2);
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.02em;
}
.chat-avatar svg {
  width: 20px;
  height: 20px;
}
.group-row.active .chat-avatar {
  background: var(--avatar-bg);
  color: var(--avatar-ink);
}
.group-row-content {
  flex: 1;
  min-width: 0;
}
.group-row-content .row {
  flex-wrap: nowrap;
  gap: 6px;
}
.group-row .title {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-row .when {
  flex: none;
  color: var(--ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.group-row .preview {
  margin: 3px 0 6px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-row-content > .row.between:last-child {
  gap: 8px;
  min-width: 0;
}
.group-row-content > .row.between:last-child small {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-row-content > .row.between:last-child .badge {
  flex: none;
  margin-left: auto;
}
.chat-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.chat-meta .chat-partner {
  margin: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-meta .chat-partner + .chat-mode::before {
  content: "";
  width: 1px;
  height: 10px;
  margin-right: 2px;
  background: var(--rule-strong);
}
.chat-mode {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
}
.chat-mode .dot {
  width: 6px;
  height: 6px;
}
.chat-mode.attention {
  color: var(--warning-ink);
}
.group-more {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
}
.group-more:hover:not(:disabled) {
  border-color: var(--rule);
  background: var(--hover);
  color: var(--ink);
}
.list-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 12px;
}
.thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--canvas);
}
.thread > .empty {
  margin: auto;
}
.thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.thread-header > .row {
  flex-wrap: nowrap;
  min-width: 0;
}
.thread-header > .row:first-child {
  flex: 1;
}
.thread-header .chat-avatar {
  width: 38px;
  height: 38px;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font-size: 13px;
}
.chat-heading {
  min-width: 0;
}
.thread-header h2 {
  margin: 0;
  overflow: hidden;
  font: 650 15px/1.35 var(--font-body);
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-header .chat-partner,
.chat-partner {
  color: var(--ink-3);
  font-size: 12.5px;
}
.thread-header small.group-id {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font: 11px/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}
.ownership {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}
.ownership svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}
.ownership strong {
  color: var(--ink);
  font-weight: 600;
}
.ownership small {
  color: inherit;
  font-size: 12px;
  opacity: 0.9;
}
.ownership.human {
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.ownership.human strong,
.ownership.human svg {
  color: inherit;
}
#messages {
  flex: 1;
  padding: 22px clamp(18px, 3vw, 44px);
  overflow: auto;
  background: var(--canvas);
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}
.date-label {
  width: fit-content;
  margin: 8px auto 18px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-3);
  font: 600 12px/1 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: min(72ch, 82%);
  margin-bottom: 14px;
}
.message.out {
  margin-left: auto;
  align-items: flex-end;
}
.message.note {
  max-width: 92%;
  margin: 18px auto;
  align-items: stretch;
}
.message-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--ink-3);
  font-size: 12px;
}
.message-meta strong {
  color: var(--ink-2);
  font-weight: 600;
}
.message-meta .badge {
  min-height: 19px;
  padding: 0 7px;
  font-size: 11px;
}
.sender-number {
  color: var(--ink-3);
  font-size: 11px;
}
.bubble {
  min-width: 72px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px 16px 16px 16px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}
/* Your side of the chat in Suppy's lime; the agent's replies in violet; private notes in amber. */
.out .bubble {
  border-color: var(--lime-line);
  border-radius: 16px 4px 16px 16px;
  background: var(--lime-soft);
}
.message.ai .bubble {
  border-color: color-mix(in srgb, var(--violet) 30%, transparent);
  background: var(--violet-bg);
}
.note .bubble {
  border: 1px dashed color-mix(in srgb, var(--warning) 55%, transparent);
  border-radius: var(--radius);
  background: var(--warning-bg);
  color: var(--warning-ink);
  box-shadow: none;
}
.message-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 11px;
  opacity: 0;
  transition: opacity var(--fast) var(--ease-out);
}
.message:hover .message-foot,
.message:focus-within .message-foot {
  opacity: 1;
}
.message-foot:has(span:empty):not(:has(button)) {
  display: none;
}
.message-foot button {
  min-height: 22px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-3);
  font-size: 11.5px;
}
.message-foot button:hover:not(:disabled) {
  background: var(--fill);
  color: var(--ink);
}
.quoted,
.message .quoted {
  margin-bottom: 8px;
  padding: 5px 10px;
  border-left: 2px solid var(--indicator);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-2);
  font-size: 12.5px;
  white-space: normal;
}
.message img,
.message video {
  display: block;
  max-width: min(100%, 380px);
  max-height: 340px;
  margin: 4px 0 10px;
  border-radius: var(--radius-sm);
}
.message img {
  cursor: zoom-in;
}
.message audio {
  width: 300px;
  max-width: 100%;
  height: 42px;
  margin: 6px 0;
}
.message details {
  margin-top: 6px;
}
.message-edited {
  color: var(--ink-3);
}
.mention {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--violet-bg);
  color: var(--violet-ink);
  font-weight: 550;
  white-space: nowrap;
}
.message.out .mention {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: inherit;
}
.mention.unknown {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-2);
  font-style: italic;
  font-weight: 400;
}
.image-preview {
  display: block;
  max-width: 100%;
  max-height: 70svh;
  margin: auto;
  border-radius: var(--radius);
}

/* ── Composer ──────────────────────────────────────────────────────────── */
.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "assistant assistant" "modes hint" "box box";
  align-items: center;
  gap: 9px 12px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.composer[hidden] {
  display: none;
}
.composer #assistant-card {
  grid-area: assistant;
  min-width: 0;
}
.composer #assistant-card:empty {
  display: none;
}
.composer-top {
  grid-area: modes;
  display: flex;
  gap: 2px;
  width: fit-content;
  margin: 0;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--fill);
}
.composer-top .grow,
#composer-label {
  display: none;
}
.composer-top button {
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
}
.composer-top button:hover:not(:disabled) {
  background: transparent;
  color: var(--ink);
}
.composer-top button svg {
  width: 13px;
  height: 13px;
}
.composer-top button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .composer-top button.active {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.composer-top button.note-active,
.composer-top button.note-active:hover:not(:disabled) {
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.composer-top button.assist-active,
.composer-top button.assist-active:hover:not(:disabled) {
  background: var(--violet-bg);
  color: var(--violet-ink);
}
.composer-hint {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
}
.composer .composer-hint {
  grid-area: hint;
  justify-self: end;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-box {
  grid-area: box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 6px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color var(--fast) var(--ease-out),
    box-shadow var(--fast) var(--ease-out);
}
.composer-box:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
#draft-context {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
#draft-context:empty {
  display: none;
}
.composer textarea {
  flex: 1 1 240px;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  max-height: 144px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
}
.composer textarea:focus {
  box-shadow: none;
}
.composer-bottom {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.composer-bottom .row {
  flex-wrap: nowrap;
  gap: 0;
}
.composer-bottom .icon {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}
.composer-bottom .primary {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}
.attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 5px 6px 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--ink-2);
  font-size: 12px;
}
.attachment-chip button {
  margin-left: auto;
}
.recording {
  color: var(--danger) !important;
}
progress.progress {
  width: 100%;
  height: 5px;
  accent-color: var(--indicator);
}

/* ── Inbox assistant ───────────────────────────────────────────────────── */
.assistant-card {
  max-height: 46svh;
  margin-bottom: 4px;
  padding: 14px 16px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--violet) 32%, var(--rule));
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: rise-in 0.22s var(--ease-out);
}
.assistant-card.failed {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--rule));
}
.assistant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.assistant-head svg {
  color: var(--violet);
}
.assistant-card.failed .assistant-head svg {
  color: var(--danger);
}
.assistant-card.working .assistant-head svg {
  animation: assistant-pulse 1.4s var(--ease-in-out) infinite;
}
.assistant-head small {
  font-size: 12px;
}
.assistant-asked,
.assistant-summary {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}
.assistant-asked span {
  margin-right: 4px;
  color: var(--ink-3);
}
.assistant-note {
  margin: 8px 0 0;
  color: var(--ink-3);
  font-size: 12px;
}
.assistant-draft {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--violet);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.assistant-notes:empty {
  display: none;
}
.assistant-section h4 {
  margin: 0 0 4px;
  color: var(--ink-3);
  font: 600 12px/1 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.assistant-section.warn h4 {
  color: var(--warning-ink);
}
.assistant-section ul,
.assistant-warning ul {
  margin: 4px 0 0;
  padding-left: 16px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.assistant-warning {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: var(--radius);
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-size: 12.5px;
}
.assistant-warning svg {
  color: var(--warning);
}
.assistant-warning ul {
  color: inherit;
}
.assistant-actions {
  gap: 6px;
  margin-top: 12px;
}
@keyframes assistant-pulse {
  50% {
    opacity: 0.35;
  }
}

/* ── Group info and dialogs from the inbox ─────────────────────────────── */
.group-profile {
  padding: 4px 0 20px;
  text-align: center;
}
.group-profile h2 {
  margin: 14px 0 6px;
}
.group-profile p {
  margin: 0;
}
.chat-avatar.large {
  width: 72px;
  height: 72px;
  margin: auto;
  border-radius: 18px;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
}
.chat-avatar.large svg {
  width: 32px;
  height: 32px;
}
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-size: 13.5px;
}
.info-row > span:first-child {
  color: var(--ink-3);
}
.participants {
  display: grid;
}
.notify-panel {
  display: grid;
  gap: 10px;
  padding: 8px 8px 6px;
}
.notify-panel .row.between {
  flex-wrap: nowrap;
}
.notify-panel h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.notify-panel .notice {
  margin: 0;
}
.notification-list {
  margin-top: 4px;
}
.notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  line-height: 1.45;
}
.notification-item strong {
  display: block;
  font-size: 13.5px;
}
.notification-item small {
  display: block;
  margin-top: 2px;
}
.notification-list .empty {
  padding: 20px 8px 8px;
}
.notification-list .empty h2 {
  font-size: 20px;
}

/* ── WhatsApp accounts ─────────────────────────────────────────────────── */
.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.setup-step {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-right: 1px solid var(--rule);
}
.setup-step:last-child {
  border-right: 0;
}
.setup-step h3 {
  margin: 4px 0 4px;
  font-size: 14px;
}
.setup-step p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
}
/* Numbered because the setup really is a sequence. */
.step-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--frame);
  color: var(--lime);
  font: 700 15px/1 var(--font-label);
}
[data-theme="dark"] .step-number {
  background: var(--lime);
  color: #000000;
}
.connection-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.connection-card h3 {
  margin: 0;
  font-size: 16px;
}
.connection-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--success-bg);
  color: var(--success);
}
.account-summary {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.account-summary > div {
  flex: 1;
}
.account-summary small {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}
.connection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.connection-actions .primary {
  flex: 1;
}
.technical-details {
  color: var(--ink-2);
  font-size: 13px;
}
.technical-details summary {
  padding: 4px 0;
  color: var(--ink-2);
}
.technical-details summary:hover {
  color: var(--ink);
}
.connection-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 14px;
  font-size: 13px;
}
.connection-meta small {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
}
.simulator-notice {
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
  background: var(--warning-bg);
  color: var(--warning-ink);
}
.pair-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 28px;
  margin: 22px 0;
}
/* The pairing code stays black on white in both themes so phones can read it. */
.qr {
  display: grid;
  place-items: center;
  width: 250px;
  height: 250px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
}
.qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qr-wait {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 250px;
  min-height: 250px;
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-2);
  text-align: center;
}
.pair-steps,
.pair-layout ol {
  margin: 0;
  padding-left: 19px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.8;
}
.pair-layout li {
  margin-bottom: 12px;
}
.pair-layout strong {
  color: var(--ink);
  font-weight: 600;
}
.setup-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--frame);
  color: #ffffff;
  box-shadow: inset 0 3px 0 var(--lime);
}
.setup-strip h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font: 700 20px/1 var(--font-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.setup-strip p {
  max-width: 560px;
  margin: 0;
  color: var(--frame-ink);
  font-size: 13px;
}
.setup-strip .primary,
.setup-strip .primary:hover:not(:disabled) {
  flex: none;
  background: var(--lime);
  color: #030126;
}
.setup-strip .primary:hover:not(:disabled) {
  background: var(--lime-hover);
}

/* ── Partners and groups ───────────────────────────────────────────────── */
.partner-section {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.partner-section .table-wrap {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.partner-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.partner-card-head h3 {
  margin: 0;
  font-size: 15.5px;
}
.partner-card-head small {
  font-size: 12.5px;
}
.partner-card-head .avatar {
  border-radius: var(--radius);
}
.partner-section > h3 {
  margin: 0;
  padding: 16px 18px 0;
}
.partner-section > .form-help {
  padding: 4px 18px 12px;
}

/* ── Assigning a group ─────────────────────────────────────────────────── */
.enroll {
  gap: 24px;
}
.enroll-step {
  display: grid;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.enroll-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.enroll-step > .section-head:not(h2):not(h3) {
  margin: 0;
}
.enroll-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.enroll-head h3 {
  margin: 3px 0 3px;
  font-size: 14.5px;
}
.enroll-head p {
  margin: 0;
}
.enroll-picker {
  display: grid;
  gap: 10px;
}
.picker-list {
  display: grid;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.picker-item {
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}
.picker-item:last-child {
  border-bottom: 0;
}
.picker-item:hover:not(:disabled) {
  border-color: var(--rule);
  background: var(--hover);
}
.picker-item code {
  color: var(--ink-3);
  font-size: 11px;
  white-space: nowrap;
}
.picker-assigned {
  color: var(--warning-ink);
  font-size: 11.5px;
}
.picker-current {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--fill);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
/* Rarely needed settings sit behind one button at the end of the dialog. */
.enroll-advanced-toggle {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
}
.enroll-advanced-toggle:hover:not(:disabled) {
  border-color: var(--ink-3);
}
.enroll-advanced-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transform: rotate(-90deg);
  transition: transform var(--fast) var(--ease-out);
}
.enroll-advanced-toggle[aria-expanded="true"] svg {
  transform: none;
}
.enroll-advanced-toggle small {
  margin-left: auto;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enroll-advanced {
  display: grid;
  gap: 14px;
  animation: fade-in var(--base) var(--ease-out);
}
.enroll-option {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.enroll-option h3 {
  margin: 0;
  font-size: 14px;
}
.enroll-option .form-help {
  margin-top: -6px;
}

/* ── Knowledge ─────────────────────────────────────────────────────────── */
.knowledge-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.knowledge-intro > div {
  min-width: 0;
  max-width: 800px;
}
.knowledge-intro > button,
.knowledge-intro > .row {
  flex-shrink: 0;
}
.knowledge-intro h3 {
  margin: 0;
  font: 700 18px/1.1 var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.knowledge-intro h2 {
  font-size: 24px;
}
.knowledge-intro p {
  margin: 8px 0 0;
  line-height: 1.6;
}
.knowledge-filters {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) minmax(160px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  margin: 20px 0;
}
.knowledge-filters label {
  min-width: 0;
  margin: 0;
}
.knowledge-filters button {
  min-height: 40px;
}
.knowledge-card-list {
  display: grid;
  gap: 14px;
}
.memory-card,
.action-card {
  padding: 18px 20px;
}
.memory-card-heading {
  align-items: flex-start;
  gap: 14px;
}
.memory-card-heading > div:first-child {
  min-width: 0;
}
.memory-card-heading h3 {
  margin-bottom: 4px;
  font-size: 15.5px;
  overflow-wrap: anywhere;
}
.memory-card-heading > .row {
  flex-shrink: 0;
}
.memory-content {
  margin: 14px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.memory-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: var(--ink-3);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.memory-card-actions {
  flex-wrap: wrap;
  margin-top: 14px;
}
.memory-history article + article {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.memory-history h3 {
  margin-top: 12px;
  overflow-wrap: anywhere;
}
.action-endpoint {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0;
  font-size: 12.5px;
}
.action-endpoint span {
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--info-bg);
  color: var(--info-ink);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.action-endpoint code {
  overflow-wrap: anywhere;
  white-space: normal;
}
.action-definition {
  margin: 16px 0;
}
.action-definition .code-editor {
  font: 12px/1.6 var(--font-mono);
  tab-size: 2;
}
.action-attestation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0;
  font-size: 13.5px;
  font-weight: 500;
}
.action-attestation input {
  margin-top: 2px;
}
.preview-result {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.preview-checks {
  margin: 8px 0;
  padding-left: 18px;
  color: var(--ink-2);
}

/* ── Records: escalations, portal history, assistance requests ─────────── */
.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.history-search {
  flex: 1 1 320px;
  max-width: 560px;
}
.history-partner {
  width: auto;
  min-width: 200px;
  max-width: 280px;
}
.history-chips {
  margin-bottom: 16px;
}
.history-list {
  overflow: clip;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: opacity var(--base) var(--ease-out);
}
.history-list.is-loading {
  opacity: 0.55;
}
.history-day {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-3);
  font: 600 12px/1.2 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.history-row {
  display: grid;
  grid-template-areas: "icon main status time chevron";
  grid-template-columns: 36px minmax(0, 1fr) auto 72px 14px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}
.history-row:last-child {
  border-bottom: 0;
}
.history-row:hover:not(:disabled) {
  border-color: var(--rule);
  background: var(--hover);
}
.history-row:focus-visible {
  outline-offset: -2px;
}
/* Rows that need a person carry a tone edge, the way the overview marks attention. */
.history-row.tone-amber,
.history-row.tone-red,
.case-row.tone-amber,
.case-row.tone-red {
  box-shadow: inset 3px 0 0 var(--tone);
}
.history-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--tone-bg, var(--fill));
  color: var(--tone, var(--ink-3));
}
.history-icon svg {
  width: 17px;
  height: 17px;
}
.history-main {
  grid-area: main;
  min-width: 0;
}
.history-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.history-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-ref {
  color: var(--ink-3);
  font: 500 12px/1 var(--font-mono);
  white-space: nowrap;
}
.history-env {
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: 5px;
  color: var(--warning-ink);
  font: 700 11px/1.1 var(--font-label);
  letter-spacing: 0.1em;
}
.history-sub {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-status {
  grid-area: status;
  justify-self: end;
}
.history-time {
  grid-area: time;
  justify-self: end;
  color: var(--ink-3);
  font-size: 12.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.history-chevron {
  grid-area: chevron;
  display: flex;
  color: var(--ink-4);
  transition:
    transform var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out);
}
.history-row:hover .history-chevron {
  color: var(--ink);
  transform: translateX(3px);
}
.history-chevron svg {
  width: 14px;
  height: 14px;
}
.history-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-top: 10px;
}
.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--fast) var(--ease-out);
}
.case-row:last-child {
  border-bottom: 0;
}
.case-row:hover {
  background: var(--hover);
}
.case-row .history-row {
  border-bottom: 0;
  box-shadow: none;
}
.case-row .history-row:hover:not(:disabled) {
  background: transparent;
}
.case-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  padding-right: 14px;
}
.case-actions button {
  border-color: var(--rule);
}
.case-flag {
  display: block;
  margin-top: 3px;
  color: var(--warning-ink);
  font-size: 12px;
}
.history-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.history-detail-head .history-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.history-detail-head .history-icon svg {
  width: 19px;
  height: 19px;
}
.history-detail-head p {
  margin: 6px 0 0;
  font-size: 13.5px;
}
.history-detail .skeleton {
  height: 44px;
}
.history-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--tone, var(--ink-3)) 35%, transparent);
  border-radius: var(--radius);
  background: var(--tone-bg, var(--surface-2));
  color: var(--tone-ink, var(--ink));
}
.history-callout svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--tone, var(--ink-3));
}
.history-callout p {
  margin: 0;
  color: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}
.history-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.history-facts dt {
  margin-bottom: 5px;
  color: var(--ink-3);
  font: 600 11.5px/1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.history-facts dd {
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.history-section {
  margin-bottom: 22px;
}
.history-section h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font: 700 15px/1.1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.history-fields {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.history-fields > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(0, 2.6fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.history-fields dt {
  color: var(--ink-3);
  font-size: 12.5px;
}
.history-fields dd {
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.history-fields .history-fields {
  border-top: 0;
}
.history-fields .history-fields > div {
  grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr);
  padding: 3px 0;
  border-bottom: 0;
}
.history-values {
  margin: 0;
  padding-left: 18px;
}
.history-value {
  white-space: pre-wrap;
}
.history-technical {
  margin-top: 8px;
}
.history-json {
  max-height: 45svh;
}
.case-issue {
  margin: 0 0 14px;
  font-size: 24px;
}
.case-message,
.case-timeline blockquote {
  margin: 10px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--indicator);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
  color: var(--ink);
  white-space: pre-wrap;
}
.case-timeline {
  margin: 14px 0;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--rule-strong);
  list-style: none;
}
.case-timeline li {
  position: relative;
  padding: 0 0 20px 10px;
}
.case-timeline li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -23px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--indicator);
  box-shadow: 0 0 0 3px var(--surface);
}
.case-timeline p {
  margin: 6px 0;
  overflow-wrap: anywhere;
}
.case-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 18px 0;
}
.case-facts dt {
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 12px;
}
.case-facts dd {
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* ── Support assistance ────────────────────────────────────────────────── */
.assist-summary {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
}
.assist-state {
  display: flex;
  align-items: center;
  gap: 14px;
}
.assist-state > div {
  flex: 1;
  min-width: 0;
}
.assist-state strong {
  display: block;
  font: 700 20px/1.1 var(--font-label);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.assist-state small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}
.assist-signal {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-4);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink-4) 18%, transparent);
}
.assist-state.on .assist-signal {
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent);
}
.assist-configure {
  flex: none;
}
.assist-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.assist-facts dt {
  margin-bottom: 6px;
  color: var(--ink-3);
  font: 600 11.5px/1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.assist-facts dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.assist-facts code {
  font-size: 12.5px;
  font-weight: 500;
}
.assist-waiting {
  color: var(--warning-ink);
}
.assist-settings {
  display: grid;
  gap: 16px;
}
.assist-settings .check {
  align-items: flex-start;
}
.assist-settings .check span {
  display: grid;
  gap: 3px;
}
.assist-settings .check strong {
  font-size: 14px;
}
.assist-settings .check small {
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.55;
}
.assistance-guide {
  margin: 4px 0 2px;
}
.assistance-guide > summary {
  color: var(--ink-2);
}
.assistance-guide > summary:hover {
  color: var(--ink);
}
.assistance-guide .form-help {
  margin: 8px 0 0;
}
.assistance-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.op-chip {
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 550;
}

/* ── Performance ───────────────────────────────────────────────────────── */
.perf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.perf-toolbar .history-partner {
  width: auto;
  min-width: 200px;
}
.perf-range {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
#perf-body {
  transition: opacity var(--base) var(--ease-out);
}
#perf-body.is-loading {
  opacity: 0.55;
  pointer-events: none;
}
.perf-trend-panel {
  margin-top: 4px;
}
.perf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.perf-legend .key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.perf-legend .key::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.perf-legend .on-time::before {
  background: var(--success);
}
.perf-legend .late::before {
  background: var(--warning);
}
.perf-legend .waiting::before {
  background: color-mix(in srgb, var(--danger) 75%, transparent);
}
.perf-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px 18px 12px;
}
.perf-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 148px;
  color: var(--ink-3);
  font-size: 11px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.perf-chart-plot {
  min-width: 0;
}
.perf-chart-plot svg {
  display: block;
  width: 100%;
  height: 148px;
  border-bottom: 1px solid var(--rule-strong);
  stroke: none;
}
.perf-chart-plot rect {
  stroke: none;
}
.perf-chart-plot rect.on-time {
  fill: var(--success);
}
.perf-chart-plot rect.late {
  fill: var(--warning);
}
.perf-chart-plot rect.waiting {
  fill: color-mix(in srgb, var(--danger) 75%, transparent);
}
.perf-chart-plot rect.hit {
  fill: transparent;
}
.perf-chart-plot g:hover rect.hit {
  fill: color-mix(in srgb, var(--ink) 7%, transparent);
}
.perf-axis {
  display: flex;
  margin-top: 6px;
}
.perf-axis span {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  color: var(--ink-3);
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}
.perf-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.perf-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 14px 18px 18px;
}
.perf-metric {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}
.perf-metric span {
  color: var(--ink-3);
  font: 600 12px/1.2 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.perf-metric strong {
  font: 700 26px/1 var(--font-label);
  font-variant-numeric: tabular-nums;
}
.perf-metric small {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perf-link {
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
.perf-link:hover:not(:disabled) {
  border: 0;
  background: none;
  text-decoration-color: currentColor;
}
.perf-wait.green {
  color: var(--success);
}
.perf-wait.amber {
  color: var(--warning-ink);
}
.perf-wait.red {
  color: var(--danger);
}
.perf-open {
  color: var(--warning-ink);
  font-size: 11.5px;
}
.perf-empty {
  margin: 0;
  padding: 18px;
  color: var(--ink-3);
}
.perf-footnote {
  max-width: 860px;
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.55;
}

/* ── Ticket watch ──────────────────────────────────────────────────────── */
.ticket-workspace {
  min-width: 0;
}
#tw-status .notice {
  margin-bottom: 14px;
}
.tw-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.tw-tile {
  display: grid;
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: 12px;
  min-height: 96px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-3);
  font: 600 12.5px/1.2 var(--font-label);
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.tw-tile strong {
  color: var(--ink);
  font: 700 34px/0.9 var(--font-label);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tw-tile:hover:not(:disabled) {
  border-color: var(--rule-strong);
  background: var(--surface);
}
/* The chosen reason joins the frame: navy or black, with its count in lime. */
.tw-tile.active,
.tw-tile.active:hover:not(:disabled) {
  border-color: var(--frame);
  background: var(--frame);
  color: var(--frame-ink);
  box-shadow: inset 0 3px 0 var(--lime);
}
[data-theme="dark"] .tw-tile.active,
[data-theme="dark"] .tw-tile.active:hover:not(:disabled) {
  border-color: var(--rule-strong);
  background: var(--frame-raised);
}
.tw-tile.active strong {
  color: var(--lime);
}
.tw-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--ink-3);
  font: 600 12px/1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tw-inline select {
  width: auto;
  min-width: 150px;
  max-width: 240px;
  font: 400 13.5px/1.3 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.tw-criteria {
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}
.tw-criteria summary {
  font-size: 13px;
}
.tw-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tw-text {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tw-text.muted {
  color: var(--ink-3);
  font-style: italic;
}
#tw-panel > .tw-text {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.tw-report-head {
  gap: 12px;
  margin-bottom: 16px;
}
.tw-history {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.tw-history .tw-text {
  margin-top: 8px;
}
.ticket-filterbar {
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.ticket-filterbar .searchbox {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: none;
  margin-bottom: 0;
}
.ticket-filterbar .tw-inline {
  flex: 0 1 auto;
}
.ticket-filterbar .tw-inline select {
  max-width: 220px;
  min-height: 40px;
}
.ticket-criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 16px 4px 4px;
}
.ticket-criteria-grid h3 {
  margin-bottom: 6px;
  font-size: 13.5px;
}
.ticket-criteria-grid p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.7;
}
.ticket-criteria-grid p:last-child {
  margin-bottom: 0;
}
.ticket-table-wrap {
  width: 100%;
  min-width: 0;
  margin-top: 14px;
}
.ticket-table-wrap .table-wrap {
  max-width: 100%;
}
.ticket-table-wrap table {
  min-width: 1020px;
}
.ticket-table-wrap td.name {
  min-width: 185px;
  max-width: 285px;
  font-size: 14px;
  line-height: 1.5;
}
.ticket-table-wrap td.name small {
  max-width: 250px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 400;
}
.ticket-table-wrap .tw-flags {
  min-width: 130px;
  max-width: 210px;
}
.ticket-table-wrap .tw-flags .badge {
  padding: 3px 8px;
  font-size: 11px;
  white-space: normal;
}
.ticket-table-wrap td small {
  font-size: 12.5px;
  line-height: 1.5;
}
.ticket-table-wrap td:last-child button {
  white-space: nowrap;
}
.ticket-wait {
  color: var(--warning-ink);
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
tr.tw-seen td {
  opacity: 0.6;
}
.ticket-pagination {
  padding-inline: 0;
}
.ticket-partner-drilldown {
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ticket-partner-drilldown > .quiet {
  margin: -4px 0 12px -10px;
}
.ticket-partner-drilldown h2 {
  margin: 0;
  font-size: 28px;
}
.ticket-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.ticket-category {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  text-align: left;
}
.ticket-category span {
  color: var(--ink-3);
  font: 600 12px/1.2 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ticket-category strong {
  font: 700 28px/1 var(--font-label);
  font-variant-numeric: tabular-nums;
}
.ticket-category:hover:not(:disabled) {
  border-color: var(--rule-strong);
  background: var(--surface-2);
}
.ticket-category.active,
.ticket-category.active:hover:not(:disabled) {
  border-color: var(--indicator);
  background: var(--surface);
  box-shadow: inset 0 -3px 0 var(--indicator);
}
.ticket-category.active span {
  color: var(--ink);
}
.ticket-count {
  min-width: 34px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.ticket-count:hover:not(:disabled) {
  border-color: var(--ink-3);
  background: var(--fill);
}
.ticket-partner-link {
  justify-content: flex-start;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
}
.ticket-partner-link:hover:not(:disabled) {
  border: 0;
  background: transparent;
  text-decoration-color: currentColor;
}
.ticket-access-search {
  margin: 10px 0;
}
.ticket-access-list {
  max-height: 320px;
  overflow-y: auto;
}

/* Dashboard users: conversation groups and portal tickets keep separate scopes. */
#team-form .access-scope {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
}
.access-scope-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.access-scope-heading h3 {
  margin: 2px 0 0;
}
.access-scope-kind {
  color: var(--ink-3);
  font: 600 12px var(--font-label);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.access-scope-summary {
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.access-scope-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
}
.access-scope-tools .searchbox {
  min-width: 0;
}
.access-scope-tools > select {
  width: auto;
  max-width: 170px;
  font-size: 12px;
}
.access-scope-list {
  max-height: 256px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.access-scope-list:empty {
  display: none;
}
.access-scope-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 57px;
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.access-scope-row:last-child {
  border-bottom: 0;
}
.access-scope-row.check {
  justify-content: flex-start;
}
.access-scope-row.check:has(input:checked) {
  background: var(--surface-2);
}
.access-scope-row > select {
  flex: 0 0 126px;
  width: 126px;
  margin: 0;
  font-size: 12px;
}
.access-scope-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}
.access-scope-name strong {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.access-scope-name small {
  color: var(--ink-3);
  font-size: 10.5px;
  overflow-wrap: anywhere;
}
.access-scope-partner > h4 {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--fill);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
}
.access-scope-partner:not(:has(.access-scope-row:not([hidden]))),
.access-scope [hidden] {
  display: none;
}
.access-scope-note,
.access-scope-empty {
  margin: 8px 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}
.access-scope-empty {
  padding: 14px 12px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-sm);
}
.access-scope-all {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.access-scope-all .access-scope-row {
  background: var(--surface-2);
}
.access-scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0;
  color: var(--ink-3);
  font-size: 11px;
}
.access-scope-legend strong {
  margin-right: 4px;
  color: var(--ink-2);
}
.access-scope-footnote {
  margin-bottom: 0;
  font-size: 11px;
}
@media (max-width: 560px) {
  .access-scope-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .access-scope-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .access-scope-tools > select {
    max-width: none;
    width: 100%;
  }
}

/* ── Ticket chat ───────────────────────────────────────────────────────── */
.tc-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 16px;
  height: calc(100svh - var(--topbar) - var(--tabbar) - 214px);
  min-height: 440px;
}
.tc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tc-list > .form-help {
  padding: 8px;
}
.tc-item {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius);
  transition: background-color var(--fast) var(--ease-out);
}
.tc-item:hover {
  background: var(--hover);
}
.tc-item.active {
  background: var(--fill);
  box-shadow: inset 3px 0 0 var(--indicator);
}
.tc-open {
  display: grid;
  flex: 1;
  justify-content: stretch;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  padding: 11px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}
.tc-open:hover:not(:disabled) {
  border: 0;
  background: transparent;
}
.tc-open span {
  max-width: 100%;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-open small {
  font-size: 11.5px;
}
.tc-list .tc-item > .icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  margin-right: 4px;
  color: var(--ink-3);
}
.tc-list .tc-item > .icon:hover:not(:disabled) {
  background: var(--danger-bg);
  color: var(--danger);
}
.tc-list > .empty {
  padding: 24px 12px;
}
.tc-list > .empty h2 {
  font-size: 22px;
}
.tc-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tc-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  overflow-y: auto;
  background: var(--well);
}
.tc-message {
  max-width: 80%;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px 16px 16px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: rise-in 0.24s var(--ease-out);
}
.tc-message.user {
  align-self: flex-end;
  border-color: transparent;
  border-radius: 16px 4px 16px 16px;
  background: var(--frame);
  color: #ffffff;
}
[data-theme="dark"] .tc-message.user {
  background: var(--frame-raised);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.tc-message.user .tw-text {
  color: inherit;
}
.tc-message.failed {
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.tc-message small {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
}
.tc-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tc-suggestions .history-chip {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 550;
}
.tc-suggestions .history-chip:hover:not(:disabled) {
  border-color: var(--ink-3);
  background: var(--surface);
  color: var(--ink);
}
.tc-composer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.tc-composer textarea {
  flex: 1;
  min-height: 44px;
  resize: vertical;
}
.tc-composer .error-text {
  flex-basis: 100%;
  order: -1;
  margin: 0;
}

/* ── Responsive features ───────────────────────────────────────────────── */
@media (min-width: 1500px) {
  .inbox {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}
@media (min-width: 1280px) {
  .partner-section:has(.partner-card-head) table {
    width: 100%;
    table-layout: fixed;
  }
  .partner-section:has(.partner-card-head) th:nth-child(1) {
    width: 27%;
  }
  .partner-section:has(.partner-card-head) th:nth-child(2) {
    width: 28%;
  }
  .partner-section:has(.partner-card-head) th:nth-child(3) {
    width: 15%;
  }
  .partner-section:has(.partner-card-head) th:nth-child(4) {
    width: 13%;
  }
  .partner-section:has(.partner-card-head) th:nth-child(5) {
    width: 17%;
  }
  .partner-section:has(.partner-card-head) td.name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .partner-section:has(.partner-card-head) td:last-child .row {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}
@media (max-width: 1200px) {
  .inbox {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .thread-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .thread-header > .row:last-child {
    margin-left: auto;
  }
  .tw-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ticket-filterbar .searchbox {
    flex-basis: 100%;
  }
  .ticket-filterbar .tw-inline {
    flex: 1 1 160px;
  }
  .ticket-filterbar .tw-inline select {
    width: 100%;
    max-width: none;
  }
  .history-row {
    grid-template-columns: 32px minmax(0, 1fr) auto 64px 12px;
    gap: 10px;
  }
}
@media (max-width: 1100px) {
  .perf-outcomes {
    grid-template-columns: minmax(0, 1fr);
  }
  .composer {
    padding: 10px 14px 12px;
  }
}
@media (max-width: 960px) {
  .setup-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .setup-step {
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .setup-step:last-child {
    border-bottom: 0;
  }
  .tc-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 12px;
  }
  .ticket-category-tabs {
    gap: 8px;
  }
}
@media (max-width: 900px) {
  .knowledge-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .knowledge-filters label:first-child {
    grid-column: 1 / -1;
  }
  .memory-card-heading {
    flex-direction: column;
  }
}
@media (max-width: 760px) {
  .inbox {
    grid-template-columns: minmax(0, 1fr);
  }
  .conversation-list {
    border: 0;
  }
  .inbox .thread {
    display: none;
  }
  .inbox.selected .thread {
    display: flex;
  }
  .inbox.selected .conversation-list {
    display: none;
  }
  .list-head {
    padding: 16px 16px 12px;
  }
  .thread-header {
    padding: 10px 14px;
  }
  .thread-header > .row:last-child {
    margin-left: 0;
  }
  .thread-header .group-details,
  .thread-header small.group-id {
    display: none;
  }
  .ownership {
    flex-wrap: wrap;
    padding: 9px 14px;
    font-size: 12px;
  }
  .ownership .grow {
    flex-basis: 70%;
  }
  .ownership small {
    display: block;
  }
  #messages {
    padding: 14px 14px;
  }
  .message {
    max-width: 92%;
  }
  .message audio {
    width: 265px;
  }
  .composer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "assistant" "modes" "box" "hint";
    gap: 6px;
    padding: 8px 10px 10px;
  }
  .composer .composer-hint {
    justify-self: stretch;
    font-size: 11px;
    white-space: normal;
  }
  .composer-box {
    padding: 4px 6px 4px 10px;
  }
  .composer textarea {
    flex: 1 0 100%;
    width: 100%;
  }
  .composer-bottom {
    flex: 1 0 100%;
    width: 100%;
  }
  .composer-bottom .primary {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 0;
  }
  .composer-bottom .primary svg {
    width: 17px;
    height: 17px;
  }
  .pair-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .pair-layout .qr {
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .pair-layout .qr-wait {
    max-width: 100%;
  }
  .setup-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  .history-row {
    grid-template-areas: "icon main time" "icon status status";
    grid-template-columns: 32px minmax(0, 1fr) auto;
    row-gap: 7px;
    padding: 14px 16px;
  }
  .history-icon {
    width: 32px;
    height: 32px;
  }
  .history-status {
    justify-self: start;
  }
  .history-chevron {
    display: none;
  }
  .history-partner {
    flex: 1 1 100%;
    max-width: none;
  }
  .history-day {
    padding-inline: 16px;
  }
  .history-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .history-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }
  .case-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-actions {
    padding: 0 16px 14px 58px;
  }
  .case-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .partner-card-head {
    flex-wrap: wrap;
    padding: 16px;
  }
  .assist-state {
    flex-wrap: wrap;
  }
  .assist-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tw-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tw-tile strong {
    font-size: 30px;
  }
  .ticket-filterbar .tw-inline {
    flex-basis: 100%;
  }
  .ticket-criteria-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .ticket-partner-drilldown {
    padding: 16px;
  }
  .ticket-category-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .perf-range {
    width: 100%;
    margin-left: 0;
  }
  .perf-toolbar .history-partner {
    flex: 1;
  }
  .perf-chart-scale,
  .perf-chart-plot svg {
    height: 120px;
  }
  .tc-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .tc-list {
    max-height: 190px;
  }
  .tc-thread {
    min-height: 420px;
  }
  .tc-messages {
    padding: 16px;
  }
  .tc-message {
    max-width: 93%;
  }
  .tc-composer textarea {
    flex-basis: 100%;
  }
  .tc-composer .primary {
    margin-left: auto;
  }
  .memory-card,
  .action-card {
    padding: 16px;
  }
}
@media (max-width: 600px) {
  .knowledge-intro {
    flex-direction: column;
    gap: 14px;
  }
  .knowledge-intro > button {
    width: 100%;
  }
  .knowledge-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .knowledge-filters label:first-child {
    grid-column: auto;
  }
  .memory-meta {
    flex-direction: column;
  }
}
@media (hover: none) {
  .message-foot {
    opacity: 1;
  }
}
.message.message-target {
  outline: 2px solid var(--accent, #b7ce43);
  outline-offset: 6px;
  border-radius: 8px;
}
.flag-queue {
  display: grid;
  gap: 16px;
}
.flag-record {
  border-bottom: 1px solid var(--line, #ddd);
  padding: 12px 0;
}
.activity-timeline {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.activity-now {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
}
.activity-step {
  border-left: 3px solid var(--line, #ddd);
  padding: 4px 0 4px 12px;
  display: grid;
  gap: 4px;
}
.activity-step.is-active {
  border-left-color: var(--accent, #b7ce43);
}
.activity-step.is-failed {
  border-left-color: var(--danger, #d64545);
}
.activity-thinking pre {
  white-space: pre-wrap;
  max-height: 320px;
  overflow: auto;
  font-size: 12px;
  margin: 6px 0 0;
}
.working-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.working-item {
  border: 1px solid var(--line, #ddd);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.working-item.state-working,
.working-item.state-queued {
  border-color: var(--accent, #b7ce43);
}
.working-message {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.activity-status {
  margin: 0 0 8px;
}
.activity-step.activity-milestone {
  border-left-color: var(--blue, #3b82f6);
}
.activity-step.activity-phase > .row strong {
  text-transform: none;
  font-weight: 700;
}
.activity-pager {
  margin-top: 12px;
}
.chat-avatar.has-picture,
.avatar.has-picture {
  overflow: hidden;
}
.chat-avatar img,
.avatar.has-picture img,
.sender-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.sender-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  flex: none;
}
.sender-avatar:empty {
  display: none;
}

/* Escalation group: partner groups excluded from the global escalation group. */
.routing-groups { max-height: 320px; overflow: auto; display: grid; gap: 6px; margin-top: 8px; }
.routing-row small { display: block; color: var(--ink-2); }

/* Performance: what each card counts, in one sentence on hover or keyboard focus. Panels show it past their edge. */
#perf-body .home-panel { overflow: visible; }
#perf-body [data-tip] { position: relative; cursor: help; }
#perf-body [data-tip]:hover::after,
#perf-body [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  width: max-content;
  max-width: min(300px, 80vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
}
#perf-body .perf-heading { border-bottom: 1px dotted var(--ink-4); }
/* Cards on the right edge open their explanation leftwards, so it stays on screen. */
#perf-body .perf-metric:nth-child(2n)[data-tip]::after,
#perf-body .stat-tile:last-child[data-tip]::after { left: auto; right: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Links that act as buttons, such as opening a ticket in the portal in a new tab. */
.link-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--control-sm);
  padding: 0 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}
.link-button:hover { border-color: var(--ink-3); background: var(--surface-2); }
.link-button:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.link-button svg { width: 15px; height: 15px; }

/* Partner filter: one toolbar control with search, several partners and saved presets. */
.partner-filter { position: relative; flex: 0 1 260px; min-width: 200px; }
.partner-filter-trigger { justify-content: flex-start; width: 100%; min-height: 40px; padding: 0 12px; border-color: var(--rule-strong); font-weight: 500; }
.partner-filter-trigger > span { flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.partner-filter-trigger svg { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.partner-filter-trigger svg:last-child { transition: transform var(--fast) var(--ease-out); }
.partner-filter-trigger[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.partner-filter-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 4px; width: min(340px, calc(100vw - 32px)); max-height: min(460px, 70vh); overflow: auto; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.partner-filter-panel[hidden] { display: none; }
.partner-filter-search { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink-3); }
.partner-filter-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.partner-filter-search svg { width: 15px; height: 15px; flex: none; }
.partner-filter-search input { min-height: 36px; padding: 6px 4px; border: 0; background: transparent; box-shadow: none; }
.partner-filter-search input:focus { box-shadow: none; }
.partner-filter-label { margin: 8px 8px 2px; color: var(--ink-3); font: 600 11px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.partner-presets { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.partner-presets li { display: flex; align-items: center; gap: 2px; }
.partner-preset { flex: 1; justify-content: space-between; min-height: 34px; padding: 0 10px; border: 0; background: transparent; font-weight: 500; }
.partner-preset small { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.partner-preset.is-active { background: var(--lime-soft); }
.partner-presets li button.icon { opacity: 0.55; }
.partner-presets li:hover button.icon, .partner-presets li button.icon:focus-visible { opacity: 1; }
.partner-filter-options { display: grid; gap: 1px; }
.partner-option { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; }
.partner-option:hover { background: var(--fill); }
.partner-option span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-option small { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.partner-option[hidden] { display: none; }
.partner-filter-empty { margin: 10px; color: var(--ink-3); font-size: 13px; }
.partner-filter-foot { position: sticky; bottom: -8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px -8px -8px; padding: 8px 10px; border-top: 1px solid var(--rule); background: var(--surface); color: var(--ink-3); font-size: 12.5px; }
.partner-filter-foot .row { gap: 6px; }
.partner-preset-form { display: flex; flex: 1; gap: 6px; }
.partner-preset-form input { flex: 1; min-height: var(--control-sm); padding: 4px 10px; }

/* Emergency outcomes on escalations. */
.case-flag svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.case-flag.tone-red { color: var(--danger-ink, var(--danger)); font-weight: 600; }
.case-flag.tone-amber { color: var(--warning-ink); font-weight: 600; }
.history-detail-actions { display: flex; flex: none; gap: 8px; margin-left: auto; }
.history-ticket-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.history-ticket-link:hover { text-decoration-color: currentColor; }
.emergency-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; color: var(--ink-3); font-size: 13px; }
.emergency-check svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.emergency-check strong { color: var(--ink-2); }
.emergency-report { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--rule); border-left: 3px solid var(--danger); border-radius: var(--radius); background: var(--danger-bg); }
.emergency-report.tone-amber { border-left-color: var(--warning); background: transparent; }
.emergency-report h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.emergency-report h3 svg { width: 16px; height: 16px; color: var(--danger); }
.emergency-report p { margin: 8px 0 0; }
.emergency-report blockquote { margin-top: 6px; }
.emergency-deliveries { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.emergency-deliveries li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
.emergency-phone { font-variant-numeric: tabular-nums; font-weight: 600; }
.emergency-deliveries small { color: var(--ink-3); }
.emergency-deliveries .error-text { flex-basis: 100%; margin: 0; }

/* Emergency contacts dialog. */
.emergency-form { display: grid; gap: 14px; }
.contact-master { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; }
.contact-master input { margin-top: 2px; }
.contact-master span { display: grid; gap: 4px; }
.contact-master small { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.contact-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-card { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); transition: opacity var(--fast) var(--ease-out); }
/* A paused contact stays in the list but reads as off. */
.contact-card:has(.contact-switch input:not(:checked)) { opacity: 0.6; }
.contact-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: end; gap: 12px; }
.contact-switch { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.contact-fields > button.icon { margin-bottom: 4px; }
.contact-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.contact-scope legend { float: left; margin-right: 6px; padding: 0; color: var(--ink-3); font-size: 12.5px; }
.contact-choice { display: flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
.contact-summary { color: var(--ink-3); font-size: 12.5px; }
.contact-partners { display: grid; gap: 6px; }
.contact-partners[hidden] { display: none; }
.contact-partner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px 8px; max-height: 210px; overflow: auto; padding: 4px; border: 1px solid var(--rule); border-radius: var(--radius); }
.contact-empty { padding: 18px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--ink-3); text-align: center; }
.modal-footer .grow { flex: 1; }
@media (max-width: 700px) {
  .contact-fields { grid-template-columns: minmax(0, 1fr) auto; }
  .contact-fields > label:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Performance: the requests without a reply open from their figure. */
.perf-coverage-values > .perf-coverage-open { display: grid; justify-items: start; align-content: start; gap: 7px; min-height: 0; margin: -8px; padding: 8px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: inherit; font-weight: 400; text-align: left; }
.perf-coverage-values > .perf-coverage-open:hover:not(:disabled) { border-color: var(--rule); background: var(--fill); }
.perf-coverage-open strong { color: var(--danger-ink, var(--danger)); }
.perf-coverage-open em { color: var(--ink-2); font-size: 12px; font-style: normal; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.unanswered-list { display: grid; margin: 12px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); list-style: none; }
.unanswered-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; }
.unanswered-row + .unanswered-row { border-top: 1px solid var(--rule); }
.unanswered-main { flex: 1; min-width: 0; }
.unanswered-who { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
.unanswered-who span { color: var(--ink-3); }
.unanswered-text { display: -webkit-box; margin: 4px 0 0; overflow: hidden; color: var(--ink-2); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.unanswered-text.is-muted { color: var(--ink-3); font-style: italic; }
.unanswered-meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--ink-3); font-size: 12px; }

/* Dashboard users: the portal account manager link and the sections table. */
.scope-access { display: grid; gap: 8px; margin: 18px 0 6px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface-2); }
.scope-access-head { display: flex; align-items: center; gap: 10px; }
.scope-access-head h3 { margin: 0; }
.scope-optional { padding: 2px 8px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-3); font-size: 11.5px; }
.scope-access .form-help { margin: 0; }
.scope-manager { max-width: 420px; }
.scope-access .notice { margin: 0; }
.access-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.access-table th, .access-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.access-table thead th { color: var(--ink-3); font: 600 11px/1.2 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; }
.access-table tbody th { color: var(--ink); font: 500 13.5px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.access-table tbody tr:last-child > * { border-bottom: 0; }
.access-table select { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
.access-table td { width: 36%; }
.access-table.is-linked td { width: 27%; }
.access-table.is-linked td:last-child { width: 33%; }
.access-table select:disabled { opacity: 0.55; }
#legacy-partner-access[hidden] { display: none; }