/* ==========================================================================
   mobile.css — jobseeker mobile app: realistic device frame + splash/login/home
   ========================================================================== */
body { background: #ffffff; min-height: 100dvh; }

.stage { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; overflow: auto; }

/* Scale typography + spacing down inside the device so it reads like a real phone */
.phone-screen {
  font-size: 13px;
  --fs-display: 40px; --fs-h1: 29px; --fs-h2: 23px; --fs-h3: 18px; --fs-h4: 15px;
  --fs-lg: 15px; --fs-base: 13px; --fs-sm: 12px; --fs-xs: 11px; --fs-eyebrow: 10px;
  --gutter: 16px; --space-8: 26px; --space-6: 18px; --space-5: 16px; --space-4: 13px; --space-3: 10px;
}

/* device */
.phone { width: 390px; height: 844px; background: #0a0a0c; border-radius: 56px; padding: 13px;
  box-shadow: inset 0 0 0 2px #1c1c22; position: relative; flex: none; }
.phone-screen { width: 100%; height: 100%; background: var(--surface-page); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.phone-screen.dark { background: var(--mfj-navy-900); }
.island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 116px; height: 31px; background: #000; border-radius: 999px; z-index: 40; }

.statusbar { flex: none; height: 52px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 9px; font-weight: 700; font-size: 14px; color: var(--mfj-navy-900); z-index: 20; }
.phone-screen.dark .statusbar { color: #fff; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 7px; }

.app-bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 12px; background: transparent; }
.app-bar .actions { display: flex; align-items: center; gap: var(--space-2); }

.app-screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 18px; }

/* hide scrollbars inside the device for a native app feel */
.stage, .app-screen, .chat-msgs { scrollbar-width: none; -ms-overflow-style: none; }
.stage::-webkit-scrollbar, .app-screen::-webkit-scrollbar, .chat-msgs::-webkit-scrollbar { width: 0; height: 0; display: none; }
.app-screen.flush { padding: 0; }
.app-screen .h2 { font-size: 26px; }

.tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding-bottom: 18px; }
.tabbar button { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 6px; color: var(--text-muted); font-size: 11px; font-weight: var(--fw-semibold); }
.tabbar button .icon { width: 22px; height: 22px; }
.tabbar button.active { color: var(--mfj-blue-700); }
/* center AI button (prominent, raised) */
.tab-ai { padding-top: 0 !important; }
.tab-ai .fab { width: 52px; height: 52px; border-radius: 50%; background: var(--grad-primary); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); margin-top: -24px; border: 3px solid #fff; }
.tab-ai .fab .icon { width: 24px; height: 24px; color: #fff; }
.tab-ai .lbl { font-size: 11px; font-weight: var(--fw-bold); color: var(--mfj-navy-900); }
.tab-ai:active .fab { transform: scale(.95); }

.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 3px; background: rgba(15,27,45,.4); z-index: 40; }
.phone-screen.dark .home-indicator { background: rgba(255,255,255,.5); }

/* in-app AI chat (not a drawer) */
.app-screen.chatting { padding: 0; overflow: hidden; display: flex; }
.m-chat { display: flex; flex-direction: column; height: 100%; width: 100%; }
.m-chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.m-chat-head .chat-bot { width: 38px; height: 38px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--mfj-blue-600), var(--mfj-navy-700)); color: #fff; display: grid; place-items: center; flex: none; }
.m-chat .chat { flex: 1; min-height: 0; padding: 16px 16px 22px; }

/* prominent home search */
.m-search { width: 100%; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--input); border-radius: var(--radius-pill); padding: 13px 18px; box-shadow: var(--shadow-sm); color: var(--text-muted); font-size: var(--fs-base); cursor: pointer; text-align: left; }
.m-search .icon { color: var(--mfj-blue-600); width: 20px; height: 20px; flex: none; }
.m-search:active { transform: scale(.99); }

/* segmented control */
.seg { display: flex; background: var(--slate-100); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg button { flex: 1; border: none; background: none; cursor: pointer; padding: 7px 10px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.seg button.active { background: #fff; color: var(--mfj-navy-900); box-shadow: var(--shadow-xs); }

/* splash */
.splash { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: var(--grad-brand); color: #fff; text-align: center; padding: 32px; }
.splash .wordmark { font-size: 34px; }
.splash .splash-tag { color: rgba(255,255,255,.72); max-width: 250px; line-height: var(--lh-relaxed); }
.splash .spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: m-spin .8s linear infinite; margin-top: var(--space-4); }
@keyframes m-spin { to { transform: rotate(360deg); } }
.splash .crest { width: 64px; height: 64px; border-radius: var(--radius-lg); background: rgba(255,255,255,.12); display: grid; place-items: center; }

/* login */
.login-screen { height: 100%; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-6) var(--space-6); overflow-y: auto; }

/* small viewports — scale the device down to fit */
@media (max-width: 430px), (max-height: 900px) { .phone { transform: scale(0.92); } }
@media (max-height: 800px) { .phone { transform: scale(0.82); } }