/*
 * CareHub+ — Apresentação premium / Telas do app em HTML/CSS
 *
 * As telas desenhadas dentro da moldura do celular (não são screenshots):
 * seleção de perfis, painel do dia, tarefas, chat da Cora, rede de apoio, SOS
 * e a conversa do WhatsApp. Usam os tokens reais do app, então a vitrine fica
 * idêntica ao produto. Os elementos animáveis (check, contagem, balão) recebem
 * classes que a engine aciona.
 *
 * Author: Vitoria Lana
 * Created on: 23/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

/* ---------- Casca comum das telas ---------- */
.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg);
}

.app-gradient {
  background: linear-gradient(180deg, #A78BFA 0%, #FFFFFF 42%, #FBCFE8 100%);
}

.app-topbar {
  padding: 56px var(--space-20) var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.app-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--bg);
  background: var(--surface-variant);
}

.app-hi { line-height: 1.2; }
.app-hi small { font-size: 13px; color: var(--text-secondary); }
.app-hi b { font-size: 18px; font-family: var(--font-display); }

.app-body {
  flex: 1;
  overflow: hidden;
  padding: var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.app-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--space-12) 0 var(--space-20);
  background: var(--bg);
  border-top: 1px solid var(--divider);
}

.app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-hint);
}

.app-tab.is-active { color: var(--primary); }
.app-tab .ti {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-8);
  background: currentColor;
  opacity: .85;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ---------- Cartões ---------- */
.card-sh {
  background: var(--bg);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
  padding: var(--space-16);
  border: 1px solid var(--divider);
}

.section-label {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: 12px;
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Painel do dia: barra de progresso ---------- */
.day-progress {
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  overflow: hidden;
}

.day-progress .fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background: var(--gradient-progress);
  transition: width 1s var(--ease-soft);
}

.next-task {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.next-task .time {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: 20px;
  color: var(--primary-dark);
}

.suggestion {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  background: var(--gradient-identity);
  border-radius: var(--radius-16);
  padding: var(--space-16);
}

.suggestion .cora-ic {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex: 0 0 auto;
}

/* ---------- Perfis (seleção) ---------- */
.profiles {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-top: var(--space-24);
}

.profile {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  background: rgb(255 255 255 / .85);
  border-radius: var(--radius-24);
  box-shadow: var(--shadow-card);
}

.profile img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top;
  background: var(--surface-variant);
}

.profile .pn b { font-size: 18px; font-family: var(--font-display); display: block; }
.profile .pn span { font-size: 14px; color: var(--text-secondary); }

/* ---------- Tarefas ---------- */
.filters { display: flex; gap: var(--space-8); flex-wrap: wrap; }

.chip {
  padding: 6px var(--space-12);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--fw-600);
  background: var(--surface-variant);
  color: var(--primary-dark);
}

.chip.is-active { background: var(--primary); color: var(--text-inverse); }

.task {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
  border-left: 5px solid var(--cat-blue);
}

.task.health { border-left-color: var(--cat-red); }
.task.food { border-left-color: var(--cat-green); }

.task .check {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: transparent;
  transition: background var(--dur-standard), border-color var(--dur-standard), color var(--dur-standard);
}

.task.is-done .check {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-inverse);
}

.task.is-done .tt b { text-decoration: line-through; color: var(--text-hint); }

.task .tt b { font-size: 15px; display: block; }
.task .tt span { font-size: 12px; color: var(--text-secondary); }

/* ---------- Chat Cora ---------- */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  overflow: hidden;
  background: var(--surface);
}

.bubble {
  max-width: 80%;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-16);
  font-size: 14px;
  line-height: 1.4;
}

.bubble.in { align-self: flex-start; background: var(--bg); box-shadow: var(--shadow-card); border-bottom-left-radius: var(--space-4); }
.bubble.out { align-self: flex-end; background: var(--primary); color: var(--text-primary); border-bottom-right-radius: var(--space-4); }

.bubble.is-hidden { display: none; }

