/* ============================================
   COMPLETIONS TAB
   Sky Console light theme. Local --co-* tokens
   are remapped onto the shared design tokens in
   style.css :root, with literal fallbacks so the
   tab renders correctly even if style.css loads
   late or the token is missing.
   ============================================ */

:root {
  --co-navy:        #0b1f3a; /* brand navy, used inside the light email mockup only */
  --co-sapphire:    var(--d-accent, #2d7dd2);
  --co-paper:       var(--d-bg, #e9f1f9);
  --co-surface:     var(--d-surface, #ffffff);
  --co-surface-2:   var(--d-surface-2, #dcebf7);
  --co-card-bd:     var(--d-line, #dbe7f2);
  --co-line-strong: var(--d-line-strong, #bcd3e6);
  --co-btn:         var(--d-btn, #2d7dd2);
  --co-btn-hover:   var(--d-btn-hover, #1e6abf);
  --co-ring:        var(--d-ring, rgba(45,125,210,0.25));
  --co-shadow:      var(--d-shadow-sm, 0 1px 2px rgba(16,40,63,0.08));
  --co-shadow-md:   var(--d-shadow-md, 0 6px 16px rgba(16,40,63,0.10));
  --co-shadow-lg:   var(--d-shadow-lg, 0 16px 40px rgba(16,40,63,0.18));
  --co-text:        var(--d-ink, #10283f);
  --co-text-2:      var(--d-ink-2, #44617c);
  --co-text-3:      var(--d-ink-3, #6e8aa3);
  --co-amber:       var(--d-warn, #b45309);
  --co-red:         var(--d-danger, #b91c1c);
  --co-green:       var(--d-ok, #15803d);
}

#completionsView {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--co-text);
}

/* ---------- Sub-nav pills ---------- */
.completions-subnav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.completions-pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--co-line-strong);
  background: transparent;
  color: var(--co-text-2);
  cursor: pointer;
  min-height: 36px;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.completions-pill:hover {
  border-color: var(--co-line-strong);
  background: var(--co-surface-2);
  color: var(--co-text);
}
.completions-pill.active {
  background: var(--co-btn);
  color: #ffffff;
  border-color: var(--co-btn);
}
.completions-pill:focus-visible {
  outline: 2px solid var(--co-sapphire);
  outline-offset: 2px;
}

/* ---------- Filter bar ---------- */
.completions-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.completions-filter-bar select,
.completions-filter-bar input.completions-search {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--co-line-strong);
  background: var(--co-paper);
  color: var(--co-text);
  min-height: 36px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.completions-filter-bar select:focus,
.completions-filter-bar input.completions-search:focus {
  outline: none;
  border-color: var(--co-sapphire);
  box-shadow: 0 0 0 3px var(--co-ring);
}
.completions-filter-bar select { min-width: 140px; }
.completions-filter-bar input.completions-search {
  flex: 1;
  min-width: 180px;
}

/* ---------- List ---------- */
.completions-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ---------- Card ---------- */
.completions-card {
  background: var(--co-surface);
  border: 1px solid var(--co-card-bd);
  border-radius: 10px;
  box-shadow: var(--co-shadow);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.completions-card:hover {
  background: var(--co-surface-2);
  box-shadow: var(--co-shadow-md);
}
.completions-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.completions-card-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--co-text);
  letter-spacing: -0.01em;
}
.completions-card-sub {
  font-size: 12.5px;
  color: var(--co-text-2);
  margin-top: 0.15rem;
}
.completions-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 12.5px;
  color: var(--co-text-2);
  text-align: right;
  flex-shrink: 0;
}
.completions-card-meta .cc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-text-3);
  margin-right: 0.35rem;
  font-weight: 600;
}

.completions-card-summary {
  font-size: 13.5px;
  color: var(--co-text);
  padding: 0.5rem 0.7rem;
  background: var(--co-paper);
  border-radius: 8px;
  border: 1px solid var(--co-card-bd);
}

.completions-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 999px;
  margin-left: 0.35rem;
  color: var(--co-text-2);
  background: transparent;
  border: none;
}
.completions-delta::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.completions-delta.pos {
  background: transparent;
  color: var(--co-text-2);
  border: none;
}
.completions-delta.pos::before { background: var(--co-green); }
.completions-delta.neg {
  background: transparent;
  color: var(--co-text-2);
  border: none;
}
.completions-delta.neg::before { background: var(--co-amber); }

/* ---------- Badges ---------- */
/* Quiet status badges: no tinted fills — a small semantic dot plus muted text. */
.completions-sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--co-text-2);
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 999px;
}
.completions-sent-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--co-green);
  flex: 0 0 auto;
}
.completions-warn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--co-text-2);
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 999px;
}
.completions-warn-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--co-red);
  flex: 0 0 auto;
}
.completions-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--co-text-2);
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 999px;
}
.completions-ready-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--co-sapphire);
  flex: 0 0 auto;
}
.completions-awaiting-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--co-text-2);
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 0;
  border-radius: 999px;
}
.completions-awaiting-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--co-amber);
  flex: 0 0 auto;
}
.completions-status-filter {
  margin: 0 0 8px;
}

