/*
 * Голосовой виджет Ultravox для сайта на 1С-Битрикс.
 * Живёт в shadow DOM, поэтому селекторы намеренно короткие и не конфликтуют
 * со стилями сайта. Обе темы — из макетов Galt Voice Widget (light) и
 * Ultravox Chat (dark).
 */

:host {
  --guv-accent: #2954cc;
  --guv-accent-fg: #ffffff;
  --guv-accent-ink: #1b3f9e;
  --guv-accent-soft: #eef3fb;
  --guv-accent-border: #c3d0ea;

  --guv-panel: #ffffff;
  --guv-panel-2: #f4f6f8;
  --guv-panel-3: #f7f9fb;
  --guv-border: #e2e6ec;
  --guv-border-2: #dfe4ea;
  --guv-hover: #eaeef3;

  --guv-fg: #14181d;
  --guv-fg-2: #262c34;
  --guv-fg-3: #2f3742;
  --guv-muted: #5d6875;
  --guv-muted-2: #55606d;
  --guv-faint: #7a8592;
  --guv-placeholder: #7a8592;

  --guv-bubble-agent: #f1f4f8;
  --guv-bubble-agent-fg: #262c34;
  --guv-bubble-agent-border: #e2e6ec;
  --guv-file-bg: #f4f6f8;
  --guv-file-user-bg: #eaf0ff;
  --guv-file-user-border: #c3d0ea;
  --guv-tint-bg: #eef1f5;
  --guv-tint-fg: #5d6875;
  --guv-veil: rgba(255, 255, 255, .78);
  --guv-remove-bg: rgba(10, 13, 18, .85);
  --guv-remove-fg: #2f3742;

  --guv-ok: #1f9d55;
  --guv-ok-fg: #1c6b45;
  --guv-ok-bg: #f1f8f3;
  --guv-ok-border: #cbe6d5;
  --guv-ok-badge-bg: #eef7f1;
  --guv-warn: #a76a12;
  --guv-err: #b53b30;
  --guv-err-fg: #a2352b;
  --guv-err-bg: #fdf2f1;
  --guv-err-border: #f0cdc9;
  --guv-err-badge-bg: #fdf0ef;
  --guv-err-btn: #b3392e;
  --guv-idle: #7a8592;
  --guv-idle-dot: #5d6875;

  --guv-launcher-bg: #14181d;
  --guv-launcher-border: #14181d;
  --guv-launcher-fg: #ffffff;
  --guv-launcher-orbit: #4a525c;
  --guv-launcher-arc: #7f9dea;

  --guv-overlay: rgba(16, 20, 26, .82);
  --guv-scroll: #c8cfd8;
  --guv-shadow-panel: 0 26px 70px rgba(20, 24, 29, .14);
  --guv-shadow-gate: 0 26px 70px rgba(20, 24, 29, .16), 0 0 0 6px rgba(41, 84, 204, .1);
  --guv-shadow-tip: 0 10px 26px rgba(20, 24, 29, .14);
  --guv-glow-1: 0 10px 24px rgba(20, 24, 29, .18);
  --guv-glow-2: 0 12px 28px rgba(20, 24, 29, .2);

  --guv-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --guv-font-head: 'Unbounded', 'Arial Black', sans-serif;
  --guv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  display: block;
  color-scheme: light;
}

