/* Langufy's four interlocking shapes become a quiet, reusable waiting rhythm. */
.langufy-loader.langufy-loader{
  --loader-green:#00bf8b;--loader-size:56px;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:88px;height:108px;min-width:0;flex:none;gap:20px;padding:12px 0 0;margin:0;
  border:0;border-radius:0;background:none;box-shadow:none;animation:none;
  color:var(--loader-green);vertical-align:middle;pointer-events:none;isolation:isolate;
}
.langufy-loader .langufy-loader-emblem{
  position:relative;display:grid;place-items:center;flex:none;
  width:var(--loader-size);height:var(--loader-size);margin:0;padding:0;border:0;border-radius:17px;
  background:none;box-shadow:0 9px 22px -9px #00a77a45;
  animation:langufy-logo-breathe 2.8s cubic-bezier(.45,0,.25,1) infinite;
}
.langufy-loader .langufy-loader-emblem::before{
  content:"";position:absolute;inset:-9px;border:1px solid #00bf8b24;border-radius:24px;
  background:color-mix(in srgb,var(--loader-green) 6%,transparent);z-index:-1;
  animation:langufy-logo-halo 2.8s ease-out infinite;
}
.langufy-loader .langufy-loader-emblem::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(125deg,transparent 20%,#ffffff48 45%,transparent 68%);
  opacity:0;animation:langufy-logo-light 2.8s ease-in-out infinite;
}
.langufy-loader .langufy-loader-emblem img{
  display:block;width:100%;height:100%;max-width:none;object-fit:contain;aspect-ratio:1;
  border:0;border-radius:inherit;box-shadow:none;margin:0;padding:0;
}
.langufy-loader .langufy-loader-dots{
  display:flex;align-items:center;justify-content:center;flex:none;gap:5px;
  width:auto;height:8px;margin:0;padding:0;border:0;border-radius:0;background:none;animation:none;
}
.langufy-loader .langufy-loader-dots i{
  display:block;flex:none;width:7px;height:7px;border:0;border-radius:3px 3px 5px 3px;
  background:var(--loader-green);opacity:.28;transform:translateY(0);
  animation:langufy-logo-step 1.6s ease-in-out infinite;
}
.langufy-loader .langufy-loader-dots i:nth-child(2){animation-delay:.14s}
.langufy-loader .langufy-loader-dots i:nth-child(3){animation-delay:.28s}
.langufy-loader .langufy-loader-dots i:nth-child(4){animation-delay:.42s}
.langufy-loader.langufy-loader--small{--loader-size:24px;width:28px;height:28px;gap:0;padding:0}
.langufy-loader--small .langufy-loader-emblem{border-radius:7px;box-shadow:none}
.langufy-loader--small .langufy-loader-emblem::before,.langufy-loader--small .langufy-loader-dots{display:none}

/* Scope layout refinements to genuine pending states, never errors or empties. */
:is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader){min-height:300px;padding:32px 20px;text-align:center}
.loading-state:has(.langufy-loader){display:flex;flex-direction:column;align-items:center;justify-content:center}
:is(.account-loading,.page-loading,.loading-state,.study-loading)>.langufy-loader{margin:0 auto 8px}
:is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader)>:is(h1,h2){font-size:22px;line-height:1.3;letter-spacing:-.5px;margin:12px 0 0}
:is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader)>p{font-size:14px;line-height:1.6;margin:9px 0 0;color:var(--muted,#5f7369)}
.catalog-loading:has(.langufy-loader){flex-direction:column;gap:14px;min-height:260px;padding:30px 16px}
.discussion-loading:has(.langufy-loader){display:flex;align-items:center;justify-content:center;gap:12px}

/* Compact busy slots retain the operation's existing hidden/aria-busy logic. */
.button-spinner,.send-button .spinner{
  width:20px;height:20px;border:0;border-radius:6px;flex:none;
  background: url('/assets/langufy-logo.webp') center/contain no-repeat;
  animation:langufy-logo-breathe 1.8s ease-in-out infinite;
}
.auth-content.is-connecting #auth-service-status{display:flex;align-items:center;gap:10px}
.auth-content.is-connecting #auth-service-status::before{
  content:"";width:22px;height:22px;flex:none;border-radius:6px;
  background:url('/assets/langufy-logo.webp') center/contain no-repeat;
  animation:langufy-logo-breathe 1.8s ease-in-out infinite;
}
.telegram-login-button[aria-busy=true]::after{
  content:"";width:22px;height:22px;flex:none;border-radius:6px;
  background:url('/assets/langufy-logo.webp') center/contain no-repeat;
  animation:langufy-logo-breathe 1.8s ease-in-out infinite;
}
@keyframes langufy-logo-breathe{0%,100%{transform:translateY(0) scale(.98)}50%{transform:translateY(-3px) scale(1.025)}}
@keyframes langufy-logo-halo{0%,100%{transform:scale(.96);opacity:.6}50%{transform:scale(1.07);opacity:1}}
@keyframes langufy-logo-light{0%,15%,100%{opacity:0}45%{opacity:.55}}
@keyframes langufy-logo-step{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(max-width:600px){
  .langufy-loader.langufy-loader:not(.langufy-loader--small){--loader-size:48px;width:76px;height:94px;gap:18px}
  .langufy-loader .langufy-loader-emblem{border-radius:14px}
  .langufy-loader--small .langufy-loader-emblem{border-radius:7px}
  :is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader){min-height:250px;padding:24px 14px}
  :is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader)>:is(h1,h2){font-size:19px}
  :is(.account-loading,.page-loading,.loading-state,.study-loading):has(.langufy-loader)>p{font-size:13px}
}
html[data-loading-paused] :is(.langufy-loader *,.button-spinner,.send-button .spinner),
html[data-loading-paused] .langufy-loader *::before,html[data-loading-paused] .langufy-loader *::after,
html[data-loading-paused] .auth-content.is-connecting #auth-service-status::before,
html[data-loading-paused] .telegram-login-button[aria-busy=true]::after{animation-play-state:paused!important}
:is(html[data-motion=paused],html[data-motion=reduced]) :is(.langufy-loader *,.button-spinner,.send-button .spinner),
:is(html[data-motion=paused],html[data-motion=reduced]) .langufy-loader *::before,
:is(html[data-motion=paused],html[data-motion=reduced]) .langufy-loader *::after,
:is(html[data-motion=paused],html[data-motion=reduced]) .auth-content.is-connecting #auth-service-status::before,
:is(html[data-motion=paused],html[data-motion=reduced]) .telegram-login-button[aria-busy=true]::after{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
  .langufy-loader *,.langufy-loader *::before,.langufy-loader *::after,.button-spinner,.send-button .spinner,.auth-content.is-connecting #auth-service-status::before,.telegram-login-button[aria-busy=true]::after{animation:none!important;transform:none!important}
}