/* ============================================================
   CHEPURNOV CHAT WIDGET — ИИ-консультант Ивана Чепурнова
   Плавающая плашка-приглашение + модальная панель диалога.
   Токены берутся из /assets/css/app.css (--deep, --ivory, --line,
   --plasma, --display, --mono). Без эмодзи, теней, «таблеток» и
   крупных скруглений: радиус не больше 3px, только тонкие линии.
   ============================================================ */

.cc-panel,
.cc-invite,
.cc-panel *,
.cc-invite *{box-sizing:border-box;}

/* ---------- плашка-приглашение ---------- */
.cc-invite{
  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:clamp(14px,2.2vh,28px);
  z-index:50;
  display:flex;
  align-items:stretch;
  max-width:min(320px,calc(100vw - 28px));
  background:var(--deep,#0B0E14);
  border:1px solid var(--line,rgba(241,238,230,.14));
  border-radius:2px;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .35s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .35s var(--ease,cubic-bezier(.16,1,.3,1));
}
.cc-invite[hidden]{display:none;}
.cc-invite.is-visible{opacity:1;transform:none;pointer-events:auto;}

.cc-invite__main{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.8em;
  padding:12px 14px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ivory,#F1EEE6);
  text-align:left;
}
.cc-invite__label{min-width:0;overflow-wrap:anywhere;}
.cc-invite__arrow{
  flex:none;
  color:var(--plasma,#FF5B2E);
  transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1));
}
.cc-invite__main:hover .cc-invite__arrow,
.cc-invite__main:focus-visible .cc-invite__arrow{transform:translateX(4px);}

