@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #3D5AF1;
    --primary-dark: #2a3fc7;
    --primary-light: #EEF1FD;
    --yellow: #F5A623;
    --yellow-light: #FFF6E5;
    --dark: #1A1A2E;
    --gray: #6B7280;
    --gray-light: #E5E7EB;
    --bg: #F4F6FF;
    --white: #FFFFFF;
    --success: #22C55E;
    --danger: #EF4444;
    --warning: #F59E0B;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 20px rgba(61,90,241,0.12);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 50px;
    --nav-h: 68px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--dark);min-height:100vh;max-width:480px;margin:0 auto;position:relative;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
input,textarea,select{font-family:'Inter',sans-serif;}

/* ── SCROLL ── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gray-light);border-radius:4px;}

/* ── TYPOGRAPHY ── */
h1{font-size:2rem;font-weight:800;line-height:1.2;}
h2{font-size:1.4rem;font-weight:700;}
h3{font-size:1.1rem;font-weight:600;}
p{color:var(--gray);line-height:1.6;font-size:.9rem;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius-pill);font-weight:600;font-size:.9rem;cursor:pointer;border:none;transition:.2s;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.btn-dark{background:var(--dark);color:#fff;}
.btn-dark:hover{background:#2D2D4E;}
.btn-outline{background:#fff;color:var(--dark);border:1.5px solid var(--gray-light);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-yellow{background:var(--yellow);color:#fff;}
.btn-yellow:hover{background:#d4881a;}
.btn-sm{padding:8px 16px;font-size:.8rem;}
.btn-full{width:100%;justify-content:center;}
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;}

/* ── CARDS ── */
.card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.card-sm{border-radius:var(--radius-sm);padding:14px;}

/* ── HEADER ── */
.header{position:sticky;top:0;z-index:100;background:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 8px rgba(0,0,0,.05);}
.header-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.1rem;color:var(--dark);}
.header-logo svg{color:var(--primary);}
.header-actions{display:flex;align-items:center;gap:12px;}
.header-icon-btn{background:none;border:none;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s;}
.header-icon-btn:hover{background:var(--bg);}
.back-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--dark);font-weight:500;font-size:.95rem;}

/* ── BOTTOM NAV ── */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--gray-light);display:flex;z-index:200;padding:8px 0 12px;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;text-decoration:none;color:var(--gray);font-size:.7rem;font-weight:500;transition:.2s;}
.nav-item svg{width:22px;height:22px;}
.nav-item.active{color:var(--primary);}
.nav-item .nav-circle{background:var(--yellow);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;margin-top:-18px;box-shadow:0 4px 12px rgba(245,166,35,.4);}
.nav-item .nav-circle svg{color:#fff;width:22px;height:22px;}

/* ── PAGE WRAPPER ── */
.page{padding:20px;padding-bottom:calc(var(--nav-h) + 20px);}
.page-no-nav{padding:20px;}

/* ── FORMS ── */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--dark);}
.form-control{width:100%;padding:13px 16px;border:1.5px solid var(--gray-light);border-radius:var(--radius-sm);font-size:.9rem;background:#fff;transition:.2s;outline:none;}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
.form-control::placeholder{color:#B0B7C3;}
textarea.form-control{resize:vertical;min-height:120px;}
.form-error{color:var(--danger);font-size:.8rem;margin-top:4px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap .form-control{padding-left:44px;}
.input-icon-wrap .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray);}

/* ── ALERTS ── */
.alert{padding:12px 16px;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:16px;}
.alert-danger{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA;}
.alert-success{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0;}

/* ── TAGS / BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:.72rem;font-weight:600;}
.badge-free{background:var(--yellow);color:#fff;}
.badge-paid{background:var(--primary-light);color:var(--primary);}
.badge-mood{background:var(--bg);color:var(--gray);border:1px solid var(--gray-light);}

/* ── DIVIDER ── */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--gray);font-size:.8rem;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--gray-light);}

