/* Консультант «Монумент» и уведомление о куки. Разметка — includes/consultant.php, логика — js/consultant.js.
   Цвета и шрифты — из палитры styles.css (--dark, --accent, --gold, --ink, --font-body, --font-display). */

:root{--chat-link:#7d5f40}

/* Основа: без отступов браузера, шрифт контейнера — у всех элементов, включая поля и кнопки */
:where(.callback-bt,.bot-container,#cookie-notice),
:where(.callback-bt,.bot-container,#cookie-notice) *{margin:0;padding:0;box-sizing:border-box;font-family:inherit}

/* ---------- Кнопка вызова ---------- */
.callback-bt{position:fixed;right:25px;bottom:25px;z-index:1001;display:flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border:0;border-radius:4px;background:var(--gold);color:var(--ink);
  box-shadow:0 10px 26px rgba(120,90,55,.28);font-family:var(--font-body);cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
.callback-bt:hover{background:#e0c7a6}
.callback-bt:active{transform:scale(.97)}
.callback-bt svg{display:block}
.callback-bt-label{font-size:14px;font-weight:500;letter-spacing:.01em}
.callback-bt.has-unread{animation:botUnreadPulse 1.8s ease-in-out infinite}
/* Счётчик ответов менеджера */
.callback-bt-unread{position:absolute;top:-9px;right:-7px;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;border:2px solid #fff;border-radius:999px;background:#b42318;color:#fff;
  box-shadow:0 5px 14px rgba(180,35,24,.36);font-size:12px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none;pointer-events:none}
.callback-bt-unread:not([hidden]){display:inline-flex}

/* ---------- Окно ---------- */
/* Показывает js/consultant.js: display:flex и opacity в атрибуте style */
.bot-container{position:fixed;right:25px;bottom:96px;z-index:1002;display:none;flex-direction:column;align-items:stretch;
  width:384px;max-width:calc(100vw - 30px);max-height:min(620px,calc(100vh - 120px));overflow:hidden;
  border:1px solid rgba(184,151,120,.45);border-radius:4px;background:white;
  box-shadow:0 24px 60px rgba(18,16,14,.24),0 2px 6px rgba(18,16,14,.08);font-family:var(--font-body);
  opacity:0;transition:opacity .4s ease}

/* ---------- Шапка ---------- */
.form-header{display:flex;flex-shrink:0;justify-content:space-between;align-items:flex-start;padding:17px 14px 15px 20px;
  border-bottom:1px solid rgba(184,151,120,.3);background:var(--dark);color:var(--accent)}
.form-title{min-width:0}
.form-header h4{font-family:var(--font-display);font-size:19px;font-weight:400;line-height:1.2;letter-spacing:0;color:#f4efe7}
.form-header h4 em{color:#c9a988}
.bot-sub{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:10.5px;line-height:1;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.bot-sub::before{content:"";width:18px;height:1px;background:currentColor}
.close-form{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;
  border-radius:3px;background:transparent;color:rgba(244,239,231,.72);cursor:pointer;transition:background .2s ease,color .2s ease}
.close-form:active{background:rgba(184,151,120,.28)}
.close-form:hover{background:rgba(255,255,255,.08);color:#fff}
.close-form:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.close-form svg{display:block;width:16px;height:16px}

/* ---------- Сообщения ---------- */
.bot-chat{display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:16px;background:#faf9f6}
.bot-messages{order:1;display:flex;flex:0 1 auto;flex-direction:column;gap:9px;min-height:82px;padding-right:4px;
  overflow-y:auto;scrollbar-width:thin}
.bot-msg{max-width:86%;padding:10px 14px;border-radius:10px;font-size:15px;line-height:1.5;
  opacity:0;transform:translateY(7px);animation:botFadeIn .28s ease forwards}
.bot-msg.bot{align-self:flex-start;border:1px solid #e7e1d7;border-top-left-radius:2px;background:#fff;color:var(--dark)}
.bot-msg.user{align-self:flex-end;border:1px solid #262320;border-top-right-radius:2px;background:#262320;color:#f6f2ec}
/* «Печатает…» */
.bot-typing{order:1;flex-shrink:0;width:fit-content;margin:10px 0 0;padding:10px 13px;border:1px solid rgba(184,151,120,.25);
  border-radius:16px;border-bottom-left-radius:6px;background:#f4f1ec}
.bot-typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--accent);opacity:.45;
  animation:botTyping 1s infinite ease-in-out}
.bot-typing span:nth-child(2){animation-delay:.15s}
.bot-typing span:nth-child(3){animation-delay:.3s}

/* ---------- Быстрые действия (способ связи, ожидание сотрудника) ---------- */
.bot-actions{order:2;display:none;flex-shrink:0;flex-direction:column;gap:8px;margin-top:6px}
.bot-actions.active{display:flex;animation:botFadeIn .25s ease forwards}
.bot-choice{padding:10px 13px;border:1px solid rgba(184,151,120,.45);border-radius:12px;background:#fff;color:var(--dark);
  font-size:14px;text-align:left;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.bot-choice:hover{border-color:var(--accent);background:var(--accent);color:#fff}

/* ---------- Поле ввода ---------- */
.bot-step-form{order:3;flex-shrink:0;flex-direction:column;gap:7px;margin-top:8px;animation:botFadeIn .25s ease forwards}
.bot-step-form:not([hidden]){display:flex}
/* Шаги с одной строкой: имя, телефон, почта */
.bot-step-form input[type="text"],
.bot-step-form input[type="email"],
.bot-step-form textarea{width:100%;padding:10px 11px;border:1px solid rgba(31,31,31,.14);border-radius:12px;background:#fff;
  font-size:14px;resize:none}
.bot-step-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,151,120,.16)}
/* Свободный вопрос: многострочное поле с кнопками внутри рамки */
.bot-step-form.is-textarea{position:relative;margin-top:12px;border:1px solid #d9d2c6;border-radius:4px;background:#fff;
  transition:border-color .2s ease,box-shadow .2s ease}
.bot-step-form.is-textarea:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,151,120,.14)}
.bot-step-form.is-textarea textarea{min-height:54px;max-height:126px;padding:15px 58px 13px 14px;overflow-y:hidden;border:none;
  border-radius:4px;background:transparent;font-size:15px;color:var(--dark)}
.bot-step-form.is-textarea textarea:focus{outline:none;border-color:transparent;box-shadow:none}
.bot-step-form.is-textarea textarea::placeholder{color:#8a8279}
/* Со значком фото текст отодвигается на две кнопки */
.bot-step-form.has-attach textarea{padding-right:100px}
.bot-submit{width:100%;padding:11px 16px;border:none;border-radius:12px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;transition:background .2s ease,transform .15s ease}
.bot-submit:hover{background:#a67f5f}
.bot-submit:active{transform:scale(.99)}
/* Кнопка «Отправить» в поле вопроса — квадрат со стрелкой */
.bot-step-form.is-textarea .bot-submit{position:absolute;right:7px;bottom:7px;display:inline-flex;align-items:center;justify-content:center;
  width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:3px;font-size:0;line-height:0}
.bot-step-form.is-textarea .bot-submit:active{transform:scale(.94)}
.bot-step-form.is-textarea .bot-submit::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Значок фотоаппарата слева от «Отправить» */
.bot-attach{position:absolute;right:52px;bottom:7px;align-items:center;justify-content:center;width:40px;height:40px;
  border:0;border-radius:3px;background:transparent;color:var(--chat-link);cursor:pointer}
.bot-attach:not([hidden]){display:inline-flex}
.bot-attach:hover{background:#f4f1ec}
.bot-attach svg{width:22px;height:22px}
/* Выбор фото и файлов */
.bot-file-label{align-items:center;justify-content:center;gap:7px;min-height:38px;border:1px dashed rgba(184,151,120,.75);
  border-radius:12px;background:#faf9f6;color:var(--dark);font-size:13px;cursor:pointer;transition:.2s ease}
.bot-file-label:not([hidden]){display:flex}
.bot-file-label:hover{border-color:var(--accent);background:#f4f1ec}
.bot-file-label svg{flex:none;width:14px;height:14px;color:var(--chat-link)}
.bot-file-label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bot-file-list{padding:0 2px;font-size:12px;color:#666}
.bot-choice:focus-visible,
.bot-submit:focus-visible,
.bot-nav-btn:focus-visible,
.bot-file-label:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Ссылки и правовая строка ---------- */
.bot-link{display:inline-block;color:var(--chat-link);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(125,95,64,.4);text-underline-offset:3px}
.bot-link::after{content:" →";text-decoration:none}
/* «← Назад» и «Написать сотруднику» */
.bot-nav-actions{order:4;flex-shrink:0;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:10px;text-align:center}
.bot-nav-actions:not([hidden]){display:flex}
.bot-nav-btn{padding:4px 5px;border:none;background:transparent;color:rgba(31,31,31,.74);font-size:13px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bot-nav-btn:not(.bot-live-btn):hover{color:var(--accent)}
.bot-live-btn{color:var(--chat-link);font-size:13.5px;font-weight:500;text-decoration-color:rgba(125,95,64,.4);text-underline-offset:4px}
.bot-legal-notice{order:5;flex-shrink:0;margin-top:6px;padding:0 8px 2px;font-size:11.5px;line-height:1.4;text-align:center;color:#7a736b}
.bot-legal-notice a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.bot-legal-notice a:hover{color:var(--accent)}

/* ---------- Куки-баннер ---------- */
#cookie-notice{position:fixed;left:50%;bottom:20px;z-index:9999;width:90%;max-width:640px;transform:translateX(-50%);
  padding:12px 12px 12px 20px;border:1px solid rgba(184,151,120,.7);border-radius:4px;background:var(--dark);color:#f4efe7;
  box-shadow:0 12px 30px rgba(18,16,14,.28);font-family:var(--font-body);font-size:13px;line-height:1.45}
.cookie-content{display:flex;align-items:center;justify-content:space-between;gap:18px}
#cookie-notice span{color:#e9e3da}
#cookie-notice a{color:#c9a988;text-decoration:underline;text-decoration-color:rgba(201,169,136,.5);text-underline-offset:3px}
#cookie-notice a:hover{color:#e0c7a6}
#cookie-notice button{padding:10px 20px;border:none;border-radius:3px;background:var(--gold);color:var(--ink);
  font:500 13px/1 var(--font-body);letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:background .3s ease}
#cookie-notice button:hover{background:#e0c7a6}

/* ---------- Анимации ---------- */
@keyframes botFadeIn{to{opacity:1;transform:translateY(0)}}
@keyframes botTyping{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:.9}}
@keyframes botUnreadPulse{0%,100%{box-shadow:0 6px 18px rgba(31,31,31,.2)}50%{box-shadow:0 8px 22px rgba(184,151,120,.55),0 0 0 7px rgba(184,151,120,.14)}}

/* ---------- Медиазапросы ---------- */
/* Пока уведомление о куки открыто, кнопки чата и «Наверх» стоят над ним (высоту ставит consultant.js) */
@media(max-width:1100px){
  .cookie-notice-open .callback-bt{bottom:calc(var(--cookie-notice-h,0px) + 22px)}
  .cookie-notice-open .back-to-top{bottom:calc(var(--cookie-notice-h,0px) + 80px)}
}
@media(max-width:1024px){
  .callback-bt{gap:8px;padding:12px 16px 12px 14px}
  .callback-bt-unread{top:-7px;right:-5px;min-width:20px;height:20px;font-size:11px}
}
@media(max-width:768px){
  .callback-bt{right:15px;bottom:15px}
  /* Окно над кнопкой, правые края совпадают */
  .bot-container{right:15px;bottom:84px}
}
@media(max-width:600px){
  #cookie-notice{bottom:10px;width:calc(100% - 24px);padding:12px 14px;font-size:12.5px;line-height:1.4}
  .cookie-content{flex-direction:column;gap:10px;text-align:center}
  #cookie-notice button{width:100%;padding:10px 16px}
}
@media(max-width:480px){
  .callback-bt{padding:11px 15px 11px 13px}
  .callback-bt svg{width:19px;height:19px}
  .callback-bt-label{font-size:13.5px}
  .bot-container{right:10px;bottom:76px;left:10px;width:auto;max-height:78dvh}
  .bot-chat{padding:12px}
  .bot-messages{min-height:76px}
}
/* styles.css при «уменьшении движения» отключает анимации — сообщения должны быть видны без них */
@media(prefers-reduced-motion:reduce){
  .bot-msg{opacity:1;transform:none}
}