/* Vchat 0.60.1-alpha · Nexo UI Refinement
 * Final scoped visual correction for navigation counters, hover states,
 * highlighted KPI surfaces and animated conversation loading.
 * This layer intentionally does not rewrite legacy release styles.
 */

#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo{
  --vchat-nexo-card-gradient:linear-gradient(120deg,#8B5CF6 0%,#6366F1 46%,#38BDF8 100%);
  --vchat-nexo-card-gradient-hover:linear-gradient(120deg,#7C3AED 0%,#4F46E5 46%,#0EA5E9 100%);
  --vchat-nexo-soft-hover:linear-gradient(135deg,rgba(99,102,241,.075),rgba(56,189,248,.075));
}

/* --------------------------------------------------------------------------
 * Sidebar: counters + hover/active contrast
 * ----------------------------------------------------------------------- */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button{
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button:hover:not(.is-active){
  background:var(--vchat-nexo-soft-hover)!important;
  color:#3730A3!important;
  -webkit-text-fill-color:#3730A3!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button:hover:not(.is-active)>span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button:hover:not(.is-active)>i{
  color:#3730A3!important;
  -webkit-text-fill-color:#3730A3!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button.is-active{
  background:linear-gradient(90deg,#EEF2FF 0%,#F0F9FF 100%)!important;
  color:#3730A3!important;
  -webkit-text-fill-color:#3730A3!important;
  box-shadow:inset 3px 0 0 #6366F1!important;
}

/* The task count previously inherited the parent's text-fill color on Safari/
 * Chrome, making the numeral disappear. Give the counter its own paint stack. */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo #vchat-task-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:24px!important;
  width:auto!important;
  height:24px!important;
  margin-left:auto!important;
  padding:0 7px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:999px!important;
  background:var(--vchat-nexo-card-gradient)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  font-size:10px!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:0 1px 1px rgba(15,23,42,.14)!important;
  box-shadow:0 4px 12px rgba(99,102,241,.20)!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button[data-vchat-section="tasks"]:hover #vchat-task-badge,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-primary-nav button[data-vchat-section="tasks"].is-active #vchat-task-badge{
  background:var(--vchat-nexo-card-gradient-hover)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  box-shadow:0 5px 14px rgba(79,70,229,.24)!important;
}

/* Keep AI credit count readable under every parent state as well. */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo #vchat-nav-ai-credits{
  color:#4338CA!important;
  -webkit-text-fill-color:#4338CA!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo #vchat-nav-ai-credits.is-empty{
  color:#64748B!important;
  -webkit-text-fill-color:#64748B!important;
}

/* --------------------------------------------------------------------------
 * Retired flat-purple highlight cards -> official Nexo surfaces
 * ----------------------------------------------------------------------- */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child{
  position:relative!important;
  overflow:hidden!important;
  background:var(--vchat-nexo-card-gradient)!important;
  border-color:transparent!important;
  color:#FFFFFF!important;
  box-shadow:0 16px 36px rgba(79,70,229,.14)!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child::after,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child::after,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score::after,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child::after{
  content:"";
  position:absolute;
  top:-44px;
  right:-38px;
  width:138px;
  height:138px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child small,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child strong,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child small,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child strong,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score small,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score strong,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score p,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child small,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child strong,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child span{
  position:relative!important;
  z-index:1!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  opacity:1!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-library-kpis article:first-child span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-kpis article:first-child span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score small,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score p,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-ai-kpis article:first-child span{
  color:rgba(255,255,255,.86)!important;
  -webkit-text-fill-color:rgba(255,255,255,.86)!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score>span,
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score>b{
  position:relative!important;
  z-index:1!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.14)!important;
  color:#FFFFFF!important;
  -webkit-text-fill-color:#FFFFFF!important;
  backdrop-filter:blur(8px)!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-connection-overview>article.vchat-connection-score>b.is-success{
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.92)!important;
  color:#047857!important;
  -webkit-text-fill-color:#047857!important;
}

/* Nexo also owns the marketing progress accent; no isolated legacy purple bar. */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-marketing-funnel i:after{
  background:var(--vchat-nexo-card-gradient)!important;
}

/* --------------------------------------------------------------------------
 * Inbox loading: animate with official Nexo GIF / bundled fallback
 * ----------------------------------------------------------------------- */
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading{
  width:min(440px,calc(100% - 32px))!important;
  min-height:150px!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  column-gap:16px!important;
  row-gap:11px!important;
  padding:24px!important;
  border:1px solid transparent!important;
  border-radius:22px!important;
  background:
    linear-gradient(#FFFFFF,#FFFFFF) padding-box,
    linear-gradient(135deg,rgba(139,92,246,.30),rgba(99,102,241,.24) 48%,rgba(56,189,248,.32)) border-box!important;
  box-shadow:0 20px 52px rgba(15,23,42,.10),0 8px 26px rgba(99,102,241,.06)!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading-icon{
  position:relative!important;
  width:64px!important;
  height:64px!important;
  border:0!important;
  border-radius:18px!important;
  background-color:transparent!important;
  background-image:var(--vchat-brand-animated-url)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  font-size:0!important;
  box-shadow:0 10px 26px rgba(99,102,241,.10)!important;
  filter:drop-shadow(0 7px 13px rgba(99,102,241,.13));
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading-icon::after{
  content:"";
  position:absolute;
  inset:-5px!important;
  border-radius:22px!important;
  border:1px solid rgba(99,102,241,.10)!important;
  box-shadow:0 0 0 6px rgba(56,189,248,.035)!important;
  pointer-events:none!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading strong{
  color:#0F172A!important;
  -webkit-text-fill-color:#0F172A!important;
  font-size:15px!important;
  line-height:1.25!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading small{
  margin-top:5px!important;
  color:#64748B!important;
  -webkit-text-fill-color:#64748B!important;
  font-size:11px!important;
  line-height:1.45!important;
}
#vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading>i{
  height:7px!important;
  background:linear-gradient(90deg,#EEF2FF 0%,#E0F2FE 36%,#F3E8FF 62%,#EEF2FF 100%)!important;
  background-size:220% 100%!important;
  animation:vchatNexoLoadingShimmer 1.35s linear infinite!important;
}
@keyframes vchatNexoLoadingShimmer{to{background-position:-220% 0}}

/* Small screens retain the animated mark without crowding the transcript. */
@media(max-width:560px){
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading{
    width:calc(100% - 20px)!important;
    min-height:134px!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    padding:18px!important;
    border-radius:18px!important;
  }
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo .vchat-chat-loading-icon{
    width:52px!important;
    height:52px!important;
    border-radius:15px!important;
  }
  #vchat-frontend-app.vchat-frontend-app.vchat-identity-nexo #vchat-task-badge{
    min-width:22px!important;
    height:22px!important;
    padding:0 6px!important;
  }
}