/* Чат-помічник «Ара Друк»: скляний (liquid glass) дизайн у фірмових кольорах */
.ac-launcher, .ac-panel, .ac-intro { --ac-green: var(--green, #338309); --ac-yellow: var(--yellow, #faab01); --ac-ink: var(--ink, #20251c); font-family: Montserrat, sans-serif; }

/* ── Аватар-папуга ── */
.ac-av { position: relative; display: grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #fff 0%, #eef6e4 55%, #d9ecc4 100%); box-shadow: inset 0 1px 1px #fff, inset 0 -3px 6px rgb(51 131 9 / 18%), 0 2px 8px rgb(51 131 9 / 22%); }
.ac-av img { width: 84%; height: 84%; object-fit: contain; transform-origin: 60% 70%; }
.ac-av-lg { width: 100%; height: 100%; }
.ac-av-md { width: 44px; height: 44px; }
.ac-av-sm { width: 28px; height: 28px; align-self: flex-end; }
.ac-is-talking .ac-av img { animation: ac-talk .5s ease-in-out infinite; }
.ac-panel.is-talking .ac-av-md img, .ac-panel.is-talking .ac-typing .ac-av img { animation: ac-talk .45s ease-in-out infinite; }
@keyframes ac-talk { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-9deg) translateY(-1px); } 65% { transform: rotate(7deg) translateY(1px); } }

/* ── Кнопка-папуга ── */
.ac-launcher { position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--footer-offset, 0px)); z-index: 55; width: 66px; height: 66px; padding: 5px; border: 0; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / 85%), rgb(255 255 255 / 35%)); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 10px 28px rgb(51 131 9 / 35%), inset 0 1px 1px #fff, inset 0 -2px 6px rgb(51 131 9 / 20%); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8); transition: opacity .45s, transform .45s cubic-bezier(.2, 1.3, .4, 1), visibility .45s; }
.ac-launcher.is-ready { opacity: 1; visibility: visible; transform: none; animation: ac-float 4.5s ease-in-out 1s infinite; }
.ac-launcher.is-ready:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.06); }
.ac-launcher:focus-visible, .ac-chip:focus-visible, .ac-send:focus-visible, .ac-close:focus-visible, .ac-intro-x:focus-visible { outline: 3px solid var(--ac-yellow); outline-offset: 3px; }
@keyframes ac-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.ac-ring { position: absolute; inset: -3px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, var(--ac-green), var(--ac-yellow), #8fd14f, var(--ac-green)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ac-spin 6s linear infinite; pointer-events: none; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-launcher::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ac-green); opacity: 0; pointer-events: none; }
.ac-launcher.is-wave::after { animation: ac-pulse 1.6s ease-out 3; }
.ac-launcher.is-wave .ac-av img { animation: ac-wave 1.1s ease-in-out 3; }
@keyframes ac-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes ac-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(10deg) scale(1.08); } }
.ac-badge { position: absolute; top: -4px; right: -4px; min-width: 24px; padding: 3px 6px; border-radius: 999px; background: linear-gradient(135deg, #4aa516, var(--ac-green)); color: #fff; font: 800 10.5px/1 Montserrat, sans-serif; letter-spacing: .04em; text-align: center; box-shadow: 0 2px 6px rgb(51 131 9 / 45%), inset 0 1px 0 rgb(255 255 255 / 45%); border: 1.5px solid #fff; }
html.chat-open .ac-launcher { opacity: 0; visibility: hidden; pointer-events: none; }
html.chat-open .scroll-top:not(.contact-fab) { opacity: 0; visibility: hidden; }

/* ── Підказка при першому візиті ── */
.ac-intro { --iw: 270px; position: fixed; left: max(24px, env(safe-area-inset-left)); width: var(--iw); bottom: calc(max(24px, env(safe-area-inset-bottom)) + 82px + var(--footer-offset, 0px)); z-index: 56; display: flex; align-items: flex-start; gap: 6px; padding: 12px 10px 12px 16px; border: 1px solid rgb(255 255 255 / 75%); border-radius: 20px; background: linear-gradient(150deg, rgb(255 255 255 / 82%), rgb(255 255 255 / 55%)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 14px 34px rgb(30 60 10 / 24%), inset 0 1px 0 #fff; color: var(--ac-ink); opacity: 0; transform: translateY(14px) scale(.9); transform-origin: left bottom; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.ac-intro[hidden] { display: none; }
.ac-intro::after { content: ""; position: absolute; left: 29px; bottom: -7px; width: 14px; height: 14px; border-radius: 0 0 4px 0; background: linear-gradient(135deg, transparent 50%, rgb(255 255 255 / 70%) 50%); transform: rotate(45deg) scale(.9); border: 0; backdrop-filter: none; }
.ac-intro.is-on { opacity: 1; transform: none; }
.ac-intro-text { display: grid; gap: 3px; cursor: pointer; }
.ac-intro-text strong { font-size: 14px; }
.ac-intro-text span { font-size: 12.5px; color: var(--muted, #74776b); line-height: 1.35; }
.ac-intro-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgb(0 0 0 / 6%); color: var(--ac-ink); font-size: 16px; line-height: 1; cursor: pointer; }

/* ── Вікно чату (liquid glass) ── */
.ac-panel { --pw: min(392px, calc(100vw - 32px)); position: fixed; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; width: var(--pw); height: min(590px, calc(100dvh - 48px)); border: 1px solid rgb(255 255 255 / 70%); border-radius: 28px; background: linear-gradient(160deg, rgb(255 255 255 / 86%), rgb(244 248 236 / 72%)); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: 0 28px 70px rgb(30 60 10 / 34%), 0 2px 0 rgb(255 255 255 / 70%) inset, 0 -1px 0 rgb(51 131 9 / 14%) inset; color: var(--ac-ink); overflow: hidden; transform-origin: left bottom; animation: ac-in .42s cubic-bezier(.2, 1.15, .4, 1); isolation: isolate; }
.ac-panel[hidden] { display: none; }
@keyframes ac-in { from { opacity: 0; transform: translateY(24px) scale(.86); } }
.ac-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ac-aura::before, .ac-aura::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(42px); opacity: .55; }
.ac-aura::before { top: 20%; left: -70px; background: radial-gradient(circle, #8fd14f, transparent 70%); animation: ac-drift 11s ease-in-out infinite; }
.ac-aura::after { bottom: 8%; right: -80px; background: radial-gradient(circle, #ffc94d, transparent 70%); animation: ac-drift 13s ease-in-out -4s infinite reverse; }
@keyframes ac-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -50px); } }

.ac-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgb(51 131 9 / 94%), rgb(96 176 28 / 88%)); color: #fff; box-shadow: inset 0 -1px 0 rgb(255 255 255 / 25%); }
.ac-head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 10% -30%, rgb(255 255 255 / 45%), transparent 55%); pointer-events: none; }
.ac-head > * { position: relative; z-index: 1; }
.ac-head .ac-av { box-shadow: 0 0 0 2px rgb(255 255 255 / 70%), 0 4px 12px rgb(0 0 0 / 22%); }
.ac-head-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.ac-head-text strong { font-size: 15px; letter-spacing: .01em; }
.ac-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; opacity: .92; }
.ac-dot-on { width: 7px; height: 7px; border-radius: 50%; background: #c9ff7a; box-shadow: 0 0 0 0 rgb(201 255 122 / 70%); animation: ac-live 2s infinite; }
@keyframes ac-live { 70% { box-shadow: 0 0 0 7px rgb(201 255 122 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(201 255 122 / 0%); } }
.ac-close { flex: none; width: 32px; height: 32px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 50%; background: rgb(255 255 255 / 20%); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: transform .25s, background .2s; }
.ac-close:hover { transform: rotate(90deg); background: rgb(255 255 255 / 32%); }

.ac-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgb(51 131 9 / 35%) transparent; }
.ac-row { display: flex; align-items: flex-end; gap: 8px; }
.ac-row-user { justify-content: flex-end; }
.ac-new.ac-row-bot { animation: ac-bot-in .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.ac-new.ac-row-user { animation: ac-user-in .45s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ac-bot-in { from { opacity: 0; transform: translateY(12px) scale(.94); filter: blur(4px); } }
@keyframes ac-user-in { from { opacity: 0; transform: translate(26px, 46px) scale(.8); } }
.ac-msg { max-width: 80%; padding: 10px 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ac-bot { background: linear-gradient(150deg, rgb(255 255 255 / 85%), rgb(255 255 255 / 55%)); border: 1px solid rgb(255 255 255 / 80%); border-radius: 18px 18px 18px 5px; box-shadow: 0 4px 14px rgb(30 60 10 / 8%), inset 0 1px 0 #fff; }
.ac-user { background: linear-gradient(145deg, #4fae1c, var(--ac-green) 60%, #2a6e07); color: #fff; border-radius: 18px 18px 5px 18px; box-shadow: 0 6px 16px rgb(51 131 9 / 35%), inset 0 1px 0 rgb(255 255 255 / 45%); }
.ac-msg a { color: var(--green-text, #338309); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ac-li { display: block; padding-left: 12px; text-indent: -12px; }
.ac-li::before { content: "• "; }
.ac-typing .ac-msg { display: inline-flex; gap: 5px; padding: 14px 16px; }
.ac-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-green); animation: ac-dot 1s infinite ease-in-out; }
.ac-typing i:nth-child(2) { animation-delay: .15s; } .ac-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ac-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-4px); } }

.ac-hints { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 14px 12px; }
.ac-hints:empty { display: none; }
.ac-chip { padding: 8px 13px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px; background: linear-gradient(150deg, rgb(255 255 255 / 80%), rgb(255 255 255 / 45%)); color: var(--ac-ink); font: 500 12.5px/1.2 Montserrat, sans-serif; cursor: pointer; box-shadow: 0 3px 10px rgb(30 60 10 / 8%), inset 0 1px 0 #fff; animation: ac-chip-in .5s cubic-bezier(.2, 1.2, .4, 1) both; transition: transform .2s, color .2s, box-shadow .2s; }
.ac-chip:hover { transform: translateY(-2px); color: var(--green-text, #338309); box-shadow: 0 8px 16px rgb(51 131 9 / 18%), inset 0 1px 0 #fff; }
@keyframes ac-chip-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }

.ac-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 6px; padding: 7px 7px 7px 14px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 24px; background: linear-gradient(150deg, rgb(255 255 255 / 85%), rgb(255 255 255 / 55%)); box-shadow: 0 6px 18px rgb(30 60 10 / 10%), inset 0 1px 0 #fff; transition: box-shadow .25s, border-color .25s; }
.ac-form:focus-within { border-color: var(--ac-green); box-shadow: 0 0 0 4px rgb(51 131 9 / 16%), 0 6px 18px rgb(30 60 10 / 10%); }
.ac-input { flex: 1; min-width: 0; resize: none; padding: 8px 0; border: 0; background: transparent; color: inherit; font: 400 14px/1.4 Montserrat, sans-serif; max-height: 110px; outline: none; }
.ac-input::placeholder { color: var(--muted, #74776b); }
.ac-send { position: relative; flex: none; width: 40px; height: 40px; overflow: hidden; border: 0; border-radius: 50%; background: linear-gradient(145deg, #55b820, var(--ac-green)); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgb(51 131 9 / 40%), inset 0 1px 0 rgb(255 255 255 / 45%); transition: transform .2s; }
.ac-send:hover:not(:disabled) { transform: scale(1.08) rotate(-6deg); }
.ac-send:disabled { opacity: .55; cursor: default; }
.ac-send svg { width: 18px; height: 18px; fill: currentColor; }
.ac-form.is-sent .ac-send svg { animation: ac-fly .7s ease-in-out; }
@keyframes ac-fly { 0% { transform: none; opacity: 1; } 45% { transform: translate(26px, -26px) scale(.6); opacity: 0; } 46% { transform: translate(-26px, 26px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ac-foot { display: grid; gap: 9px; padding: 2px 14px 12px; font-size: 11px; line-height: 1.4; color: var(--muted, #74776b); }
.ac-note { padding: 0 4px; }
.ac-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ac-mgr { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid rgb(51 131 9 / 45%); border-radius: 999px; background: linear-gradient(150deg, rgb(51 131 9 / 14%), rgb(51 131 9 / 5%)); color: var(--green-text, #338309); font: 700 13.5px/1 Montserrat, sans-serif; text-decoration: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%); transition: background .25s, color .25s, transform .2s, box-shadow .25s; }
.ac-mgr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ac-mgr .ac-mgr-arrow { transition: transform .25s; }
.ac-mgr:hover { background: linear-gradient(145deg, #55b820, var(--ac-green)); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgb(51 131 9 / 30%), inset 0 1px 0 rgb(255 255 255 / 40%); }
.ac-mgr:hover .ac-mgr-arrow { transform: translateX(3px); }
.ac-mgr:focus-visible { outline: 3px solid var(--ac-yellow); outline-offset: 3px; }

/* ── Темна тема ── */
html[data-theme="dark"] .ac-panel { background: linear-gradient(160deg, rgb(32 40 28 / 78%), rgb(20 24 18 / 66%)); border-color: rgb(255 255 255 / 14%); color: #ededed; box-shadow: 0 28px 70px rgb(0 0 0 / 55%), 0 1px 0 rgb(255 255 255 / 12%) inset; }
html[data-theme="dark"] .ac-bot, html[data-theme="dark"] .ac-chip, html[data-theme="dark"] .ac-form, html[data-theme="dark"] .ac-intro { background: linear-gradient(150deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 5%)); border-color: rgb(255 255 255 / 16%); color: #ededed; box-shadow: 0 4px 14px rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 14%); }
html[data-theme="dark"] .ac-intro-text span, html[data-theme="dark"] .ac-foot, html[data-theme="dark"] .ac-input::placeholder { color: #a8ad9f; }
html[data-theme="dark"] .ac-intro::after { background: linear-gradient(135deg, transparent 50%, rgb(60 66 56 / 90%) 50%); }
html[data-theme="dark"] .ac-intro-x { background: rgb(255 255 255 / 12%); color: #ededed; }
html[data-theme="dark"] .ac-msg a { color: #8fd14f; }
html[data-theme="dark"] .ac-mgr { color: #a6e36a; border-color: rgb(166 227 106 / 45%); background: linear-gradient(150deg, rgb(166 227 106 / 14%), rgb(166 227 106 / 4%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
html[data-theme="dark"] .ac-mgr:hover { color: #fff; }
html[data-theme="dark"] .ac-chip:hover { color: #8fd14f; }
html[data-theme="dark"] .ac-launcher { background: linear-gradient(145deg, rgb(255 255 255 / 22%), rgb(255 255 255 / 8%)); box-shadow: 0 10px 28px rgb(0 0 0 / 45%), inset 0 1px 1px rgb(255 255 255 / 30%); }
html[data-theme="dark"] .ac-aura::before, html[data-theme="dark"] .ac-aura::after { opacity: .28; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ac-panel { background: #f6f5ef; }
  html[data-theme="dark"] .ac-panel { background: #181a16; }
  .ac-intro { background: #fff; }
}

/* Чат у правому нижньому куті на всіх екранах, щоб не заступати кнопки зліва (напр. «Написати нам») */
.ac-launcher { left: auto; right: max(24px, env(safe-area-inset-right)); }
.ac-intro { left: auto; right: max(24px, env(safe-area-inset-right)); transform-origin: right bottom; }
.ac-intro::after { left: auto; right: 29px; }
.ac-panel { left: auto; right: max(24px, env(safe-area-inset-right)); transform-origin: right bottom; }
@media (max-width: 480px) {
  .ac-launcher { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--footer-offset, 0px)); width: 58px; height: 58px; }
    .ac-intro { --iw: min(270px, calc(100vw - 32px)); left: auto; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 74px + var(--footer-offset, 0px)); }
  .ac-intro::after { right: 24px; }
  .ac-panel { right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: min(80dvh, 640px); border-radius: 26px; }
  .ac-input { font-size: 16px; }
}
/* Мобільні: клавіатура відкрита. Питання лишаються одним рядком, що гортається */
.ac-panel.kb { border-radius: 20px; animation: none; }
.ac-panel.kb .ac-foot { display: none; }
.ac-panel.kb .ac-hints { flex-wrap: nowrap; overflow-x: auto; padding: 2px 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ac-panel.kb .ac-hints::-webkit-scrollbar { display: none; }
.ac-panel.kb .ac-chip { flex: none; white-space: nowrap; }
.ac-panel.kb .ac-form { margin-bottom: 10px; }
.ac-panel.kb .ac-head { padding: 8px 12px; gap: 10px; }
.ac-panel.kb .ac-av-md { width: 34px; height: 34px; }
.ac-panel.kb .ac-close { width: 34px; height: 34px; }
.ac-panel.kb .ac-list { padding-top: 10px; }
.ac-panel.kb .ac-aura::before, .ac-panel.kb .ac-aura::after { animation: none; }
.ac-launcher, .ac-chip, .ac-send, .ac-close, .ac-mgr, .ac-intro-x { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Поки видно хмарку-підказку, стрілку вгору ховаємо, щоб вони не накладались */
html.chat-intro .scroll-top { opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ac-launcher, .ac-launcher.is-ready, .ac-ring, .ac-panel, .ac-aura::before, .ac-aura::after, .ac-new, .ac-chip, .ac-dot-on, .ac-typing i, .ac-av img, .ac-form.is-sent .ac-send svg, .ac-launcher.is-wave::after { animation: none !important; transition: none !important; }
}