/* Fluid layer — loaded after the app's own styles. Keeps every theme colour and surface;
   only adds motion physics, glassy depth, icon tiles and the floating mobile tab bar. */
.app-shell,.cs-portal{--spring:cubic-bezier(.34,1.45,.64,1);--glide:cubic-bezier(.22,1,.36,1);--press:cubic-bezier(.3,0,.5,1);
  --gloss:inset 0 1px 0 rgba(255,255,255,.10);-webkit-tap-highlight-color:transparent}
.app-shell[data-theme="pink"],.app-shell[data-theme="white"]{--gloss:inset 0 1px 0 rgba(255,255,255,.9)}

/* ---- press physics: quick squeeze in, springy release ---- */
.app-shell button,.app-shell [role="button"],.cs-portal button{transition:transform .5s var(--spring),background-color .25s var(--glide),border-color .25s var(--glide),color .25s var(--glide),box-shadow .35s var(--glide),opacity .2s ease!important}
.app-shell button:hover{transform:none}
.app-shell button:active,.app-shell [role="button"]:active,.cs-portal button:active{transform:scale(.955)!important;transition-duration:.09s!important;transition-timing-function:var(--press)!important}
.app-shell button:disabled:active{transform:none!important}

/* ---- icons: rounded duotone ---- */
.app-shell svg [data-duo],.cs-portal svg [data-duo]{transition:opacity .35s var(--glide)}
.app-shell button:hover svg [data-duo]{opacity:.38}

/* ---- sidebar: icon tiles + glossy active pill ---- */
.app-shell .product-nav .side-nav-button{gap:12px!important;padding:6px 12px 6px 6px!important;min-height:44px;border-radius:14px!important}
.app-shell .product-nav .side-nav-button:hover{transform:none!important;background:color-mix(in srgb,var(--ui-text) 4.5%,transparent)!important}
.app-shell .product-nav .nav-icon{width:32px!important;height:32px!important;border-radius:10px;opacity:1!important;
  background:color-mix(in srgb,var(--ui-text) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-text) 7%,transparent),var(--gloss);
  transition:background .35s var(--glide),box-shadow .35s var(--glide),color .35s var(--glide),transform .5s var(--spring)}
.app-shell .product-nav .nav-icon svg{width:18px!important;height:18px!important}
.app-shell .product-nav .side-nav-button:hover .nav-icon{transform:scale(1.06)}
.app-shell .product-nav .side-nav-button[data-active="true"]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 20%,transparent),color-mix(in srgb,var(--ui-accent) 9%,transparent))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 26%,transparent),var(--gloss),0 10px 24px -14px var(--ui-accent)!important;
  animation:fluidNav .55s var(--spring) backwards}
.app-shell .product-nav .side-nav-button[data-active="true"] .nav-icon{color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 78%,#fff 22%),var(--ui-accent) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 14px -5px var(--ui-accent)}
.app-shell .product-nav .side-nav-button[data-active="true"] .nav-icon svg [data-duo]{opacity:.42}
.app-shell .product-nav .side-nav-button[data-active="true"]::before{left:-12px!important;top:11px!important;bottom:11px!important;width:4px!important;border-radius:0 4px 4px 0!important;
  box-shadow:0 0 14px 1px var(--ui-accent),0 0 4px var(--ui-accent);animation:fluidBar .6s var(--spring) backwards}
@keyframes fluidNav{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}
@keyframes fluidBar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---- header pills ---- */
.app-shell .app-search,.app-shell .app-streak{border-radius:999px!important;box-shadow:var(--gloss)!important}

/* ---- floating glass tab bar on phones ---- */
.app-shell .mobile-bottom-nav{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;padding:6px!important;gap:4px!important;border-radius:26px;
  border:1px solid var(--ui-divider)!important;background:color-mix(in srgb,var(--ui-panel,var(--ui-surface)) 76%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)!important;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.42),var(--gloss)!important;animation:fluidDock .7s var(--spring) backwards}