/* ---------- Details panel ---------- */
.completions-details {
  background: var(--co-paper);
  border: 1px solid var(--co-card-bd);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.completions-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--co-sapphire);
  padding: 0.25rem 0;
  user-select: none;
}
.completions-details summary:focus { outline: 2px solid var(--co-sapphire); outline-offset: 2px; }
.completions-details[open] summary { margin-bottom: 0.5rem; }
.completions-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  font-size: 13px;
}
.completions-details-grid > div {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--co-card-bd);
}
.completions-details-grid > div:last-child { border-bottom: none; }
.completions-details-grid .completions-details-wide { grid-column: 1 / -1; }
.completions-details-grid .cc-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-text-3);
  margin-bottom: 0.15rem;
  font-weight: 600;
}
.completions-profiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.completions-profiles li {
  padding: 0.4rem 0.55rem;
  background: var(--co-surface);
  border: 1px solid var(--co-card-bd);
  border-radius: 8px;
  font-size: 13px;
  color: var(--co-text);
}
.completions-profile-notes {
  margin-top: 0.2rem;
  color: var(--co-text-2);
  font-size: 12.5px;
}
.completions-details-photos { margin-top: 0.75rem; }

/* ---------- Thumbnail grid ---------- */
.completions-thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
}
.completions-thumb {
  border: 1px solid var(--co-line-strong);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  background: var(--co-paper);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  display: block;
}
.completions-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 130ms ease;
}
.completions-thumb:hover img { filter: brightness(1.08); }
.completions-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--co-sapphire);
  background: var(--co-paper);
}
.completions-no-photos {
  font-size: 12.5px;
  color: var(--co-text-3);
  padding: 0.5rem 0;
}

@media (max-width: 720px) {
  .completions-thumb-grid { grid-template-columns: repeat(2, 1fr); }
  .completions-details-grid { grid-template-columns: 1fr; }
  .completions-card-meta { text-align: left; }
}

/* ---------- Card actions ---------- */
.completions-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-top: 1px solid var(--co-card-bd);
  padding-top: 0.75rem;
}
.completions-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--co-line-strong);
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.completions-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.completions-btn:focus-visible {
  outline: 2px solid var(--co-sapphire);
  outline-offset: 2px;
}
.completions-btn-primary {
  background: var(--co-btn);
  color: #ffffff;
  border-color: var(--co-btn);
}
.completions-btn-primary:not(:disabled):hover {
  background: var(--co-btn-hover);
  border-color: var(--co-btn-hover);
}
.completions-btn-ghost {
  background: transparent;
  color: var(--co-text);
}
.completions-btn-ghost:not(:disabled):hover {
  border-color: var(--co-line-strong);
  background: var(--co-surface-2);
}

