/* Shared layout owns shell geometry and type roles. Load after surface styles
   so each screen uses the same header, gutters and composer. Specific content
   (players, commercial modules, conversation states) keeps its own layout. */
.stage {
  min-height: var(--io-viewport-height, 100dvh);
  padding: 0;
  background: var(--io-stage-canvas);
}
.phone {
  width: min(100%, var(--io-phone-max));
  height: var(--io-viewport-height, 100dvh);
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.product-ready .head,
.product-ready .area-view .product-head,
.phone .head.screen-header {
  min-height: var(--io-header-height);
  padding: max(6px, env(safe-area-inset-top)) var(--io-page-gutter) 6px;
}
.product-ready .head .wordmark { width: var(--io-wordmark-width); height: auto; }
.product-ready .head .brand { gap: 10px; }
.product-ready .head .brand h1 {
  font-size: var(--io-type-page);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  padding-left: 10px;
  margin-left: 0;
}
/* The smaller visible profile ring sits inside a full 44 px target. */
.product-ready .product-head .account-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--io-tap);
  height: var(--io-tap);
  border: 0;
  background: transparent;
  color: var(--io-nav-active);
}
.product-ready .product-head .account-icon::before {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.product-ready .product-head .account-icon .design-icon,
.product-ready .product-head .account-icon svg { width: 18px; height: 18px; }

/* Approved navigation: brand and Profile above a quiet contextual back link. */
.phone .head.screen-header { --io-type-page: var(--io-type-md); border: 0; box-shadow: none; }
.phone .head.screen-header .wordmark { width: var(--io-wordmark-width); height: auto; }
.phone .head.screen-header .brand { min-height: var(--io-tap); }
.phone .head.screen-header:has(+ .screen-back-row) {
  min-height: var(--io-tap);
  padding-bottom: 0;
}
.product-ready .screen-header .brand { flex: 1; min-width: 0; }
.product-ready .screen-header .brand :is(h1, .screen-title) {
  min-width: 0;
  margin: 0;
  padding-left: 10px;
  border-left: 1px solid var(--io-border-control);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--io-text);
  font-size: var(--io-type-page);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
}
/* Home v3 (22 set 2026): só o ícone de pessoa, num botão redondo claro. A
   palavra «Perfil» saiu; o nome fica no aria-label. */
