/* SEI mobile screen — append. Faithful to prints: process header → timeline →
   doc summary → docs converge into AI wheel → consolidated overview. */

/* process header card */
.ph-sei { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ph-back { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: #5a6068; }
.ph-pcard { background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(8,18,35,0.05); }
.ph-pcard .pn { font-size: 21px; font-weight: 800; color: #102b4e; letter-spacing: -0.01em; }
.ph-stbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 9999px; background: rgba(31,154,102,0.12); color: #1f9a66; margin: 9px 0; }
.ph-pcard .ptipo { font-size: 14px; color: #5a6068; line-height: 1.4; }
.ph-pacts { display: flex; gap: 8px; margin: 13px 0; }
.ph-pact { width: 42px; height: 42px; border-radius: 11px; background: #f1f3f5; color: #5a6068; display: flex; align-items: center; justify-content: center; }
.ph-pact.bell { background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; }
.ph-pact.vsei { width: auto; padding: 0 16px; gap: 7px; font-size: 14px; font-weight: 700; color: #102b4e; }
.ph-pdesc { font-size: 15px; line-height: 1.55; color: #1a1d22; margin: 4px 0 0; }
.ph-pmeta { margin-top: 14px; display: flex; flex-direction: column; gap: 13px; }
.ph-pmrow { display: flex; gap: 11px; align-items: flex-start; }
.ph-pmrow .mi { color: #9aa0a6; flex-shrink: 0; margin-top: 2px; }
.ph-pmrow .ml { font-size: 12.5px; color: #9aa0a6; }
.ph-pmrow .mv { font-size: 14.5px; font-weight: 700; color: #102b4e; line-height: 1.35; }

/* timeline section */
.ph-tlcard { background: #fff; border: 1px solid #eef0f2; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(8,18,35,0.05); }
.ph-tltitle { font-size: 19px; font-weight: 800; color: #102b4e; }
.ph-tlsub { font-size: 13px; color: #9aa0a6; margin: 3px 0 14px; }
.ph-tlctrl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5a6068; margin-bottom: 12px; }
.ph-tlctrl .tog { width: 38px; height: 22px; border-radius: 9999px; background: #e6e7ea; position: relative; }
.ph-tlctrl .tog::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:9999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.ph-tlctrl .sp svg { color: #d91965; }
.ph-tltrack { display: flex; align-items: flex-start; gap: 0; position: relative; padding: 10px 4px 0; }
.ph-tlnode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.ph-tlnode .bar { position: absolute; top: 17px; left: 50%; width: 100%; height: 3px; background: #eef0f2; z-index: 0; transition: background 400ms ease; }
.ph-tlnode:last-child .bar { display: none; }
.ph-tlnode.on .bar, .ph-tlnode.past .bar { background: linear-gradient(90deg,#9b6cd9,#d91965); }
.ph-tlnode .dot { width: 36px; height: 36px; border-radius: 9999px; background: #fff; border: 2px solid #d6dadf; display: flex; align-items: center; justify-content: center; color: #aab0b6; z-index: 1; transition: all .35s; }
.ph-tlnode.past .dot { border-color: var(--nc,#9b6cd9); color: var(--nc,#9b6cd9); }
.ph-tlnode.on .dot { background: var(--nc,#9b6cd9); border-color: var(--nc,#9b6cd9); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--nc,#9b6cd9) 20%, transparent); }
.ph-tlnode .d { font-size: 11px; font-weight: 700; color: #5a6068; }
.ph-tlnode .ty { font-size: 11px; color: #9aa0a6; }
.ph-tlnode.on .ty, .ph-tlnode.past .ty { color: var(--nc,#9b6cd9); font-weight: 700; }
.ph-seibadge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 13px; font-weight: 600; color: #5a6068; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); border-radius: 9999px; padding: 7px 13px; }
.ph-seibadge svg { color: #7c3aed; }
.ph-seibadge b { color: #102b4e; }

/* document summary card */
.ph-doccard { background: #fff; border: 1px solid #eef0f2; border-left: 4px solid #d91965; border-radius: 14px; padding: 16px; box-shadow: 0 6px 18px rgba(8,18,35,0.05); }
.ph-docmeta { display: flex; align-items: center; gap: 10px; }
.ph-doctag { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 9999px; background: rgba(155,108,217,0.14); color: #9b6cd9; }
.ph-docdate { font-size: 13px; color: #5a6068; }
.ph-docpag { margin-left: auto; font-size: 13px; color: #9aa0a6; display: flex; align-items: center; gap: 8px; }
.ph-doch { font-size: 21px; font-weight: 800; color: #102b4e; margin: 12px 0 10px; text-transform: uppercase; line-height: 1.15; }
.ph-dockick { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #d91965; }
.ph-docsum { font-size: 15px; line-height: 1.6; color: #1a1d22; margin-top: 10px; }
.ph-docvm { font-size: 14px; font-weight: 700; color: #d91965; margin-top: 8px; }

/* AI wheel (roda mágica) — docs lift from the timeline row and orbit the core
   (continuous, no cut), like the notebook. Replaces the screen body in synth. */
.ph-synth { position: absolute; inset: 56px 14px 14px; background: rgba(255,255,255,0.97); border-radius: 20px; z-index: 28; display: flex; flex-direction: column; align-items: center; }
.ph-syprocno { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 13px; font-weight: 600; color: #5a6068; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); border-radius: 9999px; padding: 7px 14px; }
.ph-syprocno svg { color: #7c3aed; }
.ph-syprocno b { color: #102b4e; }
.ph-syring { position: relative; width: 100%; flex: 1; min-height: 0; }
.ph-synth.spin .ph-syring { animation: ph-orbit 16s linear infinite; transform-origin: 50% 50%; }
@keyframes ph-orbit { to { transform: rotate(360deg); } }
.ph-sycore { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; border-radius: 26px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 34px rgba(217,25,101,0.42); transform: translate(-50%,-50%) scale(0.4); opacity: 0; transition: opacity 500ms ease 250ms, transform 600ms cubic-bezier(0.34,1.56,0.64,1) 250ms; z-index: 3; }
.ph-sycore.on { opacity: 1; transform: translate(-50%,-50%) scale(1); animation: ph-corep2 1100ms ease-in-out 900ms infinite; }
@keyframes ph-corep2 { 0%,100%{transform:translate(-50%,-50%) scale(1);} 50%{transform:translate(-50%,-50%) scale(1.07);} }
.ph-fly { position: absolute; left: var(--rowx); top: 30px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 10px; background: #fff; border: 1px solid #eef0f2; box-shadow: 0 5px 14px rgba(8,18,35,0.14); display: flex; align-items: center; justify-content: center; z-index: 2; transition: left 1000ms cubic-bezier(0.6,0,0.2,1), top 1000ms cubic-bezier(0.6,0,0.2,1), transform 1000ms cubic-bezier(0.6,0,0.2,1); }
.ph-fly.orbit { left: 50%; top: 50%; margin: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(-118px) rotate(calc(-1 * var(--a))); }
.ph-sycap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 14.5px; font-weight: 700; color: #9b6cd9; transition: opacity 400ms ease; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ph-sycap .d3 { display: inline-flex; gap: 4px; }
.ph-sycap .d3 i { width: 5px; height: 5px; border-radius: 9999px; background: #d91965; animation: ph-bounce 1s ease-in-out infinite; }
.ph-sycap .d3 i:nth-child(2){animation-delay:.15s;} .ph-sycap .d3 i:nth-child(3){animation-delay:.3s;}

/* consolidated overview card (Visão Geral do Processo) */
.ph-ov2 { position: absolute; inset: 56px 14px 14px; background: #fff; border-radius: 20px; overflow: hidden; z-index: 29; border-left: 4px solid #d91965; box-shadow: 0 14px 40px rgba(8,18,35,0.2); display: flex; flex-direction: column; animation: ph-ov2in 560ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes ph-ov2in { 0%{opacity:0;transform:scale(0.92);} 100%{opacity:1;transform:scale(1);} }
.ph-ov2head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid #eef0f2; flex-shrink: 0; }
.ph-ov2head .ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#d91965,#ef405b); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-ov2head .t1 { font-size: 17px; font-weight: 800; color: #102b4e; }
.ph-ov2head .t2 { font-size: 12.5px; color: #9aa0a6; margin-top: 2px; }
.ph-ov2body { flex: 1; min-height: 0; overflow: hidden; padding: 16px; }
.ph-ov2title { font-size: 20px; font-weight: 800; color: #102b4e; letter-spacing: 0.01em; }
.ph-ov2meta { font-size: 13.5px; color: #5a6068; margin-top: 6px; line-height: 1.5; }
.ph-ov2meta b { color: #102b4e; }
.ph-ov2div { height: 1px; background: #eef0f2; margin: 14px 0; }
.ph-ov2sec { font-size: 17px; font-weight: 800; color: #102b4e; margin-bottom: 10px; }
.ph-ov2li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; color: #1a1d22; margin-bottom: 11px; opacity: 0; transform: translateY(6px); animation: ph-liin 420ms ease forwards; }
.ph-ov2li .dt { width: 6px; height: 6px; border-radius: 9999px; background: #d91965; margin-top: 8px; flex-shrink: 0; }
.ph-ov2li.sub { padding-left: 22px; }
.ph-ov2li.sub .dt { background: #c3c8cf; }
.ph-ov2li b { color: #102b4e; }
@keyframes ph-liin { to { opacity: 1; transform: none; } }