/* My Portfolio V5 — notification center redesigned as a chat conversation */
:root{--pn-bg:#030915;--pn-surface:#07111f;--pn-surface-2:#0a1828;--pn-line:rgba(103,232,249,.18);--pn-cyan:#45e6f5;--pn-text:#edfaff;--pn-muted:#8da4b7}

/* Popover shell */
.portfolio-notification-panel{
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
  width:min(410px,calc(100vw - 24px))!important;max-width:none!important;
  height:min(620px,calc(100dvh - 92px))!important;max-height:none!important;
  padding:0!important;border:1px solid rgba(69,230,245,.25)!important;border-radius:22px!important;
  background:radial-gradient(circle at 80% 0,rgba(34,211,238,.09),transparent 30%),linear-gradient(180deg,rgba(4,11,23,.995),rgba(2,8,18,.995))!important;
  color:var(--pn-text)!important;box-shadow:0 30px 90px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.025) inset!important;
  isolation:isolate!important;
}
.portfolio-notification-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 43%,rgba(69,230,245,.025) 50%,transparent 57%);z-index:-1}

/* Chat-style header */
.portfolio-notification-head{
  position:relative!important;display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center!important;gap:11px!important;
  min-height:70px!important;padding:11px 12px!important;border-bottom:1px solid var(--pn-line)!important;
  background:rgba(5,14,28,.96)!important;backdrop-filter:blur(22px)!important;color:var(--pn-text)!important;
}
.portfolio-notification-head::before{
  content:"🔔";display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(69,230,245,.38);border-radius:50%;
  background:linear-gradient(145deg,rgba(34,211,238,.18),rgba(14,116,144,.06));font-size:18px;box-shadow:0 0 25px rgba(34,211,238,.13);
}
.portfolio-notification-title-wrap{min-width:0;display:flex;flex-direction:column;gap:2px}
.portfolio-notification-head h4{margin:0!important;color:#fff!important;font:700 14px/1.15 "Oswald",system-ui,sans-serif!important;letter-spacing:.17em!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.portfolio-notification-subtitle{color:#7ddfea;font:700 9px/1.2 "Space Grotesk",system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.portfolio-notification-unread{justify-self:end!important;margin-right:42px!important;padding:4px 7px!important;border:1px solid rgba(69,230,245,.2)!important;border-radius:999px!important;background:rgba(34,211,238,.08)!important;color:#8ff4ff!important;font:700 9px/1 system-ui!important;white-space:nowrap!important}
.portfolio-notification-close{position:absolute!important;right:10px!important;top:50%!important;transform:translateY(-50%)!important;display:inline-grid!important;place-items:center!important;width:34px!important;height:34px!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#9eb1c2!important;font:400 23px/1 system-ui!important;cursor:pointer!important;transition:background .18s,color .18s,transform .18s!important}
.portfolio-notification-close:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;transform:translateY(-50%) rotate(6deg)!important}

/* Conversation area */
.portfolio-notification-scroll{
  flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;
  padding:18px 12px 22px!important;background:linear-gradient(180deg,rgba(3,9,20,.56),rgba(3,9,20,.88))!important;
  scrollbar-width:thin;scrollbar-color:rgba(69,230,245,.34) transparent;
}
.portfolio-notification-scroll>div{min-width:0}
.portfolio-notification-item{
  position:relative!important;display:grid!important;grid-template-columns:39px minmax(0,1fr)!important;column-gap:10px!important;row-gap:0!important;
  padding:9px 4px!important;margin:0 0 8px!important;border:0!important;background:transparent!important;color:var(--pn-text)!important;overflow:visible!important;
}
.portfolio-notification-item::before{
  content:"i";grid-column:1!important;grid-row:1 / span 3!important;display:grid;place-items:center;width:36px;height:36px;margin-top:1px;
  border:1px solid rgba(69,230,245,.32);border-radius:50%;background:linear-gradient(145deg,#0b2433,#07111f);color:#73effa;
  font:800 15px/1 Georgia,serif;box-shadow:0 8px 24px rgba(0,0,0,.34),0 0 18px rgba(34,211,238,.08);
}
.portfolio-notification-item[class*="bg-primary"]::before{content:"●";font-size:10px;color:#4ff4d0;box-shadow:0 0 0 3px rgba(79,244,208,.06),0 8px 24px rgba(0,0,0,.34)}
.portfolio-notification-item>div:first-of-type,
.portfolio-notification-item>p,
.portfolio-notification-item>.portfolio-notification-actions{grid-column:2!important;min-width:0!important}
.portfolio-notification-item>div:first-of-type{
  position:relative!important;z-index:1!important;display:flex!important;align-items:center!important;gap:8px!important;
  margin:0!important;padding:10px 12px 2px!important;border:1px solid rgba(255,255,255,.065)!important;border-bottom:0!important;border-radius:16px 16px 0 0!important;
  background:linear-gradient(155deg,rgba(13,29,48,.96),rgba(7,18,33,.96))!important;
}
.portfolio-notification-item>div:first-of-type span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#80edfa!important;font:700 11px/1.25 "Space Grotesk",system-ui,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase!important}
.portfolio-notification-item>div:first-of-type span:last-child{margin-left:auto!important;color:#758ca0!important;font:600 9px/1 system-ui!important;white-space:nowrap!important}
.portfolio-notification-item>p{
  margin:0!important;padding:7px 12px 11px!important;border-left:1px solid rgba(255,255,255,.065)!important;border-right:1px solid rgba(255,255,255,.065)!important;
  background:linear-gradient(155deg,rgba(13,29,48,.96),rgba(7,18,33,.96))!important;color:#e8f7ff!important;font:400 13px/1.55 "Roboto Condensed",system-ui,sans-serif!important;overflow-wrap:anywhere!important;
}
.portfolio-notification-item>p.text-destructive{color:#ffb4c0!important}
.portfolio-notification-actions{
  display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important;padding:8px 10px 10px!important;
  border:1px solid rgba(255,255,255,.065)!important;border-top:1px solid rgba(255,255,255,.045)!important;border-radius:0 0 16px 16px!important;
  background:linear-gradient(155deg,rgba(12,27,45,.96),rgba(6,16,30,.96))!important;
}
.portfolio-notification-actions>button{min-width:0!important;height:29px!important;padding:0 9px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;background:rgba(255,255,255,.025)!important;color:#adc1d1!important;font-size:9px!important;letter-spacing:.05em!important}
.portfolio-notification-actions>button:hover{border-color:rgba(69,230,245,.3)!important;background:rgba(34,211,238,.08)!important;color:#eaffff!important}

/* Empty conversation state */
.portfolio-notification-empty{
  min-height:100%!important;display:grid!important;place-content:center!important;justify-items:center!important;gap:0!important;padding:40px 24px!important;text-align:center!important;color:var(--pn-muted)!important;
}
.portfolio-notification-empty::before{
  content:"◯";display:grid;place-items:center;width:62px;height:62px;margin-bottom:15px;border:1px solid rgba(69,230,245,.32);border-radius:20px;
  background:radial-gradient(circle,rgba(34,211,238,.14),rgba(34,211,238,.025));color:#5cebf7;font:300 34px/1 system-ui;box-shadow:0 0 34px rgba(34,211,238,.09);
}
.portfolio-notification-empty strong{display:block;margin-bottom:7px;color:#f5fbff;font:700 13px/1.25 "Oswald",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.portfolio-notification-empty span{display:block;max-width:270px;color:#8299aa;font:400 12px/1.6 "Roboto Condensed",system-ui,sans-serif}

/* Composer-like footer: informational, not a fake text field */
.portfolio-notification-chat-footer{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:10px 11px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--pn-line);
  background:rgba(4,12,24,.98);backdrop-filter:blur(18px)
}
.portfolio-notification-chat-status{min-width:0;flex:1;height:40px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:#050c17;color:#6f879a;font:500 11px/1 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.portfolio-notification-chat-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#47e9c8;box-shadow:0 0 12px #47e9c8;flex:0 0 auto}
.portfolio-notification-footer-close{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(69,230,245,.35);border-radius:12px;background:linear-gradient(145deg,#22d3ee,#11a9bf);color:#031018;font:900 18px/1 system-ui;cursor:pointer;box-shadow:0 8px 24px rgba(34,211,238,.16)}

/* Mobile: same full-height behavior as the chat panel shown in the video. */
@media(max-width:640px){
  .portfolio-notification-wrapper{position:fixed!important;inset:max(4rem,calc(3.6rem + env(safe-area-inset-top))) 0 0!important;width:100vw!important;height:auto!important;padding:0!important;transform:none!important;display:block!important;z-index:99999!important;pointer-events:none!important}
  .portfolio-notification-panel{position:relative!important;inset:auto!important;transform:none!important;width:100vw!important;height:100%!important;max-height:none!important;border-left:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;pointer-events:auto!important}
  .portfolio-notification-head{min-height:68px!important;padding-left:13px!important;padding-right:13px!important}
  .portfolio-notification-scroll{padding:18px 10px 22px!important}
  .portfolio-notification-item{grid-template-columns:37px minmax(0,1fr)!important;column-gap:8px!important}
  .portfolio-notification-item::before{width:34px;height:34px}
  .portfolio-notification-actions{gap:5px!important}
  .portfolio-notification-actions>button{flex:1 1 auto!important;justify-content:center!important}
}
@media(max-width:370px){
  .portfolio-notification-head{grid-template-columns:40px minmax(0,1fr) auto!important;gap:8px!important}
  .portfolio-notification-head::before{width:38px;height:38px}
  .portfolio-notification-unread{display:none!important}
  .portfolio-notification-actions>button{flex:1 1 100%!important}
}

/* V6 — anchor the mobile notification chat to the visible portfolio shell.
   This overrides Radix's viewport-wide popper geometry when the site is
   previewed inside a centered mobile canvas, while remaining full-width on
   a real phone. */
@media (max-width:640px){
  .portfolio-notification-wrapper{
    position:fixed!important;
    inset:auto!important;
    top:var(--pn-notification-top,max(4rem,calc(3.6rem + env(safe-area-inset-top))))!important;
    left:var(--pn-app-left,0px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--pn-app-width,100vw)!important;
    min-width:0!important;
    max-width:none!important;
    height:calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,max(4rem,calc(3.6rem + env(safe-area-inset-top)))))!important;
    padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    overflow:visible!important;
    transform:none!important;
    pointer-events:none!important;
    z-index:99999!important;
    box-sizing:border-box!important;
  }

  .portfolio-notification-panel{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    transform-origin:top right!important;
    flex:0 1 410px!important;
    width:min(410px,100%)!important;
    min-width:0!important;
    max-width:100%!important;
    height:min(620px,calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,max(4rem,calc(3.6rem + env(safe-area-inset-top)))) - 16px))!important;
    min-height:min(360px,calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,max(4rem,calc(3.6rem + env(safe-area-inset-top)))) - 16px))!important;
    max-height:calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,max(4rem,calc(3.6rem + env(safe-area-inset-top)))) - 16px)!important;
    margin:0!important;
    border-radius:18px!important;
    pointer-events:auto!important;
    box-sizing:border-box!important;
  }

  .portfolio-notification-head{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .portfolio-notification-title-wrap{min-width:0!important;overflow:hidden!important}
  .portfolio-notification-unread{margin-right:38px!important;max-width:72px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .portfolio-notification-scroll{overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  .portfolio-notification-item{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .portfolio-notification-item>div:first-of-type,
  .portfolio-notification-item>p,
  .portfolio-notification-actions{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}

/* A real narrow phone should use nearly all available width, with balanced
   edge spacing and no horizontal clipping. */
@media (max-width:480px){
  .portfolio-notification-wrapper{
    padding-left:max(6px,env(safe-area-inset-left))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
  }
  .portfolio-notification-panel{
    flex-basis:100%!important;
    width:100%!important;
    border-radius:16px!important;
  }
}

/* Short landscape phones: keep every control reachable through one internal
   scroll area rather than letting the panel escape the viewport. */
@media (max-width:640px) and (max-height:520px){
  .portfolio-notification-wrapper{padding-top:4px!important;padding-bottom:max(4px,env(safe-area-inset-bottom))!important}
  .portfolio-notification-panel{
    height:calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,56px) - 8px)!important;
    min-height:0!important;
    max-height:calc(var(--pn-visual-height,100dvh) - var(--pn-notification-top,56px) - 8px)!important;
    border-radius:14px!important;
  }
  .portfolio-notification-head{min-height:58px!important;padding-top:7px!important;padding-bottom:7px!important}
  .portfolio-notification-chat-footer{padding-top:6px!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
}