/* Telemóvel do topo. Desenhado a 300×620 e escalado por --s (definido em hero.js). */
.hp {
  position: relative;
  width: min(300px, calc(72svh * .4839));
  aspect-ratio: 300 / 620;
  user-select: none; -webkit-user-select: none;
  pointer-events: none;
}
@media (min-width: 900px) {
  .hp { width: min(340px, calc(72svh * .4839)); }
}
.hp-device {
  position: absolute; left: 0; top: 0; width: 300px; height: 620px;
  transform: scale(var(--s, 1)); transform-origin: 0 0;
  border-radius: 48px; background: #111113; padding: 9px;
  box-shadow:
    0 0 0 1.5px #2A2A2E inset,
    0 40px 80px -30px rgba(17, 17, 19, .45),
    0 18px 36px -18px rgba(17, 17, 19, .3);
}
.hp-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 39px; background: #fff; color: #111113;
  font-family: var(--font); font-size: 13px; line-height: 1.35; letter-spacing: -.005em;
  isolation: isolate;
}
.hp-content { position: absolute; inset: 0; will-change: opacity; }

/* Barra de estado + Dynamic Island */
.hp-status {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 44px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
}
.hp-island { position: absolute; z-index: 7; left: 50%; top: 10px; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.hp-sys { display: flex; gap: 4px; align-items: center; }
.hp-sys i { display: block; width: 3px; border-radius: 1px; background: currentColor; }
.hp-sys b { display: block; width: 22px; height: 11px; margin-left: 4px; border-radius: 3.5px; border: 1.5px solid currentColor; position: relative; }
.hp-sys b::after { content: ""; position: absolute; inset: 1.5px; right: 5px; border-radius: 1.5px; background: currentColor; }

.hp-layer { position: absolute; inset: 0; padding-top: 44px; display: flex; flex-direction: column; will-change: transform, opacity; }

/* ----- Antes: conversa ----- */
.hp-chat { background: #EFEBE4; }
.hp-chat-head {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px 9px;
  background: #F8F7F4; border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.hp-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #D8D4CC; color: #55534F; font-weight: 600; }
.hp-chat-head b { display: block; font-size: 14px; font-weight: 600; }
.hp-sub { display: block; font-size: 11.5px; color: #6E6E73; }
.hp-sub[data-typing] { color: var(--action-text); }
.hp-count {
  position: relative; margin-left: auto; padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--before);
  background: rgba(212, 84, 63, .1); border: 1px solid rgba(212, 84, 63, .28);
  font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform;
}
.hp-strike { position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--before); transform: scaleX(0); transform-origin: left; }
.hp-chat-view { position: relative; flex: 1; overflow: hidden; }
.hp-chat-list { position: absolute; left: 0; right: 0; top: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; will-change: transform; }
.hp-msg {
  max-width: 78%; padding: 7px 10px 6px; border-radius: 14px;
  box-shadow: 0 1px .5px rgba(0, 0, 0, .1); opacity: 0;
  will-change: transform, opacity;
}
.hp-msg span { display: block; font-size: 13.5px; }
.hp-msg small { display: block; text-align: right; font-size: 10px; color: #8A8A8E; margin-top: 1px; font-variant-numeric: tabular-nums; }
.hp-msg[data-from="client"] { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.hp-msg[data-from="owner"] { align-self: flex-end; background: #DDF3E2; border-bottom-right-radius: 5px; transform-origin: 100% 100%; }

/* ----- Depois: página de marcação ----- */
.hp-book { background: var(--bg); opacity: 0; }
.hp-book-head { display: flex; align-items: center; gap: 9px; padding: 8px 16px 10px; }
.hp-logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #111113; color: #F6F4EF; font-weight: 650; font-size: 13px; }
.hp-book-head b { display: block; font-size: 14px; font-weight: 600; }
.hp-book-head small { display: block; font-size: 11px; color: var(--muted); }
.hp-dots { display: flex; gap: 5px; padding: 0 16px 10px; }
.hp-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .1); transition: background-color .25s ease; }
.hp-dots i[data-on] { background: var(--action); }
.hp-panes { position: relative; flex: 1; overflow: hidden; }
.hp-track { display: flex; width: 300%; height: 100%; will-change: transform; }
.hp-pane { width: calc(100% / 3); padding: 4px 16px 0; }
.hp-pane h4 { margin: 0 0 12px; font-size: 21px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.hp-pane-sub { margin: -6px 0 12px; font-size: 12px; color: var(--muted); }
.hp-service {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 13px; margin-bottom: 8px; border-radius: 14px;
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .07); will-change: transform;
  transition: border-color .2s ease, background-color .2s ease;
}
.hp-service b { font-weight: 600; font-size: 13.5px; }
.hp-service small { color: var(--muted); font-size: 11.5px; }
.hp-service[data-selected] { border-color: var(--action); background: #F1FBF4; }

.hp-cal { background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .07); padding: 10px 8px 8px; }
.hp-cal-month { text-align: center; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.hp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; }
.hp-cal-grid span { font-size: 9.5px; font-weight: 600; color: var(--muted); padding: 2px 0 4px; }
.hp-day {
  position: relative; display: grid; place-items: center; height: 30px; margin: 0 1px; border-radius: 9px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: #C2C0BA; will-change: transform;
  transition: background-color .2s ease, color .2s ease;
}
.hp-day[data-free] { color: #111113; font-weight: 500; }
.hp-day[data-free]::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--action); }
.hp-day[data-selected] { background: var(--action); color: #fff; }
.hp-day[data-selected]::after { background: #fff; }

.hp-hours { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-hour {
  padding: 12px 0; border-radius: 12px; text-align: center; font-weight: 600; font-size: 13.5px;
  background: #fff; border: 1.5px solid rgba(0, 0, 0, .07); font-variant-numeric: tabular-nums; will-change: transform;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hp-hour[data-selected] { background: var(--action); border-color: var(--action); color: #fff; }

.hp-confirm {
  margin: 10px 16px 22px; padding: 13px 0; border-radius: 14px; text-align: center;
  font-weight: 600; font-size: 14px; color: #fff; background: #111113;
  opacity: .25; will-change: transform, opacity; transition: opacity .25s ease;
}
.hp-confirm[data-ready] { opacity: 1; }

/* ----- Está marcado ----- */
.hp-done { background: var(--bg); align-items: center; justify-content: center; text-align: center; padding: 44px 22px 40px; opacity: 0; }
.hp-check { width: 76px; height: 76px; margin-bottom: 16px; will-change: transform; }
.hp-check circle { fill: var(--action); }
.hp-check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.hp-done h4 { margin: 0 0 16px; font-size: 25px; font-weight: 650; letter-spacing: -.035em; }
.hp-summary { width: 100%; background: #fff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, .07); padding: 4px 14px; text-align: left; }
.hp-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 12.5px; border-top: 1px solid rgba(0, 0, 0, .06); will-change: transform, opacity; }
.hp-row:first-child { border-top: 0; }
.hp-row span { color: var(--muted); }
.hp-row b { font-weight: 600; }

/* ----- Notificação (vidro) ----- */
.hp-notif {
  position: absolute; z-index: 6; left: 8px; right: 8px; top: 50px;
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px 12px;
  border-radius: 22px; background: rgba(245, 244, 240, .82);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 12px 30px -12px rgba(17, 17, 19, .35), 0 0 0 .5px rgba(0, 0, 0, .08);
  transform: translateY(-130%); opacity: 0; will-change: transform, opacity;
}
.hp-notif img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.hp-notif-meta { display: flex; justify-content: space-between; font-size: 11px; color: #6E6E73; margin-bottom: 1px; }
.hp-notif b { display: block; font-size: 13px; font-weight: 600; }
.hp-notif p { margin: 0; font-size: 12.5px; }
.hp-notif-text { flex: 1; }

/* Indicador de toque */
.hp-touch {
  position: absolute; z-index: 8; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; background: rgba(17, 17, 19, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset;
  opacity: 0; will-change: transform, opacity;
}

/* Movimento reduzido: só opacidade */
.hp--reduced .hp-layer, .hp--reduced .hp-notif { transition: opacity 600ms ease; }
.hp--reduced .hp-layer { transform: none !important; filter: none !important; }

@media (prefers-reduced-transparency: reduce) {
  .hp-notif { background: #F5F4F0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}