/* ============================================================================
   Go PetiA Shell — pantalla principal.

   Todo se resuelve reordenando y ajustando lo que el tema ya renderiza. No hay
   marcado nuevo: `.gp-agent__welcome` es un contenedor con cinco hijos, así que
   con `order` se cambia la secuencia sin editar plantillas.

   El objetivo: que se pueda escribir sin hacer scroll en un teléfono.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. El hero deja de gastar la pantalla en presentarse.

   Antes: marca, kicker, titular a tres líneas, consejo y selector de país
   ocupaban la primera pantalla completa, y el campo de escribir quedaba abajo,
   fuera de vista y tapado por el aviso de instalación.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-agent__welcome {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px 16px 10px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	min-height: 0;
	text-align: center;
}

/* Secuencia nueva: marca, titular, atajos y al final el consejo. */
body.has-gpshell.gpshell-hero .gp-agent__brandmark {
	order: 1;
	width: auto;
	max-width: 176px;
	height: auto;
	margin: 0;
}

body.has-gpshell.gpshell-hero .gp-kicker {
	order: 2;
	margin: 0;
	font-size: .68rem;
	letter-spacing: .1em;
	opacity: .72;
}

body.has-gpshell.gpshell-hero #petia-heading {
	order: 3;
	margin: 2px 0 0;
	font-size: clamp(1.5rem, 4.4vw, 2.15rem);
	line-height: 1.14;
	letter-spacing: -.015em;
	max-width: 22ch;
}

body.has-gpshell.gpshell-hero .gp-ai-starters {
	order: 4;
	margin: 4px 0 0;
}

/* El consejo baja: informa, pero no debe empujar la acción fuera de pantalla. */
body.has-gpshell.gpshell-hero .gp-agent__daily-tip {
	order: 5;
	margin: 2px 0 0;
	font-size: .82rem;
	opacity: .78;
	max-width: 52ch;
}

/* El selector de país ya vive en el header; aquí sólo robaba el centro. */
body.has-gpshell.gpshell-hero .gp-agent__welcome .gp-region-pill {
	display: none;
}

/* ---------------------------------------------------------------------------
   2. Atajos: de categorías internas a botones que invitan.

   Siguen siendo los del tema, sólo mejor presentados. Cambiar su texto por
   frases reales requiere tocar el tema y se explica en el README.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-ai-starters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0;
	list-style: none;
}

body.has-gpshell.gpshell-hero .gp-ai-starters > * {
	margin: 0;
}

body.has-gpshell.gpshell-hero .gp-ai-starters button,
body.has-gpshell.gpshell-hero .gp-ai-starters a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 17px;
	border-radius: 999px;
	border: 1px solid var(--gps-line);
	background: #fff;
	color: var(--gps-ink);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(26, 22, 37, .04);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.has-gpshell.gpshell-hero .gp-ai-starters button:hover,
body.has-gpshell.gpshell-hero .gp-ai-starters a:hover {
	border-color: var(--gps-purple);
	box-shadow: 0 6px 18px rgba(91, 63, 165, .14);
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   3. El campo de escribir gana presencia.

   Es la única acción de la pantalla y estaba pegada al borde inferior con el
   mismo peso visual que el resto.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-chat__composer-zone {
	padding-top: 4px;
}

body.has-gpshell.gpshell-hero .gp-chat__composer-zone form {
	box-shadow: 0 14px 40px rgba(26, 22, 37, .13);
}

/* ---------------------------------------------------------------------------
   4. Móvil: que se pueda escribir sin un solo scroll.

   Aquí cada píxel vertical es una decisión. El saludo con el nombre es lo
   primero que se va: ocupa una línea entera para decir algo que la persona ya
   sabe, y deja el titular en una sola línea legible.
   ------------------------------------------------------------------------ */

