/* 20260726: layout, process-button, header, story badge, OTP, design variables and chat-theme polish. */
:root{
  --pn-user-primary:#1877f2;
  --pn-user-accent:#7c3aed;
  --pn-user-header-action-bg:#dce8f8;
  --pn-user-header-action-hover:#c7d7ee;
  --pn-user-text:#0f172a;
  --pn-user-muted:#475569;
  --pn-user-card-a:#ffffff;
  --pn-user-card-b:#eff6ff;
  --pn-user-card-c:#fff7ed;
  --pn-user-card-d:#fdf2f8;
}
@keyframes pnSoftDesignFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Admin-managed user panel visual variables. */
body[data-page]{
  background:var(--pn-site-bg,#e7e9ed)!important;
  color:var(--pn-user-text,#0f172a);
}
body[data-page] .content .card,
body[data-page] .content .post,
body[data-page] .content .composer,
body[data-page] .content .pnj-card,
body[data-page] .content .pnj-hero,
body[data-page] .content .wallet-pro-hero,
body[data-page] .content .wallet-account-card,
body[data-page] .content .wallet-kpi,
body[data-page] .content .wallet-panel,
body[data-page] .content .seller-card,
body[data-page] .content .seller-panel,
body[data-page] .content .market-card,
body[data-page] .content .page-card,
body[data-page] .content .group-card,
body[data-page] .content .profile-card{
  background:linear-gradient(135deg,var(--pn-user-card-a),var(--pn-user-card-b),var(--pn-user-card-c),var(--pn-user-card-d))!important;
  background-size:260% 260%!important;
  animation:pnSoftDesignFlow 14s ease-in-out infinite!important;
  color:var(--pn-user-text)!important;
  border-color:rgba(148,163,184,.35)!important;
}
body[data-page] .content :where(.card,.post,.composer,.pnj-card,.pnj-hero,.wallet-pro-hero,.wallet-account-card,.wallet-kpi,.wallet-panel,.seller-card,.seller-panel,.market-card,.page-card,.group-card,.profile-card) :where(h1,h2,h3,h4,h5,h6,p,span,strong,b,small,li,label,div){
  color:inherit;
}
body[data-page] .content :where(.card,.post,.composer,.pnj-card,.pnj-hero,.wallet-pro-hero,.wallet-account-card,.wallet-kpi,.wallet-panel,.seller-card,.seller-panel,.market-card,.page-card,.group-card,.profile-card) :where(small,.muted,.hint,.text-muted){
  color:var(--pn-user-muted)!important;
}

/* Jobs desktop alignment: keep left sidebar, jobs content and right sidebar on the same row. */
@media (min-width:1181px){
  body[data-page="jobs"] .app-layout{
    width:min(100% - 20px,1540px)!important;
    grid-template-columns:minmax(210px,238px) minmax(0,1fr) minmax(270px,310px)!important;
    gap:12px!important;
    align-items:start!important;
    margin-top:12px!important;
  }
  body[data-page="jobs"] .app-layout>.left-sidebar,
  body[data-page="jobs"] .app-layout>.content,
  body[data-page="jobs"] .app-layout>.right-sidebar{
    align-self:start!important;
    margin-top:0!important;
  }
  body[data-page="jobs"] .content{padding-top:0!important;max-width:none!important;overflow:visible!important;}
  body[data-page="jobs"] .content>.pnj-card,
  body[data-page="jobs"] .content>.pnj-hero,
  body[data-page="jobs"] .content>.job-card,
  body[data-page="jobs"] .content>.smart-jobs-list{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;}
  body[data-page="jobs"] .right-sidebar{display:grid!important;gap:12px!important;}
}

/* Button process state: label stays inside button and size does not jump. */
button.pn-action-processing,
a.pn-action-processing,
[role="button"].pn-action-processing,
input[type="submit"].pn-action-processing{
  position:relative!important;
  pointer-events:none!important;
  cursor:wait!important;
  opacity:.88!important;
  white-space:nowrap!important;
  min-width:var(--pn-action-min-width,auto)!important;
}
button.pn-action-processing::before,
a.pn-action-processing::before,
[role="button"].pn-action-processing::before{
  content:"";
  width:12px;height:12px;flex:0 0 12px;display:inline-block;margin-right:7px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;vertical-align:-2px;animation:pnBtnSpin .75s linear infinite;
}
button.pn-action-processing .pn-action-label,
a.pn-action-processing .pn-action-label{white-space:nowrap;}
@keyframes pnBtnSpin{to{transform:rotate(360deg)}}

/* Story count badge must overlap the DP: half on the avatar and half outside. */
.stories .story{position:relative!important;overflow:visible!important;}
.stories .story b{
  position:absolute!important;z-index:7!important;top:28px!important;right:8px!important;display:grid!important;place-items:center!important;
  width:18px!important;height:18px!important;min-width:18px!important;padding:0!important;border:2px solid #fff!important;border-radius:999px!important;
  background:linear-gradient(135deg,var(--pn-user-primary),var(--pn-user-accent))!important;color:#fff!important;font-size:9px!important;line-height:1!important;
  box-shadow:0 5px 12px rgba(24,119,242,.28)!important;
}
@media(max-width:700px){.stories .story b{top:26px!important;right:7px!important}}

/* Header action buttons: darker and full-size tap background. */
.top-actions summary,
.top-actions>a:not(.mini-avatar),
.header-tools-dropdown>summary,
.header-popover>summary,
.header-language-menu>summary,
.profile-dropdown>summary,
.mobile-header-shortcut{
  background:var(--pn-user-header-action-bg)!important;
  min-width:42px!important;height:42px!important;border-radius:14px!important;
  display:inline-grid!important;place-items:center!important;border:1px solid rgba(100,116,139,.24)!important;
  color:#0f274a!important;box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
.top-actions summary:hover,
.top-actions>a:not(.mini-avatar):hover,
.header-tools-dropdown>summary:hover,
.header-popover>summary:hover,
.header-language-menu>summary:hover,
.profile-dropdown>summary:hover,
.mobile-header-shortcut:hover{background:var(--pn-user-header-action-hover)!important;}
.top-actions .header-popover summary b{top:-4px!important;right:-4px!important;}

/* Header notification/message popups scroll correctly and keep full-notification link visible. */
.header-popover-panel{
  width:min(430px,calc(100vw - 20px))!important;
  max-height:min(72vh,620px)!important;overflow-y:auto!important;overscroll-behavior:contain!important;
  scrollbar-width:thin!important;display:grid!important;grid-template-rows:auto!important;
}
.header-popover-panel h3{position:sticky;top:0;z-index:2;margin:-2px -2px 4px!important;padding:8px 4px!important;background:inherit!important;}
.header-popover-panel .header-show-more{position:sticky;bottom:0;z-index:2;margin-top:4px!important;background:#eef4ff!important;color:var(--pn-user-primary)!important;}
.header-popover-panel .header-show-more::after{content:"  → Full notifications";font-weight:900;}
.message-link .header-popover-panel .header-show-more::after{content:"  → Full chat";}

/* Profile dropdown: larger but viewport-safe. */
.profile-dropdown-panel{
  width:min(360px,calc(100vw - 16px))!important;max-width:calc(100vw - 16px)!important;max-height:min(78vh,680px)!important;
  overflow:auto!important;right:0!important;left:auto!important;padding:12px!important;border-radius:20px!important;
}
.profile-dropdown-panel a,
.profile-dropdown-panel label{min-height:42px!important;border-radius:12px!important;font-size:13px!important;}
.profile-dropdown-panel select{max-width:100%!important;}
@media(max-width:640px){
  .profile-dropdown-panel,.header-popover-panel,.header-tools-panel,.header-language-panel{position:fixed!important;left:8px!important;right:8px!important;top:66px!important;width:auto!important;max-width:none!important;}
}

/* OTP verification page centered in content, with right sidebar supported when present. */
body[data-page="verify-email"] .app-layout{align-items:start!important;}
body[data-page="verify-email"] .content{display:grid!important;place-items:start center!important;min-width:0!important;}
body[data-page="verify-email"] .pn-email-verify{width:min(650px,100%)!important;margin:0 auto!important;}
body[data-page="verify-email"] .right-sidebar{align-self:start!important;}
@media(min-width:1181px){body[data-page="verify-email"] .app-layout{width:min(100% - 28px,1480px)!important;grid-template-columns:minmax(210px,240px) minmax(0,1fr) minmax(270px,310px)!important;gap:16px!important;}}

/* Chat icon/call/video and theme contrast. */
body[data-page="chat"] .chat-header-actions summary,
body[data-page="chat"] .chat-header-actions .call-buttons>button,
body[data-page="chat"] .message-form button,
body[data-page="chat"] .chat-attachment-toggle,
body[data-page="chat"] .chat-attachment-menu label,
body[data-page="chat"] .chat-attachment-menu button{
  background:linear-gradient(135deg,#edf6ff,#f3e8ff)!important;color:#0f3d79!important;border:1px solid rgba(99,102,241,.16)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
}
body[data-page="chat"] .chat-header-actions .call-buttons>button i,
body[data-page="chat"] .chat-header-actions summary i{color:inherit!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .conversation,
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .conversation,
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .conversation{color:#f8fafc!important;background:linear-gradient(135deg,#07152f,#172554,#312e81)!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .message-stream,
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .message-stream,
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .message-stream{background:transparent!important;color:#f8fafc!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .conversation-header,
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .conversation-header,
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .conversation-header{background:rgba(15,23,42,.62)!important;border-color:rgba(255,255,255,.12)!important;color:#f8fafc!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .conversation-header :where(strong,small,span),
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .conversation-header :where(strong,small,span),
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .conversation-header :where(strong,small,span){color:#f8fafc!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .message:not(.mine)>p,
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .message:not(.mine)>p,
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .message:not(.mine)>p{background:rgba(255,255,255,.12)!important;color:#f8fafc!important;border:1px solid rgba(255,255,255,.14)!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="midnight"] .message.mine>p,
body[data-page="chat"] .chat-shell[data-chat-theme="royal-night"] .message.mine>p,
body[data-page="chat"] .chat-shell[data-chat-theme="aurora-dark"] .message.mine>p{background:linear-gradient(135deg,#2563eb,#7c3aed)!important;color:#fff!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="sunset"] .message.mine>p{background:linear-gradient(135deg,#f97316,#db2777)!important;color:#fff!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="sunset"] .message:not(.mine)>p{background:#fff4e8!important;color:#54220d!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="prism"] .message.mine>p{background:linear-gradient(135deg,#7c3aed,#db2777,#f59e0b)!important;color:#fff!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="prism"] .message:not(.mine)>p{background:#f8f0ff!important;color:#3b1a57!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="gold"] .message.mine>p{background:linear-gradient(135deg,#b7791f,#f59e0b)!important;color:#fff!important;}
body[data-page="chat"] .chat-shell[data-chat-theme="gold"] .message:not(.mine)>p{background:#fff8db!important;color:#4a3400!important;}

/* Language menu polish. */
.header-language-panel{max-height:min(70vh,520px)!important;overflow:auto!important;}
.header-language-panel button{min-height:40px!important;}

/* Phase 2 selective inline star loader. Applied only to explicitly long actions. */
button.pn-action-processing::before,
a.pn-action-processing::before,
[role="button"].pn-action-processing::before{
  content:"✦"!important;border:0!important;width:14px!important;height:14px!important;line-height:14px!important;margin-right:7px!important;
  animation:pnStarSpin .85s linear infinite!important;transform-origin:center!important;
}
@keyframes pnStarSpin{0%{transform:rotate(0deg) scale(.78);opacity:.58}50%{transform:rotate(180deg) scale(1);opacity:1}100%{transform:rotate(360deg) scale(.78);opacity:.58}}