:host([data-theme='dark']) {
  --guv-accent: #4a72e8;
  --guv-accent-fg: #ffffff;
  --guv-accent-ink: #c3d3ff;
  --guv-accent-soft: #131a26;
  --guv-accent-border: #2b3a56;

  --guv-panel: #0e1217;
  --guv-panel-2: #11161d;
  --guv-panel-3: #131922;
  --guv-border: #232c38;
  --guv-border-2: #2a3442;
  --guv-hover: #1b232d;

  --guv-fg: #eef3fa;
  --guv-fg-2: #dde5ef;
  --guv-fg-3: #cfd8e3;
  --guv-muted: #93a0b0;
  --guv-muted-2: #69778a;
  --guv-faint: #5c6a7c;
  --guv-placeholder: #5c6a7c;

  --guv-bubble-agent: #181f28;
  --guv-bubble-agent-fg: #dde5ef;
  --guv-bubble-agent-border: #262f3b;
  --guv-file-bg: #161c24;
  --guv-file-user-bg: #151c2c;
  --guv-file-user-border: #33456e;
  --guv-tint-bg: #232c38;
  --guv-tint-fg: #93a0b0;
  --guv-veil: rgba(14, 18, 23, .72);
  --guv-remove-bg: rgba(10, 13, 18, .85);
  --guv-remove-fg: #cfd8e3;

  --guv-ok: #7fd6a4;
  --guv-ok-fg: #8fc9a5;
  --guv-ok-bg: #132116;
  --guv-ok-border: #2e4a35;
  --guv-ok-badge-bg: #12301f;
  --guv-warn: #e8b577;
  --guv-err: #f0938a;
  --guv-err-fg: #f0b3ad;
  --guv-err-bg: #2a1a18;
  --guv-err-border: #4d2f2a;
  --guv-err-badge-bg: #3a1f1c;
  --guv-err-btn: #9c332a;
  --guv-idle: #4d5a6b;
  --guv-idle-dot: #4d5a6b;

  --guv-launcher-bg: #0e1217;
  --guv-launcher-border: #232c38;
  --guv-launcher-fg: #e7edf5;
  --guv-launcher-orbit: #232f42;
  --guv-launcher-arc: #4a72e8;

  --guv-overlay: rgba(8, 10, 14, .88);
  --guv-scroll: #2a3442;
  --guv-shadow-panel: 0 26px 70px rgba(8, 11, 16, .5);
  --guv-shadow-gate: 0 26px 70px rgba(8, 11, 16, .5), 0 0 0 6px rgba(74, 114, 232, .1);
  --guv-shadow-tip: 0 12px 30px rgba(8, 11, 16, .42);
  --guv-glow-1: 0 12px 30px rgba(8, 11, 16, .42);
  --guv-glow-2: 0 14px 34px rgba(8, 11, 16, .42);

  color-scheme: dark;
}

:host([hidden]) { display: none; }

* { box-sizing: border-box; }

button, input, textarea {
  font-family: inherit;
  margin: 0;
}