@media (max-width: 720px) {
	body.has-gpshell.gpshell-hero .gp-agent__welcome {
		gap: 9px;
		padding: 12px 14px 6px;
	}

	body.has-gpshell.gpshell-hero .gp-agent__brandmark {
		max-width: 132px;
	}

	body.has-gpshell.gpshell-hero .gp-kicker {
		display: none;
	}

	body.has-gpshell.gpshell-hero #petia-heading [data-petia-greeting] {
		display: none;
	}

	body.has-gpshell.gpshell-hero #petia-heading {
		font-size: clamp(1.35rem, 6vw, 1.7rem);
		max-width: 20ch;
	}

	/* Los atajos pasan a una fila deslizable en vez de tres tarjetas apiladas. */
	body.has-gpshell.gpshell-hero .gp-ai-starters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		width: 100%;
		padding: 2px 0 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters::-webkit-scrollbar {
		display: none;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters button,
	body.has-gpshell.gpshell-hero .gp-ai-starters a {
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* El consejo estorba en la primera pantalla de un teléfono. */
	body.has-gpshell.gpshell-hero .gp-agent__daily-tip {
		display: none;
	}
}

/* Pantallas muy bajas: se retira también la marca escrita. */
@media (max-height: 700px) and (max-width: 720px) {
	body.has-gpshell.gpshell-hero .gp-agent__brandmark {
		max-width: 108px;
	}
}

/* ---------------------------------------------------------------------------
   5. El aviso de instalar la app deja de tapar la acción.

   Estaba fijo abajo, justo donde vive el campo de escribir. En un teléfono eso
   significa que la única acción posible queda cubierta por una promoción de
   algo que la persona todavía no sabe si quiere.

   Se reubica arriba, donde no hay nada crítico, y se compacta.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
	max-width: 380px;
	padding: 12px 14px;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(26, 22, 37, .16);
	gap: 12px;
	align-items: center;
}

body.has-gpshell.gpshell-tamebanner .gp-pwa-banner__body small {
	display: block;
	max-width: 34ch;
	line-height: 1.4;
	font-size: .76rem;
	opacity: .78;
}

body.has-gpshell.gpshell-tamebanner .gp-pwa-install {
	white-space: nowrap;
}

@media (max-width: 720px) {
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
		position: fixed;
		inset: auto 10px auto 10px;
		top: calc(var(--gps-h) + 10px + env(safe-area-inset-top));
		bottom: auto;
		max-width: none;
		z-index: 38;
	}

	/* La descripción larga sobra en un banner de teléfono. */
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner__body small {
		display: none;
	}
}

/* En la app instalada no tiene sentido invitar a instalarla. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
	body.has-gpshell.gpshell-tamebanner .gp-pwa-banner {
		display: none;
	}
}

body.has-gpshell.gpshell-tamebanner.is-standalone .gp-pwa-banner {
	display: none;
}

/* ---------------------------------------------------------------------------
   6. Superficies de marca: el hero sobre morado u oscuro necesita contraste.
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-hero .gp-ai-starters button,
body.has-gpshell.gpshell-hero .gp-ai-starters a {
	border-color: rgba(26, 22, 37, .10);
}

@media (prefers-reduced-motion: reduce) {
	body.has-gpshell.gpshell-hero .gp-ai-starters button,
	body.has-gpshell.gpshell-hero .gp-ai-starters a {
		transition: none;
	}

	body.has-gpshell.gpshell-hero .gp-ai-starters button:hover,
	body.has-gpshell.gpshell-hero .gp-ai-starters a:hover {
		transform: none;
	}
}

/* ============================================================================
   7. El vacío de la pantalla de inicio.

   `.gp-chat__messages` reserva `min-height: clamp(300px, 39vh, 430px)` para la
   conversación. Es correcto mientras se conversa —evita que el hilo salte al
   llegar cada respuesta— pero antes del primer mensaje son hasta 430 px de
   blanco entre el titular y el campo de escribir. Ese hueco es todo lo que ve
   quien llega por primera vez.

   Se detecta el estado vacío por la bienvenida, que el tema oculta en cuanto
   empieza la conversación. Así el ajuste desaparece solo al primer mensaje.
   ========================================================================= */

body.has-gpshell.gpshell-hero .gp-chat-main:has([data-chat-welcome]:not([hidden])) {
	justify-content: center;
}

body.has-gpshell.gpshell-hero .gp-chat-main:has([data-chat-welcome]:not([hidden])) .gp-chat__messages {
	min-height: 0;
	max-height: none;
	flex: 0 0 auto;
}

/* Al centrarse, la bienvenida ya no necesita empujar desde arriba. */
body.has-gpshell.gpshell-hero .gp-chat-main:has([data-chat-welcome]:not([hidden])) .gp-agent__welcome {
	margin-bottom: 1rem;
	padding-top: 0;
}

/* Respaldo por clase para navegadores sin :has(). El script la añade. */
body.has-gpshell.gpshell-hero .gp-chat-main.is-empty {
	justify-content: center;
}

body.has-gpshell.gpshell-hero .gp-chat-main.is-empty .gp-chat__messages {
	min-height: 0;
	max-height: none;
	flex: 0 0 auto;
}