.product-ready .head .screen-profile {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--io-tap);
  min-width: 44px;
  height: var(--io-tap);
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--io-border);
  border-radius: 50%;
  background: var(--io-surface);
  color: var(--io-text-secondary);
  cursor: pointer;
  touch-action: manipulation;
}
.product-ready .head .screen-profile .design-icon { width: 22px; height: 22px; }
.screen-back-row { display: flex; flex: none; padding: 0 var(--io-page-gutter); }
.screen-back-row .screen-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--io-radius-sm);
  background: transparent;
  color: var(--io-text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.screen-back-row .screen-back svg { flex: none; width: 14px; height: 14px; transform: rotate(180deg); }
.screen-back-row .screen-back:hover, .product-ready .head .screen-profile:hover { color: var(--io-text); }

.product-ready .area-view .area-scroll {
  padding: 4px var(--io-page-gutter) 16px;
  scroll-padding-bottom: 16px;
}
.product-ready .area-view .screen-back-row + .area-scroll { padding-top: 0; }
/* Home v3 (22 set 2026): sem o rodapé por baixo, é o ecrã que leva a área
   segura, e o que desliza acaba rente à caixa de escrever — com um resto de
   espaço por baixo dela, o texto da conversa passava a espreitar ali. */
.app-view:has(> #scroll) { padding-bottom: env(safe-area-inset-bottom); }
.product-ready .screen-back-row + #scroll { padding: 0 var(--io-page-gutter) 0; }
.product-ready .screen-back-row + #scroll .conversation > :first-child { margin-top: 0; }
.phone:not(.product-ready) .screen-back-row + #scroll { padding: 0 var(--io-page-gutter) 0; }
.phone:not(.product-ready) .screen-back-row + #scroll .conversation > :first-child { margin-top: 0; }
.product-ready .main-home { padding-inline: var(--io-page-gutter); gap: 10px; }
.product-ready .area-view .area-dock {
  padding: 4px var(--io-page-gutter) 6px;
}
.product-ready .main-composer {
  min-height: var(--io-composer-height);
  padding: 4px 4px 4px 5px;
  gap: 6px;
}
.product-ready .main-composer input { font-size: max(16px, var(--io-type-md)); }
.product-ready .main-composer .send { flex: none; }
.product-ready .main-composer .send .design-icon { width: 22px; height: 22px; }
/* Home v3: a fila é uma linha de texto no topo, não uma barra no fundo — sem
   altura de barra e sem a área segura, que passou para a caixa de escrever. */
.area-nav { min-height: 0; padding: 0 var(--io-page-gutter); }

.product-ready .product-section:not([data-editorial-root]) { margin-top: var(--io-section-gap); gap: var(--io-content-gap); }
.product-ready .product-section > h2,
.product-ready .product-section-head > h2,
.product-ready .home-discovery h2 {
  font-size: var(--io-type-section);
  font-weight: var(--io-weight-heading);
  letter-spacing: -.02em;
  line-height: 1.3;
}
.product-ready .product-intro p { font-size: var(--io-type-intro); line-height: 1.45; }
.product-ready .product-button { font-weight: var(--io-weight-control); }
/* Home density: the 802 px mockup is compared at 430 CSS px, not treated
   as an 802 CSS px screen. Keep the welcome prominent; editorial text and
   pills use their smaller reference roles. No page zoom or transform. */
#app:has(> .main-home) {
  --io-home-gutter: clamp(22px, 6.8vw, 30px);
  --io-home-body: 10px;
  --io-home-section: 11px;
  --io-home-title: 14px;
  --io-home-pill: 28px;
}
.product-ready #app:has(> .main-home) .head .account-pill {
  min-height: 26px;
  padding: 4px 11px;
  font-size: var(--io-home-body);
  font-weight: 400;
}
.product-ready .main-home { padding: 0 var(--io-home-gutter) 12px; gap: 7px; }
/* Keep entered text at 16 px to avoid automatic input zoom on iOS; the
   empty prompt has the smaller type of the reference. Pinch zoom is intact. */
