/* My Portfolio V4 — mobile-safe navigation, notifications, and layout */
html,body,#root{width:100%;min-height:100%;min-height:100dvh;max-width:100%;overflow-x:hidden}
body{overscroll-behavior-x:none}
img,video,canvas,svg{max-width:100%}

/* Notification dropdown: strong visible surface, never an empty opaque slab. */
.portfolio-notification-panel{display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid rgba(78,211,255,.28)!important;background:linear-gradient(165deg,rgba(5,12,26,.985),rgba(10,20,38,.985))!important;color:#e8f7ff!important;box-shadow:0 24px 80px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.04) inset!important;border-radius:18px!important}
.portfolio-notification-head{flex:0 0 auto;background:linear-gradient(90deg,rgba(34,211,238,.11),rgba(139,92,246,.09));color:#f6fbff}
.portfolio-notification-scroll{min-height:160px;background:rgba(1,7,18,.42)}
.portfolio-notification-item{overflow-wrap:anywhere;background:rgba(255,255,255,.018);color:#e8f7ff}
.portfolio-notification-item:hover{background:rgba(34,211,238,.07)}
.portfolio-notification-actions{flex-wrap:wrap;align-items:center}
.portfolio-notification-actions>button{min-height:34px}
.portfolio-notification-close{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.05);color:#fff;font:700 22px/1 system-ui;cursor:pointer}
.portfolio-notification-empty{display:grid;place-items:center;min-height:220px;padding:28px;text-align:center;color:#9eb4c6;font:600 13px/1.6 system-ui}

/* KV status is informative but must never block content. */
.portfolio-kv-status{position:fixed;left:12px;bottom:12px;z-index:9998;display:flex;align-items:center;gap:8px;max-width:min(420px,calc(100vw - 24px));padding:9px 12px;border:1px solid rgba(84,218,255,.25);border-radius:999px;background:rgba(4,12,25,.9);backdrop-filter:blur(16px);color:#c9f8ff;font:700 11px/1 system-ui;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 12px 40px #0008;transition:opacity .25s,transform .25s}
.portfolio-kv-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#5eead4;box-shadow:0 0 14px #5eead4;flex:0 0 auto}
.portfolio-kv-status[data-state="error"]::before{background:#fb7185;box-shadow:0 0 14px #fb7185}
.portfolio-kv-status.is-hidden{opacity:0;transform:translateY(18px);pointer-events:none}

/* Sidebar: fixed dimensions, readable contents, safe-area support. */
#navbar-sidebar{width:min(88vw,320px)!important;max-width:calc(100vw - 12px)!important;top:max(4rem,env(safe-area-inset-top))!important;bottom:0!important;height:auto!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(4,10,22,.995),rgba(7,15,29,.995))!important;color:#f7fbff!important;border-right:1px solid rgba(75,207,255,.22)!important;box-shadow:22px 0 70px rgba(0,0,0,.7)!important}
#navbar-sidebar a,#navbar-sidebar button,#navbar-sidebar span,#navbar-sidebar div{visibility:visible}
#navbar-sidebar [class*="overflow-y-auto"]{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#navbar-sidebar button:focus-visible,#navbar-sidebar a:focus-visible,.portfolio-notification-close:focus-visible{outline:3px solid #22d3ee;outline-offset:2px}

/* CTA and page width safeguards. */
a[href="/dashboard"],a[href="/projects"]{max-width:100%}
a[href="/dashboard"]>button,a[href="/projects"]>button{max-width:100%}

@media(max-width:640px){
  nav.fixed{height:max(4rem,calc(3.6rem + env(safe-area-inset-top)))!important;padding-top:env(safe-area-inset-top)!important;padding-left:10px!important;padding-right:10px!important}
  nav.fixed>div:last-child{gap:2px!important;flex:0 0 auto}
  nav.fixed>div:last-child button{width:38px!important;height:38px!important;min-width:38px!important}
  nav.fixed>a>div{gap:7px!important}
  nav.fixed>a .font-display{font-size:clamp(.86rem,4vw,1.08rem)!important;white-space:nowrap}
  #navbar-sidebar{top:max(4rem,calc(3.6rem + env(safe-area-inset-top)))!important;border-radius:0 18px 0 0}

  .portfolio-notification-wrapper{position:fixed!important;inset:max(4rem,calc(3.6rem + env(safe-area-inset-top))) 0 0 0!important;transform:none!important;width:100vw!important;height:auto!important;z-index:99999!important;pointer-events:none!important;display:flex!important;align-items:flex-start!important;justify-content:center!important;padding:10px!important}
  .portfolio-notification-panel{position:relative!important;inset:auto!important;right:auto!important;bottom:auto!important;left:auto!important;top:auto!important;transform:none!important;width:min(100%,460px)!important;max-width:none!important;height:min(620px,calc(100dvh - max(4rem,calc(3.6rem + env(safe-area-inset-top))) - 20px))!important;max-height:none!important;pointer-events:auto!important;border-radius:18px!important}
  .portfolio-notification-scroll{height:auto!important;max-height:none!important;min-height:0!important;flex:1 1 auto!important}
  .portfolio-notification-head{position:sticky;top:0;z-index:3;padding:13px 14px!important;backdrop-filter:blur(18px)}
  .portfolio-notification-close{display:inline-flex}
  .portfolio-notification-item{padding:14px!important}
  .portfolio-notification-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .portfolio-notification-actions>button{width:100%;justify-content:center!important;height:38px!important}
  .portfolio-kv-status{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-width:none;justify-content:center;text-align:center;font-size:10px}
  a[href="/dashboard"],a[href="/projects"]{display:block!important;width:min(100%,320px)!important}
  a[href="/dashboard"]>button,a[href="/projects"]>button{width:100%!important;min-width:0!important}
}

@media(max-width:380px){
  nav.fixed>a svg{width:28px;height:28px}
  nav.fixed>a .font-display{font-size:.82rem!important;letter-spacing:-.02em!important}
  nav.fixed>div:last-child button{width:34px!important;height:34px!important;min-width:34px!important}
  .portfolio-notification-actions{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}