/* LifePath Mobile Comfort — additive CSS over the original V3.0 interface.
   Optimized for narrow 320–430 CSS-pixel Android screens (5.5–6 inch class). */
:root { --lp-tap: 46px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
#app, .layout, .right-layout, .content, .surface { min-width: 0; }
.lp-cloud-top { position: static; z-index: auto; display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.lp-cloud-top span { display:inline-flex; align-items:center; font-size:11px; font-weight:750; color:#147c73; white-space:nowrap; }
.lp-cloud-top button { min-height:36px; }
.lp-cloud-top.floating { position:fixed; top:10px; right:13px; z-index:1010; padding:7px 10px; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 10px 30px #174f4720; }
.lp-ai-head button { min-height:40px; min-width:40px; }
.lp-ai-fab { transition:transform .16s ease,box-shadow .16s ease; }
.lp-ai-fab:active { transform:scale(.97); }
.lp-ai-panel { overscroll-behavior:contain; }
.lp-cloud-auth { padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)); }
.lp-auth-card input { font-size:16px; min-height:46px; }
.lp-auth-card button { min-height:46px; }
@media (max-width: 760px) {
  :root { --lp-mobile-nav-h: 76px; }
  .layout { width:100%; }
  .topbar { min-height:64px; height:auto; padding:9px 12px; gap:6px; }
  .topbar-clock { gap:7px; min-width:0; }
  .topbar-clock > svg { width:18px; flex:0 0 18px; }
  .topbar-clock strong { font-size:1.02rem; }
  .topbar-clock span { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:135px; }
  .topbar-actions { gap:5px; flex:0 0 auto; }
  .topbar-actions .tag { display:none !important; }
  .topbar-actions .btn { min-height:38px; padding:7px 9px; font-size:11px; border-radius:11px; }
  .topbar-actions .btn:first-child { max-width:47px; overflow:hidden; white-space:nowrap; }
  .lp-cloud-top.in-more { display:flex; grid-column:1/-1; width:100%; justify-content:space-between; background:#eefbf8; padding:9px 12px; border-radius:13px; order:0; }
  .lp-cloud-top.in-more span { font-size:12px; }
  .lp-cloud-top.in-more button { font-size:12px; padding:8px 14px; min-height:42px; }
  .content { padding:17px 13px calc(var(--lp-mobile-nav-h) + 97px + env(safe-area-inset-bottom)); }
  .content h1, .page-intro h1 { font-size:clamp(1.45rem,6vw,1.85rem); letter-spacing:-.025em; overflow-wrap:anywhere; }
  .content h2 { font-size:1.25rem; }
  .content h3 { font-size:1.05rem; }
  .page-intro { padding:3px 0; }
  .page-intro .lead, .content .lead { line-height:1.55; font-size:.91rem; }
  .surface { padding:16px; border-radius:17px; box-shadow:0 5px 22px rgba(12,75,78,.045); }
  .stack { gap:14px; }
  .grid { gap:13px; }
  .grid.two,.grid.three,.grid.main-columns,.grid.main-columns>.stack:last-child,.v215-appearance-grid { grid-template-columns:minmax(0,1fr); }
  .grid.main-columns>.stack:last-child { display:flex; }
  .section-row { align-items:flex-start; }
  .section-row>.btn { max-width:100%; }
  .content .btn, .content button, .v215-modal button, .more-sheet button { min-height:var(--lp-tap); }
  .content input:not([type="checkbox"]):not([type="radio"]),
  .content textarea, .content select,
  .v215-modal input,.v215-modal select,.lp-ai-bottom input { min-height:var(--lp-tap); font-size:16px; max-width:100%; }
  .content button,.content select { touch-action: manipulation; }
  .content .btn, .content .tag, .content p, .content label { overflow-wrap:anywhere; }
  .mobile-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px;
    min-height:var(--lp-mobile-nav-h); padding:5px 5px calc(7px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); border-top:1px solid #d4e6e3;
    box-shadow:0 -10px 30px rgba(18,72,70,.11); }
  .mobile-nav .menu-link { min-width:0; min-height:59px; display:flex; justify-content:center;
    align-items:center; flex-direction:column; border-radius:15px; padding:7px 2px;
    gap:2px; font-size:10px; font-weight:750; line-height:1.2; }
  .mobile-nav .menu-icon { height:24px; width:27px; }
  .mobile-nav .menu-icon svg { width:22px; height:22px; }
  .mobile-nav .menu-link.active { color:#067d75; background:#d9f6ee; }
  .more-sheet.open { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px; bottom:calc(var(--lp-mobile-nav-h) + env(safe-area-inset-bottom));
    max-height:min(66dvh,590px); padding:13px; border-radius:20px;
    overscroll-behavior:contain; z-index:79; }
  .more-sheet .menu-link { padding:9px 10px; border:1px solid #e7f0ee; border-radius:12px;
    font-size:12px; min-height:53px; line-height:1.35; gap:5px; }
  .more-sheet .menu-link .menu-icon { flex:0 0 21px; width:21px; }
  .more-sheet .menu-link .menu-icon svg { width:18px; }
  .more-sheet-heading { position:sticky; top:-13px; background:white; z-index:2; padding:8px 5px; }
  .lp-ai-fab { bottom:calc(var(--lp-mobile-nav-h) + 14px + env(safe-area-inset-bottom))!important;
    right:10px!important; font-size:12px!important; padding:10px 13px!important; min-height:42px;
    box-shadow:0 9px 24px rgba(0,110,112,.28)!important; }
  .lp-ai-panel { left:8px; right:8px; width:auto; bottom:calc(var(--lp-mobile-nav-h) + 9px + env(safe-area-inset-bottom));
    height:min(68dvh,540px); max-height:calc(100dvh - 106px - env(safe-area-inset-top));
    border-radius:17px; }
  .lp-ai-head { padding:11px 14px; }
  .lp-ai-stream { padding:12px; }
  .lp-ai-bottom input { min-width:0; }
  .lp-ai-bottom button { min-height:44px; }
  .v215-modal { max-height:calc(100dvh - 32px); padding:15px; border-radius:17px; }
  .v215-modal-header { flex-wrap:wrap; }
  .v215-gallery,.v215-profile-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v215-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .v215-actions .btn { flex:1 1 140px; }
  .landing-form { padding:23px 17px calc(var(--lp-mobile-nav-h) + 18px); }
  .landing-form h1 { font-size:2rem; }
  .hero-card { height:290px; }
  .hero-overlay { left:15px; right:15px; max-width:none; }
  .hero-overlay h1 { font-size:1.65rem; }
  .toast { bottom:calc(var(--lp-mobile-nav-h) + 67px + env(safe-area-inset-bottom)); right:10px; left:10px; max-width:none; }
}
@media (max-width:380px) {
  .content { padding-inline:10px; }
  .surface { padding:13px; }
  .topbar { padding-inline:8px; }
  .topbar-clock span { max-width:104px; }
  .topbar-actions .btn { font-size:10px; padding:6px; }
  .mobile-nav { padding-left:3px;padding-right:3px; }
  .mobile-nav .menu-link { font-size:9.5px; }
  .more-sheet.open { left:7px; right:7px; padding:10px; }
  .more-sheet .menu-link { font-size:11px; }
  .content .activity-grid,.content .places-grid { grid-template-columns:1fr; }
}
@media (max-width:340px) {
  .topbar-actions .btn:last-child { max-width:76px; }
  .topbar-clock span { display:none; }
  .more-sheet.open { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .lp-ai-fab { transition:none; }
}

/* LifePath personal UI: warga nyata dari save dan kontrol yang nyaman di HP 5.5–6 inci */
.npc-pulse-line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(122,145,153,.17);min-width:0}
.npc-pulse-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#d6f5ee;color:#0f766e;font-weight:800;font-size:18px}
.npc-pulse-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.npc-pulse-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npc-pulse-line .btn{flex:none;min-height:44px;min-width:66px;padding:8px 12px}
@media(max-width:450px){.npc-pulse-line{gap:8px}.npc-pulse-copy strong{font-size:14px}.npc-pulse-line .btn{font-size:13px;min-width:56px}.surface .settings-check{min-height:42px}#app .input,#app select,#app textarea{font-size:16px;max-width:100%}}

/* LifePath personal UI: warga nyata dari save dan kontrol yang nyaman di HP 5.5–6 inci */
.npc-pulse-line{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(122,145,153,.17);min-width:0}
.npc-pulse-avatar{flex:0 0 42px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#d6f5ee;color:#0f766e;font-weight:800;font-size:18px}
.npc-pulse-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.npc-pulse-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npc-pulse-line .btn{flex:none;min-height:44px;min-width:66px;padding:8px 12px}
@media(max-width:450px){.npc-pulse-line{gap:8px}.npc-pulse-copy strong{font-size:14px}.npc-pulse-line .btn{font-size:13px;min-width:56px}.surface .settings-check{min-height:42px}#app .input,#app select,#app textarea{font-size:16px;max-width:100%}}
/* Portrait ages are always depicted at the correct life stage, even without AI credits. */
.v215-age-fallback{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;display:block;border-radius:inherit;}

/* 2026-11-04: keep notices clear of the floating AI control on every viewport.
   The message sits below the sticky toolbar and above all gameplay overlays. */
body #toast.toast {
  position: fixed !important;
  inset: max(86px, calc(env(safe-area-inset-top) + 76px)) auto auto 50% !important;
  bottom: auto !important;
  right: auto !important;
  left: 50% !important;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  max-height: min(40dvh, 250px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  z-index: 2500 !important;
  transform: translate(-50%, -12px) !important;
  opacity: 0;
  pointer-events: none;
}
body #toast.toast.show {transform:translate(-50%, 0) !important;opacity:1}
/* Optional drag-to-reposition floating AI, with keyboard click preserved. */
.lp-ai-fab {touch-action:none;user-select:none;-webkit-user-select:none;}
.lp-ai-fab.lp-ai-moved {
  left: var(--lp-ai-x) !important;
  top: var(--lp-ai-y) !important;
  right: auto !important;
  bottom: auto !important;
}
@media(max-width:760px){
  body #toast.toast {top:max(72px, calc(env(safe-area-inset-top) + 68px)) !important; bottom:auto !important; left:50% !important; right:auto !important; max-width:calc(100vw - 20px); font-size:.81rem; line-height:1.45; padding:12px 14px;}
}
@media(prefers-reduced-motion:reduce){body #toast.toast {transition:opacity .1s ease;}}