/* ════════════════════════════════════════════════════════════════ KricSnap App Shell — Phase 3 (2026-05-17) Loaded via on every page that has . The accompanying JS (app-shell.js) injects the sidebar/mobile-top/bottom-bar HTML. Hides the legacy top-header + the prior PWA app-tabbar. ════════════════════════════════════════════════════════════════ */ body.app-shell-on .top-header { display: none !important; } body.app-shell-on .app-tabbar { display: none !important; } /* ─── Desktop left sidebar ─────────────────────────────────────── */ .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: rgba(10,22,40,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-right: 1px solid rgba(154,176,200,0.25); display: flex; flex-direction: column; padding: 20px 12px 16px; z-index: 60; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; } .app-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 18px; text-decoration: none; color: #fff; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; } .app-sidebar-logo .accent { color: #f4c430; } .app-sidebar-logo img { height: 28px; width: auto; } .app-sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .app-nav-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-decoration: none; color: #9ab0c8; font-size: 15px; font-weight: 600; border-radius: 10px; transition: all 120ms ease; width: 100% !important; margin-top: 0 !important; background: transparent !important; border: 0; text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; font-family: inherit; } .app-nav-item:hover { background: rgba(255,255,255,0.05) !important; color: #fff; } .app-nav-item.is-active { background: rgba(244,196,48,0.08) !important; color: #f4c430; } .app-nav-icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .app-nav-label { flex: 1; } .app-nav-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; background: #f4c430; color: #0a1628; padding: 2px 7px; border-radius: 999px; } .app-sidebar-profile { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(154,176,200,0.25); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; color: #fff; text-decoration: none; transition: background 120ms ease; } .app-sidebar-profile:hover { background: rgba(255,255,255,0.05); } .app-sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6a7d92, #9ab0c8); color: #0a1628; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; } .app-sidebar-avatar.is-agentic { background: linear-gradient(135deg, #f4c430, #ff9e2c); box-shadow: 0 0 0 2px rgba(244,196,48,0.5); } .app-sidebar-profile-name { font-size: 13px; font-weight: 700; line-height: 1.2; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-sidebar-profile-id { font-size: 11px; color: #9ab0c8; line-height: 1.2; margin-top: 2px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stumps — verified-only "end of session" affordance under the pill. */ .app-sidebar-profile-wrap { display: flex; flex-direction: column; } .app-sidebar-stumps { margin: 4px 6px 0; padding: 7px 12px; background: transparent; color: #9ab0c8; border: 1px solid rgba(154,176,200,0.25); border-radius: 999px; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; width: auto !important; /* override global button width:100% */ align-self: stretch; } .app-sidebar-stumps:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.06); } .app-sidebar-stumps[hidden] { display: none; } /* Push main content right of the sidebar on desktop */ body.app-shell-on { padding-left: 0; } @media (min-width: 761px) { body.app-shell-on > main, body.app-shell-on > .wrap, body.app-shell-on > .wrap-wide, body.app-shell-on > .wrap-extra, body.app-shell-on > section, body.app-shell-on > footer { margin-left: 240px; } } /* Top-right floating Create + Notification (desktop) */ .app-top-actions { position: fixed; top: 14px; right: 18px; z-index: 55; display: flex; align-items: center; gap: 10px; } .app-icon-btn { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(154,176,200,0.25) !important; color: #fff; width: 40px !important; height: 40px; padding: 0 !important; margin-top: 0 !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; text-transform: none; letter-spacing: 0; transition: all 120ms ease; text-decoration: none; position: relative; } .app-icon-btn:hover { background: rgba(244,196,48,0.1) !important; border-color: #f4c430 !important; color: #f4c430; } .app-icon-btn.is-plus { background: #f4c430 !important; border-color: #f4c430 !important; color: #0a1628; font-size: 22px; font-weight: 800; } .app-icon-btn .badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; background: #ff6b6b; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; display: none; align-items: center; justify-content: center; } .app-icon-btn .badge.is-visible { display: flex; } /* ─── Mobile top (logo + bell + plus) ──────────────────────────── */ .app-mobile-top { position: sticky; top: 0; z-index: 50; background: rgba(10,22,40,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(154,176,200,0.25); padding: 10px 14px; align-items: center; justify-content: space-between; display: none; } .app-mobile-top .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-size: 18px; font-weight: 900; } .app-mobile-top .logo .accent { color: #f4c430; } .app-mobile-top .logo img { height: 24px; width: auto; } .app-mobile-top .actions { display: flex; align-items: center; gap: 8px; } .app-mobile-top .actions .app-icon-btn { width: 36px !important; height: 36px; font-size: 16px; } .app-mobile-top .actions .app-icon-btn.is-plus { font-size: 20px; } /* ─── Mobile bottom tab bar (Wall / Clips / Shop / You) ───────── */ .app-bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: rgba(10,22,40,0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(154,176,200,0.25); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); display: none; grid-template-columns: repeat(4, 1fr); box-shadow: 0 -4px 22px rgba(0,0,0,0.4); } .app-bottombar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; color: rgba(154,176,200,0.85); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .app-bottombar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-bottombar a.is-active { color: #f4c430; } .app-bottombar .avatar-dot { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #6a7d92, #9ab0c8); color: #0a1628; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .app-bottombar a.is-active .avatar-dot { background: linear-gradient(135deg, #f4c430, #ff9e2c); } /* ─── Create sheet (overlay) ──────────────────────────────────── */ .create-sheet { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; } .create-sheet.is-open { display: flex; animation: createFadeIn 200ms ease; } @keyframes createFadeIn { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,0.6); } } .create-sheet-inner { background: #1e3a5f; border-top: 1px solid #f4c430; border-radius: 18px 18px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); width: 100%; max-width: 420px; box-shadow: 0 -10px 40px rgba(0,0,0,0.5); animation: createSlideUp 220ms cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes createSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (min-width: 761px) { .create-sheet { align-items: center; } .create-sheet-inner { border-radius: 18px; border: 1px solid #f4c430; max-width: 420px; animation: none; } } .create-sheet h4 { margin: 0 0 6px; color: #f4c430; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; text-align: center; } .create-sheet .title { text-align: center; font-size: 18px; font-weight: 800; margin: 0 0 18px; color: #fff; } .create-sheet-options { display: flex; flex-direction: column; gap: 10px; } .create-sheet-option { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(154,176,200,0.25); border-radius: 12px; text-decoration: none; color: #fff; transition: all 120ms ease; } .create-sheet-option:hover { border-color: #f4c430; background: rgba(244,196,48,0.06); } .create-sheet-option .icon { font-size: 28px; flex-shrink: 0; width: 44px; height: 44px; background: rgba(244,196,48,0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .create-sheet-option .meta { flex: 1; } .create-sheet-option .name { font-size: 15px; font-weight: 800; color: #fff; } .create-sheet-option .sub { font-size: 12px; color: #9ab0c8; margin-top: 3px; } .create-sheet-option .badge { font-size: 9px; font-weight: 800; letter-spacing: 0.08em; background: rgba(244,196,48,0.18); color: #f4c430; padding: 3px 8px; border-radius: 999px; } .create-sheet-cancel { margin-top: 14px; text-align: center; font-size: 13px; color: #9ab0c8; background: none !important; border: 0 !important; width: 100% !important; padding: 12px !important; cursor: pointer; text-transform: none; letter-spacing: 0; } /* ─── Responsive switching ─────────────────────────────────── */ @media (max-width: 760px) { body.app-shell-on .app-sidebar { display: none; } body.app-shell-on > main, body.app-shell-on > .wrap, body.app-shell-on > .wrap-wide, body.app-shell-on > .wrap-extra, body.app-shell-on > section, body.app-shell-on > footer { margin-left: 0; padding-bottom: 90px; } body.app-shell-on .app-top-actions { display: none; } body.app-shell-on .app-mobile-top { display: flex; } body.app-shell-on .app-bottombar { display: grid; } } @media (min-width: 761px) { body.app-shell-on .app-mobile-top, body.app-shell-on .app-bottombar { display: none !important; } }