.cc-invite__close{
  flex:none;
  width:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--line,rgba(241,238,230,.14));
  color:var(--dim,#878D98);
  font-size:16px;
  line-height:1;
}
.cc-invite__close:hover{color:var(--ivory,#F1EEE6);}

/* на мобиле плашка уходит под шапку, к правому краю: так она не
   перекрывает нижний контент героя и не спорит с нижней навигацией */
@media (max-width:979px){
  .cc-invite{
    top:calc(env(safe-area-inset-top) + 72px);
    bottom:auto;
    right:clamp(14px,4vw,24px);
  }
}

/* ---------- панель-диалог ---------- */
.cc-panel{
  position:fixed;
  right:clamp(14px,2.2vw,28px);
  bottom:clamp(14px,2.2vh,28px);
  z-index:90;
  display:flex;
  flex-direction:column;
  width:min(392px,calc(100vw - 28px));
  height:min(660px,calc(100vh - 28px));
  max-height:calc(100dvh - 28px);
  background:var(--deep,#0B0E14);
  border:1px solid var(--line,rgba(241,238,230,.14));
  border-radius:3px;
  overflow:hidden;
  font-family:var(--text,system-ui,sans-serif);
  color:var(--ivory,#F1EEE6);
  visibility:hidden;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             visibility 0s linear .3s;
}
.cc-panel.is-open{
  visibility:visible;
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:opacity .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             transform .3s var(--ease,cubic-bezier(.16,1,.3,1)),
             visibility 0s;
}

/* ---------- шапка ---------- */
.cc-head{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 13px;
  border-bottom:1px solid var(--line,rgba(241,238,230,.14));
}
.cc-head__txt{min-width:0;}
.cc-head__title{
  font-family:var(--display,"Unbounded",system-ui,sans-serif);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:15px;
  line-height:1.15;
  color:var(--ivory,#F1EEE6);
}
.cc-head__sub{
  margin-top:5px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dim,#878D98);
}
.cc-close{
  flex:none;
  width:30px;
  height:30px;
  margin:-4px -4px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--dim,#878D98);
  font-size:18px;
  line-height:1;
}
.cc-close:hover{color:var(--ivory,#F1EEE6);}

/* ---------- лента сообщений ---------- */
.cc-log{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px;
  display:grid;
  gap:14px;
  align-content:start;
  scrollbar-width:thin;
  scrollbar-color:var(--line,rgba(241,238,230,.14)) transparent;
}
.cc-log::-webkit-scrollbar{width:6px;}
.cc-log::-webkit-scrollbar-thumb{background:var(--line,rgba(241,238,230,.14));}
.cc-log::-webkit-scrollbar-track{background:transparent;}

.cc-msg{display:flex;font-size:14.5px;line-height:1.5;}
.cc-msg--bot{justify-content:flex-start;}
.cc-msg--user{justify-content:flex-end;}
.cc-msg__b{max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere;}
.cc-msg--bot .cc-msg__b{
  padding-left:11px;
  border-left:1px solid var(--line,rgba(241,238,230,.14));
  color:var(--ivory,#F1EEE6);
}
.cc-msg--user .cc-msg__b{
  padding-right:11px;
  border-right:1px solid var(--plasma,#FF5B2E);
  color:var(--plasma,#FF5B2E);
  text-align:right;
}

/* индикатор набора */
.cc-typing{display:inline-flex;align-items:center;gap:5px;min-height:1.5em;}
.cc-typing__dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--dim,#878D98);
  animation:ccBlink 1.2s infinite ease-in-out;
}
.cc-typing__dot:nth-child(2){animation-delay:.15s;}
.cc-typing__dot:nth-child(3){animation-delay:.3s;}
@keyframes ccBlink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* ---------- чипы-подсказки ---------- */
.cc-chips{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:0 16px 13px;
}
.cc-chips:empty{display:none;}
.cc-chip{
  border:1px solid var(--line,rgba(241,238,230,.14));
  border-radius:2px;
  padding:7px 10px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.05em;
  color:var(--ivory,#F1EEE6);
  text-align:left;
  transition:border-color .25s ease,color .25s ease;
}
.cc-chip:hover,
.cc-chip:focus-visible{border-color:var(--plasma,#FF5B2E);color:var(--plasma,#FF5B2E);}

/* ---------- композер ---------- */
.cc-composer{
  flex:none;
  padding:12px 16px;
  border-top:1px solid var(--line,rgba(241,238,230,.14));
}
.cc-form{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line,rgba(241,238,230,.14));
  transition:border-color .25s ease;
}
.cc-form:focus-within{border-bottom-color:var(--ivory,#F1EEE6);}
.cc-input{
  flex:1 1 auto;
  min-width:0;
  padding:2px 0;
  background:transparent;
  border:0;
  outline:none;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  color:var(--ivory,#F1EEE6);
}
.cc-input::placeholder{color:var(--dim,#878D98);}
.cc-send{
  flex:none;
  width:34px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--plasma,#FF5B2E);
  font-size:18px;
  line-height:1;
  transition:transform .25s var(--ease,cubic-bezier(.16,1,.3,1));
}
.cc-send:hover{transform:translateX(3px);}
.cc-note{
  margin-top:9px;
  font-family:var(--mono);
  font-size:9.5px;
  line-height:1.55;
  letter-spacing:.03em;
  color:var(--dim,#878D98);
}

/* ---------- футер панели ---------- */
.cc-foot{
  flex:none;
  display:flex;
  flex-wrap:wrap;
  gap:4px 16px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line,rgba(241,238,230,.14));
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
}
.cc-foot__link{color:var(--dim,#878D98);transition:color .25s ease;}
.cc-foot__link:hover{color:var(--plasma,#FF5B2E);}

/* ---------- блокировка прокрутки страницы ---------- */
html.cc-lock,
html.cc-lock body{overflow:hidden;}

/* ---------- мобильный полноэкранный режим ---------- */
@media (max-width:600px){
  .cc-panel{
    inset:0;
    right:0;
    bottom:0;
    width:auto;
    height:auto;
    max-height:none;
    border:0;
    border-radius:0;
    transform:none;
  }
  .cc-log{padding:14px;}
  .cc-composer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
  .cc-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .cc-panel,
  .cc-invite{transition:none;transform:none;}
  .cc-typing__dot{animation:none;opacity:.6;}
  .cc-send:hover{transform:none;}
  .cc-invite__main:hover .cc-invite__arrow,
  .cc-invite__main:focus-visible .cc-invite__arrow{transform:none;}
}
html.reduced-motion .cc-panel,
html.reduced-motion .cc-invite{transition:none;transform:none;}
html.reduced-motion .cc-typing__dot{animation:none;opacity:.6;}