/* ==========================================================================
   Dock — нижнє поле введення: кнопка "C" (розгортає контакти) + поле + скляна
   кнопка Skittle. Замінює старий .input-inner з "+" / мікрофоном / кулькою.
   Усі розміри — від --dock-h (44px = попередня висота поля), тож центри кіл
   стоять там само, де стояли центри заокруглень старого поля.
   ========================================================================== */

:root {
  --dock-h: 44px;
  --dock-gap: calc(var(--dock-h) * 0.25);
  --dock-border: #9f9f99;
  --dock-shadow: 90, 90, 88;
  --dock-hover-bg: rgba(60, 64, 67, 0.06);
  --dock-focus-bg: rgba(60, 64, 67, 0.10);
  --dock-press-bg: rgba(60, 64, 67, 0.18);
  --c-bg: #111;
  --c-logo-filter: none;
  --sk-icon: #3f444a;
}

:root[data-theme="dark"] {
  --dock-border: rgba(231, 239, 233, 0.30);
  --dock-shadow: 0, 0, 0;
  --dock-hover-bg: rgba(231, 239, 233, 0.06);
  --dock-focus-bg: rgba(231, 239, 233, 0.12);
  --dock-press-bg: rgba(231, 239, 233, 0.20);
  --c-bg: #E7EFE9;
  --c-logo-filter: invert(1);
  --sk-icon: #b9c6bd;
}

.input-bar { overflow: visible; }

.dock {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: var(--dock-gap);
}

/* ----- поле ----- */
.input-inner {
  flex: 1;
  min-width: 0;
  min-height: var(--dock-h);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 5px 5px 18px;
  background: var(--surface);
  border: 0.5px solid var(--dock-border);
  border-radius: calc(var(--dock-h) / 2);
  box-shadow:
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.17),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.07);
  transition: background 0.25s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

body.voice-active .input-inner {
  background: color-mix(in srgb, var(--surface) 16%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}



.input-inner :focus-visible { box-shadow: none; border-radius: 0; }

/* ----- мікрофон у полі ----- */
#mic-btn {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: background 0.18s ease, color 0.3s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#mic-btn svg { width: 18px; height: 18px; }
#mic-btn:hover { background: var(--dock-hover-bg); }
#mic-btn:focus, #mic-btn:focus-visible { background: var(--dock-focus-bg); border-radius: 50%; }
#mic-btn:active { background: var(--dock-press-bg); transform: scale(0.9); }

.mic-icon-stop { display: none; width: 32px; height: 32px; }
#mic-btn.listening .mic-icon-default { display: none; }
#mic-btn.listening .mic-icon-stop { display: block; }
#mic-btn.listening { color: var(--accent-a); background: rgba(123, 211, 62, 0.14); }
:root[data-theme="light"] #mic-btn.listening { background: rgba(90, 154, 46, 0.12); }

/* ----- Skittle (кнопка голосового діалогу) ----- */
#voice-mode-btn.sk-btn-wrap {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--sk-icon);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  align-self: flex-end;
}
#voice-mode-btn .sk-label,
#voice-mode-btn .sk-echo,
#voice-mode-btn .sk-mini-echo { color: var(--sk-icon); }
#voice-mode-btn .sk-label svg { width: 0.8152em; height: 0.8152em; }
#voice-mode-btn .sk-echo svg { width: 0.8152em; height: 0.8152em; }
#voice-mode-btn .sk-mini-echo svg { width: 0.6525em; height: 0.6525em; }

/* стани іконки: bars (спокій) / arrow / cross / spinner — перемикає voice.js */
#voice-mode-btn .vi { display: none; }
#voice-mode-btn .vi-bars { display: inline-block; }
#voice-mode-btn.show-arrow .vi-bars,
#voice-mode-btn.show-cross .vi-bars,
#voice-mode-btn.show-spinner .vi-bars { display: none; }
#voice-mode-btn.show-arrow .vi-arrow { display: inline-block; }
#voice-mode-btn.show-cross .vi-cross { display: inline-block; }
#voice-mode-btn.show-spinner .vi-spinner {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--text-dim);
  animation: sk-spin 0.7s linear infinite;
}
#voice-mode-btn.show-spinner .sk-echo,
#voice-mode-btn.show-spinner .sk-mini-echo { display: none; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* голосовий діалог увімкнено / надсилання — веселкове світіння горить постійно */
#voice-mode-btn.active .glow-host .aim-fx,
#voice-mode-btn.active .aim-glow-inner .aim-fx { opacity: 1 !important; }