/* ── AVATAR ── */
.avatar{border-radius:50%;object-fit:cover;}
.avatar-sm{width:40px;height:40px;}
.avatar-md{width:56px;height:56px;}
.avatar-lg{width:80px;height:80px;}
.avatar-xl{width:100px;height:100px;}

/* ── MOOD EMOJI SELECTOR ── */
.mood-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.mood-option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:.2s;background:#fff;box-shadow:var(--shadow);}
.mood-option:hover{border-color:var(--primary-light);transform:translateY(-2px);}
.mood-option.selected{border-color:var(--primary);background:var(--primary-light);}
.mood-option .emoji{font-size:1.8rem;}
.mood-option .label{font-size:.7rem;font-weight:600;color:var(--gray);}
.mood-option.selected .label{color:var(--primary);}

/* ── ASSESSMENT ── */
.progress-bar-wrap{background:var(--gray-light);border-radius:var(--radius-pill);height:6px;overflow:hidden;margin:8px 0 24px;}
.progress-bar-fill{height:100%;border-radius:var(--radius-pill);background:var(--primary);transition:width .4s ease;}
.assessment-option{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#fff;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:.2s;margin-bottom:12px;box-shadow:var(--shadow);}
.assessment-option:hover{border-color:var(--primary-light);transform:translateX(4px);}
.assessment-option.selected{border-color:var(--primary);background:var(--primary-light);}
.assessment-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#3D5AF1);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.assessment-icon.orange{background:linear-gradient(135deg,#f59e0b,#F5A623);}
.assessment-title{font-weight:700;font-size:1rem;color:var(--dark);}
.assessment-desc{font-size:.8rem;color:var(--gray);margin-top:2px;}
.assessment-footer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--gray-light);z-index:100;}
.skip-btn{background:none;border:none;color:var(--gray);font-size:.9rem;cursor:pointer;font-weight:500;}
.skip-btn:hover{color:var(--dark);}

/* ── COUNSELOR CARDS ── */
.tab-filter{display:flex;gap:8px;margin-bottom:20px;}
.tab-btn{padding:8px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--gray-light);background:#fff;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s;color:var(--gray);}
.tab-btn.active{background:var(--yellow);border-color:var(--yellow);color:#fff;}
.tab-btn:hover:not(.active){border-color:var(--primary);color:var(--primary);}

.counselor-card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px;display:flex;flex-direction:column;gap:12px;}
.counselor-card-header{display:flex;align-items:center;gap:12px;}
.counselor-info{flex:1;}
.counselor-name{font-weight:700;font-size:1rem;}
.counselor-title{font-size:.8rem;color:var(--gray);}
.counselor-rate{font-size:.85rem;font-weight:600;color:var(--primary);}
.counselor-quote{font-size:.82rem;color:var(--gray);font-style:italic;border-left:3px solid var(--primary-light);padding-left:10px;}
.counselor-stars{color:var(--yellow);font-size:.9rem;}
.counselor-tags{display:flex;gap:6px;flex-wrap:wrap;}
.counselor-tag{padding:4px 12px;background:var(--bg);border-radius:var(--radius-pill);font-size:.75rem;font-weight:500;color:var(--primary);}

.featured-card{background:linear-gradient(135deg,#fff9ee,#fff);border:2px solid var(--yellow);border-radius:var(--radius);padding:20px;box-shadow:0 4px 20px rgba(245,166,35,.15);margin-bottom:14px;}
.featured-card-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--yellow);}
.featured-card-center{text-align:center;margin-bottom:16px;}
.featured-badge{display:inline-block;background:var(--yellow-light);color:var(--yellow);font-size:.72rem;font-weight:700;letter-spacing:.5px;padding:4px 12px;border-radius:var(--radius-pill);margin-bottom:4px;}

