/* ===================== Cosmos Origin: штрих + великий заголовок ===================== */
.origin-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 10;               /* над текстом, але під шапкою й доком (у них z-index 25) */
  pointer-events: none;
  transition: opacity 0.8s ease;
}
body.origin-done .origin-canvas { opacity: 0; }
body.voice-active .origin-canvas { opacity: 0; }

/* Жест пальцем малює, а не гортає (лише поки триває Origin) */
body.origin-active .chat-container,
body.origin-active .chat-container *,
body.origin-active .top-bar { touch-action: none; }
body.origin-active .chat-container { -webkit-user-select: none; user-select: none; }

/* Велика фраза: пропорції референсу — 3.4vw до 64px (десктоп) / 12vw (телефон), Inter,
   щільний трекінг і інтерліньяж. Починається з того ж місця, що й раніше. */
.intro h1 {
  font-size: clamp(44px, 3.4vw, 64px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: 100%;       /* не виходить за поле чату */
}
@media (max-width: 767px) { .intro h1 { font-size: 12vw; } }
.intro h1 .cursor { width: 0.045em; height: 0.85em; margin-left: 0.06em; vertical-align: -0.08em; }


/* Поле вводу й кнопки біля нього з'являються, коли головна фраза додрукована */
.input-bar, .voice-toggle { transition: opacity 0.9s ease; }
body.intro-wait .input-bar,
body.intro-wait .voice-toggle { opacity: 0; pointer-events: none; }

@media (pointer: coarse) { #chat-input::placeholder { font-size: 15px; } }

/* Додано на головний екран: сторінка заходить під рядок стану iPhone — відступ зверху */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .top-bar { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
}

/* Пропозиція зберегти сайт на головний екран: той самий «скляний» вигляд і заокруглення, що й у поля вводу.
   Якщо текст не вміщається в один рядок, радіус лишається таким самим (не стає «таблеткою»). */
.a2hs-hint {
  position: fixed;
  left: 50%;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-height: var(--dock-h, 44px);
  padding: 4px 6px 4px 6px;
  border-radius: calc(var(--dock-h, 44px) / 2);
  border: 0.5px solid transparent;
  font-size: 14px;
  line-height: 1.35;
  color: var(--fld-text, var(--text));
  background:
    radial-gradient(130% 95% at 18% -8%, var(--lg-spec, transparent) 0%, transparent 58%),
    var(--lg-fill, rgba(255,255,255,0.1));
  box-shadow:
    calc(var(--dock-h, 44px) * 0.10294) calc(var(--dock-h, 44px) * 0.06618) calc(var(--dock-h, 44px) * 0.28) rgba(var(--dock-shadow, 0,0,0), 0.12),
    0 0 calc(var(--dock-h, 44px) * 0.2) rgba(var(--dock-shadow, 0,0,0), 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.a2hs-hint.show { opacity: 1; transform: translate(-50%, 0); }
.a2hs-hint.leaving { opacity: 0; transform: translate(-50%, 6px); }
.a2hs-hint svg { flex: none; opacity: 0.75; }
.a2hs-hint .a2hs-main {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px 6px 6px 12px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.a2hs-hint .a2hs-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 18px; line-height: 1; opacity: 0.5; cursor: pointer;
}


/* ==========================================================================
   Нижня зона: чат тягнеться під поле вводу. Довга розмова заходить за скляне поле,
   приглушується градієнтом і зникає на самому краю екрана.
   ========================================================================== */
.bottom-zone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;                  /* як було у колонці body: підпис «голос» по центру */
  flex-direction: column;
  pointer-events: none;           /* дотики крізь порожні місця — до чату */
}
.bottom-zone .voice-toggle,
.bottom-zone .dock > * { pointer-events: auto; }
.bottom-zone .voice-toggle { background: transparent; }
.bottom-zone::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; top: -46px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg-t) 55%, transparent) 30%,
    color-mix(in srgb, var(--bg-t) 80%, transparent) 58%,
    var(--bg-t) 100%);
}
/* градієнт лише коли в чаті вже є повідомлення (інакше він глушив би малюнок Origin) */
body:has(#chat-messages > .msg):not(.origin-active) .bottom-zone::before { opacity: 1; }
.chat-scroll-pad { padding-bottom: calc(var(--zone-h, 120px) + 12px); }
.chat-fade-bottom { display: none; }

/* Матове скло під кнопкою «C»: окремий шар поза фільтром goo (у фільтрованому
   шарі iOS Safari ламав розмиття й лишав на кнопці півкругла маску). */
.gm-frost {
  position: absolute;
  left: 0; bottom: 0;
  width: var(--dock-h);
  height: var(--dock-h);
  border-radius: 50%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.25s ease;
}
.gm-wrap.gm-wrap-open .gm-frost { opacity: 0; }

/* Колір фону для градієнтів-згасань: анімується тим самим 0.55s ease, що й фон body,
   тож при зміні теми градієнти згасають синхронно з рештою фону (без проміжного
   «світлого пояса» на сірому тлі). */
@property --bg-t { syntax: "<color>"; inherits: true; initial-value: #0A0F0D; }
:root { --bg-t: var(--bg); transition: --bg-t 0.55s ease; }
.chat-fade-top { background: linear-gradient(to bottom, var(--bg-t) 0%, transparent 100%); }

/* Голосовий чат: градієнт не чіпає хвилі */
body.voice-active .bottom-zone::before { opacity: 0 !important; }

/* ---- C → Поширити, поки на стартовому екрані є малюнок ---- */
.gm-toggle-share { position:absolute; top:50%; left:50%; width:calc(var(--dock-h) * 0.486); height:calc(var(--dock-h) * 0.486);
  transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; transition:opacity .32s ease, transform .32s ease; }
body.share-mode .gm-menu:not(.gm-open) .gm-toggle-share { opacity:1; transform:translate(-50%,-50%) scale(1); }
body.share-mode .gm-menu:not(.gm-open) .gm-toggle-logo { opacity:0; transition-delay:0s; }

/* лінія ≈1.6px, як у Instagram: 38/512 × 0.486×44px ≈ 1.6px */
.gm-item .gm-toggle-share, .gm-item .gm-toggle-share path { fill:none; stroke:var(--c-icon,#fff); stroke-width:38px; stroke-linecap:round; stroke-linejoin:round; }
.gm-item .gm-toggle-share { stroke:none; }
/* колір як у «C» у скляному стані: темний у світлій темі, світлий у темній */
.gm-menu:not(.gm-goo) .gm-item .gm-toggle-share path { stroke:#1a1a1a; }
:root[data-theme="dark"] .gm-menu:not(.gm-goo) .gm-item .gm-toggle-share path { stroke:#e6e6e6; }

/* меню «Поширити»: замість контактів — фото й відео */
body.share-mode .gm-item[data-href] { display:none; }
body:not(.share-mode) .gm-item[data-share] { display:none; }
.icon-share-opt { width:calc(var(--dock-h) * 0.455); height:calc(var(--dock-h) * 0.455); }
.gm-item .icon-share-opt, .gm-item .icon-share-opt path, .gm-item .icon-share-opt circle {
  fill:none; stroke:var(--c-icon,#fff); stroke-width:41px; stroke-linecap:round; stroke-linejoin:round; }
.gm-item .icon-share-opt { stroke:none; }
@keyframes share-pulse { 50% { opacity:.35; } }
body.share-busy .gm-item[data-share="video"], body.share-ready .gm-item[data-share="video"] { animation:share-pulse 1s ease-in-out infinite; }
body.share-ready .gm-toggle-share { animation:share-pulse 1s ease-in-out infinite; }

/* у режимі «Поширити» лише 2 кружки — меню коротше, поле не відсувається задалеко */
body.share-mode .gm-wrap.gm-wrap-open { width: calc(var(--dock-h) * 3.571); }

/* спінер на лівій кнопці, поки готується відео (такий самий, як у голосовій кнопці) */
.gm-toggle-spin { position:absolute; top:50%; left:50%; width:calc(var(--dock-h) * 0.4); height:calc(var(--dock-h) * 0.4);
  margin:calc(var(--dock-h) * -0.2) 0 0 calc(var(--dock-h) * -0.2); box-sizing:border-box; border-radius:50%;
  border:2px solid rgba(26,26,26,.2); border-top-color:#1a1a1a; opacity:0; pointer-events:none; transition:opacity .2s ease; }
:root[data-theme="dark"] .gm-toggle-spin { border-color:rgba(230,230,230,.22); border-top-color:#e6e6e6; }
body.share-busy .gm-menu:not(.gm-open) .gm-toggle-spin { opacity:1; animation:gm-spin .7s linear infinite; }
body.share-busy .gm-menu:not(.gm-open) .gm-toggle-share { opacity:0; }
@keyframes gm-spin { to { transform:rotate(360deg); } }

/* плейсхолдер ховається, коли поле стиснуте й текст не вміщається */
#chat-input::placeholder { transition: color .15s ease; }
.input-inner.ph-hidden #chat-input::placeholder { color: transparent; }