/* ============================================================
   Attendance — UI do atendimento por brand (inbox/orders/agent).
   Segue o padrão dark theme do bailder.css.
   ============================================================ */

.split-pane {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 960px) {
  .split-pane { grid-template-columns: 1fr; }
}

.split-pane__main, .split-pane__side {
  min-width: 0;
}

.split-pane__side {
  position: sticky;
  top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Linha de conversation/inbox/order ------------------------- */
.conv-row, .order-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-md);
  align-items: center;
}

.conv-row__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-surface-2, rgba(255,255,255,0.06));
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--color-text-muted);
}

.conv-row__name { font-weight: 600; margin-bottom: 2px; }
.conv-row__preview { color: var(--color-text-muted); font-size: 0.92rem; }
.conv-row__meta { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.order-row__id { font-family: var(--font-mono, monospace); color: var(--color-text-muted); }
.order-row__title { font-weight: 500; }
.order-row__meta { color: var(--color-text-muted); font-size: 0.88rem; margin-top: 2px; }
.order-row__status { align-self: center; }

/* Chat thread ---------------------------------------------- */
.chat-thread {
  display: flex; flex-direction: column;
  gap: var(--space-sm);
  max-height: 70vh;
  overflow-y: auto;
  padding-right: var(--space-xs);
}
.chat-thread--mini { max-height: 320px; }

.msg {
  padding: var(--space-sm) var(--space-md);
  border-radius: 10px;
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
.msg--user      { background: rgba(34,211,238,0.06);  border-color: rgba(34,211,238,0.2); }
.msg--assistant { background: rgba(168,85,247,0.06);  border-color: rgba(168,85,247,0.2); }
.msg--mini      { padding: var(--space-xs) var(--space-sm); font-size: 0.9rem; }

.msg__meta {
  display: flex; gap: var(--space-sm);
  font-size: 0.78rem; color: var(--color-text-muted);
  margin-bottom: 4px;
}
.msg__role { font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.msg__body p { margin: 0 0 var(--space-xs); }
.msg__body p:last-child { margin-bottom: 0; }

/* ============================================================
   iMessage-style chat thread (override visual quando wrapper
   .chat-thread--imessage está presente). Mantém .msg base pra
   outras views (order.html, agent.html) intactas.
   ============================================================ */
.split-pane--imessage .split-pane__side {
  /* customer-card já cuida do próprio container; mantém top */
  top: var(--space-md);
}

.chat-thread--imessage {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  max-height: calc(100vh - 220px);
  min-height: 480px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(1200px 600px at 20% -20%, rgba(34,211,238,0.04), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(232,116,47,0.05), transparent 60%),
    var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Grupo de bubbles do mesmo role (espaçamento generoso entre grupos) */
.msg-group {
  display: flex;
  flex-direction: column;
  gap: 2px; /* bubbles do MESMO grupo bem próximas (estilo iMessage) */
}
.msg-group--user      { align-items: flex-end; }
.msg-group--assistant { align-items: flex-start; }
.msg-group--system,
.msg-group--tool      { align-items: center; }

/* Reset das bubbles dentro do contexto iMessage */
.chat-thread--imessage .msg {
  padding: 0;
  background: transparent;
  border: none;
  max-width: min(78%, 560px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: msgIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.chat-thread--imessage .msg--user      { align-items: flex-end; }
.chat-thread--imessage .msg--assistant { align-items: flex-start; }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bubble propriamente dita */
.msg__bubble {
  position: relative;
  padding: 8px 14px;
  font-size: 0.95rem;
  line-height: 1.4;
  word-wrap: break-word;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* User (direita, azul iOS) */
.chat-thread--imessage .msg--user .msg__bubble {
  background: linear-gradient(180deg, #2A8BFF 0%, #0A6CFF 100%);
  color: #fff;
  border-radius: 18px 18px 6px 18px;
}
/* Tail do user (canto inferior direito) */
.chat-thread--imessage .msg--user .msg__bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 14px;
  height: 18px;
  background: linear-gradient(180deg, #0A6CFF 0%, #0A6CFF 100%);
  border-bottom-left-radius: 16px 14px;
  clip-path: path("M 0 0 Q 4 14 14 18 L 0 18 Z");
}

/* Assistant (esquerda, brand orange Salgadelli — glow leve) */
.chat-thread--imessage .msg--assistant .msg__bubble {
  background:
    linear-gradient(180deg, rgba(232,116,47,0.18) 0%, rgba(232,116,47,0.10) 100%),
    var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid rgba(232,116,47,0.32);
  border-radius: 18px 18px 18px 6px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 0 1px rgba(232,116,47,0.06),
    0 0 18px -4px rgba(232,116,47,0.30);
}
/* Tail do assistant (canto inferior esquerdo) */
.chat-thread--imessage .msg--assistant .msg__bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 14px;
  height: 18px;
  background:
    linear-gradient(180deg, rgba(232,116,47,0.10) 0%, rgba(232,116,47,0.10) 100%),
    var(--color-bg-elevated);
  border-bottom-right-radius: 16px 14px;
  clip-path: path("M 14 0 Q 10 14 0 18 L 14 18 Z");
  border-left: 1px solid rgba(232,116,47,0.32);
}

/* System/tool — neutro centralizado */
.chat-thread--imessage .msg--system .msg__bubble,
.chat-thread--imessage .msg--tool   .msg__bubble {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

/* Body interno respeita simple_format */
.chat-thread--imessage .msg__body p { margin: 0; }
.chat-thread--imessage .msg__body p + p { margin-top: 6px; }

/* Mode badge — chip discreto no canto */
.chat-thread--imessage .msg__mode {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Timestamp agrupado (só na última msg do grupo) */
.msg__time-row {
  margin-top: 4px;
  padding: 0 8px;
}
.chat-thread--imessage .msg__time {
  font-size: 0.7rem;
  color: var(--color-text-faded);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Decision Trace INLINE — dropdown discreto abaixo de assistant
   ============================================================ */
.trace-inline {
  margin-top: 6px;
  padding: 0 8px;
  max-width: 100%;
}
.trace-inline > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--color-text-faded);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 2px 0;
  transition: color var(--transition-fast);
}
.trace-inline > summary::-webkit-details-marker { display: none; }
.trace-inline > summary::after {
  content: "▾";
  font-size: 0.65rem;
  opacity: 0.6;
  transition: transform var(--transition-fast);
}
.trace-inline[open] > summary::after { transform: rotate(180deg); }
.trace-inline > summary:hover { color: var(--color-text-muted); }
.trace-inline__eye { font-size: 0.8rem; opacity: 0.75; }
.trace-inline__count,
.trace-inline__ms,
.trace-inline__cost {
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.trace-inline__cost { color: var(--color-warning); }

.trace-inline__body {
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  animation: msgIn 200ms ease-out both;
}
.trace-inline__head {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}
.trace-inline__slug {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
  background: rgba(34,211,238,0.08);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
.trace-inline__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: trace;
}
.trace-inline__item {
  display: grid;
  grid-template-columns: 22px auto auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  font-size: 0.82rem;
}
.trace-inline__item:last-child { border-bottom: none; }
.trace-inline__step {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faded);
  text-align: right;
}
.trace-inline__tool {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-purple);
  background: rgba(124,58,237,0.10);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.trace-inline__t {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faded);
}
.trace-inline__preview {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ============================================================
   Typing indicator (3 dots animados)
   ============================================================ */
.msg--typing .msg__bubble--typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
  align-items: center;
}
.msg--typing .msg__bubble--typing::after { display: none; } /* no tail */
.typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(232,116,47,0.85);
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ============================================================
   Customer Card sticky
   ============================================================ */
.customer-card {
  position: sticky;
  top: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow: hidden;
}
.customer-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-primary, var(--color-primary)) 28%, transparent),
    color-mix(in srgb, var(--brand-secondary, var(--color-accent)) 18%, transparent));
  pointer-events: none;
  z-index: 0;
}
.customer-card > * { position: relative; z-index: 1; }

.customer-card__head {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.customer-card__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--brand-primary, var(--color-primary)),
    var(--brand-secondary, var(--color-accent)));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: rgba(0,0,0,0.8);
  text-shadow: 0 1px 1px rgba(255,255,255,0.25);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.4);
}
.customer-card__id { min-width: 0; }
.customer-card__name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customer-card__sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.customer-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.customer-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin: 0;
  padding: var(--space-sm);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.customer-card__stats > div { text-align: center; min-width: 0; }