.app-shell .mobile-bottom-nav button{border-radius:20px!important;min-height:54px!important;background:transparent!important}
.app-shell .mobile-bottom-nav button[data-active="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-accent) 22%,transparent),color-mix(in srgb,var(--ui-accent) 10%,transparent))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 24%,transparent),var(--gloss)!important;animation:fluidNav .55s var(--spring) backwards}
.app-shell .mobile-bottom-nav button[data-active="true"] svg [data-duo]{opacity:.42}
@keyframes fluidDock{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* ---- screens glide in, sections cascade ---- */
.app-shell .screen-content>div{animation:fluidIn .6s var(--glide) backwards}
.app-shell .screen-content>div>*{animation:fluidRise .7s var(--glide) backwards}
.app-shell .screen-content>div>:nth-child(2){animation-delay:.05s}
.app-shell .screen-content>div>:nth-child(3){animation-delay:.1s}
.app-shell .screen-content>div>:nth-child(4){animation-delay:.15s}
.app-shell .screen-content>div>:nth-child(5){animation-delay:.2s}
.app-shell .screen-content>div>:nth-child(n+6){animation-delay:.24s}
@keyframes fluidIn{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes fluidRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.app-shell .content-area:has(.calendar-event-popover) *{animation:none!important}

/* ---- surfaces: softer lift with a glass edge ---- */
.app-shell .dashboard-hero,.app-shell .dashboard-briefs,.app-shell .dashboard-metrics,.app-shell .premium-panel,.app-shell .pomo-card,
.app-shell .performance-overview,.app-shell .performance-details,.app-shell .flash-stats,.app-shell .flash-deck-card,.app-shell .pipeline-column{
  transition:transform .6s var(--spring),box-shadow .45s var(--glide),background-color .3s var(--glide)!important}
.app-shell .dashboard-briefs,.app-shell .dashboard-metrics,.app-shell .premium-panel,.app-shell .pomo-card,.app-shell .performance-overview,.app-shell .flash-stats,.app-shell .flash-deck-card{box-shadow:var(--gloss)!important}
.app-shell .flash-deck-card:hover,.app-shell .dashboard-hero:hover{transform:translateY(-3px) scale(1.004)!important}
.app-shell .pipeline-item{transition:transform .5s var(--spring),border-color .25s var(--glide),box-shadow .35s var(--glide),opacity .2s!important}
.app-shell .pipeline-item:hover{transform:translateY(-2px) scale(1.01)!important}
.app-shell .metric-card{font-variant-numeric:tabular-nums}

/* ---- scrollbars: thin and translucent ---- */
.app-shell *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ui-text) 18%,transparent) transparent}
::-webkit-scrollbar-thumb{background:rgba(140,140,160,.32)!important;border:3px solid transparent!important;background-clip:padding-box!important}
::-webkit-scrollbar-thumb:hover{background:rgba(140,140,160,.5)!important;background-clip:padding-box!important}

@media(prefers-reduced-motion:reduce){.app-shell *,.cs-portal *{animation:none!important;transition-duration:.01ms!important}}
body:has(.mobile-bottom-nav) .owl-helper{bottom:calc(90px + env(safe-area-inset-bottom,0px))!important;right:15px!important}

