/* SEL.IA — Phone mockup (mobile hero). Native 390-wide, downscale-only → crisp.
   Replaces the notebook on small viewports. Faithful to the real app prints. */

.ph-stage { width: 390px; font-family: var(--font-sans,"Outfit",system-ui,sans-serif); position: relative; }
.ph-device {
  width: 390px; border-radius: 46px; background: #0b0e14; padding: 11px;
  box-shadow: 0 30px 70px rgba(8,18,35,0.30), 0 0 0 2px rgba(255,255,255,0.05) inset;
  position: relative;
}
.ph-screen {
  border-radius: 36px; overflow: hidden; background: #fff;
  height: 788px; position: relative; display: flex; flex-direction: column;
}
.ph-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 122px; height: 24px; background: #0b0e14; border-radius: 0 0 15px 15px; z-index: 40; }

/* top app bar (navy) */
.ph-top { height: 56px; flex-shrink: 0; background: linear-gradient(100deg,#0d1f45,#13294f); display: flex; align-items: center; gap: 12px; padding: 0 16px; color: #fff; }
.ph-top .burger { display: flex; flex-direction: column; gap: 3.5px; }
.ph-top .burger i { width: 18px; height: 2px; background: #fff; border-radius: 2px; display: block; }
.ph-top .logo { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.ph-top .logo .mk { color: #ef405b; display: flex; }
.ph-top .logo .ia { color: #ef6b88; }
.ph-top .sp { flex: 1; }
.ph-top .bell { position: relative; }
.ph-top .bell .bdg { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; border-radius: 9999px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1.5px solid #13294f; }
.ph-top .me { display: flex; align-items: center; gap: 3px; }
.ph-top .me .av { width: 32px; height: 32px; border-radius: 9999px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ph-top .me .cv { color: rgba(255,255,255,0.7); font-size: 11px; }

/* body */
.ph-body { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; }
.ph-scroll { position: absolute; inset: 0; overflow: hidden; }
.ph-scrollinner { transition: transform 900ms cubic-bezier(0.5,0,0.2,1); }

/* sub-row (Histórico | Chat Regulatório) */
.ph-subrow { display: flex; align-items: center; gap: 18px; padding: 13px 18px; border-bottom: 1px solid #eef0f2; font-size: 15px; }
.ph-subrow .hist { display: inline-flex; align-items: center; gap: 6px; color: #5a6068; }
.ph-subrow .cur { color: #102b4e; font-weight: 700; }

/* chat */
.ph-chat { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ph-ts { font-size: 12px; color: #9aa0a6; align-self: flex-end; }
.ph-urow { display: flex; align-items: flex-start; gap: 9px; align-self: flex-end; max-width: 84%; }
.ph-ubub { background: #1a2332; color: #fff; font-size: 16px; line-height: 1.45; padding: 13px 16px; border-radius: 16px 16px 4px 16px; }
.ph-uav { width: 34px; height: 34px; border-radius: 9999px; background: #e6e7ea; color: #5a6068; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-airow { display: flex; gap: 11px; margin-top: 14px; }
.ph-aiav { width: 38px; height: 38px; border-radius: 9999px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-aihead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ph-aihead .nm { font-size: 15px; font-weight: 800; color: #102b4e; }
.ph-aihead .deep { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #d91965; background: linear-gradient(135deg,rgba(217,25,101,0.1),rgba(239,64,91,0.1)); border: 1px solid rgba(217,25,101,0.2); border-radius: 9999px; padding: 2px 9px; }
.ph-aihead .ts { font-size: 12px; color: #9aa0a6; }
.ph-ans h { display: block; font-size: 19px; font-weight: 800; color: #102b4e; margin: 4px 0 10px; }
.ph-ans p { font-size: 16px; line-height: 1.6; color: #1a1d22; margin: 0; }
.ph-ans b { color: #102b4e; font-weight: 700; }
.ph-think { display: inline-flex; gap: 5px; padding: 8px 2px; }
.ph-think i { width: 8px; height: 8px; border-radius: 9999px; background: #d91965; animation: ph-bounce 1s ease-in-out infinite; }
.ph-think i:nth-child(2){animation-delay:.15s;} .ph-think i:nth-child(3){animation-delay:.3s;}
@keyframes ph-bounce { 0%,100%{opacity:.25;transform:translateY(0);} 50%{opacity:1;transform:translateY(-4px);} }
.ph-caret { display:inline-block; width:2px; height:1em; background:currentColor; margin-left:1px; vertical-align:-2px; animation:ph-blink 1s step-end infinite; }
@keyframes ph-blink { 50%{opacity:0;} }

/* action row under answer */
.ph-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 4px; opacity: 0; transition: opacity 300ms ease; }
.ph-actions.show { opacity: 1; }
.ph-abtn { color: #9aa0a6; display: flex; position: relative; }
.ph-abtn.src { color: #d91965; }
.ph-abtn.src.zoom::after { content:""; position:absolute; inset:-9px; border-radius:10px; border:2px solid #d91965; animation:ph-ring 1100ms ease-out infinite; }
@keyframes ph-ring { 0%{transform:scale(0.7);opacity:0.8;} 100%{transform:scale(1.7);opacity:0;} }

/* bottom input bar */
.ph-input { flex-shrink: 0; border-top: 1px solid #eef0f2; background: #fff; padding: 12px 16px 10px; }
.ph-inbox { display: flex; align-items: center; gap: 10px; }
.ph-inbox .field { flex: 1; background: #fff; border: 1px solid #e6e7e8; border-radius: 12px; padding: 13px 15px; font-size: 15px; color: #9aa0a6; }
.ph-inbox .send { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#f5a3b8,#ef8fa6); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-deeppill { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; font-size: 14px; font-weight: 700; padding: 9px 15px; border-radius: 9999px; }
.ph-disc { font-size: 11px; color: #9aa0a6; text-align: center; margin-top: 10px; }

/* sources modal (full-screen sheet, covers below the app bar incl. input) */
.ph-ov { position: absolute; top: 56px; left: 0; right: 0; bottom: 14px; z-index: 30; background: rgba(8,18,35,0.4); opacity: 0; transition: opacity 280ms ease; }
.ph-ov.in { opacity: 1; }
.ph-sheet { position: absolute; inset: 56px 14px 14px; background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transform: translateY(120%); transition: transform 460ms cubic-bezier(0.22,1,0.36,1); box-shadow: 0 -20px 50px rgba(8,18,35,0.3); }
.ph-ov.in .ph-sheet { transform: none; }
.ph-shead { background: linear-gradient(110deg,#1c50ad,#2563eb); color: #fff; padding: 15px 18px; flex-shrink: 0; position: relative; }
.ph-shead .t { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.ph-shead .s { font-size: 12.5px; color: rgba(255,255,255,0.78); margin-top: 4px; line-height: 1.4; padding-right: 26px; }
.ph-shead .x { position: absolute; top: 16px; right: 18px; color: rgba(255,255,255,0.85); }
.ph-smeta { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid #eef0f2; flex-shrink: 0; }
.ph-smeta .c { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #102b4e; }
.ph-smeta .c svg { color: #d91965; }
.ph-smeta .exp { font-size: 13px; color: #5a6068; }
.ph-srefs { flex: 1; min-height: 0; overflow: hidden; padding: 12px 14px 70px; display: flex; flex-direction: column; gap: 11px; background: #f6f7f9; }
.ph-ref { background: #fff; border: 1px solid #eef0f2; border-radius: 12px; padding: 13px 14px; transition: transform 280ms, box-shadow 280ms, border-color 280ms; }
.ph-ref.hi { transform: scale(1.02); border-color: rgba(217,25,101,0.5); box-shadow: 0 10px 26px rgba(217,25,101,0.14); }
.ph-ref .rh { display: flex; align-items: flex-start; gap: 10px; }
.ph-ref .ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(217,25,101,0.1); color: #d91965; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-ref .tt { font-size: 13.5px; font-weight: 800; color: #102b4e; line-height: 1.25; text-transform: uppercase; }
.ph-ref .se { font-size: 12px; color: #9aa0a6; margin-top: 3px; }
.ph-ref .chev { color: #aab0b6; flex-shrink: 0; }
.ph-ref .qu { font-size: 12.5px; font-style: italic; color: #5a6068; line-height: 1.5; margin-top: 9px; }
.ph-ref .vm { font-size: 12.5px; font-weight: 700; color: #d91965; margin-top: 8px; }
.ph-sclose { position: absolute; bottom: 16px; right: 16px; background: #1c50ad; color: #fff; font-size: 14px; font-weight: 700; padding: 10px 20px; border-radius: 10px; box-shadow: 0 10px 24px rgba(28,80,173,0.4); z-index: 5; }

/* timed didactic tooltip — sits ENTIRELY in the side gutter, beside the phone
   (whole bubble outside the screen), like the notebook's feat-bubbles. */
.ph-tip { position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: 9px; width: 200px; padding: 11px 14px; border-radius: 13px; background: #0a0d15; color: #fff; box-shadow: 0 14px 34px rgba(8,18,35,0.45); opacity: 0; transition: opacity 280ms ease, transform 320ms cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; }
.ph-tip.tl { top: 92px; right: 100%; margin-right: 16px; transform: translateX(-10px) scale(0.95); transform-origin: right top; }
.ph-tip.tr { top: 92px; left: 100%; margin-left: 16px; transform: translateX(10px) scale(0.95); transform-origin: left top; }
.ph-tip.bl { bottom: 150px; right: 100%; margin-right: 16px; transform: translateX(-10px) scale(0.95); transform-origin: right bottom; }
.ph-tip.br { bottom: 150px; left: 100%; margin-left: 16px; transform: translateX(10px) scale(0.95); transform-origin: left bottom; }
.ph-tip.show { opacity: 1; transform: none; }
.ph-tip .tic { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; display: flex; align-items: center; justify-content: center; }
.ph-tip .ttx { font-size: 13px; font-weight: 600; line-height: 1.3; }
.ph-tip .ttag { flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 9999px; background: rgba(255,255,255,0.14); color: #ff9cb8; }

/* outer wrapper: phone + selector pills below (like the notebook tabs) */
.ph-outer { display: flex; flex-direction: column; align-items: center; }
.ph-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; max-width: 460px; }
.ph-hint { width: 100%; text-align: center; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.66); margin-bottom: 4px; }
.ph-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 9999px; font-size: 14px; font-weight: 700; color: #cdd8e6; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.16); cursor: pointer; transition: all .22s; font-family: inherit; }
.ph-tab:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.ph-tab.on { background: linear-gradient(135deg,#d91965,#ef405b); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(217,25,101,0.34); }
.ph-tab .bul { width: 7px; height: 7px; border-radius: 9999px; background: currentColor; opacity: .7; }
/* light variant (white landing background) */
.ph-outer.light .ph-hint { color: #5a6068; }
.ph-outer.light .ph-tab { color: #44505f; background: #fff; border-color: rgba(16,43,78,0.14); box-shadow: 0 2px 8px rgba(16,43,78,0.06); }
.ph-outer.light .ph-tab:hover { border-color: rgba(217,25,101,0.4); color: #102b4e; }
.ph-outer.light .ph-tab.on { color: #fff; border-color: transparent; }