/* ИИ-гид: чат-панель. Цвета — только из переменных палитры сайта. */
.ai-panel-wrap { position: fixed; inset: 0; z-index: 1450; display: flex; justify-content: flex-end; opacity: 0; transition: opacity 0.2s ease; }
.ai-panel-wrap[hidden] { display: none; }
.ai-panel-wrap.is-open { opacity: 1; }
.ai-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ai-panel {
  position: relative; display: flex; flex-direction: column; width: min(440px, 100%); height: 100%; height: 100dvh;
  background: var(--bg-dark); color: var(--text-main); border-left: 1px solid var(--border-glass);
  box-shadow: var(--shadow-lg); transform: translateX(24px); transition: transform 0.25s var(--transition-fast, ease);
}
.ai-panel-wrap.is-open .ai-panel { transform: none; }

.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-glass); }
.ai-title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.ai-spark { color: var(--accent-red); }
.ai-head-btns { display: inline-flex; gap: 0.3rem; }
.ai-icon-btn { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--border-glass); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; }
.ai-icon-btn:hover { color: var(--text-main); border-color: var(--accent-red); }

.ai-log { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; overscroll-behavior: contain; }
.ai-msg { display: flex; flex-direction: column; max-width: 92%; gap: 0.4rem; }
.ai-user { align-self: flex-end; align-items: flex-end; }
.ai-bot { align-self: flex-start; }
.ai-bubble { padding: 0.65rem 0.85rem; border-radius: var(--radius-md); font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.ai-user .ai-bubble { background: var(--accent-primary); color: var(--text-main); border-bottom-right-radius: 4px; }
.ai-bot .ai-bubble { background: var(--bg-card); border: 1px solid var(--border-glass); border-bottom-left-radius: 4px; }
.ai-bot.is-error .ai-bubble { border-color: var(--accent-red); color: var(--text-secondary); }
.ai-bubble p { margin: 0 0 0.5em; }
.ai-bubble p:last-child, .ai-bubble ul:last-child, .ai-bubble ol:last-child { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 0 0 0.5em; padding-left: 1.2rem; }
.ai-bubble li { margin-bottom: 0.25em; }
.ai-bubble strong { color: var(--text-main); }

.ai-place { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ai-place:hover { color: var(--text-main); }
.ai-add {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 0.3rem; vertical-align: middle;
  border-radius: var(--radius-full); border: 1px solid var(--border-glow); background: transparent; color: var(--accent-text);
  font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0;
}
.ai-add:hover, .ai-add.is-done { background: var(--accent-primary); color: var(--text-main); border-color: var(--accent-primary); }

.ai-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ai-act { padding: 0.4rem 0.8rem; border-radius: var(--radius-full); border: 1px solid var(--accent-primary); background: var(--accent-primary); color: var(--text-main); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.ai-act:hover { background: var(--accent-primary-hover); }
.ai-act-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-glass); }
.ai-act-ghost:hover { background: transparent; color: var(--text-main); border-color: var(--accent-red); }

.ai-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.6rem; }
.ai-suggest[hidden] { display: none; }
.ai-chip { padding: 0.45rem 0.8rem; border-radius: var(--radius-full); border: 1px solid var(--border-glass); background: var(--bg-card); color: var(--text-secondary); font-size: 0.82rem; cursor: pointer; text-align: left; }
.ai-chip:hover { color: var(--text-main); border-color: var(--accent-red); }

.ai-form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.6rem 1rem 0.3rem; border-top: 1px solid var(--border-glass); }
.ai-input {
  flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 0.65rem 0.85rem; border-radius: var(--radius-md);
  border: 1px solid var(--border-glass); background: var(--bg-card); color: var(--text-main); font: inherit; font-size: 16px; line-height: 1.4;
}
.ai-input:focus { outline: 2px solid var(--accent-red); outline-offset: 1px; }
.ai-send { flex: none; width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; background: var(--accent-primary); color: var(--text-main); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ai-send:hover { background: var(--accent-primary-hover); }
.ai-send:disabled { opacity: 0.5; cursor: default; }
.ai-note { margin: 0; padding: 0.3rem 1rem 0.8rem; font-size: 0.72rem; color: var(--text-muted); }

.ai-typing .ai-bubble { display: inline-flex; gap: 5px; align-items: center; padding: 0.8rem 1rem; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-red); animation: ai-bounce 1.1s infinite ease-in-out; }
.ai-dot:nth-child(2) { animation-delay: 0.15s; }
.ai-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

/* кнопка в шапке и в палитре поиска */
/* .icon-btn — круг 38×38; с подписью кнопка становится «пилюлей» той же высоты */
.icon-btn.header-ai-btn { width: auto; padding: 0 0.85rem 0 0.7rem; gap: 0.35rem; border-radius: var(--radius-full); border-color: var(--border-glow); font-weight: 700; white-space: nowrap; }
.icon-btn.header-ai-btn:hover { border-color: var(--accent-primary); }
.header-ai-btn .ai-btn-label { font-size: 0.8rem; line-height: 1; letter-spacing: 0.02em; }
.header-ai-btn .ai-spark { font-size: 1rem; line-height: 1; }
@media (max-width: 720px) { .icon-btn.header-ai-btn { width: 38px; padding: 0; } .header-ai-btn .ai-btn-label { display: none; } }
.search-pal-ai { border: 1px solid var(--border-glow); background: transparent; color: var(--accent-text); border-radius: var(--radius-full); padding: 0.3rem 0.8rem; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.search-pal-ai:hover { background: var(--accent-primary); color: var(--text-main); border-color: var(--accent-primary); }

@media (max-width: 720px) {
  .ai-panel { width: 100%; border-left: 0; }
  .ai-msg { max-width: 96%; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-panel-wrap, .ai-panel { transition: none; }
  .ai-dot { animation: none; opacity: 0.7; }
}