/* ===================== GLOW — тепер навколо Skittle (коло, --sx/--sy=1) ===================== */
  /* Змінні тепер на спільному батьку (.sk-btn-wrap), щоб їх читали ОБИДВА
     шари світіння — і зовнішній (glow-host), і внутрішній (aim-glow-inner). */
  .sk-btn-wrap {
    --a: 20deg;
    --c: 180deg;
    --o: 0;
    --sx: 1;
    --sy: 1;
  }

  .glow-host {
    position: absolute;
    inset: -0.107em; /* 6px при 56px (було 4px) — ширше у 1.5 раза, масштабується з кнопкою */
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    /* Повний градієнт 100%→0% саме в межах цього 4px кільця — відсоток
       підібраний так, щоб перехід починався рівно на краю самої кнопки
       (18px з 22px радіуса ≈ 81.8%). */
    -webkit-mask-image: radial-gradient(circle closest-side, #000 82.4%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 82.4%, transparent 100%);
  }

  /* Внутрішнє світіння — ті самі кольори/кут, що й зовнішнє, але
     розсіюються ВСЕРЕДИНУ від контуру кнопки (а не назовні), слабо,
     ніби контур кнопки — лінія, від якої світіння йде в обидва боки. */
  .aim-glow-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
    overflow: hidden;
    z-index: 1;
    mix-blend-mode: soft-light;
    -webkit-mask-image: radial-gradient(circle, transparent 35%, #000 92%, transparent 100%);
    mask-image: radial-gradient(circle, transparent 35%, #000 92%, transparent 100%);
  }

  .aim-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.6; z-index: 0; }
  .aim-fx   { position: absolute; inset: 0; border-radius: inherit; opacity: var(--o); }

  .aim-layer {
    position: absolute; inset: -1px;
    border-radius: inherit;
    overflow: hidden;
    filter: blur(4px);
  }
  .aim-sharp { filter: blur(1px); }

  .aim-mask {
    position: absolute; inset: 0;
    border-radius: inherit;
    scale: var(--sx) var(--sy);
    -webkit-mask-image:
      conic-gradient(from var(--a), transparent 0, transparent 50%, #000 68%, #000 75%, transparent 89%),
      conic-gradient(from var(--a), #000 30%, transparent 50%, #000 70%);
    mask-image:
      conic-gradient(from var(--a), transparent 0, transparent 50%, #000 68%, #000 75%, transparent 89%),
      conic-gradient(from var(--a), #000 30%, transparent 50%, #000 70%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .aim-sharp .aim-mask {
    -webkit-mask-image:
      conic-gradient(from var(--a), transparent 0, transparent 62%, #000 82%, transparent 89%),
      conic-gradient(from var(--a), #000 30%, transparent 50%, #000 70%);
    mask-image:
      conic-gradient(from var(--a), transparent 0, transparent 62%, #000 82%, transparent 89%),
      conic-gradient(from var(--a), #000 30%, transparent 50%, #000 70%);
  }

  .aim-disc {
    position: absolute; left: 0; right: 0; top: 50%;
    aspect-ratio: 1;
    translate: 0 -50%;
    border-radius: 50%;
    rotate: var(--c);
    background: conic-gradient(
      #3186ff 34%, #9378ff 37%, #f96bd6 39%, #fc413d 41%, #fc413d 48%,
      #ff6b2b 50%, #fec700 52%, #ffdb0f 56%, #88de42 58%, #0ebc5f 61%,
      #0ebc5f 65%, #2eaab2 70%, #00a9bb 72%, #3186ff 73%, #3186ff 100%
    );
  }

  /* ===================== SKITTLE — скляна кругла кнопка (36px) ===================== */



    .sk-btn-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sk-btn-wrap {
    position: relative;
    isolation: isolate; /* утримує z-index:-1 світіння всередині, не "провалюючи" крізь сторінку */
    font-size: var(--dock-h); /* менша одиниця — узгоджена з висотою поля введення */
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    cursor: pointer;
    user-select: none;
    transform: scale(1) translateY(0);
    /* Пружне (spring/bounce) повернення на відпусканні — трохи "перестрибує"
       кінцеву позицію й заспокоюється, а не просто плавно доходить. */
    transition: transform 0.48s cubic-bezier(0.34, 1.9, 0.64, 1);
  }

  .sk-btn-wrap.sk-pressed {
    transform: scale(0.96) translateY(0.01471em);
    /* Натискання — швидке й чітке, без пружності. */
    transition: transform 0.12s ease-out;
  }

  /* Розмитий сірий овал "глибини" під кнопкою — натяк на прозорість,
     що тягнеться кудись углиб, а не просто тінь. */
  .sk-depth-oval {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -18%;
    height: 55%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(120,120,118,0.35) 0%, rgba(120,120,118,0) 70%);
    filter: blur(0.10294em);
    z-index: -1;
  }

  /* Контур-кільце: зовнішня пігулка залита ДІАГОНАЛЬНИМ градієнтом багатьох
     відтінків сірого/білого — саме тому обідок "переливається" вздовж
     периметра, а не є однією суцільною лінією кольору. */
  .sk-btn {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 7.34559em;
    /* Тінь: менша/темніша при натисканні, звичайна у спокої. */
    filter: drop-shadow(0.10294em 0.06618em 0.06618em rgba(90, 90, 88, 0.18));
    transition: filter 0.28s ease;
  }

  .sk-btn-wrap.sk-pressed .sk-btn {
    filter: drop-shadow(0.05882em 0.03676em 0.03676em rgba(60, 60, 58, 0.32));
  }

  /* Обгортка, що обрізає обертовий градієнт рівно по формі кільця —
     окремо від .sk-btn, щоб overflow:hidden не чіпав drop-shadow. */
  .sk-ring-clip {
    position: absolute;
    inset: 0;
    border-radius: 7.34559em;
    overflow: hidden;
  }

  /* Один елемент, як у базовій кнопці: градієнт сталий, а натискання —
     це просто transform:rotate() на тому самому шарі (для кола це
     завжди безпечно, бо немає прямих ділянок, які градієнт міг би
     "зачепити"). Жодних дубльованих шарів. */
  .sk-ring-rotator {
    position: absolute;
    inset: 0;
    transform: rotate(0deg);
    background: conic-gradient(
      from 90deg,
      #ffffff 0deg,
      #8cb27a 45deg,
      #ffffff 135deg,
      #a6c698 225deg,
      #ffffff 315deg,
      #ffffff 360deg
    );
    transition: transform 0.3s ease;
  }

  .sk-btn-wrap.sk-pressed .sk-ring-rotator {
    transform: rotate(-60deg);
  }

  /* Друге, внутрішнє кільце — 0.00735em, зсунуте на 0.00735em досередини, градієнт
     зміщений на 20° відносно зовнішнього. */
  .sk-ring-clip-2 {
    position: absolute;
    inset: 0.00735em;
    border-radius: 7.34559em;
    overflow: hidden;
  }

  .sk-ring-rotator-2 {
    position: absolute;
    inset: 0;
    transform: rotate(0deg);
    background: conic-gradient(
      from 110deg,
      #ffffff 0deg,
      #7fae6c 45deg,
      #ffffff 135deg,
      #a2c492 210deg,
      #ffffff 315deg,
      #ffffff 360deg
    );
    transition: transform 0.3s ease;
  }

  .sk-btn-wrap.sk-pressed .sk-ring-rotator-2 {
    transform: rotate(-60deg);
  }

  .sk-btn-body {
    position: absolute;
    inset: 0.01471em; /* товщина кільця, що лишається видимим навколо — як у базовій кнопці */
    border-radius: 7.34559em;
    background: linear-gradient(135deg, #FAFAF9 0%, #ECECEA 45%, #DCDCDA 100%);
    box-shadow:
      inset 0 0.01471em 0.00735em rgba(255, 255, 255, 0.9),
      inset 0 -0.07353em 0.13235em -0.05882em rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Цятки, що проступають крізь тіло кнопки (та сама текстура, трохи розмита). */
  /* Верхня половина зменшеної (у 1.5 раза) копії контуру самої кнопки —
     довга горизонтальна "С", сильно розмита, висить між обідком і текстом. */
  /* Обгортка з запасом (0.22059em з усіх боків) — саме тут застосовується маска,
     з достатнім простором, щоб розмиття встигало згаснути ДО її межі. */
  .sk-inner-smudge-mask {
    position: absolute;
    top: calc(8% - 0.22059em);
    left: 50%;
    width: calc(92% + 0.44118em);
    height: calc(92% + 0.44118em);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 62%, transparent 100%);
    z-index: 0;
    transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
  }

  /* Натискання: скоба зростає пропорційно до кнопки, нижня грань лишається
     на тому ж рівні (top+height підібрані так, щоб сума не змінювалась). */
  .sk-btn-wrap.sk-pressed .sk-inner-smudge-mask {
    top: calc(4% - 0.22059em);
    width: calc(96% + 0.44118em);
    height: calc(96% + 0.44118em);
  }

  /* Сам контур+блюр — без маски, тож розмиття вільне з усіх боків.
     При натисканні — тонший і чіткіший (менше розмиття), але не гострий. */
  .sk-inner-smudge {
    position: absolute;
    inset: 0.22059em;
    border: 0.02206em solid rgba(90, 90, 88, 0.65);
    border-radius: 7.34559em;
    filter: blur(0.06618em);
    transition: border-width 0.3s ease, filter 0.3s ease;
  }

  .sk-btn-wrap.sk-pressed .sk-inner-smudge {
    border-width: 0.01471em;
    filter: blur(0.03676em);
  }

  /* Маленька розмита копія слова — масштаб 80%, той самий, що й у скоби
     відносно кнопки, той самий тон, по центру скоби. */
  .sk-mini-echo {
    position: absolute;
    top: 54%; /* середина зони скоби: 8% + 92%/2 */
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.54118em; /* 0.67647em * 0.8 */
    letter-spacing: -0.01em;
    color: rgba(160, 160, 158, 0.18);
    filter: blur(0.01103em);
    text-align: center;
    width: 100%;
    z-index: 0;
    transition: top 0.3s ease, filter 0.3s ease;
  }

  /* Тримається середини скоби: 10% + 90%/2 = 55%. Стає чіткішою. */
  .sk-btn-wrap.sk-pressed .sk-mini-echo {
    top: 52%;
    filter: blur(0.00368em);
  }

  /* Власна обгортка з overflow:hidden — щоб розмиття не вилазило за межі
     кнопки на кільце. */
  .sk-white-overlay-clip {
    position: absolute;
    inset: 0;
    border-radius: 7.34559em;
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
  }

  /* Проста діагональ через літеру "o": ліворуч/вище — без змін,
     праворуч/нижче лінії — біле напівпрозоре, тепер прозоріше й м'якше. */
  .sk-white-overlay {
    position: absolute;
    top: -0.14706em;
    bottom: -0.14706em;
    left: -0.14706em;
    right: -1.47059em; /* великий запас праворуч — щоб навіть після зсуву вліво
                       права частина кнопки лишалась повністю покритою */
    background: linear-gradient(
      135deg,
      transparent 0%,
      transparent 44%,
      rgba(255, 255, 255, 0.366) 48%,
      rgba(255, 255, 255, 0.219) 56%,
      rgba(255, 255, 255, 0.105) 70%,
      rgba(255, 255, 255, 0.105) 100%
    );
    transition: transform 0.35s ease;
  }

  /* Натискання: уся плівка зсувається вліво трансформацією — плавно,
     бо transform анімується завжди, на відміну від заміни градієнта. */
  .sk-btn-wrap.sk-pressed .sk-white-overlay {
    transform: translateX(-0.625em);
  }

  .sk-btn-body::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7.34559em;
    background-image: radial-gradient(circle, rgba(0,0,0,0.045) 0.00735em, transparent 0.00735em);
    background-size: 0.10294em 0.10294em;
    filter: blur(0.00294em);
  }

  /* Світла маска вздовж усього низу кнопки, розмита/згасає вгору. */
  .sk-bottom-glow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.65), transparent 100%);
  }

  .sk-label {
    position: relative;
    z-index: 2;
    top: 0;
    /* SVG замінив текст — центруємо флексом, бо інлайновий baseline-зсув
       SVG-елемента інакше трохи зміщував іконку. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.67647em;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #6b7075; /* темніше за плейсхолдер — краще читається на тлі кнопки */
    filter: drop-shadow(-0.00735em -0.00735em 0 rgba(0, 0, 0, 0.35))
            drop-shadow(0.00368em 0.00368em 0 rgba(255, 255, 255, 0.45));
  }

  /* Дзеркальне розмите "відлуння" тексту знизу — повільно пульсує. */
  .sk-echo {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.67647em;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(60, 60, 65, 0.22);
    transform: scaleY(-0.3) translateY(0.01471em);
    transform-origin: top;
    filter: blur(0.02206em);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 75%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 75%);
    animation: sk-echo-breathe 4.5s ease-in-out infinite;
  }

  @keyframes sk-echo-breathe {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.75; }
  }

  /* ===================== НАША КНОПКА (замість "+") — 36px ===================== */
  .gm-wrap {
    position: relative;
    width: var(--dock-h);
    height: var(--dock-h);
    flex-shrink: 0;
    will-change: width;
    /* Коли розкрито — ширина росте, щоб вмістити всі 4 кружечки з
       відступами (56 + 3×72), і та сама анімація "виштовхує" поле
       введення вправо через flex-перерахунок. Без підскоку тут —
       він лишається тільки на самих кнопках (нижче), інакше два
       окремі підскоки (layout і transform) трохи розходяться в часі
       й лишають відчуття "не зовсім на місці". */
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .gm-wrap.gm-wrap-open { width: calc(var(--dock-h) * 4.857); }
  .gm-goo { position: absolute; width: 0; height: 0; }

  .gm-menu {
    position: relative;
    width: var(--dock-h);
    height: var(--dock-h);
    filter: url(#gmGoo);
    will-change: filter;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .gm-item {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--dock-h);
    height: var(--dock-h);
    border-radius: 50%;
    clip-path: circle(50%);
    will-change: transform, filter;
    border: none;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateX(0) scale(0);
    opacity: 0;
    transition:
      transform 0.5s cubic-bezier(0.34, 1.28, 0.64, 1),
      opacity 0.3s ease;
  }
  /* Instagram — еталон. Email — та сама ШИРИНА, що й Instagram
     (різний viewBox, тож розмір самого SVG більший, щоб фактична
     ширина іконки збіглась). WhatsApp — діаметр його кола = ширині
     Instagram, з тієї самої причини. */
  .icon-instagram { width: calc(var(--dock-h) * 0.41); height: calc(var(--dock-h) * 0.41); }
  .icon-email { width: calc(var(--dock-h) * 0.4845); height: calc(var(--dock-h) * 0.4845); }
  .icon-whatsapp { width: calc(var(--dock-h) * 0.4473); height: calc(var(--dock-h) * 0.4473); }

  .gm-toggle {
    position: relative;
    transform: scale(1);
    opacity: 1;
    z-index: 2;
  }
  .gm-toggle-icon {
    display: block;
    font-size: 16px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.35s ease, opacity 0.32s ease;
  }
  .gm-menu.gm-open .gm-toggle-icon { transform: rotate(135deg); }

  /* Логотип "C" — з'являється плавно ПІСЛЯ згортання (затримка, щоб
     встигла завершитись анімація закриття), замінюючи собою "+". */
  .gm-toggle-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--dock-h) * 0.41); /* той самий розмір, що й Instagram */
    height: calc(var(--dock-h) * 0.41);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease 0.2s;
  }
  .gm-menu.gm-open .gm-toggle-logo {
    opacity: 0;
    transition-delay: 0s; /* при відкритті ховається миттєво, без затримки */
  }
  .gm-menu:not(.gm-open) .gm-toggle-logo { opacity: 1; }
  .gm-menu:not(.gm-open) .gm-toggle-icon { opacity: 0; transition-delay: 0.2s; }
  .gm-menu.gm-open .gm-toggle-icon { opacity: 1; }

  .gm-menu.gm-open .gm-item:not(.gm-toggle) {
    transform: translateX(calc(var(--i) * var(--dock-h) * 1.2857)) scale(1);
    opacity: 1;
    transition-delay: calc(var(--i) * 0.04s);
  }

/* ===================== Перевизначення для сайту (мають йти ПІСЛЯ бази) ===================== */
/* ----- кнопка "C" (розгортає контакти) ----- */
.dock .gm-wrap { align-self: flex-end; }
.gm-item { background: var(--c-bg); padding: 0; }
.gm-item svg { fill: var(--c-icon, #fff); }
:root[data-theme="dark"] .gm-item { --c-icon: #111; }
.gm-toggle-logo { filter: var(--c-logo-filter); }
.gm-toggle { color: var(--c-icon, #fff); }
:root[data-theme="dark"] .gm-toggle { color: #111; }

/* під час диктовки "C" стає хрестиком-скасуванням (voice.js ставить .dictating) */
#attach-btn.dictating .gm-toggle-logo { opacity: 0 !important; transition-delay: 0s; }
#attach-btn.dictating .gm-toggle-icon { opacity: 1 !important; transform: rotate(135deg); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .gm-item, .gm-wrap, .sk-btn-wrap { transition-duration: 0.001ms !important; }
}



/* ===================== Темна тема: прозоре скло Skittle ===================== */
/* Тіло кнопки напівпрозоре — крізь нього видно темний фон; відблиск, рефлексія,
   обідок і світіння лишаються, щоб читався той самий ефект скла. */
:root[data-theme="dark"] .sk-btn { filter: drop-shadow(0.06em 0.04em 0.05em rgba(0, 0, 0, 0.55)); }
:root[data-theme="dark"] .sk-btn-wrap.sk-pressed .sk-btn { filter: drop-shadow(0.03em 0.02em 0.03em rgba(0, 0, 0, 0.7)); }
:root[data-theme="dark"] .sk-depth-oval { display: none; }

/* Обідок: тонкі кільця світлого, напівпрозорого скла (маска лишає тільки кільце,
   щоб градієнт не просвічував крізь прозоре тіло) */
.sk-ring-clip {
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 0.02206em - 0.5px), #000 calc(100% - 0.02206em));
  mask-image: radial-gradient(circle closest-side, transparent calc(100% - 0.02206em - 0.5px), #000 calc(100% - 0.02206em));
}
.sk-ring-clip-2 {
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 0.00735em - 0.5px), #000 calc(100% - 0.00735em));
  mask-image: radial-gradient(circle closest-side, transparent calc(100% - 0.00735em - 0.5px), #000 calc(100% - 0.00735em));
}
:root[data-theme="dark"] .sk-ring-rotator {
  background: conic-gradient(from 90deg,
    rgba(255,255,255,0.95) 0deg, rgba(120,205,100,0.62) 45deg, rgba(255,255,255,0.85) 135deg,
    rgba(120,205,100,0.52) 225deg, rgba(255,255,255,0.8) 315deg, rgba(255,255,255,0.95) 360deg);
}
:root[data-theme="dark"] .sk-ring-rotator-2 {
  background: conic-gradient(from 110deg,
    rgba(255,255,255,0.9) 0deg, rgba(110,200,95,0.58) 45deg, rgba(255,255,255,0.7) 135deg,
    rgba(110,200,95,0.48) 210deg, rgba(255,255,255,0.75) 315deg, rgba(255,255,255,0.9) 360deg);
}

/* Тіло: майже прозоре, з ледь помітним світлішим верхом, як у склі */
:root[data-theme="dark"] .sk-btn-body {
  background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.045) 45%, rgba(255,255,255,0.02) 100%);
  box-shadow:
    inset 0 0.01471em 0.00735em rgba(255, 255, 255, 0.35),
    inset 0 -0.07353em 0.13235em -0.05882em rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .sk-btn-body::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 0.00735em, transparent 0.00735em);
}
:root[data-theme="dark"] .sk-inner-smudge { border-color: rgba(255, 255, 255, 0.30); }
:root[data-theme="dark"] .sk-bottom-glow { background: linear-gradient(to top, rgba(255,255,255,0.16), transparent 100%); }
:root[data-theme="dark"] #voice-mode-btn .sk-label { filter: drop-shadow(0 0 0.02em rgba(255,255,255,0.25)); }


/* ===================== Світіння не сходиться в центр кнопки (обидві теми) ===================== */
/* Центр лишається чистим: промені плавно згасають до центру, а точка, де сходиться
   конічний градієнт, не видна. */
#voice-mode-btn .glow-host {
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 38%, rgba(0,0,0,0.55) 62%, #000 82.4%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 38%, rgba(0,0,0,0.55) 62%, #000 82.4%, transparent 100%);
}
#voice-mode-btn .aim-glow-inner {
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 50%, #000 92%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent 50%, #000 92%, transparent 100%);
}

/* ===================== Світла тема: теж прозоре скло ===================== */
:root[data-theme="light"] .sk-btn-body {
  background: linear-gradient(135deg, rgba(250,250,249,0.50) 0%, rgba(236,236,234,0.42) 45%, rgba(220,220,218,0.38) 100%);
}
:root[data-theme="light"] .sk-ring-rotator { opacity: 1; }


/* ===================== Поле: матове напівпрозоре скло, ахроматичне ===================== */
:root {
  --fld-fill: rgba(255, 255, 255, 0.58);
  --fld-fill-active: rgba(255, 255, 255, 0.10);
  --fld-text: #202124;
  --fld-ico: #80868b;
  /* контур: два піки — ліва верхня та права нижня дуга */
  /* як на кільці Skittle: світлий пік — права верхня та ліва нижня дуги,
     темніший — ліва верхня та права нижня; на прямих відрізках — рівний тон */
  --fld-edge-hi: rgba(255, 255, 255, 0.95);
  --fld-edge-mid: rgba(190, 190, 185, 0.50);
  --fld-edge-lo: rgba(150, 150, 145, 0.85);
}
:root[data-theme="dark"] {
  --fld-fill: rgba(255, 255, 255, 0.045);
  --fld-fill-active: rgba(255, 255, 255, 0.02);
  --fld-text: #e8eaed;
  --fld-ico: #9aa0a6;
  --fld-edge-hi: rgba(255, 255, 255, 0.60);
  --fld-edge-mid: rgba(255, 255, 255, 0.16);
  --fld-edge-lo: rgba(255, 255, 255, 0.07);
  --sk-icon: #bfc3c7;
}

.input-inner {
  position: relative;
  background: var(--fld-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
/* Контур поля — однотонна тонка лінія 0.5px (піки градієнта прибрано) */
.input-inner { border: 0.5px solid var(--fld-edge-mid); }

/* Голосова диктовка: тонкий контур поля підсвічується веселковим градієнтом
   (та сама палітра, що й світіння Skittle); фон поля не змінюється. */
@property --fld-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.input-inner::before {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 0.5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: conic-gradient(from var(--fld-ang),
    #9378ff 0%, #f96bd6 6%, #ff6b2b 12%, #fec700 20%, #88de42 30%, #0ebc5f 42%, #2eaab2 54%,
    #19b765 66%, #6fcf4a 78%, #0ebc5f 88%, #3186ff 96%, #9378ff 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.input-inner.dictating-glow::before {
  opacity: 0.55;
  animation: fld-spin 5s linear infinite;
}
@keyframes fld-spin { to { --fld-ang: 360deg; } }
body.voice-active .input-inner { background: var(--fld-fill-active); }


.input-inner #chat-input { color: var(--fld-text); }
.input-inner #chat-input::placeholder { color: var(--fld-ico); }
#mic-btn { color: var(--fld-ico); }
#mic-btn.listening { color: var(--accent-a); }


/* ===================== Диктовка: еквалайзер і мікрофон у гамі Skittle ===================== */
.mic-eq-long span { background: var(--sk-icon); }
#mic-btn.listening,
:root[data-theme="light"] #mic-btn.listening { color: var(--sk-icon); background: var(--dock-focus-bg); }


/* Skittle: без ефекту "втоплення" — іконка пласка, без зміщених тіней */
#voice-mode-btn .sk-label { filter: none; }
:root[data-theme="dark"] #voice-mode-btn .sk-label { filter: none; }


/* Темна тема: косий блік на склі Skittle — прозоріший */
:root[data-theme="dark"] .sk-white-overlay {
  background: linear-gradient(135deg,
    transparent 0%, transparent 44%,
    rgba(255, 255, 255, 0.17) 48%, rgba(255, 255, 255, 0.10) 56%,
    rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.05) 100%);
}

/* Мікрофон: овал заповнений суцільним тоном, решта — контур */
#mic-btn .mic-icon-default path:first-child { fill: currentColor; }

/* Іконки Skittle — на ~10% менші */
#voice-mode-btn .sk-label svg { width: 0.7337em; height: 0.7337em; }
#voice-mode-btn.show-spinner .vi-spinner { width: 0.36em; height: 0.36em; }


/* ===================== Єдина товщина ліній іконок ≈ 2px ===================== */
/* Іконки-контури (viewBox 24): товщина в одиницях = 2px / масштаб */
#mic-btn .mic-icon-default { stroke-width: 2.13; }          /* 18px / 24  → 1.6px */
#voice-mode-btn .vi { stroke-width: 2.1;  }                 /* ≈2.8px */

/* Іконки Instagram / Email / WhatsApp — готові заливні контури: доводимо
   товщину лінії до ≈2px додатковою обводкою того ж кольору */
.gm-item svg path { stroke: var(--c-icon, #fff); stroke-linejoin: round; }
.icon-instagram path { stroke-width: 0; }                       /* природна товщина ≈1.6px */
.gm-item .icon-email path { stroke: var(--c-bg); stroke-width: 0.2; }   /* стоншуємо ≈1.79 → ≈1.62px, як Instagram */
.icon-whatsapp path { stroke-width: 0.10; }                     /* 1.54 → ≈1.6px */

#mic-btn .mic-icon-default path:first-child { stroke-width: 1.7; } /* овал лишається колишнього розміру */

/* Мікрофон: голова трохи вище — більший просвіт до ніжки */
#mic-btn .mic-icon-default path:first-child { transform: translateY(-1px); }


/* ===================== Прибрано цятки (рудимент першого дизайну) на тілі Skittle ===================== */
/* Статичний ледь помітний трав'яно-теплозелений перелив під склом у стані за замовчуванням
   (замість цяток). Світіння при наведенні лишається поверх нього. */
.sk-btn-body::before,
:root[data-theme="dark"] .sk-btn-body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: conic-gradient(from 210deg,
    #2f9e44, #6fbf3a, #b5d334, #e0c94a, #9ccc4f, #4fb36a, #2f9e44);
  background-size: auto;
  filter: blur(0.06em) saturate(1.1);
  opacity: var(--sk-tint, 0.28);
  /* обертається разом із зовнішнім світінням (той самий --c, що крутить .aim-disc);
     у спокої --c = 180deg, тож вигляд статичний */
  rotate: calc(var(--c, 180deg) - 180deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 18%, rgba(0,0,0,0.7) 55%, #000 100%);
  mask-image: radial-gradient(circle closest-side, transparent 18%, rgba(0,0,0,0.7) 55%, #000 100%);
  pointer-events: none;
}
:root { --sk-tint: 0.62; }
:root[data-theme="dark"] { --sk-tint: 0.36; }
:root[data-theme="dark"] .sk-btn-body::before { filter: blur(0.06em) saturate(1.25) brightness(1.2); }


/* ===================== Кнопка "C" у стилі поля введення ===================== */
/* Склянка лише у згорнутому стані (фільтр goo вимкнений — він би зробив напівпрозорість
   суцільною). Коли меню відкрите (.gm-goo) — темна "крапля", як і решта кнопок. */
:root {
  --c-logo-goo: brightness(0) invert(1);
  --c-logo-glass: brightness(0) invert(0.1);   /* як колір тексту wordmark */
  --fld-shadow:
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
:root[data-theme="dark"] {
  --c-logo-goo: brightness(0) invert(0);
  --c-logo-glass: brightness(0) invert(0.9);
}

.gm-menu:not(.gm-goo) { filter: none; will-change: auto; }
.gm-menu.gm-goo { filter: url(#gmGoo); }

.gm-toggle {
  border: 0.5px solid transparent;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.28, 0.64, 1),
    opacity 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}
.gm-toggle-logo { filter: var(--c-logo-goo); transition: opacity 0.32s ease 0.2s, filter 0.3s ease; }

.gm-menu:not(.gm-goo) .gm-toggle {
  clip-path: none;
  background: var(--fld-fill);
  border-color: var(--fld-edge-mid);
  box-shadow: var(--fld-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
}
.gm-menu:not(.gm-goo) .gm-toggle-logo { filter: var(--c-logo-glass); }
body.voice-active .gm-menu:not(.gm-goo) .gm-toggle { background: var(--fld-fill-active); }
.gm-menu:not(.gm-goo) .gm-toggle:active { transform: scale(0.94); }


/* ===================== Перемикач теми: у стилі кнопок дока ===================== */
.theme-toggle {
  width: var(--dock-h);
  height: var(--dock-h);
  border: 0.5px solid var(--fld-edge-mid);
  background: var(--fld-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  box-shadow:
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
  outline: none;
  transition: background-color 0.18s ease, color 0.3s ease, box-shadow 0.18s ease,
              transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover {
  border-color: var(--fld-edge-mid);
  box-shadow:
    inset 0 0 0 50px var(--dock-hover-bg),
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle:focus-visible { box-shadow: inset 0 0 0 50px var(--dock-focus-bg); border-radius: 50%; }
.theme-toggle .core { fill: currentColor; stroke: none; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.3s ease; }
.theme-toggle .ray { stroke: currentColor; stroke-width: 2.13; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }


/* Клік по Skittle: виразніша веселкова хвиля навколо контуру (одне швидке коло) */
.sk-btn-wrap.sk-bursting .aim-glow { opacity: 1; }


/* Закрите меню "C": без власного композитного шару — на iOS він міг лишати
   півкруглу маску на склі після відкриття/закриття. */
.gm-menu:not(.gm-goo) { transform: none; -webkit-transform: none; }


/* ==========================================================================
   Liquid glass (поле вводу, кнопка "C", перемикач теми): матове напівпрозоре скло.
   Дзеркальний обідок розрахований не лінійним градієнтом через усю пігулку, а
   КУТОВО від центру кожного заокруглення: яскравість залежить від напрямку
   нормалі до контуру, тож блік плавно сходить із дуги на пряму ділянку
   (так само, як на склі iOS) — без помітного стику півкола з прямою.
   Розміри, анімації й зовнішні тіні лишаються попередніми.
   ========================================================================== */
:root {
  --lg-fill: rgba(255, 255, 255, 0.30);
  --lg-spec: rgba(255, 255, 255, 0.45);
  --lg-rim-hi: rgba(255, 255, 255, 0.80);
  --lg-rim-lo: rgba(110, 118, 112, 0.13);
  --lg-inner: inset 0 0 calc(var(--dock-h) * 0.32) rgba(255, 255, 255, 0.28);
  --lg-r: calc(var(--dock-h) / 2);
  /* кутовий профіль яскравості: пік у напрямку назовні від центру кута */
  --lg-stops-hi: color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 0deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 15deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 30deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 45deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 60deg, color-mix(in srgb, var(--lg-rim-hi) 2%, var(--lg-rim-lo)) 75deg, color-mix(in srgb, var(--lg-rim-hi) 5%, var(--lg-rim-lo)) 90deg, color-mix(in srgb, var(--lg-rim-hi) 12%, var(--lg-rim-lo)) 105deg, color-mix(in srgb, var(--lg-rim-hi) 26%, var(--lg-rim-lo)) 120deg, color-mix(in srgb, var(--lg-rim-hi) 47%, var(--lg-rim-lo)) 135deg, color-mix(in srgb, var(--lg-rim-hi) 72%, var(--lg-rim-lo)) 150deg, color-mix(in srgb, var(--lg-rim-hi) 92%, var(--lg-rim-lo)) 165deg, color-mix(in srgb, var(--lg-rim-hi) 100%, var(--lg-rim-lo)) 180deg, color-mix(in srgb, var(--lg-rim-hi) 92%, var(--lg-rim-lo)) 195deg, color-mix(in srgb, var(--lg-rim-hi) 72%, var(--lg-rim-lo)) 210deg, color-mix(in srgb, var(--lg-rim-hi) 47%, var(--lg-rim-lo)) 225deg, color-mix(in srgb, var(--lg-rim-hi) 26%, var(--lg-rim-lo)) 240deg, color-mix(in srgb, var(--lg-rim-hi) 12%, var(--lg-rim-lo)) 255deg, color-mix(in srgb, var(--lg-rim-hi) 5%, var(--lg-rim-lo)) 270deg, color-mix(in srgb, var(--lg-rim-hi) 2%, var(--lg-rim-lo)) 285deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 300deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 315deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 330deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 345deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 360deg;
  --lg-stops-mid: color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 0deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 15deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 30deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 45deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 60deg, color-mix(in srgb, var(--lg-rim-hi) 1%, var(--lg-rim-lo)) 75deg, color-mix(in srgb, var(--lg-rim-hi) 2%, var(--lg-rim-lo)) 90deg, color-mix(in srgb, var(--lg-rim-hi) 5%, var(--lg-rim-lo)) 105deg, color-mix(in srgb, var(--lg-rim-hi) 11%, var(--lg-rim-lo)) 120deg, color-mix(in srgb, var(--lg-rim-hi) 19%, var(--lg-rim-lo)) 135deg, color-mix(in srgb, var(--lg-rim-hi) 29%, var(--lg-rim-lo)) 150deg, color-mix(in srgb, var(--lg-rim-hi) 37%, var(--lg-rim-lo)) 165deg, color-mix(in srgb, var(--lg-rim-hi) 40%, var(--lg-rim-lo)) 180deg, color-mix(in srgb, var(--lg-rim-hi) 37%, var(--lg-rim-lo)) 195deg, color-mix(in srgb, var(--lg-rim-hi) 29%, var(--lg-rim-lo)) 210deg, color-mix(in srgb, var(--lg-rim-hi) 19%, var(--lg-rim-lo)) 225deg, color-mix(in srgb, var(--lg-rim-hi) 11%, var(--lg-rim-lo)) 240deg, color-mix(in srgb, var(--lg-rim-hi) 5%, var(--lg-rim-lo)) 255deg, color-mix(in srgb, var(--lg-rim-hi) 2%, var(--lg-rim-lo)) 270deg, color-mix(in srgb, var(--lg-rim-hi) 1%, var(--lg-rim-lo)) 285deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 300deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 315deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 330deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 345deg, color-mix(in srgb, var(--lg-rim-hi) 0%, var(--lg-rim-lo)) 360deg;
}
:root[data-theme="dark"] {
  --lg-fill: rgba(255, 255, 255, 0.045);
  --lg-spec: rgba(255, 255, 255, 0.075);
  --lg-rim-hi: rgba(255, 255, 255, 0.34);
  --lg-rim-lo: rgba(255, 255, 255, 0.05);
  --lg-inner: inset 0 0 calc(var(--dock-h) * 0.32) rgba(255, 255, 255, 0.025);
}

.input-inner,
.theme-toggle,
.gm-menu:not(.gm-goo) .gm-toggle {
  position: relative;
  background:
    radial-gradient(130% 95% at 18% -8%, var(--lg-spec) 0%, transparent 58%),
    var(--lg-fill);
  border-color: transparent;
}
body.voice-active .input-inner,
body.voice-active .gm-menu:not(.gm-goo) .gm-toggle {
  background: var(--fld-fill-active);
}

/* Дзеркальний обідок: чотири кутові градієнти (по одному на кожне заокруглення) */
.input-inner::after,
.theme-toggle::after,
.gm-menu:not(.gm-goo) .gm-toggle::after {
  content: "";
  position: absolute;
  inset: -0.5px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background:
    conic-gradient(from 135deg at var(--lg-r) var(--lg-r), var(--lg-stops-hi)) top left / 50% 50% no-repeat,
    conic-gradient(from 225deg at calc(100% - var(--lg-r)) var(--lg-r), var(--lg-stops-mid)) top right / 50% 50% no-repeat,
    conic-gradient(from 45deg at var(--lg-r) calc(100% - var(--lg-r)), var(--lg-stops-mid)) bottom left / 50% 50% no-repeat,
    conic-gradient(from 315deg at calc(100% - var(--lg-r)) calc(100% - var(--lg-r)), var(--lg-stops-hi)) bottom right / 50% 50% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Поле трохи стриманіше за круглі кнопки */
.input-inner::after { opacity: 0.8; }
.input-inner { --lg-spec: rgba(255, 255, 255, 0.30); }
:root[data-theme="dark"] .input-inner { --lg-spec: rgba(255, 255, 255, 0.05); }

.input-inner {
  box-shadow:
    var(--lg-inner),
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
.theme-toggle {
  box-shadow:
    var(--lg-inner),
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
.theme-toggle:hover {
  box-shadow:
    var(--lg-inner),
    inset 0 0 0 50px var(--dock-hover-bg),
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
}
.gm-menu:not(.gm-goo) .gm-toggle {
  box-shadow:
    var(--lg-inner),
    calc(var(--dock-h) * 0.10294) calc(var(--dock-h) * 0.06618) calc(var(--dock-h) * 0.28) rgba(var(--dock-shadow), 0.12),
    0 0 calc(var(--dock-h) * 0.2) rgba(var(--dock-shadow), 0.05);
  /* Без backdrop-filter: у iOS Safari він лишав обрізану півкругла маску
     після закриття меню. Під кнопкою однотонний фон — вигляд той самий. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Світла тема: Skittle кольоровіший до краю; центр лишається світлим */
:root:not([data-theme="dark"]) .sk-btn-body::before {
  opacity: 0.95;
  filter: blur(0.05em) saturate(1.7);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 28%, rgba(0,0,0,0.55) 60%, #000 100%);
  mask-image: radial-gradient(circle closest-side, transparent 28%, rgba(0,0,0,0.55) 60%, #000 100%);
}


/* ===================== Скляна кнопка голосу (замість Skittle) ===================== */
/* ---------- Кнопка: розмір задає font-size (1em = діаметр/10) ---------- */
.gl-btn{--lift:0;--sk:0;--sh-o:.4;position:relative;font-size:calc(var(--dock-h) / 10);flex-shrink:0;align-self:flex-end;width:10em;height:10em;border:0;padding:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;outline:none;display:block;transition:--lift .22s cubic-bezier(.3,.7,.4,1),--sk .45s ease}
/* --lift: висота кнопки над стіною (em-частки). <0 — втиснута, >0 — підстрибнула */
@property --sk{syntax:"<number>";inherits:true;initial-value:0}
@property --lift{syntax:"<number>";inherits:true;initial-value:0}
.gl-btn.pressed{--lift:-.3}
.gl-btn.jump{animation:gl-jump .7s linear}
@keyframes gl-jump{
  0%{--lift:-.3;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  38%{--lift:.05;animation-timing-function:cubic-bezier(.4,0,.3,1)}
  100%{--lift:0}
}
/* тіло кнопки рухається по висоті; тінь і світіння лишаються на стіні й реагують на висоту */
.gl-body{position:absolute;inset:0;z-index:1;display:block;
  transform:translateY(calc(var(--lift) * -.9em)) scale(calc(1 + var(--lift) * .05))}
/* «м'якість» без зміни кола: поверхня ніби продавлюється — екран і іконка осідають углиб (і пружно виринають
   на підскоку), блік гасне, по центру з'являється м'яка вм'ятина-затемнення */
.gl-face{transform:scale(calc(1 + var(--lift) * .09))}
.gl-icon-unused{transform:scale(calc(1 + var(--lift) * .12))}
.gl-body::after{content:"";position:absolute;inset:6%;border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(0,15,8,.5),rgba(0,15,8,.2) 55%,rgba(0,15,8,0) 78%);
  opacity:clamp(0,calc(var(--lift) * -3),1)}

/* кольорова «тінь-світіння» під кнопкою: жовте ліворуч → зелене праворуч */

/* стіна ширша за кнопку з усіх боків (з запасом на розмиття й підйом), щоб маска не різала тінь;
   маска лише трохи гасить верх-ліво, залишаючи тінь, що виглядає з-під лівого краю */
.gl-btn:focus,.gl-btn:focus-visible{outline:none;box-shadow:none;border-radius:50%}
.gl-wall{position:absolute;inset:-8em;z-index:0;pointer-events:none;display:block}
.gl-glow{will-change:transform,opacity;position:absolute;left:7.5em;top:7.5em;width:11em;height:11em;border-radius:50%;z-index:0;
  background:linear-gradient(calc(120deg + var(--gl-rot, 0deg) * .6),#e3c548 0%,#c9c640 24%,#5fb84a 52%,#19a55a 76%,#12904c 100%);
  filter:blur(.95em) saturate(calc(1.25 + var(--gl-o, 0) * .7)) brightness(calc(1 + var(--gl-o, 0) * .12));opacity:calc(var(--sh-o) * (.95 + var(--gl-o, 0) * .25) * (1 - var(--lift) * .3));
  transform:translate(calc(1em + var(--sk) * -.5em), calc(1.55em + var(--sk) * -.7em)) scale(calc((9.4 + var(--sk) * 1.6) / 11 * (1 - var(--lift) * .05)));
  }
/* тінь на вертикальній стіні позаду: коло майже того ж розміру, зсунуте вниз-вправо (світло зверху-зліва);
   щільна зелена тінь + світла каустична пляма всередині, що проходить крізь скло */
.gl-shadow{will-change:transform,opacity;position:absolute;left:7.5em;top:7.5em;width:11em;height:11em;border-radius:50%;z-index:0;
  background:
    radial-gradient(38% 34% at 46% 66%,rgba(255,255,225,.7),rgba(255,255,225,0) 100%),
    radial-gradient(closest-side,rgba(6,40,24,.78) 0%,rgba(6,40,24,.55) 70%,rgba(6,40,24,.18) 100%);
  filter:blur(.7em);opacity:calc(var(--sh-o) * (1 - var(--lift) * .35));
  transform:translate(calc(1em + var(--sk) * -.5em), calc(.95em + var(--sk) * -.4em)) scale(calc((9.4 + var(--sk) * 1.6) / 11 * (1 - var(--lift) * .05)));}

/* склянка: обідок, світліший, у кольорах внутрішніх плям */
.gl-rim{position:absolute;inset:0;border-radius:50%;z-index:1;
  background:
    linear-gradient(135deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.2) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(215,255,230,.65) 100%),
    radial-gradient(70% 70% at 15% 78%,rgba(205,178,62,.85),transparent 70%),
    radial-gradient(70% 70% at 85% 85%,rgba(40,185,105,.9),transparent 70%),
    radial-gradient(120% 120% at 30% 22%,#5aa383 0%,#3b8566 45%,#2f7358 100%);
  box-shadow:
    0 .08em .16em rgba(255,255,255,.7) inset,
    0 -.1em .22em rgba(0,0,0,.3) inset,
    0 .12em .3em rgba(0,0,0,.25);
}
/* внутрішній темний «екран» з розмитим краєм */
.gl-face{position:absolute;inset:7%;border-radius:50%;z-index:2;overflow:hidden;
  background:radial-gradient(90% 90% at 50% 38%,#0c1511 0%,#0a110d 55%,#101d16 100%);
  -webkit-mask:radial-gradient(circle closest-side,#000 calc(100% - .75em),rgba(0,0,0,.55) calc(100% - .4em),transparent 100%);
  mask:radial-gradient(circle closest-side,#000 calc(100% - .75em),rgba(0,0,0,.55) calc(100% - .4em),transparent 100%)}
/* розмиті кольорові плями всередині екрана */
.gl-face::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(40% 40% at 78% 82%,rgba(36,185,100,.95),transparent 72%),
    radial-gradient(35% 35% at 18% 70%,rgba(205,175,55,.7),transparent 72%),
    radial-gradient(30% 30% at 25% 22%,rgba(60,150,100,.35),transparent 70%);
  filter:blur(.5em);animation:gl-drift 9s ease-in-out infinite alternate}
@keyframes gl-drift{to{transform:rotate(40deg) scale(1.08)}}
/* блік зверху */
.gl-face::after{content:"";position:absolute;left:14%;right:14%;top:3%;height:34%;border-radius:50%;
  background:linear-gradient(to bottom,rgba(255,255,255,.42),rgba(255,255,255,0));filter:blur(.1em);
  transform:translateX(calc(var(--lift) * .5em)) rotate(calc(var(--lift) * 5deg));opacity:clamp(.35,calc(1 + var(--lift) * 1.6),1)}
/* дві дугові відблиски на обідку */
.gl-spec{position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;
  background:conic-gradient(from calc(var(--lift) * -26deg + var(--gl-rot, 0deg)),transparent 0 6%,#fff 12% ,transparent 22% 50%,rgba(210,255,225,.95) 60%,transparent 70% 100%);
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - .55em),#000 calc(100% - .45em),#000 calc(100% - .12em),transparent 100%);
          mask:radial-gradient(circle closest-side,transparent calc(100% - .55em),#000 calc(100% - .45em),#000 calc(100% - .12em),transparent 100%);
  filter:blur(.05em);opacity:calc(.85 + var(--gl-o, 0) * .15)}
/* іконка: хвиля голосу */
.gl-icon{position:absolute;inset:0;z-index:4;display:grid;place-items:center}
.gl-icon svg{width:3.9em;height:3.9em;fill:none;stroke:#f2f7f3;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 .25em rgba(150,255,190,.45))}

/* темна сторінка: світіння трохи тихіше */


/* ---- інтеграція в сайт ---- */
:root[data-theme="dark"] .gl-btn { --sh-o: .28; }
/* світла тема: кнопка прозоріша на 10%, щоб не була надто чорною */
:root:not([data-theme="dark"]) .gl-body { opacity: .9; }
#voice-mode-btn.gl-btn { user-select:none; -webkit-user-select:none; }
.gl-label { position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none;
  transform:scale(calc(1 + var(--lift) * .12)); }
#voice-mode-btn.gl-btn .gl-label svg { width:3.9em; height:3.9em; fill:none; stroke:#f2f7f3; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 .25em rgba(150,255,190,.45)); }
#voice-mode-btn.gl-btn .vi-spinner.vi { width:3.2em; height:3.2em; border:.4em solid rgba(255,255,255,.28); border-top-color:#f2f7f3; box-sizing:border-box; }
#voice-mode-btn.gl-btn.show-spinner .vi-spinner { width:3.2em; height:3.2em; border:.4em solid rgba(255,255,255,.28); border-top-color:#f2f7f3; }
/* голосова розмова: плями всередині крутяться жвавіше, світіння на стіні яскравіше */
#voice-mode-btn.gl-btn.active .gl-face::before { animation-duration: 3.2s; }
#voice-mode-btn.gl-btn.active { --sk: 1; }
#voice-mode-btn.gl-btn.active .gl-glow { opacity: .68; }
@media (prefers-reduced-motion: reduce) { .gl-btn, .gl-btn * { animation: none !important; } }