/* ---------- Empty state ---------- */
.completions-empty {
  background: var(--co-surface);
  border: 1px dashed var(--co-line-strong);
  border-radius: 12px;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--co-text-2);
}
.completions-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--co-text);
  margin-bottom: 0.35rem;
}
.completions-empty-sub {
  font-size: 12.5px;
  color: var(--co-text-3);
}

/* ---------- Send modal ---------- */
.completions-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,40,63,0.40);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.completions-modal-backdrop.open { display: flex; }
.completions-modal {
  background: var(--co-surface);
  border: 1px solid var(--co-card-bd);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--co-shadow-lg);
  color: var(--co-text);
  display: flex;
  flex-direction: column;
}
.completions-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--co-card-bd);
}
.completions-modal-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--co-text);
  letter-spacing: -0.01em;
}
.completions-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--co-text-2);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 130ms ease, color 130ms ease;
}
.completions-modal-close:hover {
  background: var(--co-surface-2);
  color: var(--co-text);
}
.completions-modal-body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.completions-modal-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 13.5px;
}
.completions-modal-row .completions-modal-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-text-3);
  font-weight: 600;
}
.completions-modal-row .completions-modal-value {
  color: var(--co-text);
  font-weight: 500;
}
.completions-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.completions-modal-field label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-text-3);
  font-weight: 600;
}
.completions-modal-field select,
.completions-modal-field textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--co-line-strong);
  border-radius: 8px;
  background: var(--co-paper);
  color: var(--co-text);
  min-height: 36px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.completions-modal-field select:focus,
.completions-modal-field textarea:focus {
  outline: none;
  border-color: var(--co-sapphire);
  box-shadow: 0 0 0 3px var(--co-ring);
}
.completions-modal-field textarea { resize: vertical; min-height: 100px; }

.completions-modal-status {
  font-size: 12.5px;
  min-height: 1.1em;
  color: var(--co-text-2);
}
.completions-modal-status.ok { color: var(--co-green); font-weight: 600; }
.completions-modal-status.err { color: var(--co-red); font-weight: 600; }

.completions-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--co-card-bd);
  background: var(--co-paper);
  border-radius: 0 0 12px 12px;
}

/* ---------- Lightbox ---------- */
.completions-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8,20,36,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  padding: 1rem;
}
.completions-lightbox.open { display: flex; }
.completions-lightbox-inner {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.completions-lightbox-inner img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: var(--co-shadow-lg);
}
.completions-lightbox-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 1.3rem;
  cursor: pointer;
  color: #ffffff;
  transition: background 130ms ease;
}
.completions-lightbox-close:hover { background: rgba(255,255,255,0.16); }
.completions-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 1.5rem;
  color: #ffffff;
  cursor: pointer;
  transition: background 130ms ease;
}
.completions-lightbox-nav:hover { background: rgba(255,255,255,0.16); }
.completions-lightbox-nav.prev { left: -3rem; }
.completions-lightbox-nav.next { right: -3rem; }
@media (max-width: 720px) {
  .completions-lightbox-nav.prev { left: 0.5rem; }
  .completions-lightbox-nav.next { right: 0.5rem; }
}
.completions-lightbox-meta {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  right: 0;
  text-align: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}

/* Wide tap zones for prev / next on touch devices. They sit underneath
   the visible chevron buttons so the chevrons still work, but the whole
   left or right third of the lightbox is tappable for thumbs. We let the
   browser handle pinch-to-zoom natively (no touch-action override). */
.completions-lightbox-tap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.completions-lightbox-tap.prev { left: 0; }
.completions-lightbox-tap.next { right: 0; }
.completions-lightbox-tap:focus { outline: none; }

/* Make sure the visible chevrons sit above the tap zones so they remain
   clickable on desktop and visible on mobile. */
