/* ═══════════════════════════════════════════════════════════
   CircleWatch Shared Mobile View System  —  cw-mobile.css
   Loaded by every page except Home.html (which has inline CSS).
   Companion script: cw-mobile.js
═══════════════════════════════════════════════════════════ */

/* ── Hide mobile-only elements until activated ─────────── */
.cw-mobile-header,
.cw-mobile-bottomnav,
.cw-mobile-search-overlay { display: none !important; }

/* ── View toggle pill ──────────────────────────────────── */
.cw-view-toggle {
    position: fixed; bottom: 20px; left: 20px; z-index: 9900;
    background: rgba(10,0,22,.88);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: none; outline: none; border-radius: 99px;
    padding: 9px 17px 9px 13px;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Lexend', sans-serif; font-size: 11.5px; font-weight: 700;
    color: rgba(200,155,255,.7); cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 22px rgba(0,0,0,.5);
    transition: background .16s, color .16s;
}
.cw-view-toggle:hover {
    background: rgba(156,0,204,.15);
    color: #d090ff;
}
.cw-view-toggle svg {
    width: 15px; height: 15px; stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════════
   ACTIVE MOBILE VIEW
═══════════════════════════════════════════════════════════ */
body.mobile-view {
    padding-top: 56px !important;
    padding-bottom: 80px !important;
    overflow-x: hidden;
    background: #080012;
}
body.mobile-view .cw-view-toggle {
    bottom: 86px; left: 10px;
    font-size: 10px; padding: 7px 12px 7px 10px; gap: 6px;
}
body.mobile-view .cw-topbar,
body.mobile-view .cw-sidebar,
body.mobile-view .cw-sidebar-ad,
body.mobile-view .cw-left-panel { display: none !important; }

/* ── Mobile header ─────────────────────────────────────── */
body.mobile-view .cw-mobile-header {
    display: flex !important;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 500;
    align-items: center; justify-content: space-between;
    padding: 0 14px 0 12px; gap: 10px;
    background: linear-gradient(180deg, #0c0019 0%, rgba(12,0,25,.97) 100%);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(156,0,204,.18);
}
.cw-mh-left { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.cw-mh-logo-img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; }
.cw-mh-wordmark {
    font-family: 'Lexend', sans-serif; font-size: 16px; font-weight: 900;
    letter-spacing: -.03em; color: #f0e4ff;
}
.cw-mh-wordmark em {
    font-style: normal;
    background: linear-gradient(135deg, #c800ff, #9000cc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cw-mh-center { flex: 1; }
.cw-mh-right { display: flex; align-items: center; gap: 0px; flex-shrink: 0; }
.cw-mh-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative; transition: background .13s; flex-shrink: 0;
}
.cw-mh-icon-btn:active { background: rgba(255,255,255,.07); }
.cw-mh-icon-btn svg {
    width: 19px; height: 19px; stroke: rgba(220,185,255,.75); fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.cw-mh-notif-dot {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #cc00ff; border: 1.5px solid #0c0019;
    display: none;
}
.cw-mh-notif-dot.show { display: block; }
.cw-mh-avatar-wrap {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid rgba(156,0,204,.5); cursor: pointer;
    background: linear-gradient(135deg, #5500aa, #9900cc);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; margin-left: 2px;
}
.cw-mh-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cw-mh-desktop-toggle {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    margin-left: 2px; flex-shrink: 0; transition: background .13s;
}
.cw-mh-desktop-toggle:active { background: rgba(255,255,255,.1); }
.cw-mh-desktop-toggle svg {
    width: 17px; height: 17px; stroke: rgba(200,160,255,.5); fill: none; stroke-width: 1.8;
}

/* ── Mobile bottom nav ─────────────────────────────────── */
body.mobile-view .cw-mobile-bottomnav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    height: 64px;
    padding: 0 6px env(safe-area-inset-bottom, 0px);
    background: rgba(7,0,16,.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(156,0,204,.13);
    align-items: center; justify-content: space-around;
}
.cw-mbn-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; padding: 6px 10px; border-radius: 14px;
    transition: background .14s; flex: 1; min-width: 0;
}
.cw-mbn-item:active { background: rgba(156,0,204,.12); }
.cw-mbn-item svg {
    width: 23px; height: 23px; stroke: rgba(185,155,220,.38); fill: none;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .13s;
}
.cw-mbn-item span {
    font-family: 'Lexend', sans-serif; font-size: 9.5px; font-weight: 600;
    color: rgba(185,155,220,.35); transition: color .13s; white-space: nowrap;
}
.cw-mbn-item.active svg { stroke: #cc00ff; }
.cw-mbn-item.active span { color: #cc00ff; }
.cw-mbn-create-col {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex-shrink: 0; padding: 0 6px;
}
.cw-mbn-create {
    width: 52px; height: 52px; border-radius: 16px;
    background: linear-gradient(145deg, #9500d4 0%, #cc00ff 100%);
    border: none; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 22px rgba(180,0,255,.5), 0 5px 16px rgba(0,0,0,.45);
    transition: transform .14s, box-shadow .14s;
    margin-top: -16px;
}
.cw-mbn-create:active {
    transform: scale(.93);
    box-shadow: 0 0 14px rgba(180,0,255,.35), 0 3px 10px rgba(0,0,0,.4);
}
.cw-mbn-create svg {
    width: 26px; height: 26px; stroke: #fff; fill: none;
    stroke-width: 2.4; stroke-linecap: round;
}
.cw-mbn-create-label {
    font-family: 'Lexend', sans-serif; font-size: 9.5px; font-weight: 700;
    color: rgba(185,155,220,.35);
}

/* ── Mobile search overlay ─────────────────────────────── */
.cw-mobile-search-overlay {
    position: fixed; inset: 0; z-index: 600;
    background: rgba(8,0,18,.97);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    padding: 10px 14px 20px;
    flex-direction: column; gap: 14px; overflow-y: auto;
}
body.mobile-view .cw-mobile-search-overlay.open { display: flex !important; }
.cw-mso-toprow { display: flex; align-items: center; gap: 10px; height: 46px; flex-shrink: 0; }
.cw-mso-back {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
    color: rgba(220,185,255,.8); font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background .13s;
}
.cw-mso-input {
    flex: 1; height: 42px;
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(156,0,204,.25); border-radius: 99px;
    padding: 0 18px;
    font-family: 'Lexend', sans-serif; font-size: 14px; font-weight: 400;
    color: #f0e4ff; outline: none; transition: border-color .15s;
}
.cw-mso-input:focus { border-color: rgba(200,80,255,.5); }
.cw-mso-input::placeholder { color: rgba(200,155,255,.28); }
.cw-mso-label {
    font-family: 'Lexend', sans-serif; font-size: 10px; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase;
    color: rgba(180,135,220,.38); padding: 4px 2px;
}
.cw-mso-trend { display: flex; flex-direction: column; gap: 0; }
.cw-mso-trend-item {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,.04);
    text-decoration: none; border-radius: 8px; transition: background .12s;
}
.cw-mso-trend-item:active { background: rgba(255,255,255,.04); }
.cw-mso-rank { font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 800; color: rgba(200,100,255,.55); width: 22px; text-align: center; flex-shrink: 0; }
.cw-mso-trend-text { font-family: 'Lexend', sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(215,195,240,.72); }
.cw-mso-cat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-mso-cat {
    font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 700;
    padding: 8px 16px; border-radius: 99px;
    background: rgba(156,0,204,.1); border: 1.5px solid rgba(156,0,204,.2);
    color: rgba(200,155,255,.65); cursor: pointer; transition: all .13s; text-decoration: none;
}
.cw-mso-cat:active { background: rgba(156,0,204,.22); color: #d090ff; }

/* ── Auto-apply at narrow viewports (CSS-only fallback) ─ */
@media (max-width: 680px) {
    body:not(.desktop-force) {
        padding-top: 56px !important;
        padding-bottom: 80px !important;
        overflow-x: hidden;
        background: #080012;
    }
    body:not(.desktop-force) .cw-topbar,
    body:not(.desktop-force) .cw-sidebar,
    body:not(.desktop-force) .cw-sidebar-ad,
    body:not(.desktop-force) .cw-left-panel { display: none !important; }
    body:not(.desktop-force) .cw-mobile-header   { display: flex !important; }
    body:not(.desktop-force) .cw-mobile-bottomnav { display: flex !important; }
}