@keyframes guvPulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes guvRing { 0% { transform: scale(.62); opacity: .85 } 70% { opacity: 0 } 100% { transform: scale(1.35); opacity: 0 } }
@keyframes guvRise { from { transform: translateY(14px) scale(.985); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes guvBar { 0%, 100% { transform: scaleY(.28) } 50% { transform: scaleY(1) } }
@keyframes guvSpin { to { transform: rotate(360deg) } }
@keyframes guvSpinR { to { transform: rotate(-360deg) } }
@keyframes guvFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes guvGlow {
  0%, 100% { box-shadow: var(--guv-glow-1), 0 0 0 0 rgba(41, 84, 204, 0) }
  55% { box-shadow: var(--guv-glow-2), 0 0 0 7px rgba(41, 84, 204, .16) }
}
@keyframes guvNudge {
  0%, 88%, 100% { transform: none }
  91% { transform: translateX(-4px) }
  94% { transform: translateX(4px) }
  97% { transform: translateX(-2px) }
}

/* ------------------------------------------------------------------ каркас */

.dock {
  position: absolute;
  bottom: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: 14px/1.55 var(--guv-font);
  pointer-events: none;
}

.dock > * { pointer-events: auto; }
.dock--right { right: 24px; align-items: flex-end; }
.dock--left { left: 24px; align-items: flex-start; }

.hidden { display: none !important; }

.scroll::-webkit-scrollbar,
.quick::-webkit-scrollbar,
.gate::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb,
.quick::-webkit-scrollbar-thumb,
.gate::-webkit-scrollbar-thumb { background: var(--guv-scroll); border-radius: 99px; }
.scroll::-webkit-scrollbar-track,
.quick::-webkit-scrollbar-track,
.gate::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------- лайтбокс */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--guv-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  cursor: zoom-out;
  animation: guvRise .2s ease-out;
  pointer-events: auto;
}

.lightbox__img {
  width: min(900px, 100%);
  height: 78vh;
  border-radius: 10px;
  border: 1px solid var(--guv-border-2);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.lightbox__name {
  font: 11px/1 var(--guv-font-mono);
  letter-spacing: .08em;
  color: var(--guv-muted);
}

/* -------------------------------------------------------------- гейт микро */

.gate {
  position: relative;
  width: min(392px, calc(100vw - 48px));
  background: var(--guv-panel);
  border: 1px solid var(--guv-accent-border);
  border-radius: 20px;
  box-shadow: var(--guv-shadow-gate);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  animation: guvRise .3s cubic-bezier(.2, .8, .3, 1);
}

.gate__inner {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gate__icon {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(41, 84, 204, .45);
  animation: guvRing 2.4s ease-out infinite;
  pointer-events: none;
}

.ring--2 { animation-delay: .8s; }
.ring--3 { animation-delay: 1.6s; }
.ring--err { border-color: rgba(181, 59, 48, .4); animation-duration: 2.8s; }

.gate__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate__badge--ask {
  background: var(--guv-accent);
  color: #fff;
  box-shadow: 0 0 0 9px rgba(41, 84, 204, .16);
}

.gate__badge--denied {
  background: var(--guv-err-badge-bg);
  border: 1px solid var(--guv-err-border);
  color: var(--guv-err);
}

.gate__badge--granted {
  background: var(--guv-ok-badge-bg);
  border: 1px solid var(--guv-ok-border);
  color: var(--guv-ok);
}

.gate__title {
  font: 600 15px/1.3 var(--guv-font-head);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--guv-fg);
  max-width: 290px;
}

.gate__body {
  margin-top: 9px;
  font: 12.5px/1.55 var(--guv-font);
  color: var(--guv-muted);
  max-width: 300px;
  text-wrap: pretty;
}

.gate__hint {
  margin-top: 12px;
  width: 100%;
  padding: 9px 11px;
  background: var(--guv-panel-2);
  border: 1px solid var(--guv-border-2);
  border-radius: 10px;
  font: 11px/1.6 var(--guv-font-mono);
  color: var(--guv-muted);
  text-align: left;
}

/* ---------------------------------------------------------------- кнопки */

.btn-primary {
  margin-top: 16px;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 30px;
  background: var(--guv-accent);
  color: var(--guv-accent-fg);
  font: 500 14px/1 var(--guv-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 8px 22px rgba(41, 84, 204, .35);
}

.btn-primary:hover { filter: brightness(1.12); }
.btn-primary[disabled] { opacity: .6; cursor: default; filter: none; }

.btn-ghost {
  margin-top: 6px;
  width: 100%;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--guv-muted-2);
  font: 400 12px/1 var(--guv-font);
  cursor: pointer;
  border-radius: 30px;
}

.btn-ghost:hover { color: var(--guv-muted); }

.btn-link {
  margin-top: 4px;
  width: 100%;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--guv-accent);
  font: 400 12px/1 var(--guv-font);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-link:hover { color: var(--guv-accent-ink); }

/* -------------------------------------------------- форма обратного звонка */

.form {
  margin-top: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.form__label {
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--guv-muted);
}

.field {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  background: var(--guv-panel);
  border: 1px solid var(--guv-border);
  border-radius: 10px;
  color: var(--guv-fg);
  font: 13px/1 var(--guv-font);
  outline: none;
}

.field:focus { border-color: var(--guv-accent); }
.field::placeholder { color: var(--guv-placeholder); }

.field--area {
  height: 72px;
  padding: 10px 13px;
  resize: vertical;
  line-height: 1.5;
}

.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form__note {
  font: 11px/1.5 var(--guv-font);
  color: var(--guv-muted);
}

.form__note--ok { color: var(--guv-ok-fg); }
.form__note--err { color: var(--guv-err-fg); }

/* ----------------------------------------------------------------- панель */

.panel {
  position: relative;
  width: min(400px, calc(100vw - 48px));
  height: min(640px, calc(100dvh - 132px));
  background: var(--guv-panel);
  border: 1px solid var(--guv-border);
  border-radius: 20px;
  box-shadow: var(--guv-shadow-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: guvRise .28s cubic-bezier(.2, .8, .3, 1);
}

.drop {
  position: absolute;
  inset: 8px;
  z-index: 20;
  border: 1.5px dashed var(--guv-accent);
  border-radius: 14px;
  background: var(--guv-veil);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}

.drop__label {
  font: 11px/1 var(--guv-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--guv-accent);
}

.head {
  position: relative;
  flex-shrink: 0;
  background: var(--guv-panel-2);
  border-bottom: 1px solid var(--guv-border);
}

.head__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
}

.avatar__frame {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--guv-border-2);
  pointer-events: none;
}

.avatar__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(31, 157, 85, .45);
  animation: guvRing 2.2s ease-out infinite;
  pointer-events: none;
}