.completions-lightbox-nav { z-index: 3; }
.completions-lightbox-close { z-index: 4; }

/* Spinner overlay: shown while the current photo is fetching. */
.completions-lightbox-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  pointer-events: none;
  z-index: 1;
}
.completions-lightbox.is-loading .completions-lightbox-spinner { display: flex; }
.completions-spinner-ring {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: var(--co-sapphire);
  animation: completions-spin 0.9s linear infinite;
}
@keyframes completions-spin {
  to { transform: rotate(360deg); }
}

/* Stuck strip: only visible after 10s of waiting.
   Floats over the deliberately-dark lightbox, so it stays dark glass. */
.completions-lightbox-stuck {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: rgba(8,20,36,0.85);
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 13px;
  pointer-events: auto;
}
.completions-lightbox.is-loading.is-stuck .completions-lightbox-stuck {
  display: inline-flex;
}
.completions-lightbox-retry-mini {
  background: var(--co-btn);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease;
}
.completions-lightbox-retry-mini:hover { background: var(--co-btn-hover); }

/* Error state: image failed to load. */
.completions-lightbox-error {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.9rem;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  z-index: 1;
}
.completions-lightbox.is-error .completions-lightbox-error { display: flex; }
.completions-lightbox-retry {
  background: var(--co-btn);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease;
}
.completions-lightbox-retry:hover { background: var(--co-btn-hover); }

/* While loading or erroring, hide the broken-image frame so the spinner
   or error message owns the centre of the screen. */
.completions-lightbox.is-loading .completions-lightbox-inner img,
.completions-lightbox.is-error .completions-lightbox-inner img {
  visibility: hidden;
}

/* Give the inner box a stable minimum size so the spinner sits in the
   middle even when the previous image has been cleared. */
.completions-lightbox-inner {
  min-width: min(80vw, 480px);
  min-height: min(60vh, 320px);
}

/* ---------- Toast ---------- */
.completions-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--co-surface-2);
  border: 1px solid var(--co-line-strong);
  color: var(--co-text);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: var(--co-shadow-md);
}
.completions-toast.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   Card preview row (photo + info + actions)
   ============================================ */
.completions-preview {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.completions-primary-photo {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid var(--co-line-strong);
  background: var(--co-paper);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: block;
  box-shadow: var(--co-shadow);
  transition: border-color 130ms ease;
}
.completions-primary-photo:hover {
  border-color: var(--co-line-strong);
}
.completions-primary-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 130ms ease;
}
.completions-primary-photo:hover img { filter: brightness(1.08); }
.completions-primary-photo--placeholder {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--co-text-3);
  border: 1px dashed var(--co-line-strong);
  background: var(--co-paper);
}
.completions-primary-photo--placeholder:hover { box-shadow: none; border-color: var(--co-line-strong); }

.completions-preview-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.completions-preview-info .completions-card-title {
  margin: 0;
}
.completions-preview-info .completions-card-sub {
  margin-top: 0;
}
.completions-preview-meta {
  font-size: 12.5px;
  color: var(--co-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.15rem;
}
.completions-preview-dot {
  color: var(--co-text-3);
}
.completions-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}
.completions-preview-nophotos {
  font-size: 12.5px;
  color: var(--co-text-3);
  margin-top: 0.3rem;
  font-style: italic;
}
.completions-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: stretch;
  min-width: 160px;
}
.completions-preview-actions .completions-btn {
  white-space: nowrap;
}

/* Strip of small thumbnails below the primary photo row */
.completions-thumb-strip {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.45rem;
  flex-wrap: wrap;
}
.completions-thumb-mini {
  width: 40px;
  height: 40px;
  border: 1px solid var(--co-line-strong);
  border-radius: 8px;
  background: var(--co-paper);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  box-shadow: var(--co-shadow);
  transition: border-color 130ms ease;
}
.completions-thumb-mini:hover {
  border-color: var(--co-line-strong);
}
.completions-thumb-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 130ms ease;
}
.completions-thumb-mini:hover img { filter: brightness(1.08); }
.completions-thumb-mini--more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--co-sapphire);
}