.customer-card__stats dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faded);
}
.customer-card__stats dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.customer-card__section { display: flex; flex-direction: column; gap: var(--space-xs); }
.customer-card__section-title {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faded);
  font-weight: 600;
}

.customer-card__chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  background: rgba(124,58,237,0.10);
  border: 1px solid rgba(124,58,237,0.28);
  color: var(--color-text);
  max-width: 100%;
}
.chip__key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-purple);
  text-transform: lowercase;
}
.chip__val {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-card__orders {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.customer-card__order {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-xs);
  align-items: center;
  padding: 6px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.customer-card__order:hover {
  border-color: var(--color-border-strong);
  transform: translateX(2px);
}
.customer-card__order-id {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.customer-card__order-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================
   Empty state pra conversa sem mensagens
   ============================================================ */
.chat-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  background: var(--color-bg-card);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.chat-empty__ascii {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--color-text-faded);
  margin: 0;
  white-space: pre;
  opacity: 0.75;
}
.chat-empty__title {
  margin: 0;
  color: var(--color-text);
  font-size: 1.05rem;
}
.chat-empty__sub {
  margin: 0;
  max-width: 360px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   Decision trace summary (bottom-right collapsible)
   ============================================================ */
.runs-summary > summary {
  cursor: pointer;
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  list-style: none;
}
.runs-summary > summary::-webkit-details-marker { display: none; }
.runs-summary > summary::before {
  content: "▸";
  color: var(--color-text-faded);
  font-size: 0.75rem;
  transition: transform var(--transition-fast);
}
.runs-summary[open] > summary::before { transform: rotate(90deg); }

.runs-summary__list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.runs-summary__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.8rem;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  flex-wrap: wrap;
}
.runs-summary__slug {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
}
.runs-summary__time,
.runs-summary__ms {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-faded);
  margin-left: auto;
}

/* ============================================================
   Acessibilidade — respeita prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .chat-thread--imessage .msg,
  .trace-inline__body { animation: none !important; }
  .typing-dot         { animation: none !important; opacity: 0.7; }
  .customer-card__order { transition: none !important; }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 768px) {
  .chat-thread--imessage {
    max-height: none;
    min-height: 60vh;
    padding: var(--space-sm);
  }
  .chat-thread--imessage .msg { max-width: 88%; }
  .customer-card { position: relative; top: 0; }
  .split-pane--imessage { grid-template-columns: 1fr; }
  .trace-inline__item {
    grid-template-columns: 18px auto 1fr;
  }
  .trace-inline__t { display: none; }
}

/* Listas auxiliares ---------------------------------------- */
.kv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kv-list li {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
  font-size: 0.92rem;
}
.kv-list li span:first-child { color: var(--color-text-muted); }

.trace-list { list-style: none; padding: 0; margin: var(--space-xs) 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }
.trace-list li { padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.trace-list li:last-child { border-bottom: none; }

.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.timeline li { padding: var(--space-xs) var(--space-sm); background: var(--color-surface-2, rgba(255,255,255,0.04)); border-radius: 6px; }

.prompt-pre {
  margin: var(--space-xs) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border-radius: 6px;
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.data-table th, .data-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
}
.data-table th { color: var(--color-text-muted); font-weight: 500; }
.data-table tfoot td { border-top: 1px solid var(--color-border, rgba(255,255,255,0.1)); border-bottom: none; }

.card--compact { padding: var(--space-sm) var(--space-md); }
.card__title { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: var(--space-xs); }
.card__meta { color: var(--color-text-muted); font-size: 0.88rem; }

.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.page-header__nav { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* ============================================================
   ORDER ATOM — visualização molecular do pedido.
   Núcleo central com R$ total. Items orbitam como satellites.
   Status como anéis concêntricos pulsando.
   CSS-only, posicionamento por --i / --total via trig CSS.
   ============================================================ */
.order-atom {
  --atom-size: 340px;
  --atom-orbit: 140px;
  --atom-nucleus: 120px;
  --atom-ring-color: rgba(255,255,255,0.18);
  --atom-ring-style: solid;
  --atom-pulse: 0;
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.order-atom__stage {
  position: relative;
  width: var(--atom-size);
  height: var(--atom-size);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anéis concêntricos — base. Cores específicas via --status- modifiers. */
.order-atom__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.order-atom__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border-width: 2px;
  border-style: var(--atom-ring-style);
  border-color: var(--atom-ring-color);
  transform: translate(-50%, -50%);
}
.order-atom__ring--1 { width: calc(var(--atom-nucleus) + 36px); height: calc(var(--atom-nucleus) + 36px); }
.order-atom__ring--2 { width: calc(var(--atom-nucleus) + 92px); height: calc(var(--atom-nucleus) + 92px); opacity: 0.7; }
.order-atom__ring--3 { width: calc(var(--atom-nucleus) + 156px); height: calc(var(--atom-nucleus) + 156px); opacity: 0.45; }

/* Status modifiers — cor + estilo do anel + pulse */
.order-atom--status-draft {
  --atom-ring-color: rgba(255,255,255,0.22);
  --atom-ring-style: dotted;
}
.order-atom--status-awaiting_confirmation {
  --atom-ring-color: var(--color-warning, #F59E0B);
  --atom-pulse: 1;
}
.order-atom--status-confirmed {
  --atom-ring-color: var(--color-accent, #22D3EE);
  --atom-pulse: 0;
}
.order-atom--status-ready {
  --atom-ring-color: #047857;
  --atom-pulse: 1;
}
.order-atom--status-delivered {
  --atom-ring-color: var(--color-success, #10B981);
}
.order-atom--status-delivered .order-atom__nucleus::after {
  content: "✓";
  position: absolute;
  top: -6px; right: -6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-success, #10B981);
  color: #06060f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}
.order-atom--status-cancelled {
  --atom-ring-color: var(--color-danger, #FF4757);
  opacity: 0.72;
}
.order-atom--status-cancelled .order-atom__rings { filter: saturate(0.6); }

/* Pulse animado nos anéis quando aplicável */
@keyframes atomRingPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: var(--ring-base-opacity, 1); }
  50%      { transform: translate(-50%, -50%) scale(1.04); opacity: 0.4; }
}
.order-atom--status-awaiting_confirmation .order-atom__ring,
.order-atom--status-ready .order-atom__ring {
  animation: atomRingPulse 2.2s ease-in-out infinite;
}
.order-atom--status-awaiting_confirmation .order-atom__ring--2 { animation-delay: 0.3s; }
.order-atom--status-awaiting_confirmation .order-atom__ring--3 { animation-delay: 0.6s; }
.order-atom--status-ready .order-atom__ring--2 { animation-delay: 0.4s; }
.order-atom--status-ready .order-atom__ring--3 { animation-delay: 0.8s; }

/* Núcleo */
.order-atom__nucleus {
  position: relative;
  width: var(--atom-nucleus);
  height: var(--atom-nucleus);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(168,85,247,0.35), rgba(124,58,237,0.18) 60%, rgba(13,13,26,0.95) 100%);
  border: 1px solid var(--color-border-strong, rgba(255,255,255,0.16));
  box-shadow: 0 8px 32px rgba(124,58,237,0.25), inset 0 0 24px rgba(168,85,247,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: atomNucleusPulse 700ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}
@keyframes atomNucleusPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
.order-atom__total {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.1;
  padding: 0 4px;
}
.order-atom__total-label {
  margin-top: 6px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--color-text-faded);
}

/* Satellites — items orbitando */
.order-atom__satellite {
  --angle: calc(360deg / var(--total) * var(--i) - 90deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 44px);
  height: var(--size, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(34,211,238,0.55), rgba(34,211,238,0.14) 70%, rgba(13,13,26,0.95));
  border: 1px solid rgba(34,211,238,0.4);
  box-shadow: 0 4px 16px rgba(34,211,238,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
  z-index: 3;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translate(var(--atom-orbit))
    rotate(calc(-1 * var(--angle)));
  animation: atomSatIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0s);
  cursor: help;
}
@keyframes atomSatIn {
  0%   {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translate(0)
      rotate(calc(-1 * var(--angle)))
      scale(0.4);
  }
  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translate(var(--atom-orbit))
      rotate(calc(-1 * var(--angle)))
      scale(1);
  }
}
.order-atom__sat-qty {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.order-atom__sat-sabor {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  line-height: 1;
  margin-top: 2px;
}
.order-atom__sat-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  z-index: 4;
}
.order-atom__satellite:hover .order-atom__sat-tooltip,
.order-atom__satellite:focus .order-atom__sat-tooltip {
  opacity: 1;
}

.order-atom__empty {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-faded);
  font-size: 0.85rem;
}

.order-atom__caption {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.order-atom__status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--atom-ring-color);
  box-shadow: 0 0 12px var(--atom-ring-color);
}
.order-atom__status-text {
  font-weight: 600;
  color: var(--color-text);
  text-transform: lowercase;
}

@media (prefers-reduced-motion: reduce) {
  .order-atom__ring,
  .order-atom__nucleus,
  .order-atom__satellite {
    animation: none !important;
  }
  .order-atom__satellite {
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translate(var(--atom-orbit))
      rotate(calc(-1 * var(--angle))) !important;
  }
}

/* Atom em telas estreitas — encolhe orbit e nucleus */
@media (max-width: 479px) {
  .order-atom {
    --atom-size: 280px;
    --atom-orbit: 110px;
    --atom-nucleus: 100px;
  }
  .order-atom__total { font-size: 1.1rem; }
}

/* ============================================================
   MOBILE FIRST — viewport < 768px
   Bottom nav, drawer, swipe affordances, FAB, accordions, tabs.
   ============================================================ */

/* Hide-on-desktop helpers (controlled inside media queries below) */
.m-only-inline,
.m-tabnav,
.m-drawer-backdrop,
.m-ptr,
.m-fab,
.m-swipe-actions { display: none; }

@media (max-width: 767px) {
  /* Body padding pro bottom nav não cobrir conteúdo */
  body { padding-bottom: 76px; }

  .page-header { flex-direction: column; align-items: stretch; }
  .page-header__nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .m-scroll-nav { flex-wrap: nowrap; }
  .m-scroll-nav .btn { flex-shrink: 0; }

  /* Sticky header em mobile (order view) */
  .m-sticky-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(6,6,15,0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-sm) var(--space-md);
    margin: 0 calc(var(--space-md) * -1) var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  /* Bottom tab nav — fixo, blur backdrop */
  .m-tabnav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(6,6,15,0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--color-border-strong, rgba(255,255,255,0.16));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .m-tabnav__tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--radius-md, 12px);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    position: relative;
    min-height: 52px;
    transition: color 160ms ease, background 160ms ease;
  }
  .m-tabnav__tab.is-active { color: var(--color-text); }
  .m-tabnav__tab.is-active::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 999px;
    background: var(--color-primary, #7C3AED);
    box-shadow: 0 0 10px rgba(124,58,237,0.6);
  }
  .m-tabnav__icon { font-size: 1.35rem; line-height: 1; }
  .m-tabnav__label { line-height: 1; }

  /* Em < 480px, esconde labels */
  /* (continua na próxima media query) */

  /* m-only-inline (mostra inline em mobile) */
  .m-only-inline { display: inline-flex; }

  /* split-pane vira coluna única, drawer no top */
  .split-pane { grid-template-columns: 1fr; gap: var(--space-md); }
  .split-pane__side { position: static; }

  /* Drawer top (mobile) — esconde o lateral por padrão; abre via Stimulus */
  .m-drawer {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-strong, rgba(255,255,255,0.16));
    border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px);
    padding: var(--space-lg) var(--space-md) var(--space-md);
    transform: translateY(-100%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  }
  .m-drawer.is-open { transform: translateY(0); }
  .m-drawer::before {
    content: "";
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--color-text-faded);
    margin: 0 auto var(--space-md);
    opacity: 0.5;
  }
  .m-drawer__close {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 1.6rem;
    line-height: 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
  }
  .m-drawer__close:hover { background: var(--color-bg-hover); }

  .m-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .m-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Chat fullscreen em mobile */
  .m-chat-thread {
    max-height: calc(100vh - 220px);
  }

  /* Trace inline expandido — em mobile já fica visualmente proeminente */
  .msg__trace-hint {
    font-size: 0.7rem;
    color: var(--color-text-faded);
    margin-left: auto;
  }

  /* Cards do inbox bem grandes — touch friendly */
  .m-inbox-list .card { padding: var(--space-md); }
  .conv-row { gap: var(--space-sm); }
  .conv-row__avatar { width: 48px; height: 48px; font-size: 1.1rem; }
  .conv-row__preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Swipe affordance no inbox */
  .m-swipe-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 16px);
  }
  .m-swipe-card {
    position: relative;
    z-index: 2;
    transform: translateX(var(--swipe-dx, 0));
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    touch-action: pan-y;
  }
  .m-swipe-card.is-swipe-left,
  .m-swipe-card.is-swipe-right {
    transition: none;
  }
  .m-swipe-actions {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    padding: 0 var(--space-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    z-index: 1;
  }
  .m-swipe-actions--left {
    justify-content: flex-start;
    background: linear-gradient(90deg, rgba(34,211,238,0.4), rgba(34,211,238,0.08));
  }
  .m-swipe-actions--right {
    justify-content: flex-end;
    background: linear-gradient(270deg, rgba(255,71,87,0.4), rgba(255,71,87,0.08));
  }

  /* Pull-to-refresh affordance */
  .m-ptr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    height: var(--pull, 0px);
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    transition: height 160ms ease;
  }
  .m-ptr__spinner {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong, rgba(255,255,255,0.16));
    border-top-color: var(--color-primary, #7C3AED);
    animation: ptrSpin 900ms linear infinite;
    animation-play-state: paused;
  }
  .m-ptr.is-ready .m-ptr__spinner { animation-play-state: running; }
  .m-ptr.is-ready .m-ptr__label::after { content: " ↑"; }
  @keyframes ptrSpin { to { transform: rotate(360deg); } }

  /* Floating action button */
  .m-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: var(--space-md);
    bottom: calc(76px + env(safe-area-inset-bottom) + var(--space-sm));
    z-index: 45;
    padding: 14px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary, #7C3AED), var(--color-purple, #A855F7));
    color: white;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(124,58,237,0.45);
    transition: transform 160ms ease;
  }
  .m-fab:hover { transform: translateY(-2px); }
  .m-fab__icon { font-size: 1.2rem; }

  /* Accordion (order view) */
  .m-accordion { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-sm); }
  .m-accordion__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-accordion__summary::-webkit-details-marker { display: none; }
  .m-accordion__summary::after {
    content: "▾";
    color: var(--color-text-faded);
    transition: transform 200ms ease;
  }
  .m-accordion[open] .m-accordion__summary::after { transform: rotate(180deg); }

  /* Timeline vertical (já é vertical, mas reforça spacing) */
  .m-timeline-vertical li { padding: var(--space-sm) var(--space-md); }

  /* Run card colapsado em mobile */
  .m-run-card { padding: 0; }
  .m-run-card[open] { padding: var(--space-sm) var(--space-md); }
  .m-run-card__summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  .m-run-card__summary::-webkit-details-marker { display: none; }
  .m-run-card__id { font-family: var(--font-mono, monospace); color: var(--color-text-muted); }
  .m-run-card__meta { color: var(--color-text-faded); font-size: 0.82rem; margin-left: auto; }

  /* Tabset por radio — CSS-only tabs */
  .m-tabset__strip {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-sm);
  }
  .m-tabset__radio { position: absolute; opacity: 0; pointer-events: none; }
  .m-tabset__label {
    flex: 1 1 auto;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .m-tabset__radio:checked + .m-tabset__label {
    color: var(--color-text);
    border-bottom-color: var(--color-primary, #7C3AED);
  }
  .m-tabset__panel {
    order: 999;
    flex-basis: 100%;
    display: none;
    padding-top: var(--space-sm);
  }
  .m-tabset__radio:checked + .m-tabset__label + .m-tabset__panel {
    display: block;
  }
}

/* Em desktop, tabset vira details inline simples (mostra tudo) */
@media (min-width: 768px) {
  .m-tabset__radio { display: none; }
  .m-tabset__label {
    display: inline-block;
    margin-right: var(--space-sm);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
    font-size: 0.82rem;
  }
  .m-tabset__panel {
    display: block;
    margin-top: var(--space-xs);
  }
}

/* Viewport ultra-estreito — só ícones nas tabs */
@media (max-width: 479px) {
  .m-tabnav__label { display: none; }
  .m-tabnav__tab { min-height: 48px; }
  .m-fab__label { display: none; }
  .m-fab { padding: 14px; }

  .page-header { gap: var(--space-sm); }
  .main__title { font-size: 1.25rem; }
  .main__subtitle { font-size: 0.85rem; }
}

/* prefers-reduced-motion — desabilita pulse/animações em todos componentes mobile */
@media (prefers-reduced-motion: reduce) {
  .m-tabnav__tab.is-active::before,
  .m-fab,
  .m-drawer,
  .m-swipe-card,
  .m-ptr__spinner { animation: none !important; transition: none !important; }
}

/* ============================================================
   FORM PRIMITIVES (sandbox + lab + ab_test)
   ============================================================ */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-md); }
.form-label { font-size: 0.88rem; font-weight: 500; color: var(--color-text-muted); }
.form-input {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  color: var(--color-text, inherit);
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-accent, #FFB800);
  box-shadow: 0 0 0 3px rgba(255,184,0,0.12);
}
.form-input--lg { font-size: 1.04rem; padding: var(--space-md); }
.form-input--mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85rem; }
.form-input::placeholder { color: var(--color-text-muted, rgba(255,255,255,0.3)); }
.form-actions { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-top: var(--space-sm); }

.card--accent {
  border-color: rgba(232,116,47,0.35);
  background: linear-gradient(135deg, rgba(232,116,47,0.06), transparent 70%);
  padding: var(--space-md);
}

.chat-thread--sandbox { max-height: 56vh; }