.avatar__face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--guv-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(41, 84, 204, .35);
}

.avatar__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--guv-idle-dot);
  border: 2.5px solid var(--guv-panel-2);
}

.avatar__dot--live { background: var(--guv-ok); }

.head__meta { flex: 1 1 auto; min-width: 0; }

.head__title {
  font: 600 12px/1.2 var(--guv-font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--guv-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.head__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--guv-idle);
}

.dot--live { background: var(--guv-ok); animation: guvPulse 1.6s ease-in-out infinite; }
.dot--busy { background: var(--guv-warn); animation: guvPulse 1s ease-in-out infinite; }
.dot--error { background: var(--guv-err); }

.head__state {
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--guv-muted-2);
  white-space: nowrap;
}

.head__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--guv-border-2);
  flex-shrink: 0;
}

.head__count {
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .04em;
  color: var(--guv-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iconbtn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--guv-faint);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.iconbtn:hover { background: var(--guv-hover); color: var(--guv-muted); }

.confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--guv-err-bg);
  border-bottom: 1px solid var(--guv-err-border);
  flex-shrink: 0;
}

.confirm__text {
  flex: 1;
  font: 12px/1.4 var(--guv-font);
  color: var(--guv-err-fg);
}

.confirm__yes {
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 99px;
  background: var(--guv-err-btn);
  color: #fff;
  font: 500 11px/1 var(--guv-font);
  cursor: pointer;
}

.confirm__no {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--guv-muted);
  font: 400 11px/1 var(--guv-font);
  cursor: pointer;
}

/* ------------------------------------------------------------------ лента */

.scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--guv-panel);
}

.empty {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty__label {
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--guv-muted);
  margin-bottom: 2px;
}