/* ---- Mobile (under 600px) ---- */
@media (max-width: 600px) {
  .completions-preview {
    flex-wrap: wrap;
  }
  .completions-primary-photo {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }
  .completions-primary-photo img {
    width: 100%;
    height: 100%;
  }
  .completions-thumb-strip {
    display: none;
  }
  .completions-preview-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
  }
  .completions-preview-actions .completions-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* ============================================
   SEND TO CUSTOMER - PREVIEW STAGE
   Two-stage modal: configure -> preview -> send.
   These styles live below the existing modal styles so they win
   on any conflict and are easy to remove if the preview is reverted.
   ============================================ */

/* Stage wrapper: only one stage is visible at a time. */
.completions-modal-stage {
  display: flex;
  flex-direction: column;
}
.completions-modal-stage[hidden] { display: none; }

/* Allow the email input under "Email subject" to look like the other fields. */
.completions-modal-field input[type="text"] {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--co-line-strong);
  border-radius: 8px;
  background: var(--co-paper);
  color: var(--co-text);
  min-height: 36px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.completions-modal-field input[type="text"]:focus {
  outline: none;
  border-color: var(--co-sapphire);
  box-shadow: 0 0 0 3px var(--co-ring);
}

/* "Send now" button used on the preview stage: the footer's single
   primary action, filled with the system button blue for consistency. */
.completions-btn-send {
  background: var(--co-btn);
  color: #ffffff;
  border-color: var(--co-btn);
}
.completions-btn-send:not(:disabled):hover {
  background: var(--co-btn-hover);
  border-color: var(--co-btn-hover);
}

/* Intro line above the mockups. */
.completions-preview-intro {
  font-size: 13.5px;
  color: var(--co-text-2);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}

/* "Open gallery to preview" control. Sits at the top of the preview stage,
   above the SMS and email mockups. Styled as a quiet secondary button so
   it does not compete with the Send CTA in the footer. */
.completions-preview-open-gallery-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.1rem 0 0.6rem;
}
.completions-preview-open-gallery {
  appearance: none;
  background: transparent;
  color: var(--co-text);
  border: 1px solid var(--co-line-strong);
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.completions-preview-open-gallery:not(:disabled):hover {
  background: var(--co-surface-2);
  border-color: var(--co-line-strong);
}
.completions-preview-open-gallery:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.completions-preview-open-gallery-helper {
  font-size: 12.5px;
  color: var(--co-text-3);
  line-height: 1.35;
}

/* Reminder line beneath the mockups: quiet strip with a warn accent bar,
   no tinted fill. */
.completions-preview-warning {
  font-size: 12.5px;
  color: var(--co-text-2);
  background: var(--co-paper);
  border: 1px solid var(--co-card-bd);
  border-left: 3px solid var(--co-amber);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* One section per channel (SMS, Email). */
.cs-mock-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.cs-mock-section + .cs-mock-section { margin-top: 0.85rem; }
.cs-mock-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--co-text-3);
  font-weight: 600;
}

/* Inline link chip - used inside SMS bubbles and email body fallbacks.
   Lives inside the LIGHT mockups, so it keeps a light-context blue. */
.cs-mock-link {
  color: #2d7dd2;
  text-decoration: underline;
  word-break: break-all;
}

/* ----------------------------------------------------------------
   CUSTOMER MOCKUPS — DELIBERATELY LIGHT.
   These depict the customer's phone and inbox, so they stay white
   with dark text inside, framed by a dark-theme border + shadow so
   they sit nicely on the dark modal. All colours inside the frames
   are literals (no dark-token vars).
   ---------------------------------------------------------------- */