/* ---- focus cycle bar: soft track, fill that deepens toward a white knob, no white halos ---- */
.app-shell .pomo-progress,.pomo-fullscreen .pomo-progress{--pf-track:rgba(224,228,235,.10);--pf-edge:rgba(224,228,235,.14);--pf-from:#667085;--pf-to:#F0F1F5;--pf-glow:rgba(224,228,235,.45)}
.app-shell[data-theme="pink"] .pomo-progress,.pomo-fullscreen[data-theme="pink"] .pomo-progress{--pf-track:#E0E4EB;--pf-edge:rgba(10,14,21,.08);--pf-from:#667085;--pf-to:#0A0E15;--pf-glow:rgba(10,14,21,.18)}
.app-shell[data-theme="white"] .pomo-progress,.pomo-fullscreen[data-theme="white"] .pomo-progress{--pf-track:#E0E4EB;--pf-edge:rgba(10,14,21,.08);--pf-from:#667085;--pf-to:#0A0E15;--pf-glow:rgba(10,14,21,.18)}
.app-shell .pomo-progress,.pomo-fullscreen .pomo-progress{height:10px;border:0;background:var(--pf-track);box-shadow:inset 0 1px 2px rgba(0,0,0,.07),inset 0 0 0 1px var(--pf-edge)}
.app-shell .pomo-progress>span,.pomo-fullscreen .pomo-progress>span{min-width:10px;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%) 0 0/250% 100% no-repeat,linear-gradient(90deg,var(--pf-from),var(--pf-to));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -3px var(--pf-glow);transition:width .9s cubic-bezier(.22,1,.36,1)}
.app-shell .pomo-progress>span::after,.pomo-fullscreen .pomo-progress>span::after{right:-8px;width:18px;height:18px;background:#fff;
  box-shadow:0 0 0 2.5px var(--pf-to),0 3px 10px -1px var(--pf-glow);transition:transform .5s cubic-bezier(.34,1.45,.64,1)}
.app-shell .pomo-progress[data-running="true"]>span,.pomo-fullscreen .pomo-progress[data-running="true"]>span{animation:pfSheen 2.6s cubic-bezier(.45,0,.55,1) infinite}
.app-shell .pomo-progress[data-running="true"]>span::after,.pomo-fullscreen .pomo-progress[data-running="true"]>span::after{animation:pfBreathe 2.6s ease-in-out infinite}
.pomo-fullscreen .pomo-progress{height:12px}
@keyframes pfSheen{from{background-position:130% 0,0 0}to{background-position:-130% 0,0 0}}
@keyframes pfBreathe{0%,100%{box-shadow:0 0 0 2.5px var(--pf-to),0 3px 10px -1px var(--pf-glow)}50%{box-shadow:0 0 0 2.5px var(--pf-to),0 0 0 7px color-mix(in srgb,var(--pf-to) 16%,transparent),0 3px 12px -1px var(--pf-glow)}}

/* ---------- Corujinha chat (floating card) and Suporte ---------- */
.cj-chat{animation:cjChatIn .45s cubic-bezier(.34,1.3,.64,1) both;transform-origin:bottom right}
@keyframes cjChatIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
.cj-msg{animation:cjMsgIn .35s cubic-bezier(.22,1,.36,1) both}
@keyframes cjMsgIn{from{opacity:0;transform:translateY(8px)}}
.cj-dots{display:inline-flex;gap:4px;align-items:center}
.cj-dots i{width:6px;height:6px;border-radius:6px;background:currentColor;opacity:.35;animation:cjDot 1.1s ease-in-out infinite}
.cj-dots i:nth-child(2){animation-delay:.15s}.cj-dots i:nth-child(3){animation-delay:.3s}
@keyframes cjDot{40%{opacity:1;transform:translateY(-3px)}}
.cj-chips{scrollbar-width:none}.cj-chips::-webkit-scrollbar{display:none}
.cj-chat-body{overscroll-behavior:contain;scroll-behavior:smooth}
.cj-send{transition:transform .35s cubic-bezier(.34,1.45,.64,1),filter .2s}
.cj-send:active{transform:scale(.9)}
@media (max-width:700px){
  .cj-chat{inset:0!important;width:auto!important;height:100%!important;height:100dvh!important;border-radius:0!important;border:0!important}
}
@media (max-width:900px){
  .support-grid{grid-template-columns:1fr!important}
  .support-chat{height:600px!important;min-height:0!important}
}
@media (prefers-reduced-motion:reduce){.cj-chat,.cj-msg,.cj-dots i{animation:none!important}}

/* Exam card reached from the app search */
.cs-exam.cs-focus{animation:csFocus 2.4s ease both}
@keyframes csFocus{0%,60%{box-shadow:0 0 0 2px #BFC6D4,0 0 40px -6px #BFC6D4}100%{box-shadow:none}}