.prompt {
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--guv-border);
  border-radius: 12px;
  background: var(--guv-panel-3);
  color: var(--guv-fg-3);
  font: 13px/1.45 var(--guv-font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.prompt:hover {
  border-color: var(--guv-accent);
  background: var(--guv-accent-soft);
  color: var(--guv-fg);
}

.prompt__text { flex: 1 1 auto; text-wrap: pretty; }
.prompt__chevron { flex-shrink: 0; }

.day {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--guv-muted);
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.day__line { flex: 1; height: 1px; background: var(--guv-border); }

.msg {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 100%;
}

.msg--agent { align-items: flex-start; }
.msg--user { align-items: flex-end; }

.msg__who {
  font: 600 9px/1 var(--guv-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--guv-muted);
  padding: 0 3px;
}

.bubble {
  max-width: 86%;
  padding: 10px 14px;
  font: 13px/1.65 var(--guv-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg--agent .bubble {
  background: var(--guv-bubble-agent);
  color: var(--guv-bubble-agent-fg);
  border: 1px solid var(--guv-bubble-agent-border);
  border-radius: 4px 14px 14px 14px;
}

.msg--user .bubble {
  background: var(--guv-accent);
  color: var(--guv-accent-fg);
  border-radius: 14px 4px 14px 14px;
}

.bubble--partial { opacity: .78; }

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 86%;
}

.msg--user .thumbs { justify-content: flex-end; }

.thumb {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid var(--guv-border-2);
  cursor: zoom-in;
  background-color: var(--guv-file-bg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

.msg--user .thumb {
  border-color: var(--guv-file-user-border);
  background-color: var(--guv-file-user-bg);
}

.thumb:hover { filter: brightness(1.1); }

.docs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 86%;
}

.msg--user .docs { align-items: flex-end; }

.doc {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--guv-file-bg);
  border: 1px solid var(--guv-border-2);
  border-radius: 10px;
  text-decoration: none;
}

.doc:hover { border-color: var(--guv-faint); }

.msg--user .doc {
  background: var(--guv-file-user-bg);
  border-color: var(--guv-file-user-border);
}

.msg--user .doc:hover { border-color: var(--guv-accent); }

.doc__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--guv-tint-bg);
  color: var(--guv-tint-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.doc__ext { font: 600 7px/1 var(--guv-font-mono); letter-spacing: .03em; }

.doc__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc__name {
  font: 12px/1.2 var(--guv-font);
  color: var(--guv-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.msg--user .doc__name { color: var(--guv-fg-2); }
.doc__size { font: 9px/1 var(--guv-font-mono); color: var(--guv-faint); }

.error {
  padding: 9px 14px;
  background: var(--guv-err-bg);
  border-top: 1px solid var(--guv-err-border);
  color: var(--guv-err-fg);
  font: 12px/1.45 var(--guv-font);
  flex-shrink: 0;
}

/* --------------------------------------------------------------- композер */

.composer {
  flex-shrink: 0;
  background: var(--guv-panel-2);
  border-top: 1px solid var(--guv-border);
  padding: 10px 12px 12px;
}

.live {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--guv-ok-bg);
  border: 1px solid var(--guv-ok-border);
  border-radius: 12px;
  margin-bottom: 10px;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  flex-shrink: 0;
}

.bar {
  width: 2.5px;
  height: 100%;
  background: var(--guv-ok);
  border-radius: 2px;
  transform-origin: bottom;
  animation: guvBar .9s ease-in-out infinite;
}

.bar:nth-child(2) { animation-delay: .15s; }
.bar:nth-child(3) { animation-delay: .3s; }
.bar:nth-child(4) { animation-delay: .45s; }

.live__label {
  flex: 1 1 auto;
  font: 10px/1 var(--guv-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--guv-ok-fg);
}

.live__mic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--guv-ok-border);
  background: var(--guv-panel);
  color: var(--guv-ok-fg);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.live__mic:hover { border-color: var(--guv-ok); }
.live__mic--off { color: var(--guv-err); }

.live__end {
  height: 30px;
  padding: 0 12px;
  flex-shrink: 0;
  border: none;
  border-radius: 99px;
  background: var(--guv-err-btn);
  color: #fff;
  font: 500 11px/1 var(--guv-font);
  cursor: pointer;
}

.live__end:hover { filter: brightness(1.12); }

.quick {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 2px;
}

.chip {
  flex-shrink: 0;
  height: 29px;
  padding: 0 12px;
  border: 1px solid var(--guv-border);
  border-radius: 99px;
  background: var(--guv-panel);
  color: var(--guv-muted);
  font: 400 12px/1 var(--guv-font);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--guv-accent);
  color: var(--guv-accent-ink);
  background: var(--guv-accent-soft);
}

.pending {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.file {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--guv-file-bg);
  border: 1px solid var(--guv-border-2);
  flex-shrink: 0;
}

.file__img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.file__doc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  color: var(--guv-tint-fg);
  background: var(--guv-tint-bg);
}

.file__ext { font: 600 8px/1 var(--guv-font-mono); }