.product-ready #app:has(> .main-home) .main-composer input { font-size: 16px; }
.product-ready #app:has(> .main-home) .main-composer input::placeholder { font-size: 15px; }
.product-ready .main-home .product-section > h2 {
  font-size: var(--io-home-section);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
.product-ready .home-update { gap: 10px; padding-bottom: 7px; }
.product-ready [data-home-updates] { gap: 7px; }
.product-ready .home-update-context { gap: 3px; }
.product-ready .home-update-context .product-character { width: 64px; height: 64px; margin-block: -7px -5px; }
.product-ready .home-update[data-home-area="fazer"] .product-character { width: 72px; height: 72px; margin-block: -8px; }
.product-ready .home-update-context p { font-size: var(--io-home-body); line-height: 1.45; }
.product-ready .home-live-card { min-height: 104px; border-radius: 10px; }
.product-ready .home-live-card .editorial-copy { gap: 4px; padding: 9px; }
.product-ready .home-live-card h3 { font-size: var(--io-home-title); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; -webkit-line-clamp: 2; }
.product-ready .home-live-card .product-label { font-size: 8px; padding: 2px 5px; line-height: 1.25; letter-spacing: 0; }
.product-ready .home-live-card .product-meta { font-size: var(--io-home-body); line-height: 1.35; }
.product-ready .home-card-actions { gap: 6px; margin-top: 3px; flex-wrap: nowrap; }
.product-ready .home-update .product-button {
  min-height: 24px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
.product-ready .home-card-actions .design-icon { width: 13px; height: 13px; }
.product-ready .home-card-actions .product-button:only-child { padding-inline: 12px; }
.product-ready .home-plan-progress { height: 4px; }
/* A caixa de escrever da home encosta às margens da página, como no mockup. */
.product-ready .home-dock { padding: 6px var(--io-page-gutter) max(8px, env(safe-area-inset-bottom)); }
.product-ready .home-skip { min-height: 24px; margin: -3px 0 0; font-size: var(--io-home-body); }
.product-ready .home-meta { padding-top: 8px; }
.product-ready .home-meta .usage-chip,
.product-ready .main-home .guest-note,
.product-ready .main-home .link-button { font-size: var(--io-home-body); line-height: 1.45; }
.product-ready .main-home .link-button { min-height: 28px; }

/* Page-specific headings consume the common hierarchy rather than inventing
   another size for the same role. Hero and conversational headings stay large. */
.live-surface h2,
.sports-surface .sports-section-head h2,
.library-surface .history-group h2 {
  font-size: var(--io-type-section);
  font-weight: var(--io-weight-heading);
}
.library-surface .library-title { font-size: var(--io-type-2xl); font-weight: 600; }
.sports-dashboard-intro p { font-size: var(--io-type-intro); line-height: 1.45; }
.product-ready .mockup-surface .product-section:not([data-editorial-root]) { margin-top: var(--io-section-gap); gap: var(--io-content-gap); }
.product-ready .mockup-surface .task-card { min-height: 112px; }
.product-ready .mockup-surface .task-card strong { font-weight: 600; }
.product-ready .mockup-surface .profile-row strong { font-size: var(--io-type-sm); }

/* A narrow phone remains full width, including the 431–600 px range that
   previously fell back to a framed desktop preview. No global zoom/scaling. */
@media (max-width: 600px) { .phone { width: 100%; } }
@media (max-height: 560px) {
  .product-ready .head,
  .product-ready .area-view .product-head { padding-block: 2px; min-height: 48px; }
  .product-ready .area-view .area-dock { padding-block: 3px; }
}

/* Fazer: proportions from 04-FAZER/01-fazer-conversa-e-acoes. */
.product-ready #area-fazer .fazer-highlight{gap:10px;padding:10px 8px;border-radius:16px}
.product-ready #area-fazer .fazer-cover{height:135px;min-height:0;max-height:135px;align-self:start}
.product-ready #area-fazer .fazer-plan-copy h2{font-size:17px;letter-spacing:-.025em}
.product-ready #area-fazer .fazer-plan-copy .product-label{font-size:10px}
.product-ready #area-fazer .fazer-progress-label{font-size:11px}
.product-ready #area-fazer .plan-checklist label{min-height:24px;font-size:11px;gap:8px}
.product-ready #area-fazer .plan-checklist input{width:13px;height:13px;min-width:13px}
.product-ready #area-fazer .fazer-plan-actions .product-button{min-height:30px;padding:5px 8px;font-size:11px;border-radius:11px}
.product-ready #area-fazer .fazer-more{min-height:24px;font-size:10px}
.product-ready #area-fazer .task-card{min-height:83px;grid-template-columns:40px minmax(0,1fr);gap:8px;padding:8px 7px 18px;border-radius:14px}
.product-ready #area-fazer .task-card strong{font-size:12px;line-height:1.2;letter-spacing:-.025em}
.product-ready #area-fazer .task-copy{gap:6px}
.product-ready #area-fazer .task-copy>span{font-size:10px;line-height:1.4}
.product-ready #area-fazer .task-arrow{width:23px;height:18px;right:8px;bottom:6px}
.product-ready #area-fazer .task-arrow svg{width:13px;height:13px}
.product-ready #area-fazer .fazer-suggestion{min-height:38px;font-size:11px;padding:4px 8px}
.product-ready #area-fazer .fazer-suggestion .product-button{min-height:24px;font-size:10px;padding:3px 9px}
.product-ready #area-fazer .fazer-recent-row{min-height:34px;font-size:11px}
.product-ready #area-fazer .fazer-recent>.product-text-button{min-height:24px;font-size:10px}
.product-ready :is(#area-fazer,#area-televisoes,#area-tenis-corrida,#area-restaurantes,#area-receita-cesto) .main-composer{min-height:48px;padding:4px 4px 4px 5px}
.product-ready :is(#area-fazer,#area-televisoes,#area-tenis-corrida,#area-restaurantes,#area-receita-cesto) .main-composer input{font-size:16px}
.product-ready :is(#area-fazer,#area-televisoes,#area-tenis-corrida,#area-restaurantes,#area-receita-cesto) .main-composer input::placeholder{font-size:15px}
@media(max-width:390px){
 .product-ready #area-fazer .task-card{grid-template-columns:30px minmax(0,1fr);gap:6px;min-height:88px}
 .product-ready #area-fazer .task-card strong{font-size:11px}
 .product-ready #area-fazer .fazer-plan-actions{margin-left:0}
}

/* Secondary screens: profile v2 and compact conversation/saved libraries. */
.product-ready .library-surface .library-title { margin-top: 4px; }
.product-ready #area-planos .plans-workspace { margin-top: 0; }
.product-ready #area-perfil .profile-continuation{min-height:122px}
.product-ready #area-perfil .profile-continuation>div{padding:10px 7px;gap:6px}
.product-ready #area-perfil .profile-continuation .product-button{min-height:28px;font-size:11px}
.product-ready #area-perfil .profile-row{min-height:53px;padding:7px 8px;gap:10px}
.product-ready #area-perfil .profile-row strong{font-size:14px}
.product-ready #area-perfil .profile-row small{font-size:11px}
.product-ready #area-perfil .profile-symbol{width:36px;height:36px}
.product-ready #area-perfil .profile-knowledge{gap:10px;padding:11px 10px}
.product-ready #area-perfil .profile-fact{font-size:10px;padding:8px 6px}
.product-ready #area-perfil .profile-knowledge>p{font-size:11px}
.product-ready #area-perfil .profile-knowledge>.product-button{min-height:28px;font-size:11px}
.product-ready #area-perfil .profile-knowledge>.product-text-button{min-height:28px;font-size:10px}
.product-ready #area-conversas .history-open{min-height:66px;padding:10px 0;gap:8px}
.product-ready #area-conversas .history-open strong{font-size:13px;white-space:normal}
.product-ready #area-conversas .history-open small{font-size:11px;white-space:normal}
.product-ready #area-conversas .history-open time{font-size:10px;width:36px}
.product-ready #area-conversas .history-row>.library-more{width:30px;padding:5px}
.product-ready #area-conversas .history-group{margin-top:18px}
.product-ready #area-conversas .history-group h2{font-size:14px;margin-bottom:8px}
.product-ready #area-conversas .history-search input{min-height:40px;padding:8px 0;font-size:16px}
.product-ready #area-conversas .history-search input::placeholder{font-size:12px}
.product-ready #area-conversas .history-new{min-height:40px;font-size:11px}
.product-ready #area-guardados .saved-filters button{min-height:28px;min-width:60px;padding:5px 10px;font-size:11px}
.product-ready #area-guardados .saved-visual-card{min-height:188px}
.product-ready #area-guardados .saved-card-action{min-height:28px;font-size:11px;padding:4px 6px}
.product-ready #area-guardados .saved-card-copy{gap:8px;padding:10px 9px}
.product-ready #area-guardados .saved-collection{min-height:52px}
.product-ready #area-guardados .collection-covers{min-height:52px}
.product-ready #area-guardados .collection-open strong{font-size:12px}
.product-ready #area-guardados .collection-open small{font-size:10px}
.product-ready :is(#area-perfil,#area-conversas,#area-guardados) .main-composer{min-height:48px;padding:4px 4px 4px 5px}
.product-ready :is(#area-perfil,#area-conversas,#area-guardados) .main-composer input{font-size:16px}
.product-ready :is(#area-perfil,#area-conversas,#area-guardados) .main-composer input::placeholder{font-size:15px}

/* Internal forms and dialogs use the same compact scale as the areas. */
.product-ready :is(#area-preferencias,#area-planos) .profile-page-intro h2{font-size:20px}
.product-ready :is(#area-preferencias,#area-planos) .profile-preferences{gap:16px}
.product-ready :is(#area-preferencias,#area-planos) .profile-preferences fieldset{padding:12px;gap:10px}
.product-ready :is(#area-preferencias,#area-planos) .profile-preferences legend{font-size:15px}
.product-ready :is(#area-preferencias,#area-planos) .profile-choice{min-height:34px;font-size:12px}
.product-ready :is(#area-preferencias,#area-planos) .profile-choice input{width:16px;height:16px}
.product-ready :is(#area-preferencias,#area-planos) .profile-field{font-size:12px;gap:6px}
.product-ready :is(#area-preferencias,#area-planos) .profile-field :is(input,select){min-height:40px;padding:8px 10px;font-size:16px}
.product-ready :is(#area-preferencias,#area-planos) .product-button{min-height:34px;font-size:12px;padding:7px 10px}
.product-ready #area-planos .user-plan{padding:12px;margin-block:12px}
.product-ready #area-planos .user-plan h3{font-size:18px}
.product-ready #area-planos .plan-copy{gap:6px}
.product-ready #area-planos .plan-checklist{gap:0}
.product-ready #area-planos .plan-checklist label{min-height:32px;font-size:12px}
.product-ready #area-planos .plan-checklist input{width:16px;height:16px;min-width:16px}
.product-ready #area-planos .user-plan .product-actions{margin-top:10px;gap:6px}
.product-ready :is(#area-preferencias,#area-planos) .main-composer{min-height:48px;padding:4px 4px 4px 5px}
.product-ready :is(#area-preferencias,#area-planos) .main-composer input{font-size:16px}
.product-ready :is(#area-preferencias,#area-planos) .main-composer input::placeholder{font-size:15px}
.product-ready :is(.chat-plan-dialog,.library-dialog){box-sizing:border-box;max-height:calc(100dvh - 32px);overflow:auto;padding:18px;border-radius:18px}
.product-ready :is(.chat-plan-dialog,.library-dialog) h2{font-size:20px;line-height:1.25}
.product-ready :is(.chat-plan-dialog,.library-dialog) p{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.product-ready :is(.chat-plan-dialog,.library-dialog) .product-button{min-height:36px;font-size:12px;padding:8px 12px}
.product-ready .chat-plan-dialog .profile-field{font-size:12px;gap:6px}
.product-ready .chat-plan-dialog .profile-preferences{gap:12px}
.product-ready .chat-plan-dialog .product-actions{position:static;padding-block:8px 0;gap:8px}
.product-ready :is(.chat-plan-dialog,.library-dialog) input:not([type=checkbox]){font-size:16px;min-height:40px}
@media(max-width:390px){.product-ready #area-planos .user-plan .product-actions{display:grid;grid-template-columns:1fr 1fr}.product-ready #area-planos .user-plan .product-actions>.primary{grid-column:1/-1}}
.product-ready .account-data-view{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.product-ready .account-data-view :is(p,.line,.message,.facts-empty){font-size:14px;line-height:1.5}
.product-ready .account-data-view .fact-reason{font-size:11px}
.product-ready .account-data-actions button{min-height:36px;font-size:12px}
.product-ready #area-perfil .profile-install{width:100%;margin-top:12px;border:1px solid var(--io-border);border-radius:14px;background:var(--io-surface-soft);text-align:left;color:var(--io-text)}
.product-ready #area-perfil .profile-install .profile-symbol{color:var(--io-turq-700)}
@media(display-mode:standalone){.profile-install{display:none!important}}
.library-close{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--io-text-secondary)}
.library-dialog h2{padding-right:28px}

.product-ready :is(#area-fazer,#area-televisoes,#area-tenis-corrida,#area-restaurantes,#area-receita-cesto) .area-status{font-size:11px;line-height:1.4;margin-block:4px}
.product-ready :is(#area-fazer,#area-televisoes,#area-tenis-corrida,#area-restaurantes,#area-receita-cesto) .main-composer .send .design-icon{width:19px;height:19px}

/* Ecrãs largos (tablet, portátil, monitor): a app mantém sempre o aspecto de
   telemóvel. O .phone fica centrado no palco, com altura de dispositivo e
   cantos arredondados; nunca alarga para um layout de site. */
@media (min-width: 601px) {
  .stage { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
  .phone.product-ready,
  .phone {
    width: min(100%, var(--io-phone-max));
    height: min(932px, calc(var(--io-viewport-height, 100dvh) - 48px));
    min-height: 560px;
    margin-inline: auto;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(23, 19, 11, 0.18), 0 0 0 1px rgba(23, 19, 11, 0.06);
    overflow: hidden;
  }
}