/* ClipSync status.css — орб, кольцо, ядро, иконки состояний, .orb-msg,
   .status-text и вся FX-анимация. Дубли селекторов и @keyframes сохранены
   в исходном порядке: слой 2 (Variant B) переопределяет слой 1. */

/* ── Орб ── */
/* Базовый .orb-shell/.orb размер и позиционирование (форма/цвета/кольцо —
   см. блок Variant B ниже, там же .orb-shell.state-*). */
.orb-shell { position: relative; width: 220px; height: 220px; }

.status-text { font-size: 13px; color: var(--text); text-align: center; min-height: 24px; letter-spacing: .04em; line-height: 1.5; }
.status-text.muted { color: var(--muted); }
.status-text.err   { color: var(--red); }

/* ── Сообщение поверх орба (как в prototype_v2.html) — независимо от
   статуса орба: показывает временное уведомление без смены setOrbState(). */
.orb-msg {
  position: absolute; inset: 14px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; line-height: 1.4; letter-spacing: .02em; color: #fff;
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
  text-shadow: 0 1px 8px rgba(0,0,0,.8); z-index: 4;
}
.orb-msg.show { opacity: 1; transform: translateY(0); }

/* ── Значки-события в орбе ── */
.orb-fx {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.orb-fx.play { opacity: 1; }
.orb-fx .fx-icon {
  width: 96px; height: 96px; position: relative; display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.orb-fx.play .fx-icon {
  animation: fx-icon-pop .45s cubic-bezier(.34,1.56,.64,1) both,
            fx-icon-flash .55s ease-out .35s both,
            fx-icon-fade .45s ease-in 1.15s both;
}
.orb-fx .fx-icon .fx-target { width: 100%; height: 100%; display: none; transform-origin: center; animation: fx-target-pulse .5s cubic-bezier(.34,1.56,.64,1) .35s both; }
.orb-fx .fx-icon .fx-target svg { width: 100%; height: 100%; display: block; }
.orb-fx .fx-icon .fx-arrow { position: absolute; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; display: none; }
.orb-fx .fx-icon .fx-arrow.arrow-down { top: -44px; animation: fx-arrow-drop .35s cubic-bezier(.4,0,.2,1) .12s both; }
.orb-fx .fx-icon .fx-arrow.arrow-up   { bottom: -44px; animation: fx-arrow-rise .35s cubic-bezier(.4,0,.2,1) .12s both; }
.orb-fx .fx-icon .fx-arrow svg { width: 100%; height: 100%; display: block; }

/* Направление переключается через класс на #orb-fx (down/up), задаётся
   showOrbIcon() — видимость конкретной иконки/стрелки должна зависеть
   именно от него, а не быть безусловной (баг: обе иконки и обе стрелки
   были видны одновременно независимо от направления). */
.orb-fx.down .fx-icon .fx-target:not(.fx-target-net) { display: block; }
.orb-fx.down .fx-icon .fx-arrow.arrow-down { display: block; }
.orb-fx.up   .fx-icon .fx-target.fx-target-net { display: block; }
.orb-fx.up   .fx-icon .fx-arrow.arrow-up { display: block; }

/* Было: .orb-fx .fx-icon.down/.up — неверный селектор (класс ставится на
   #orb-fx, а не на .fx-icon), правило никогда не срабатывало (мёртвый код,
   цвет совпадал случайно через наследование от .orb-fx.down/.up ниже). */
.orb-fx.down .fx-icon { color: var(--green); }
.orb-fx.up   .fx-icon { color: var(--accent); }

@keyframes fx-icon-pop  { 0%{transform:scale(.3);opacity:0;} 60%{transform:scale(1.12);opacity:1;} 100%{transform:scale(1);opacity:1;} }
@keyframes fx-icon-flash { 0%,100%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));} 45%{filter:drop-shadow(0 0 34px #fff) brightness(1.8);} }
@keyframes fx-icon-fade  { to { opacity: 0; transform: scale(.88); } }
@keyframes fx-arrow-drop  { 0%{transform:translateX(-50%) translateY(-40px); opacity:0;} 100%{transform:translateX(-50%) translateY(0); opacity:1;} }
@keyframes fx-arrow-rise  { 0%{transform:translateX(-50%) translateY(40px); opacity:0;} 100%{transform:translateX(-50%) translateY(0); opacity:1;} }
@keyframes fx-target-pulse { 0%{transform:scale(1);} 50%{transform:scale(1.14);} 100%{transform:scale(1);} }

.orb-fx .fx-echo { position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.orb-fx.play .fx-echo { animation: fx-echo 1.2s ease-out both; }
.orb-fx.play .fx-echo:nth-child(2) { animation-delay: .24s; }
.orb-fx.play .fx-echo:nth-child(3) { animation-delay: .42s; }
@keyframes fx-echo { 0%{transform:scale(.42);opacity:.75;} 100%{transform:scale(1.7);opacity:0;} }
.orb-fx.down { color: var(--green); }
.orb-fx.up   { color: var(--accent); }

.orb-wrap { display:flex; flex-direction:column; align-items:center; gap:22px; }
.orb-shell { width:220px; height:220px; }
.orb-ring { position:absolute; inset:-8px; border-radius:34%; background:conic-gradient(from 0deg,transparent 0 70%,var(--ring-c,var(--teal)) 92%,transparent 100%); opacity:.55; animation:ring-spin 5s linear infinite; transition:background .4s; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px)); mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px)); }
@keyframes ring-spin { to { transform:rotate(360deg); } }
.orb-shell.state-waiting .orb-ring { animation-duration:2.6s; }
.orb-shell.state-active .orb-ring { animation-duration:1.4s; opacity:.85; }
.orb-shell.state-offline .orb-ring { animation:none; opacity:.18; }
.orb-shell.state-ready { --ring-c:var(--teal); } .orb-shell.state-waiting { --ring-c:var(--amber); } .orb-shell.state-active { --ring-c:var(--violet); } .orb-shell.state-error { --ring-c:var(--red); } .orb-shell.state-offline { --ring-c:var(--muted); } .orb-shell.state-init { --ring-c:var(--border2); }
.orb { position:absolute; inset:0; width:220px; height:220px; border-radius:30%; background:linear-gradient(155deg,var(--surface2),var(--surface) 60%); box-shadow:inset 0 0 0 1px var(--border2),0 24px 60px rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; overflow:hidden; animation:none; transition:box-shadow .4s; }
.orb::before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--ring-c,var(--teal)) 22%,transparent),transparent 68%); pointer-events:none; z-index:0; }
.orb::after { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 55%); pointer-events:none; }
.orb.drag { transform:none; box-shadow:inset 0 0 0 2px var(--teal),0 0 60px rgba(56,229,196,.35); }
.orb-core { width:64px; height:64px; display:flex; align-items:center; justify-content:center; color:var(--ring-c,var(--teal)); position:relative; z-index:2; filter:drop-shadow(0 0 14px currentColor); opacity:1; transform:scale(1); transition:opacity .3s,transform .3s; }
.orb-shell.fx-active .orb-core { opacity:0; transform:scale(.85); }
.orb-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6) rotate(-8deg); transition:opacity .35s,transform .35s; }
.orb-icon.show { opacity:1; transform:scale(1); } .orb-icon svg { width:40px; height:40px; }
.orb-fx { z-index:6; opacity:1; } .orb-fx:not(.play) .fx-icon { opacity:0; }
.orb-fx .fx-icon { width:72px; height:72px; }
.orb-fx.play .fx-icon { animation:fx-icon-pop .45s cubic-bezier(.34,1.56,.64,1) both,fx-icon-flash 1.6s ease-in-out .45s infinite; }
.orb-fx.play .fx-icon .fx-target { animation:fx-target-pulse 1.6s ease-in-out .35s infinite; }
.orb-fx.play .fx-echo { animation:fx-echo 1.6s ease-out infinite; } .orb-fx.play .fx-echo:nth-child(2){animation-delay:.4s}.orb-fx.play .fx-echo:nth-child(3){animation-delay:.8s}
.orb-fx .fx-echo { inset:14px; border-radius:30%; }
@keyframes fx-icon-flash { 0%,100%{filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 26px #fff) brightness(1.6)} }
@keyframes fx-echo { 0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.55);opacity:0} }