/* ==========================================================================
   Edumoción design system — components
   CSS ports of the React components used by "Landing Flori.dc.html":
   Button, FloriLogo, PhoneFrame, ChatHeader, ChatBubble, DayDivider,
   ChatComposer — plus the chat extras the artboard defined inline
   (PDF attachment card, typing indicator, quick-action chip).
   ========================================================================== */

/* --- Button --------------------------------------------------------------- */
.btn {
  font: var(--type-button);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  width: auto;
  transition: var(--motion-hover);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.btn--sm { font-size: var(--fs-small); padding: 10px 18px; }
.btn--lg { font-size: var(--fs-body-lg); padding: 17px 34px; }

.btn--full { width: 100%; }

.btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn--primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }

.btn--secondary {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-fg);
  border-color: var(--action-secondary-border);
}
.btn--secondary:hover { background: var(--ink-900); color: var(--white); }

.btn--on-photo { background: var(--action-onphoto-bg); color: var(--action-onphoto-fg); }
.btn--on-photo:hover { background: var(--cream-100); color: var(--action-onphoto-fg); }

.btn--flori { background: var(--action-flori-bg); color: var(--action-flori-fg); }
.btn--flori:hover { background: var(--green-800); color: var(--action-flori-fg); }

.btn--ghost { background: transparent; color: var(--text-body); padding: 0; }
.btn--ghost:hover { background: transparent; color: var(--text-link); }

/* --- FloriLogo ------------------------------------------------------------ */
.flori-logo {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  max-width: none;
}

/* --- PhoneFrame ----------------------------------------------------------- */
.phone {
  --phone-w: 360px;
  width: var(--phone-w);
  height: calc(var(--phone-w) * 2.1);
  background: var(--ink-900);
  border-radius: 52px;
  padding: 11px;
  box-shadow: var(--shadow-lg);
  position: relative;
  flex: none;
}

/* The artboard sized the frame from window.innerWidth; media queries carry
   the same breakpoints without a resize listener. */
@media (max-width: 860px) { .phone { --phone-w: 330px; } }
@media (max-width: 400px) { .phone { --phone-w: 300px; } }

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: var(--surface-chat);
  display: flex;
  flex-direction: column;
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  z-index: 5;
}

.phone::before { /* notch */
  top: 20px;
  width: 104px;
  height: 28px;
  background: var(--ink-900);
}

.phone::after { /* home indicator */
  bottom: 16px;
  width: 126px;
  height: 5px;
  background: rgba(255, 255, 255, .55);
}

/* --- ChatHeader ----------------------------------------------------------- */
.chat-header {
  background: var(--surface-flori);
  color: var(--white);
  padding: 38px 14px 12px; /* top padding clears the notch */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.chat-header__back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  color: inherit;
}

.chat-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--white);
  object-fit: cover;
  flex: none;
}

.chat-header__identity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.chat-header__name { font: var(--type-nav); font-size: 17px; }

.chat-header__status {
  font: var(--type-small);
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

.chat-header > .icon { color: rgba(255, 255, 255, .9); }

/* --- chat log ------------------------------------------------------------- */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--space-2);
  overscroll-behavior: contain;
}

/* --- DayDivider ----------------------------------------------------------- */
.day-divider {
  display: flex;
  justify-content: center;
  padding: 14px 0 10px;
}

.day-divider span {
  background: var(--chat-daypill);
  color: var(--ink-500);
  font: var(--type-eyebrow);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
}

/* --- ChatBubble ----------------------------------------------------------- */
.bubble-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 12px 8px;
}

.bubble-row--mine { justify-content: flex-end; }

.bubble {
  max-width: 78%;
  background: var(--chat-bubble);
  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 7px 9px 6px;
  box-shadow: var(--shadow-bubble);
  font: var(--type-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-900);
  white-space: pre-line;
}

.bubble-row--mine .bubble {
  background: var(--chat-bubble-mine);
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
}

.bubble__time {
  float: right;
  margin-left: 10px;
  margin-top: 6px;
  font: var(--type-small);
  font-size: 11px;
  color: var(--ink-300);
  white-space: nowrap;
}

/* --- voice note ----------------------------------------------------------- */
.bubble--voice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 88%;
  padding: 9px 11px 7px;
  white-space: normal;
}

.voice__play {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  border: none;
  background: var(--green-700);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--motion-hover);
}

.voice__play:hover { background: var(--green-800); }
.voice__play:active { transform: scale(var(--press-scale)); }
.voice__play[disabled] { background: var(--ink-300); cursor: not-allowed; }
.voice__play .icon { width: 15px; height: 15px; }
.voice__play .voice__pause { display: none; }
.voice__play[data-playing] .voice__play-glyph { display: none; }
.voice__play[data-playing] .voice__pause { display: inline-block; }

.voice__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.voice__track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(22, 16, 13, .16);
  cursor: pointer;
}

.voice__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green-700);
}