.file__size {
  font: 7px/1.2 var(--guv-font-mono);
  color: var(--guv-faint);
  text-align: center;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file__veil {
  position: absolute;
  inset: 0;
  background: var(--guv-veil);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--guv-accent-border);
  border-top-color: var(--guv-accent);
  border-radius: 50%;
  animation: guvSpin .7s linear infinite;
}

.spinner--sm { width: 14px; height: 14px; }

.file__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--guv-remove-bg);
  color: var(--guv-remove-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.file__remove:hover { background: var(--guv-err-btn); color: #fff; }

.row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.act {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--guv-border);
  background: var(--guv-panel);
  color: var(--guv-muted-2);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.act:hover { border-color: var(--guv-faint); color: var(--guv-muted); }

.act--start {
  border-color: var(--guv-accent-border);
  background: var(--guv-accent-soft);
  color: var(--guv-accent);
}

.act--start:hover { border-color: var(--guv-accent); color: var(--guv-accent-ink); }

.act--busy {
  background: var(--guv-accent-soft);
  cursor: default;
}

.input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 13px;
  background: var(--guv-panel);
  border: 1px solid var(--guv-border);
  border-radius: 10px;
  color: var(--guv-fg);
  font: 13px/1 var(--guv-font);
  outline: none;
}

.input:focus { border-color: var(--guv-accent); }
.input::placeholder { color: var(--guv-placeholder); }

.send {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  background: var(--guv-accent);
  color: var(--guv-accent-fg);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.send:hover { filter: brightness(1.14); }

/* -------------------------------------------------------------- лаунчер */

.launcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dock--left .launcher-row { flex-direction: row-reverse; }

.tip {
  cursor: pointer;
  padding: 9px 13px;
  background: var(--guv-panel);
  border: 1px solid var(--guv-accent-border);
  border-radius: 12px 12px 4px 12px;
  box-shadow: var(--guv-shadow-tip);
  font: 11px/1.45 var(--guv-font-mono);
  letter-spacing: .02em;
  color: var(--guv-accent);
  max-width: 210px;
  animation: guvNudge 4s ease-in-out infinite;
}

.dock--left .tip { border-radius: 12px 12px 12px 4px; }

.launcher-wrap {
  position: relative;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

.launcher-wrap .ring {
  border-color: rgba(41, 84, 204, .5);
  animation-duration: 2.2s;
}

.launcher-wrap .ring--2 { animation-delay: 1.1s; }

.launcher {
  position: relative;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--guv-launcher-border);
  border-radius: 50%;
  background: var(--guv-launcher-bg);
  color: var(--guv-launcher-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: guvFloat 4.2s ease-in-out infinite, guvGlow 3s ease-in-out infinite;
}

.launcher:hover { border-color: var(--guv-accent); }

.launcher__orbit {
  position: absolute;
  top: -1px;
  left: -1px;
  pointer-events: none;
}

.launcher__orbit-outer {
  transform-origin: 32px 32px;
  animation: guvSpin 16s linear infinite;
  stroke: var(--guv-launcher-orbit);
}

.launcher__orbit-arc {
  transform-origin: 32px 32px;
  animation: guvSpinR 3.4s linear infinite;
  stroke: var(--guv-launcher-arc);
}

.alert {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #d0392b;
  border: 2px solid var(--guv-launcher-bg);
  animation: guvPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

.unread {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--guv-accent);
  border: 2px solid var(--guv-launcher-bg);
  color: #fff;
  font: 600 10px/16px var(--guv-font-mono);
  text-align: center;
  pointer-events: none;
}

@media (max-width: 480px) {
  .dock--right { right: 12px; bottom: 12px; }
  .dock--left { left: 12px; bottom: 12px; }
  .panel { width: calc(100vw - 24px); height: calc(100dvh - 108px); }
  .gate { width: calc(100vw - 24px); }
  .tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .launcher, .ring, .bar, .tip, .dot, .alert { animation: none !important; }
}