/* In-call panel. Mobile-first: one thumb, standing, in a shop. Colours are the shell's --c-* tokens (styles.css
   :root), the one palette brand_config will bind to. Every rule sits under .in-call so it does not leak into the
   shell, and the shell scopes the class names both use to .console; buttons are reset below so the shell's pill
   look does not reach them. */
.in-call {
  background: var(--c-paper);
  color: var(--c-ink);
  -webkit-text-size-adjust: 100%;
  --radius: 14px;
  --tap: 52px;
  --dock: calc(var(--tap) * 2 + 28px + env(safe-area-inset-bottom));
  color-scheme: light;
  font:
    16px/1.4 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}
.in-call,
.in-call * {
  box-sizing: border-box;
}
.in-call button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: inherit;
}
.in-call button,
.in-call input,
.in-call textarea {
  font: inherit;
  color: inherit;
}
.in-call.screen {
  display: block;
  min-height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}
.in-call.center {
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--c-ink-muted);
}

.in-call .call-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.in-call .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* idle is a hollow ring and live a filled, haloed dot: told apart by shape, not by two pale shades on ink */
  border: 2px solid var(--c-line-strong);
}
.in-call .dot.live {
  border-color: var(--c-ok-tint);
  background: var(--c-ok-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ok-tint) 30%, transparent);
}
.in-call .call-mode {
  margin-left: auto;
  opacity: 0.8;
}
.in-call .timer {
  font-variant-numeric: tabular-nums;
}
.in-call .context {
  padding: 10px 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  color: var(--c-ink-muted);
}
.in-call .context p {
  margin: 0 0 6px;
}
.in-call .context p:last-child {
  margin: 0;
}
.in-call .context strong {
  color: var(--c-ink);
}
.in-call .context dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 4px 16px;
  margin: 0;
}
.in-call .context dl div {
  min-width: 0;
}
.in-call .context dt {
  font-size: 12px;
}
.in-call .context dd {
  margin: 0;
  color: var(--c-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.in-call .panel {
  padding: 12px 12px calc(var(--dock) + 12px);
}

.in-call .search {
  width: 100%;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 17px; /* >= 16px: iOS does not zoom on focus */
}
.in-call .hint {
  min-height: 1.4em;
  margin: 8px 4px;
  color: var(--c-ink-muted);
  font-size: 14px;
}
.in-call .hint.bad {
  color: var(--c-accent);
}
.in-call .results,
.in-call .shown {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.in-call .product {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.in-call .product-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.in-call .product-head img,
.in-call .img-ph {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--c-line);
  flex: none;
}
.in-call .product-text {
  display: grid;
}
.in-call .price {
  color: var(--c-ink-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.in-call .variants,
.in-call .reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.in-call .chip {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
}
.in-call .chip.on {
  border-color: var(--c-link);
  background: var(--c-link);
  color: var(--c-on-ink);
}
.in-call .chip.oos {
  text-decoration: line-through;
  opacity: 0.6;
}
.in-call .actions {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.in-call .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}
.in-call .btn:disabled {
  opacity: 0.45;
}
.in-call .btn.primary {
  background: var(--c-link);
  border-color: var(--c-link);
  color: var(--c-on-ink);
}
.in-call .btn.danger {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
}
.in-call .btn.ghost {
  background: transparent;
}
.in-call .btn.wide {
  width: 100%;
  margin-top: 10px;
}
.in-call .btn.big {
  min-height: 60px;
  font-size: 18px;
}

.in-call .notes textarea,
.in-call .outcome-note {
  width: 100%;
  min-height: 40dvh;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 17px;
  resize: vertical;
}
.in-call .outcome-note {
  min-height: 96px;
  margin-top: 16px;
}
.in-call .shown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

/* Chat: the shopper's lines on the left, the advisor's on the right, the composer under them by the thumb. */
.in-call .chat-log {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.in-call .chat-log li {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 17px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.in-call .chat-log li[data-from='advisor'] {
  align-self: flex-end;
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}
.in-call .chat-log li[data-pending] {
  opacity: 0.6;
}
.in-call .chat-log li[data-failed] {
  border-color: var(--c-accent);
}
.in-call .chat-log .unsent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}
.in-call .chat-log .resend {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
}
.in-call .chat-log .who {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}
.in-call .composer {
  display: flex;
  gap: 8px;
  /* scrolled into view as lines come in: above the fixed dock, not under it */
  scroll-margin-bottom: calc(var(--dock) + 12px);
}
.in-call .composer input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 17px; /* >= 16px: iOS does not zoom on focus */
}

/* The dock: everything the thumb needs during a call, at the bottom. */
.in-call .dock {
  position: fixed;
  inset: auto 0 0;
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  text-align: initial;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}
.in-call .tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.in-call .tab {
  position: relative;
  min-height: var(--tap);
  border: 0;
  border-radius: 12px;
  background: var(--c-paper);
  font-weight: 600;
}
.in-call .tab.on {
  background: var(--c-ink);
  color: var(--c-on-ink);
}
/* Mute and camera sit left of hang-up, which keeps the widest target. */
.in-call .call-controls {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.in-call .call-controls .hang-up {
  grid-column: span 2;
}
.in-call .call-controls .btn.on {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}

/* The room: its status under the call bar, and the advisor's self-view in the corner on a video call. */
.in-call .media-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 16px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  font-weight: 600;
}
.in-call .media-status.bad {
  color: var(--c-accent);
}
.in-call .media-status .btn {
  min-height: 44px;
}
.in-call .btn.sound {
  margin: 0;
  border-radius: 0;
}
.in-call .self-view {
  position: fixed;
  right: 12px;
  bottom: calc(var(--dock) + 12px);
  z-index: 4;
  width: 96px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c-ink);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}
.in-call .self-view video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.in-call .badge {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-link);
  color: var(--c-on-ink);
  font-size: 13px;
}

.in-call .sheet {
  position: fixed;
  inset: auto 0 0;
  z-index: 5;
  max-width: 640px;
  max-height: 100dvh;
  margin: 0 auto;
  overflow-y: auto;
  padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--c-surface);
  box-shadow: 0 -8px 40px rgb(0 0 0 / 0.25);
}
.in-call.phase-outcome .sheet {
  inset: 0;
  border-radius: 0;
  padding-top: calc(20px + env(safe-area-inset-top));
}
.in-call .sheet h2 {
  margin: 0 0 16px;
  font-size: 22px;
}
.in-call .sheet h3 {
  margin: 20px 0 4px;
  font-size: 16px;
}
.in-call .tags {
  display: grid;
  gap: 10px;
}
.in-call .tag {
  min-height: 64px;
  border-radius: var(--radius);
  border: 2px solid var(--c-line);
  background: var(--c-paper);
  font-size: 18px;
  font-weight: 700;
}
.in-call .tag.on.tag-sold {
  border-color: var(--c-ok-ink);
  background: var(--c-ok-ink);
  color: var(--c-on-ink);
}
.in-call .tag.on.tag-follow_up {
  border-color: var(--c-link);
  background: var(--c-link);
  color: var(--c-on-ink);
}
.in-call .tag.on.tag-no_sale {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.in-call .warn {
  color: var(--c-accent);
  font-weight: 600;
}

.in-call .summary {
  padding: 16px;
}
.in-call .summary h2 {
  margin: 4px 0 12px;
}
.in-call .facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}
.in-call .facts div {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.in-call .facts dt {
  color: var(--c-ink-muted);
  font-size: 13px;
}
.in-call .facts dd {
  margin: 2px 0 0;
  font-weight: 700;
}
.in-call .cart-link input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 14px;
}
.in-call .kind {
  margin-left: 8px;
  color: var(--c-ink-muted);
}
.in-call .note-text {
  white-space: pre-wrap;
}

.in-call .toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + 12px);
  z-index: 6;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-weight: 600;
}
.in-call .toast.bad {
  background: var(--c-accent);
}
.in-call.phase-summary .toast,
.in-call.phase-outcome .toast {
  bottom: calc(24px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) {
  .in-call .sheet {
    animation: rise 0.18s ease-out;
  }
  @keyframes rise {
    from {
      transform: translateY(24px);
      opacity: 0;
    }
  }
}