/* phone.css: iPhone 17 Pro Max con WhatsApp. Portado del chat de Pruebas de InteliaFlow
   (public/styles/agente-ia.css, .agent-iph / .agent-pruebas-*), solo con la piel de WhatsApp.
   Todas las medidas son multiplos de --u (ancho de diseno 417): el equipo escala con el alto disponible. */

.ph-stage {
  container-type: size;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.ph {
  --w: clamp(250px, calc((100cqh - 24px) * 417 / 876), 400px);
  --u: calc(var(--w) / 417);
  /* Titanio natural */
  --frame-a: #6b6862;
  --frame-b: #c9c5bd;
  --frame-c: #8a867f;
  --frame-d: #4a4844;
  --frame-e: #5d5a55;
  --frame-f: #b3afa7;
  --frame-g: #6f6c66;
  --glass: #030304;
  --glass-edge: #24242a;
  position: relative;
  flex: none;
  width: var(--w);
  margin: auto;
}
.ph-body {
  position: relative;
  padding: calc(4 * var(--u));
  border-radius: calc(68 * var(--u));
  background: linear-gradient(115deg, var(--frame-a) 0%, var(--frame-b) 7%, var(--frame-c) 18%, var(--frame-d) 42%, var(--frame-e) 60%, var(--frame-f) 88%, var(--frame-g) 100%);
  box-shadow:
    inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, 0.32),
    inset 0 0 calc(3 * var(--u)) rgba(0, 0, 0, 0.5),
    0 calc(50 * var(--u)) calc(100 * var(--u)) calc(-30 * var(--u)) rgba(0, 0, 0, 0.75),
    0 0 calc(120 * var(--u)) calc(-20 * var(--u)) color-mix(in srgb, var(--if-brand-primary) 30%, transparent);
}
.ph-bezel {
  position: relative;
  padding: calc(8 * var(--u));
  border-radius: calc(64 * var(--u));
  background: var(--glass);
  box-shadow: inset 0 0 0 calc(1.2 * var(--u)) var(--glass-edge);
}
/* Reflejo sutil del vidrio */
.ph-bezel::after {
  content: "";
  position: absolute;
  inset: calc(8 * var(--u));
  border-radius: calc(56 * var(--u));
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 28%);
  z-index: 9;
}
.ph-btn {
  position: absolute;
  width: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: linear-gradient(180deg, var(--frame-f), var(--frame-e) 14%, var(--frame-e) 86%, var(--frame-f));
}
.ph-btn.is-action { left: calc(-3 * var(--u)); top: calc(148 * var(--u)); height: calc(30 * var(--u)); }
.ph-btn.is-up { left: calc(-3 * var(--u)); top: calc(208 * var(--u)); height: calc(60 * var(--u)); }
.ph-btn.is-down { left: calc(-3 * var(--u)); top: calc(282 * var(--u)); height: calc(60 * var(--u)); }
.ph-btn.is-power { right: calc(-3 * var(--u)); top: calc(232 * var(--u)); height: calc(96 * var(--u)); }
.ph-btn.is-camera { right: calc(-3 * var(--u)); top: calc(560 * var(--u)); height: calc(46 * var(--u)); }
.ph-island {
  position: absolute;
  z-index: 8;
  top: calc(11 * var(--u));
  left: 50%;
  width: calc(124 * var(--u));
  height: calc(36 * var(--u));
  margin-left: calc(-62 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #000;
}
.ph-island::after {
  content: "";
  position: absolute;
  right: calc(11 * var(--u));
  top: calc(11 * var(--u));
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a4a78 0%, #151a2e 42%, #05060b 72%);
}

/* ------------------------------------------------------------ Pantalla (WhatsApp) */
.ph-screen {
  --s-bg: #efe9e0;
  --s-bar: #f6f6f6;
  --s-line: rgba(11, 20, 26, 0.1);
  --s-text: #111b21;
  --s-sub: #667781;
  --s-in: #ffffff;
  --s-out: #d9fdd3;
  --s-chip: #ffffff;
  --s-field: #ffffff;
  --s-icon: #1f2c34;
  --s-accent: #1daa61;
  --s-tick: #53bdeb;
  --s-tick-off: #8696a0;
  position: relative;
  height: calc(852 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(56 * var(--u));
  background: var(--s-bg);
  color: var(--s-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ph-statusbar {
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: calc(54 * var(--u));
  padding: 0 calc(32 * var(--u)) calc(7 * var(--u)) calc(44 * var(--u));
  background: var(--s-bar);
  color: var(--s-text);
  font-size: calc(16.5 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ph-signal { display: inline-flex; align-items: center; gap: calc(5.5 * var(--u)); }
.ph-signal svg { display: block; height: calc(12.5 * var(--u)); width: auto; }
.ph-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(58 * var(--u));
  padding: 0 calc(14 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
  background: var(--s-bar);
  border-bottom: calc(0.6 * var(--u)) solid var(--s-line);
}
.ph-back { display: inline-flex; flex: none; color: var(--s-accent); }
.ph-back svg { display: block; width: calc(14 * var(--u)); height: calc(23 * var(--u)); }
.ph-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6);
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ph-who { flex: 1; min-width: 0; line-height: 1.2; }
.ph-who strong {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  overflow: hidden; color: var(--s-text); font-size: calc(17 * var(--u)); font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
}
.ph-verified { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #1daa61; }
.ph-who small { display: block; color: var(--s-sub); font-size: calc(12.5 * var(--u)); transition: color .2s ease; }
.ph-who small.is-typing { color: var(--s-accent); }
.ph-actions { flex: none; display: inline-flex; align-items: center; gap: calc(18 * var(--u)); color: var(--s-accent); }
.ph-actions svg { display: block; width: calc(25 * var(--u)); height: calc(25 * var(--u)); }

.ph-chat { position: relative; flex: 1; min-height: 0; display: flex; isolation: isolate; }
.ph-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-size: calc(210 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20140%20140%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018a7%207%200%200%201%2014%200c0%205-7%2011-7%2011s-7-6-7-11z%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2220%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M66%2018h.01M74%2018h.01M66%2024c2%202%206%202%208%200%22%2F%3E%3Cpath%20d%3D%22M112%2012l3%207%207%201-5%205%201%207-6-3-6%203%201-7-5-5%207-1z%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2262%22%20width%3D%2220%22%20height%3D%2215%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%2066l10%206%2010-6%22%2F%3E%3Cpath%20d%3D%22M62%2060v18M56%2066l6-6%206%206M54%2080h16%22%2F%3E%3Cpath%20d%3D%22M108%2062c8%200%2014%205%2014%2011s-6%2011-14%2011c-2%200-4%200-5-1l-6%203%202-6c-3-2-5-4-5-7%200-6%206-11%2014-11z%22%2F%3E%3Cpath%20d%3D%22M16%20112a6%206%200%201%200%2012%200a6%206%200%201%200-12%200zM33%20124l-6-6%22%2F%3E%3Cpath%20d%3D%22M60%20104h20v20H60zM60%20112h20M70%20104v20%22%2F%3E%3Cpath%20d%3D%22M104%20106c5-3%2014-3%2018%200v18c-4-3-13-3-18%200z%22%2F%3E%3C%2Fsvg%3E");
}
.ph-thread {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  letter-spacing: -0.005em;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.ph-thread::-webkit-scrollbar { display: none; }
.ph-thread > :first-child { margin-top: auto; }
.ph-chip {
  align-self: center;
  margin: calc(4 * var(--u)) 0 calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(11 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--s-chip);
  color: var(--s-sub);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  text-align: center;
  box-shadow: 0 calc(0.6 * var(--u)) calc(0.6 * var(--u)) rgba(11, 20, 26, 0.1);
}
.ph-chip.is-secure { max-width: 86%; background: #fdf4c5; color: #54656f; font-weight: 400; line-height: 1.35; }
.ph-chip.is-secure svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); vertical-align: -1px; margin-right: calc(3 * var(--u)); }

.ph-bubble {
  position: relative;
  display: flow-root;
  flex: none;
  max-width: 82%;
  padding: calc(6 * var(--u)) calc(9 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(0.8 * var(--u)) calc(0.8 * var(--u)) rgba(11, 20, 26, 0.13);
  overflow-wrap: anywhere;
  transform-origin: bottom left;
  animation: ph-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.ph-bubble.is-run-start { margin-top: calc(6 * var(--u)); }
.ph-bubble.is-in { align-self: flex-start; background: var(--s-in); }
.ph-bubble.is-out { align-self: flex-end; background: var(--s-out); transform-origin: bottom right; }
.ph-bubble.is-run-start.is-in { border-top-left-radius: 0; }
.ph-bubble.is-run-start.is-out { border-top-right-radius: 0; }
@keyframes ph-pop {
  from { opacity: 0; transform: translateY(calc(6 * var(--u))) scale(.96); }
  to { opacity: 1; transform: none; }
}
.ph-text { white-space: pre-wrap; }
.ph-text strong { font-weight: 600; }
.ph-time {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  margin: calc(6 * var(--u)) 0 calc(-2 * var(--u)) calc(10 * var(--u));
  color: var(--s-sub);
  font-size: calc(11 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.ph-ticks { width: calc(16 * var(--u)); height: calc(11 * var(--u)); color: var(--s-tick-off); transition: color .3s ease; }
.ph-bubble.is-read .ph-ticks { color: var(--s-tick); }
.ph-tail {
  position: absolute;
  top: 0;
  left: calc(-8 * var(--u));
  width: calc(8 * var(--u));
  height: calc(13 * var(--u));
  color: var(--s-in);
}
.ph-bubble.is-out .ph-tail { left: auto; right: calc(-8 * var(--u)); color: var(--s-out); transform: scaleX(-1); }
.ph-bubble.is-error { background: #fff4f4; color: #8a1c1c; }

.ph-bubble.is-typing { display: inline-flex; padding: calc(13 * var(--u)); }
.ph-dots { display: inline-flex; gap: calc(4.5 * var(--u)); }
.ph-dots i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: var(--s-sub);
  opacity: 0.35;
  animation: ph-dot 1.2s ease-in-out infinite;
}
.ph-dots i:nth-child(2) { animation-delay: .2s; }
.ph-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ph-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(calc(-2 * var(--u))); } }

/* Barra de escritura */
.ph-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(53 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u));
  background: var(--s-bar);
}
.ph-tool { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--s-icon); }
.ph-tool svg { display: block; width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.ph-tool.is-inner svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--s-sub); }
.ph-composer.has-text .ph-tool.is-optional { display: none; }
.ph-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(35 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--s-field);
  box-shadow: inset 0 0 0 calc(0.6 * var(--u)) var(--s-line);
}
.ph-input,
.ph-input:focus {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--s-text);
  font: inherit;
  font-size: calc(15.5 * var(--u));
  text-overflow: ellipsis;
}
.ph-input::placeholder { color: var(--s-sub); opacity: 1; }
.ph-send {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(33 * var(--u));
  height: calc(33 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--s-accent);
  color: #fff;
  cursor: pointer;
}
.ph-send svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(2 * var(--u)); }
.ph-composer.has-text .ph-send { display: inline-flex; }
.ph-composer.is-locked .ph-field,
.ph-composer.is-locked .ph-send { opacity: .55; cursor: not-allowed; }
.ph-home { flex: none; display: grid; place-items: center; height: calc(25 * var(--u)); background: var(--s-bar); }
.ph-home i { width: calc(138 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: #111b21; }

/* Notificacion tipo iOS al terminar la demo */
.ph-ended {
  position: absolute; inset: auto calc(14 * var(--u)) calc(70 * var(--u)); z-index: 6;
  padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u));
  background: rgba(17, 27, 33, 0.86); color: #fff; font-size: calc(13.5 * var(--u)); text-align: center;
  backdrop-filter: blur(10px);
}
.ph-ended[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ph-bubble { animation: none; }
  .ph-dots i { animation: none; opacity: .7; }
}