/* The "how did the call go?" card.
 *
 * Fixed bottom right on a desktop and full width along the bottom on a phone.
 * Below the toasts (200) so a "Saved" message is never hidden by the card that
 * caused it, and far below the incoming call ribbon (4000), which is pinned to
 * the top of the window: this card must never sit over a Hang up button.
 * Colours are the app's own tokens, so a theme that redefines them carries it.
 */
.co-card {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  z-index: 150;
  padding: 12px 14px;
  background: var(--card);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.co-head { margin-bottom: 8px; }

.co-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.co-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.co-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }

.co-note, .co-why, .co-cb {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  padding: 6px 8px;
}
.co-note { resize: vertical; margin-bottom: 8px; }
.co-why { margin-top: 6px; }

.co-row { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.co-row .co-cb { margin-top: 3px; color: inherit; }
.co-check { display: flex; align-items: center; gap: 6px; }
.co-check input { width: auto; }

.co-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

@media (max-width: 720px) {
  .co-card {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Clear of the bottom tab bar the phone layout adds. */
    bottom: 64px;
  }
}