/* A phone running a messenger — every chat mock on the site is drawn in one
   of these. Full size for a hero (`.uc-phone`), `data-compact` for a card or
   a step figure. Loaded by / and the use-case pages. */

.uc-phone {
  box-sizing: border-box;
  width: 100%;
  max-width: 330px;
  justify-self: end;
  padding: 11px;
  border-radius: 46px;
  background: #111;
  border: 1px solid var(--pc-border-strong);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  font-family: var(--font-body);
}

.uc-phone-screen {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  border-radius: 36px;
  overflow: hidden;
  background: var(--pc-surface);
  color: var(--pc-ink);
}

.uc-phone-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 22px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.uc-phone-island { width: 92px; height: 26px; border-radius: 13px; background: #111; }

.uc-phone-battery {
  justify-self: end;
  box-sizing: border-box;
  width: 24px;
  height: 12px;
  padding: 2px;
  border: 1.5px solid var(--pc-ink);
  border-radius: 4px;
  opacity: var(--dim-2);
}

.uc-phone-battery i { display: block; height: 100%; width: 80%; background: var(--pc-ink); border-radius: 1px; }

.uc-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 8px;
  border-bottom: var(--bw-hairline) solid var(--pc-border);
}

.uc-chat-back { display: inline-flex; opacity: var(--dim-3); }

.uc-chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pc-surface-inverse);
  color: var(--pc-ink-inverse);
  font-size: 15px;
  font-weight: 600;
}

.uc-chat-title { display: flex; flex-direction: column; line-height: 1.2; }
.uc-chat-title b { font-size: 15px; font-weight: 600; }
.uc-chat-state { font-size: 12px; opacity: var(--dim-3); }
.uc-chat-state[data-typing] { display: none; }
.uc-phone[data-bot-typing] .uc-chat-state:not([data-typing]) { display: none; }
.uc-phone[data-bot-typing] .uc-chat-state[data-typing] { display: block; }

.uc-chat-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  background: var(--pc-bg-subtle);
  background-image: radial-gradient(var(--pc-border) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
}

.uc-chat-day {
  align-self: center;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pc-surface);
  border: var(--bw-hairline) solid var(--pc-border);
  font-size: 12px;
  opacity: var(--dim-3);
}

.uc-msg {
  position: relative;
  max-width: 82%;
  padding: 7px 10px 6px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.35;
}

.uc-msg[data-from="you"] { align-self: flex-end; background: var(--pc-surface-inverse); color: var(--pc-ink-inverse); border-bottom-right-radius: 4px; }
.uc-msg[data-from="bot"] { align-self: flex-start; background: var(--pc-surface); border: var(--bw-hairline) solid var(--pc-border); border-bottom-left-radius: 4px; }
.uc-msg p { margin: 0; white-space: pre-line; }

.uc-msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 11px;
  opacity: var(--dim-3);
}

/* the "…" bubble shown while the assistant is answering */
.uc-msg-typing { display: none; gap: 4px; padding: 12px 12px; }
.uc-msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: uc-dot 1.1s infinite; }
.uc-msg-typing i:nth-child(2) { animation-delay: 0.18s; }
.uc-msg-typing i:nth-child(3) { animation-delay: 0.36s; }
.uc-phone[data-bot-typing] .uc-msg-typing { display: flex; }

@keyframes uc-dot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.uc-chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 24px;
  border-top: var(--bw-hairline) solid var(--pc-border);
  opacity: var(--dim-2);
}

.uc-chat-field {
  flex: 1;
  padding: 8px 14px;
  border: var(--bw-hairline) solid var(--pc-border);
  border-radius: 999px;
  font-size: 14px;
  opacity: var(--dim-3);
}

/* Typed transcript: hidden until the script reveals it in order. */
.uc-phone[data-typing] .uc-msg:not(.uc-msg-typing) { display: none; }
.uc-phone[data-typing] .uc-msg.is-shown { display: block; animation: uc-pop 0.25s ease-out; }

@keyframes uc-pop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- compact: a card-sized phone ---------------------------------------- */

.uc-phone[data-compact] {
  --phone-h: 490px;
  max-width: 250px;
  padding: 8px;
  border-radius: 34px;
  justify-self: center;
}
.uc-phone[data-compact] .uc-phone-screen { min-height: 0; height: var(--phone-h); border-radius: 27px; }
.uc-phone[data-compact] .uc-phone-status { padding: 9px 16px 0; font-size: 11px; }
.uc-phone[data-compact] .uc-phone-island { width: 64px; height: 18px; border-radius: 9px; }
.uc-phone[data-compact] .uc-phone-battery { width: 18px; height: 9px; }
.uc-phone[data-compact] .uc-chat-head { gap: 8px; padding: 8px 10px 8px 6px; }
.uc-phone[data-compact] .uc-chat-back svg, .uc-phone[data-compact] .uc-chat-input svg { width: 18px; height: 18px; }
.uc-phone[data-compact] .uc-chat-avatar { width: 28px; height: 28px; font-size: 12px; }
.uc-phone[data-compact] .uc-chat-title b { font-size: 12px; }
.uc-phone[data-compact] .uc-chat-state { font-size: 10px; }
.uc-phone[data-compact] .uc-chat-body { gap: 5px; padding: 10px 8px; }
.uc-phone[data-compact] .uc-chat-body > * { flex-shrink: 0; }   /* older messages crop at the top, never squash */
.uc-phone[data-compact] .uc-chat-day { padding: 2px 8px; font-size: 10px; }
.uc-phone[data-compact] .uc-msg { max-width: 88%; padding: 6px 9px 5px; border-radius: 13px; font-size: 12px; }
.uc-phone[data-compact] .uc-msg-meta { font-size: 9px; }
.uc-phone[data-compact] .uc-chat-input { gap: 8px; padding: 8px 10px 14px; }
.uc-phone[data-compact] .uc-chat-field { padding: 6px 11px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .uc-phone[data-typing] .uc-msg.is-shown { animation: none; }
  .uc-msg-typing i { animation: none; }
}