.cora-confirm {
  align-self: flex-start;
  max-width: 85%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-16);
  padding: var(--space-16);
  box-shadow: var(--shadow-card);
}

.cora-confirm .ct { font-size: 12px; color: var(--text-secondary); }
.cora-confirm .cv { font-weight: var(--fw-700); font-size: 15px; margin: var(--space-4) 0 var(--space-12); }

.cora-confirm .cbtn {
  width: 100%;
  padding: var(--space-12);
  border-radius: var(--radius-12);
  background: var(--primary);
  color: var(--text-inverse);
  font-weight: var(--fw-600);
  text-align: center;
  border: none;
}

.typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: var(--space-12) var(--space-16);
  background: var(--bg);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
}

.typing span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-hint);
  animation: typing 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

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

.composer {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-12);
  background: var(--bg);
  border-top: 1px solid var(--divider);
}

.composer .field {
  flex: 1;
  padding: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-hint);
  font-size: 13px;
}

.composer .send {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex: 0 0 auto;
}

/* ---------- Rede de apoio ---------- */
.member {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  background: var(--bg);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card);
}

.member .av {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--primary-light);
  flex: 0 0 auto;
}

.member .mn b { display: block; font-size: 15px; }
.member .mn span { font-size: 12px; color: var(--text-secondary); }

.role {
  margin-left: auto;
  padding: 4px var(--space-12);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--fw-600);
}

.role.full { background: var(--surface-variant); color: var(--primary-dark); }
.role.view { background: var(--surface); color: var(--text-secondary); border: 1px solid var(--divider); }

/* ---------- SOS ---------- */
.sos {
  position: absolute;
  inset: 0;
  background: var(--gradient-sos);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  color: var(--text-inverse);
  text-align: center;
  padding: var(--space-24);
}

.sos-ring-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
}

.sos-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 3px solid rgb(255 255 255 / .35);
  animation: sos-pulse 2s ease-out infinite;
}
.sos-ring.r2 { animation-delay: .6s; }
.sos-ring.r3 { animation-delay: 1.2s; }

@keyframes sos-pulse {
  from { transform: scale(.6); opacity: .9; }
  to { transform: scale(1.4); opacity: 0; }
}

.sos-core {
  width: 150px;
  height: 150px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .15);
  border: 3px solid rgb(255 255 255 / .6);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: 56px;
}

.sos h3 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.sos p { font-size: 15px; margin: 0; opacity: .9; }

.sos-status {
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .2);
  font-weight: var(--fw-600);
  font-size: 15px;
}

/* ---------- WhatsApp (cena multicanal) ---------- */
.wa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-wallpaper);
}

.wa-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 52px var(--space-16) var(--space-12);
  background: var(--wa-header);
  color: var(--text-inverse);
}

.wa-header .av {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .3);
  object-fit: cover;
}

.wa-header b { font-size: 16px; }
.wa-header small { display: block; font-size: 12px; opacity: .8; }

.wa-body {
  flex: 1;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: hidden;
}

.wa-bubble {
  max-width: 82%;
  padding: var(--space-12);
  border-radius: var(--radius-12);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgb(0 0 0 / .12);
}

.wa-bubble.in { align-self: flex-start; background: var(--wa-bubble-in); border-top-left-radius: var(--space-4); }
.wa-bubble.out { align-self: flex-end; background: var(--wa-bubble-out); border-top-right-radius: var(--space-4); }
.wa-bubble .meta { display: block; margin-top: var(--space-4); font-size: 11px; color: var(--text-secondary); text-align: right; }

.wa-actions { display: flex; gap: var(--space-8); margin-top: var(--space-8); }

.wa-btn {
  flex: 1;
  padding: var(--space-8);
  border-radius: var(--radius-8);
  text-align: center;
  font-weight: var(--fw-600);
  font-size: 13px;
  background: var(--surface);
  color: var(--wa-text-accent);
  border: 1px solid var(--divider);
}

.wa-btn.primary { background: var(--wa-accent); color: var(--text-inverse); border: none; }

.is-hidden { display: none !important; }