/* ── CHAT ── */
.chat-messages{padding:16px 20px;display:flex;flex-direction:column;gap:12px;min-height:60vh;}
.bubble-wrap{display:flex;align-items:flex-end;gap:8px;}
.bubble-wrap.mine{flex-direction:row-reverse;}
.bubble{max-width:72%;padding:12px 16px;border-radius:18px;font-size:.9rem;line-height:1.5;}
.bubble.received{background:#fff;border-bottom-left-radius:4px;box-shadow:var(--shadow);}
.bubble.sent{background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.bubble-time{font-size:.68rem;color:var(--gray);margin-top:2px;}
.chat-input-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;padding:12px 16px;display:flex;gap:10px;border-top:1px solid var(--gray-light);z-index:100;}
.chat-input{flex:1;border:1.5px solid var(--gray-light);border-radius:var(--radius-pill);padding:10px 18px;font-size:.9rem;outline:none;}
.chat-input:focus{border-color:var(--primary);}
.chat-send-btn{width:44px;height:44px;border-radius:50%;background:var(--primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}

/* ── DASHBOARD WIDGETS ── */
.widget-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
.widget{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.widget-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:10px;}
.widget-icon.blue{background:var(--primary-light);}
.widget-icon.yellow{background:var(--yellow-light);}
.widget-icon.green{background:#D1FAE5;}
.widget-icon.pink{background:#FEE2E2;}
.widget-value{font-size:1.5rem;font-weight:800;color:var(--dark);}
.widget-label{font-size:.78rem;color:var(--gray);font-weight:500;}

/* ── MOOD HISTORY ── */
.mood-history-item{display:flex;align-items:center;gap:14px;padding:14px;background:#fff;border-radius:var(--radius-sm);margin-bottom:10px;box-shadow:var(--shadow);}
.mood-dot{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}

/* ── JOURNAL CARDS ── */
.journal-card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:14px;border-left:4px solid var(--primary);}
.journal-card-date{font-size:.75rem;color:var(--gray);margin-bottom:6px;}
.journal-card-title{font-weight:700;font-size:1rem;margin-bottom:6px;}
.journal-card-preview{font-size:.84rem;color:var(--gray);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.journal-actions{display:flex;gap:8px;margin-top:12px;}

/* ── AFFIRMATION CARD ── */
.affirmation-card{background:linear-gradient(135deg,#4B47D0,#6366f1,#8B5CF6);border-radius:var(--radius);padding:24px 22px;color:#fff;position:relative;overflow:hidden;}
.affirmation-card::before{content:'❝';position:absolute;top:-10px;left:14px;font-size:5rem;opacity:.15;line-height:1;}
.affirmation-text{font-size:1rem;font-weight:600;line-height:1.6;margin-bottom:16px;position:relative;z-index:1;color:#fff;}
.affirmation-btn{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:var(--radius-pill);padding:8px 18px;font-size:.82rem;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:.2s;}
.affirmation-btn:hover{background:rgba(255,255,255,.35);}

/* ── FEATURE CARDS ── */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.feature-card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);}
.feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:10px;}
.feature-title{font-weight:700;font-size:.9rem;margin-bottom:4px;}
.feature-desc{font-size:.78rem;color:var(--gray);}

/* ── INBOX ── */
.inbox-item{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:.2s;}
.inbox-item:hover{transform:translateX(4px);box-shadow:var(--shadow-md);}
.inbox-info{flex:1;min-width:0;}
.inbox-name{font-weight:700;font-size:.95rem;}
.inbox-preview{font-size:.82rem;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inbox-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.inbox-time{font-size:.72rem;color:var(--gray);}
.inbox-unread{background:var(--primary);color:#fff;border-radius:50%;width:20px;height:20px;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* ── SECTION HEADERS ── */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.section-title{font-size:1rem;font-weight:700;}
.section-link{font-size:.82rem;color:var(--primary);font-weight:600;}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:40px 20px;}
.empty-state .emoji{font-size:3rem;margin-bottom:12px;}
.empty-state h3{font-weight:700;margin-bottom:8px;}
.empty-state p{font-size:.85rem;color:var(--gray);}

/* ── LANDING SPECIFIC ── */
.landing-hero{padding:24px 20px 0;background:#fff;}
.landing-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;}
.logo-text{font-size:1.1rem;font-weight:800;color:var(--dark);}
.logo-dot{color:var(--primary);}
.safe-badge{background:#D1FAE5;color:#065F46;padding:5px 12px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:4px;}
.hero-title{font-size:2.2rem;font-weight:800;line-height:1.15;margin-bottom:12px;}
.hero-title span{color:var(--primary);}
.hero-subtitle{font-size:.9rem;color:var(--gray);margin-bottom:24px;line-height:1.6;}
.hero-cta{display:flex;gap:10px;margin-bottom:24px;}
.hero-cta .btn{flex:1;justify-content:center;font-size:.85rem;padding:13px 12px;}
.hero-img{width:100%;border-radius:var(--radius);object-fit:cover;max-height:240px;}
.mindease-section{padding:24px 20px;}
.mindease-footer{background:#fff;padding:24px 20px;margin-top:8px;}

/* ── CHART CONTAINER ── */
.chart-wrap{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:14px;}
.chart-wrap canvas{max-height:200px;}

/* ── PROFILE ── */
.profile-header{background:linear-gradient(135deg,var(--primary),#6366f1);padding:32px 20px 24px;color:#fff;text-align:center;}
.profile-name{font-size:1.3rem;font-weight:800;margin-top:12px;}
.profile-role{font-size:.85rem;opacity:.8;}
.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:16px;}
.profile-stat-val{font-size:1.4rem;font-weight:800;}
.profile-stat-label{font-size:.72rem;opacity:.8;}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
.fade-up{animation:fadeUp .4s ease both;}
.fade-up-1{animation-delay:.1s;}
.fade-up-2{animation-delay:.2s;}
.fade-up-3{animation-delay:.3s;}
.pulse{animation:pulse 2s infinite;}

/* ── MINDBOT SECTION ── */
.mindbot-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:center;margin-top:20px;}
.mindbot-icon{width:52px;height:52px;background:var(--primary-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.5rem;}

/* ── ASSESSMENT RESULT ── */
.result-card{background:linear-gradient(135deg,var(--primary),#6366f1);border-radius:var(--radius);padding:28px 22px;color:#fff;text-align:center;}
.result-emoji{font-size:3rem;margin-bottom:12px;}
.result-title{font-size:1.2rem;font-weight:800;margin-bottom:8px;}
.result-text{font-size:.88rem;opacity:.9;line-height:1.6;margin-bottom:20px;}

/* ── PSIKOLOG DASHBOARD ── */
.client-card{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);margin-bottom:10px;cursor:pointer;}
.client-card:hover{box-shadow:var(--shadow-md);}
.online-dot{width:10px;height:10px;background:var(--success);border-radius:50%;flex-shrink:0;}

/* ── TOGGLE ROLE ── */
.role-toggle{display:flex;background:var(--gray-light);border-radius:var(--radius-pill);padding:4px;margin-bottom:24px;}
.role-btn{flex:1;padding:10px;border-radius:var(--radius-pill);border:none;background:transparent;font-weight:600;font-size:.9rem;cursor:pointer;transition:.2s;color:var(--gray);}
.role-btn.active{background:#fff;color:var(--primary);box-shadow:var(--shadow);}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — HP OPTIMIZATIONS
══════════════════════════════════════════ */

/* ── PREVENT iOS ZOOM ON INPUT FOCUS ── */
/* iOS zooms in when font-size < 16px on inputs */
@media screen and (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── SAFE AREA INSETS (iPhone notch + home bar) ── */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Bottom nav clears iPhone home bar */
.bottom-nav {
    padding-bottom: calc(12px + var(--safe-bottom));
}
/* Assessment & chat fixed footers also need safe area */
.assessment-footer {
    padding-bottom: calc(16px + var(--safe-bottom));
}
.chat-input-bar {
    padding-bottom: calc(12px + var(--safe-bottom));
}
/* Page padding accounts for taller bottom nav on iPhone */
.page {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
}

/* ── REMOVE TAP HIGHLIGHT ON MOBILE ── */
a, button, .btn, .nav-item, .mood-option, .assessment-option,
.counselor-card, .inbox-item, .journal-card, .client-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ── iOS MOMENTUM SCROLL ── */
.chat-container,
.page {
    -webkit-overflow-scrolling: touch;
}

/* ── ACTIVE STATES for touch feedback ── */
.btn:active { transform: scale(0.97); opacity: .9; }
.nav-item:active { opacity: .7; }
.mood-option:active { transform: scale(0.96); }
.assessment-option:active { transform: scale(0.98); }
.inbox-item:active { transform: translateX(2px); opacity: .9; }
.counselor-card:active { transform: scale(0.99); }

/* ── HEADER SAFE AREA (status bar on Android/iOS) ── */
.header {
    padding-top: calc(14px + var(--safe-top));
}

/* ── VERY SMALL SCREENS (≤ 360px, older Android) ── */
@media screen and (max-width: 360px) {
    h1 { font-size: 1.7rem; }
    .hero-title { font-size: 1.9rem; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .mood-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .mood-option { padding: 10px 4px; }
    .mood-option .emoji { font-size: 1.5rem; }
    .mood-option .label { font-size: .62rem; }
    .widget-grid { gap: 10px; }
    .feature-grid { gap: 8px; }
    .profile-stats { gap: 18px; }
    .page { padding: 14px; padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px); }
    .assessment-option { padding: 14px 14px; gap: 12px; }
    .assessment-icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .btn { padding: 11px 18px; font-size: .85rem; }
    .tab-btn { padding: 7px 14px; font-size: .8rem; }
}

/* ── MEDIUM PHONES (361px – 390px, most Android) ── */
@media screen and (min-width: 361px) and (max-width: 390px) {
    .hero-title { font-size: 2rem; }
    .mood-option .label { font-size: .65rem; }
}

/* ── DESKTOP FALLBACK — show as centered card ── */
@media screen and (min-width: 481px) {
    body {
        background: #E8EAFF;
    }
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #E8EAFF 0%, #F0F4FF 100%);
        z-index: -1;
    }
    /* App container gets card shadow on desktop */
    .bottom-nav,
    .header,
    .assessment-footer,
    .chat-input-bar {
        box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    }
}

/* ── PREVENT BODY SCROLL BOUNCE on iOS chat page ── */
body.chat-page {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ── TOUCH-FRIENDLY MINIMUM TAP SIZES ── */
.header-icon-btn { min-width: 44px; min-height: 44px; }
.back-btn { min-height: 44px; padding: 10px 0; }
.nav-item { min-height: 52px; padding-top: 6px; }
.skip-btn { padding: 12px 16px; min-height: 44px; }

/* ── CHART RESPONSIVE ── */
.chart-wrap canvas {
    max-height: 180px;
    width: 100% !important;
}

/* ── FORM USABILITY ON MOBILE ── */
.form-control {
    /* Larger hit area */
    min-height: 48px;
}
select.form-control {
    /* Fix select arrow on iOS */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* ── LANDSCAPE PHONE ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .bottom-nav { display: none; }
    .page { padding-bottom: 20px; }
    .assessment-footer { position: static; border-top: 1px solid var(--gray-light); margin-top: 20px; }
    .chat-input-bar { position: sticky; }
    .profile-header { padding: 16px 20px; }
    .profile-stats { margin-top: 8px; }
}