/* EIOS responsive R20. Presentation only: no identity, entitlement or payment changes. */
:root { --eios-mobile-blue:#3ba7ff; }
.eios-page-serena { color:#fff; }
.eios-page-serena > div > div:last-child { min-width:0; min-height:0; }
.eios-page-serena textarea { min-width:0; width:100%; color:#fff!important; overflow-wrap:anywhere; }
.eios-page-serena textarea::placeholder { color:#c2d5e8!important; opacity:1; }
.eios-page-serena div:has(> textarea) > button { min-width:44px; min-height:44px; color:#8fcbff!important; }
.eios-page-serena div:has(> textarea) > button:last-child { color:#fff!important; border:1px solid #3ba7ff88; }
.eios-page-serena div:has(> textarea) > button:disabled { opacity:.5; }
.eios-page-serena :is(button,textarea):focus-visible { outline:2px solid #8fcbff; outline-offset:3px; }
.eios-page-serena div:has(> textarea) > button[title="Parar e transcrever"] { background:#3ba7ff30!important; border-color:#8fcbff!important; }
.eios-page-serena svg:has(.hero-globo) { max-width:100%; height:auto; }

@media (max-width:1199px) {
  /* Keep the existing canonical menu; its duplicate inside Serena is already hidden by the shell. */
  .eios-page-serena > div > div:has(> [class*="space-y"]):not(:last-child) { min-width:0; }
  .eios-page-serena div:has(> textarea) { display:grid!important; grid-template-columns:minmax(0,1fr) repeat(3,44px); gap:8px; align-items:end; }
  .eios-page-serena div:has(> textarea) > textarea { grid-column:1/-1; min-height:56px!important; max-height:144px; font-size:16px!important; line-height:1.5; }
  .eios-page-serena div:has(> textarea) > button:first-of-type { grid-column:2; }
  .eios-page-serena div:has(> textarea) > button { width:44px!important; height:44px!important; }
  .eios-page-serena .h-full:has(.hero-globo) { justify-content:center!important; gap:16px; padding:20px!important; max-width:760px; }
  .eios-page-serena div.flex-1:has(> svg .hero-globo) { flex:0 0 auto!important; }
  .eios-page-serena svg:has(.hero-globo) { width:clamp(112px,21dvh,180px)!important; height:clamp(112px,21dvh,180px)!important; }
  .eios-page-serena .rounded-2xl:has(> div > textarea) { padding:16px!important; background:#03090ee8!important; border-color:#3ba7ff55!important; }
  .eios-page-serena .flex-wrap:has(> button) { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px!important; margin-bottom:16px!important; }
  .eios-page-serena .flex-wrap > button { min-height:44px; padding:8px 10px!important; text-align:left; justify-content:flex-start; font-size:13px!important; line-height:1.35; color:#fff!important; white-space:normal; }
  .eios-page-serena .flex-wrap > button > svg { flex-shrink:0; }
  .eios-page-serena p { color:#d1e0ee!important; }
  .eios-page-serena .h-full > p { margin:0!important; font-size:12px!important; line-height:1.5; text-align:center; max-width:50ch; }
  .eios-page-serena [class*="max-w-[75%]"] { max-width:90%; overflow-wrap:anywhere; }
  .eios-page-serena .max-w-3xl { min-width:0; }
}
@media (max-width:1023px) {
  .eios-page-serena [class*="w-[380px]"] { display:none!important; }
}
@media (max-width:767px) {
  .eios-r2-inset { min-width:0; }
  .eios-r2-inset > main:has(.eios-page-serena) { min-height:0!important; }
  .eios-page-serena > div { height:calc(var(--eios-mobile-viewport,100dvh) - 4.25rem - env(safe-area-inset-top,0px))!important; min-height:0!important; }
  .eios-page-serena .h-full:has(.hero-globo) { height:auto!important; min-height:100%; padding:16px 16px max(16px,env(safe-area-inset-bottom))!important; gap:12px; }
  .eios-page-serena .flex-1.overflow-y-auto { min-height:0; overscroll-behavior-y:contain; }
  .eios-page-serena .max-w-3xl.px-6 { padding:16px!important; }
  .eios-page-serena > div > div:last-child > .border-t { padding:12px 12px max(12px,env(safe-area-inset-bottom))!important; }
  .eios-page-serena > div > div:last-child > .border-t p { font-size:11px!important; line-height:1.4; }
  .eios-page-serena [class*="bg-[#1E90FF]"] { background-color:#102d4b!important; }
  /* Keep small tables horizontally scrollable inside their own cards, never across the page. */
  .eios-canonical-shell-route { min-width:0; overflow-wrap:anywhere; }
  .eios-canonical-shell-route img { max-width:100%; }
  .eios-canonical-shell-route :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size:16px!important; }
  .eios-r2-sidebar .eios-r3-nav-group-toggle,.eios-r2-sidebar [data-sidebar="menu-button"] { min-height:44px; }
  .eios-canonical-shell-route [role="dialog"] { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); overflow:auto; }
}
@media (max-width:359px) {
  .eios-page-serena .h-full:has(.hero-globo) { padding-left:12px!important; padding-right:12px!important; }
  .eios-page-serena .rounded-2xl:has(> div > textarea) { padding:12px!important; }
  .eios-page-serena .flex-wrap > button { font-size:12px!important; gap:6px; }
}
@media (max-height:580px) and (max-width:1199px) {
  .eios-page-serena svg:has(.hero-globo) { width:80px!important; height:80px!important; }
  .eios-page-serena .h-full:has(.hero-globo) { justify-content:flex-start!important; }
}
html[data-eios-mobile-keyboard="true"] .eios-page-serena div:has(> svg .hero-globo) { display:none!important; }
html[data-eios-mobile-keyboard="true"] .eios-page-serena .h-full:has(.hero-globo) { gap:8px; justify-content:flex-end!important; }
html[data-eios-mobile-keyboard="true"] .eios-page-serena .flex-wrap:has(> button) { display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; padding-bottom:4px; }
html[data-eios-mobile-keyboard="true"] .eios-page-serena .flex-wrap > button { flex:0 0 auto; }

/* Existing consumer app: use the tablet width without changing its five routes or links. */
.consumer-app,.consumer-main,.consumer-environment > div,.consumer-social span { min-width:0; }
.consumer-main { padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
.consumer-app :is(h1,h2,p,dd) { overflow-wrap:anywhere; }
.consumer-nav { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.consumer-nav a { min-width:0; min-height:48px; }
@media (min-width:768px) {
  .consumer-app { max-width:960px!important; }
  .consumer-header,.consumer-nav,.consumer-sky { max-width:960px!important; }
  .consumer-main { max-width:880px!important; padding:40px 32px calc(112px + env(safe-area-inset-bottom,0px)); }
  .consumer-environments { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
  .consumer-environment { display:flex; flex-direction:column; align-items:flex-start; padding:24px; gap:16px; }
  .consumer-environment > svg { align-self:flex-end; margin-top:auto; }
  .consumer-environment strong { font-size:21px; }
  .consumer-environment p { font-size:14px; }
  .consumer-agent { max-width:640px; margin-inline:auto; }
  .consumer-profile { max-width:640px; margin-inline:auto; }
}
@media(prefers-reduced-motion:reduce) {
  .eios-page-serena .hero-globo,.eios-page-serena .hero-aviao,.eios-page-serena .hero-brilho { animation:none!important; }
}

/* Judith: prioritize the existing conversation on mobile; keep suggestions and history below. */
@media (max-width:1023px) {
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) { min-width:0; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) > .grid { height:auto!important; min-height:0; gap:16px; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) > .grid > .flex.flex-col { order:-1; min-width:0; height:calc(100dvh - 144px); min-height:360px; background:#000!important; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) > .grid > div:first-child { overflow:visible; min-width:0; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) input { min-height:48px; font-size:16px!important; color:#fff!important; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) .flex:has(> input) { display:grid!important; grid-template-columns:minmax(0,1fr) repeat(3,44px); gap:8px; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) .flex:has(> input) > input { grid-column:1/-1; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) .flex:has(> input) > button:first-of-type { grid-column:2; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) .flex:has(> input) > button { min-width:44px; min-height:44px; color:#8fcbff; }
  main:has(input[placeholder="Pergunte sobre financiamentos, compliance, produtos..."]) [class*="max-w-[85%]"] { max-width:94%; overflow-wrap:anywhere; }
}