/* ---------- SMS phone mockup ---------- */
.cs-mock-phone {
  background: #ffffff;
  border: 1px solid var(--co-card-bd);
  border-radius: 14px;
  box-shadow: var(--co-shadow-md);
  overflow: hidden;
  max-width: 320px;
  margin: 0 auto;
}
.cs-mock-phone-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #f7f8fa;
  border-bottom: 1px solid #e8eaef;
  padding: 0.55rem 0.8rem;
  color: #3a3a3c;
}
.cs-mock-phone-back {
  color: #0a84ff;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
}
.cs-mock-phone-recipient {
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1e;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-mock-sms-sep {
  display: inline-block;
  margin: 0 0.35rem;
  color: #b0b0b3;
}
.cs-mock-sms-phone {
  font-weight: 400;
  color: #6b6b70;
}
.cs-mock-phone-body {
  padding: 0.85rem 0.75rem 1rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cs-mock-sms-bubble {
  background: #e9eaee;
  color: #1c1c1e;
  font-size: 13.5px;
  line-height: 1.4;
  padding: 0.55rem 0.8rem;
  border-radius: 18px;
  max-width: 85%;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cs-mock-sms-timestamp {
  align-self: center;
  font-size: 11px;
  color: #8e8e93;
  margin-top: 0.5rem;
}

/* ---------- Email mockup ---------- */
.cs-mock-email {
  background: #ffffff;
  border: 1px solid var(--co-card-bd);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--co-shadow-md);
}
.cs-mock-email-meta {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e8eaef;
  background: #f6f8fb;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cs-mock-email-row {
  display: flex;
  gap: 0.55rem;
  font-size: 12.5px;
  color: #64748b;
  align-items: baseline;
  flex-wrap: wrap;
}
.cs-mock-email-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-weight: 600;
  width: 56px;
  flex: 0 0 auto;
}
.cs-mock-email-subject {
  color: #0f172a;
  font-weight: 600;
}
.cs-mock-email-body {
  background: #eef2f7;
  padding: 14px;
}
.cs-mock-email-banner {
  background: var(--co-navy);
  color: #ffffff;
  padding: 16px 18px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.cs-mock-email-banner-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
}
.cs-mock-email-banner-sub {
  font-size: 10px;
  color: #9cc6ea;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.cs-mock-email-content {
  background: #ffffff;
  padding: 18px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #334155;
}
.cs-mock-email-greeting {
  font-size: 13.5px;
  margin-bottom: 0.5rem;
}
.cs-mock-email-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cs-mock-email-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 18px;
  background: #2d7dd2;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: default;
}
.cs-mock-email-cta:hover { background: #2d7dd2; }
.cs-mock-email-fallback {
  font-size: 11px;
  color: #64748b;
  margin-top: 0.5rem;
}
.cs-mock-email-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8eaef;
  font-size: 11px;
  color: #64748b;
}
.cs-mock-email-attachments {
  border-top: 1px solid #e8eaef;
  padding: 0.65rem 0.9rem;
  background: #f6f8fb;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cs-mock-email-attachments-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  font-weight: 600;
}
.cs-mock-email-attachments-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12.5px;
  color: #64748b;
}
.cs-mock-email-attachment-icon {
  color: #2d7dd2;
}

/* Mobile tweaks: shrink horizontal padding and let the phone mockup
   fill more of the modal width. */
@media (max-width: 540px) {
  .cs-mock-phone { max-width: 100%; }
  .cs-mock-email-banner { padding: 14px 14px; }
  .cs-mock-email-content { padding: 14px; }
  .cs-mock-email-key { width: 48px; }
}

/* iOS Safari auto-zoom fix: 16px minimum on inputs for touch devices */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Keep 44px tap targets on touch devices (desktop uses 36px controls). */
  .completions-pill,
  .completions-btn,
  .completions-preview-open-gallery,
  .completions-filter-bar select,
  .completions-filter-bar input.completions-search {
    min-height: 44px;
  }
}