.voice__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-300);
}

.voice__meta .icon { width: 12px; height: 12px; color: var(--green-700); }

.voice__clock {
  font-variant-numeric: tabular-nums; /* stops the timer jittering as it counts */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice__stamp { margin-left: auto; white-space: nowrap; padding-left: var(--space-2); }

/* --- PDF attachment card (defined inline on the artboard) ----------------- */
.chat-pdf-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 12px 4px;
}

.chat-pdf {
  max-width: 78%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--chat-bubble);
  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 12px;
  box-shadow: var(--shadow-bubble);
  text-decoration: none;
  color: var(--ink-900);
  transition: var(--motion-hover);
}

.chat-pdf:hover {
  background: #F4F0E6;
  color: var(--ink-900);
  text-decoration: none;
}

.chat-pdf__badge {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: var(--crimson-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.chat-pdf__name { font-size: 14px; font-weight: var(--fw-bold); line-height: 1.3; }

/* --- typing indicator ----------------------------------------------------- */
.typing-row {
  display: flex;
  justify-content: flex-start;
  padding: 0 12px 8px;
}

.typing {
  background: var(--chat-bubble);
  border-radius: 8px;
  border-top-left-radius: 0;
  padding: 12px 14px;
  box-shadow: var(--shadow-bubble);
  display: flex;
  gap: 5px;
  align-items: center;
}

.typing span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--ink-500);
  animation: floridot 1.2s infinite;
}

.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

@keyframes floridot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- quick-action chip ---------------------------------------------------- */
.chat-actions {
  display: flex;
  gap: var(--space-2);
  padding: 8px 12px 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.chat-action {
  position: relative;
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--green-700);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(22, 16, 13, .2);
  transition: var(--motion-hover);
  /* The chip lives inside a phone mockup, which reads as a screenshot — it has
     to move to announce itself as pressable. */
  animation: chat-cue 2.6s var(--ease-out) infinite;
}

.chat-action:hover { background: var(--green-800); }
/* Press feedback uses brightness, not transform, so it cannot fight the cue. */
.chat-action:active { filter: brightness(.92); }

/* Once the reader engages, stop nagging. */
.chat-action:hover,
.chat-action:focus-visible { animation-play-state: paused; }

.chat-action::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--green-700);
  opacity: 0;
  pointer-events: none;
  animation: chat-cue-ring 2.6s var(--ease-out) infinite;
}

.chat-action:hover::after,
.chat-action:focus-visible::after { animation-play-state: paused; }

@keyframes chat-cue {
  0%, 68%, 100% { transform: translateY(0) scale(1); }
  76% { transform: translateY(-4px) scale(1.04); }
  84% { transform: translateY(0) scale(1); }
  90% { transform: translateY(-2px) scale(1.02); }
  96% { transform: translateY(0) scale(1); }
}

@keyframes chat-cue-ring {
  0%, 68% { opacity: 0; transform: scale(.92); }
  74% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* One-time nudge shown next to the first chip of a flow. */
.chat-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  color: var(--ink-500);
  animation: chat-hint-in var(--dur-slow) var(--ease-out) both;
}

.chat-hint::after {
  content: "→";
  animation: chat-hint-arrow 2.6s var(--ease-out) infinite;
}

@keyframes chat-hint-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chat-hint-arrow {
  0%, 68%, 100% { transform: translateX(0); }
  78% { transform: translateX(3px); }
  90% { transform: translateX(1px); }
}

/* With motion off the cue still has to read as pressable, so the ring and the
   hint stay put instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .chat-action { animation: none; }
  .chat-action::after { animation: none; opacity: .45; }
  .chat-hint, .chat-hint::after { animation: none; opacity: 1; }
}

/* --- ChatComposer --------------------------------------------------------- */
.composer {
  background: var(--chat-composer);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.composer__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 9px 12px;
  min-width: 0;
}

.composer__field .icon:first-child { color: var(--amber-600); }
.composer__field .icon:last-child { color: var(--ink-500); }

.composer__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: var(--type-body);
  font-size: 15px;
  color: var(--ink-900);
  background: transparent;
}

.composer__send {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius-circle);
  border: none;
  background: var(--action-flori-bg);
  color: var(--action-flori-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--motion-hover);
}

.composer__send:hover { background: var(--green-800); }

/* --- Icon ----------------------------------------------------------------- */
/* Lucide, 2px stroke — inlined rather than CDN-masked so the page has no
   third-party runtime dependency (see the design system readme, ICONOGRAPHY). */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon--solid { fill: currentColor; stroke: none; }

/* per-slot sizes, matching the artboard's Icon props */
.chat-header__back .icon { width: 22px; height: 22px; }
.chat-header > .icon + .icon { width: 19px; height: 19px; }      /* phone */
.composer__field .icon:first-child { width: 21px; height: 21px; } /* smile */
.composer__field .icon:last-child { width: 19px; height: 19px; }  /* paperclip */