body.has-gpshell.gpshell-hero .gp-chat-main.is-empty .gp-agent__welcome {
	margin-bottom: 1rem;
	padding-top: 0;
}

/* En la primera visita el aviso de instalación no compite con la acción. */
body.has-gpshell.gpshell-tamebanner.gps-first-visit .gp-pwa-banner {
	display: none;
}


/* ============================================================================
   1.39.0 — MOBILE HOME: cards owned by THEME renderer (.gp-ai-starters)

   Root cause fixed here: the previous mobile rule intentionally converted the
   three quick actions into a horizontal scroller (`display:flex`,
   `flex-wrap:nowrap`, children `flex:0 0 auto`). That is exactly why the third
   card was permanently cropped on phones. The front page cards are rendered by
   the theme, not by AI Core's fallback card classes, so this is the correct
   ownership layer.
   ========================================================================== */
@media (max-width: 720px) {
  body.has-gpshell.gpshell-hero .gp-agent__welcome {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 10px 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  /* Brand and claim are part of the first frame again. */
  body.has-gpshell.gpshell-hero .gp-agent__brandmark {
    display: block !important;
    width: auto !important;
    max-width: 142px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.has-gpshell.gpshell-hero .gp-kicker {
    display: block !important;
    max-width: 100% !important;
    margin: -1px auto 0 !important;
    color: #8d6aa7 !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }

  body.has-gpshell.gpshell-hero #petia-heading {
    width: 100% !important;
    max-width: 20ch !important;
    margin: 2px auto 0 !important;
    font-size: clamp(1.45rem, 6.3vw, 1.85rem) !important;
    line-height: 1.06 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  body.has-gpshell.gpshell-hero #petia-heading [data-petia-greeting] {
    display: block !important;
    margin: 0 0 4px !important;
    font-size: .54em !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    opacity: .84 !important;
  }

  /* The three actions must be complete at once. No carousel, no hidden third card. */
  body.has-gpshell.gpshell-hero .gp-ai-starters {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 460px !important;
    min-width: 0 !important;
    margin: 5px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    overscroll-behavior: none !important;
    scroll-snap-type: none !important;
  }

  body.has-gpshell.gpshell-hero .gp-ai-starters > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.has-gpshell.gpshell-hero .gp-ai-starters button,
  body.has-gpshell.gpshell-hero .gp-ai-starters a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 7px 3px 6px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: normal !important;
    text-align: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Theme has changed the inner markup over time; normalize all common icon wrappers. */
  body.has-gpshell.gpshell-hero .gp-ai-starters button > i,
  body.has-gpshell.gpshell-hero .gp-ai-starters button > .gp-ai-starter__icon,
  body.has-gpshell.gpshell-hero .gp-ai-starters button > span:first-child,
  body.has-gpshell.gpshell-hero .gp-ai-starters a > i,
  body.has-gpshell.gpshell-hero .gp-ai-starters a > .gp-ai-starter__icon,
  body.has-gpshell.gpshell-hero .gp-ai-starters a > span:first-child {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }

  body.has-gpshell.gpshell-hero .gp-ai-starters strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Subtitles caused the first card to grow and force the row wider. Keep them
     accessible in DOM but visually remove them from this compact launcher. */
  body.has-gpshell.gpshell-hero .gp-ai-starters small,
  body.has-gpshell.gpshell-hero .gp-ai-starters button > span:not(:first-child):not(:only-child) small,
  body.has-gpshell.gpshell-hero .gp-ai-starters a > span:not(:first-child):not(:only-child) small {
    display: none !important;
  }

  body.has-gpshell.gpshell-hero .gp-agent__daily-tip {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.has-gpshell.gpshell-hero .gp-agent__welcome {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  body.has-gpshell.gpshell-hero .gp-agent__brandmark {
    max-width: 130px !important;
  }
  body.has-gpshell.gpshell-hero .gp-kicker {
    font-size: 6.5px !important;
    letter-spacing: .055em !important;
  }
  body.has-gpshell.gpshell-hero .gp-ai-starters {
    gap: 5px !important;
  }
  body.has-gpshell.gpshell-hero .gp-ai-starters button,
  body.has-gpshell.gpshell-hero .gp-ai-starters a {
    height: 70px !important;
    min-height: 70px !important;
    padding: 6px 2px 5px !important;
    border-radius: 16px !important;
  }
  body.has-gpshell.gpshell-hero .gp-ai-starters strong {
    font-size: 9.5px !important;
  }
}