/* AI chat widget — left side, matches WebStudiy glass UI */

.screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.ai-chat {
  position:fixed;
  left:1.25rem;
  bottom:1.25rem;
  z-index:95;
  font-family:var(--font-body)
}

.ai-chat__toggle {
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  padding:0.85rem 1.15rem;
  border:1px solid rgba(255,74,143,0.35);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,74,143,0.95),rgba(168,60,140,0.95));
  color:#fff;
  font-weight:700;
  font-size:0.92rem;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(255,74,143,0.35);
  transition:transform 0.2s var(--ease),box-shadow 0.2s var(--ease)
}

.ai-chat__toggle:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(255,74,143,0.5)
}

.ai-chat__toggle-icon {
  display:inline-grid;
  place-items:center;
  width:1.35rem;
  height:1.35rem;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
  font-size:0.85rem
}

.ai-chat.is-open .ai-chat__toggle {
  opacity:0;
  pointer-events:none;
  transform:scale(0.9)
}

.ai-chat__panel {
  position:absolute;
  left:0;
  bottom:0;
  width:min(22.5rem,calc(100vw - 1.5rem));
  height:min(34rem,calc(100svh - 6rem));
  display:flex;
  flex-direction:column;
  border-radius:20px;
  border:1px solid rgba(255,74,143,0.28);
  background:rgba(18,13,24,0.98);
  box-shadow:0 22px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter:blur(18px);
  overflow:hidden;
  animation:ai-chat-in 0.35s var(--ease) both
}

.ai-chat__panel[hidden] {
  display:none !important
}

@keyframes ai-chat-in {
  from {
    opacity:0;
    transform:translateX(-14px) translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
}

.ai-chat__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;
  padding:1rem 1rem 0.85rem;
  border-bottom:1px solid var(--line-soft)
}

.ai-chat__head strong {
  display:block;
  color:#fff;
  font-size:1rem
}

.ai-chat__head em {
  display:block;
  margin-top:0.2rem;
  font-style:normal;
  font-size:0.78rem;
  color:var(--muted)
}

.ai-chat__close {
  width:2rem;
  height:2rem;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:var(--ink);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer
}

.ai-chat__close:hover {
  background:rgba(255,74,143,0.2);
  color:#fff
}

.ai-chat__messages {
  flex:1;
  overflow:auto;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:0.65rem
}

.ai-chat__bubble {
  max-width:92%;
  padding:0.75rem 0.9rem;
  border-radius:14px;
  font-size:0.9rem;
  line-height:1.45;
  word-break:break-word
}

.ai-chat__bubble--bot {
  align-self:flex-start;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--ink)
}

.ai-chat__bubble--user {
  align-self:flex-end;
  background:rgba(255,74,143,0.18);
  border:1px solid rgba(255,74,143,0.35);
  color:#fff;
  white-space:pre-wrap
}

.ai-chat__bubble.is-thinking {
  color:var(--muted);
  font-style:italic
}

.ai-chat__bubble-text {
  margin:0;
  white-space:pre-wrap;
  word-break:break-word
}

.ai-chat__tg-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.45rem;
  margin-top:0.7rem;
  padding:0.55rem 0.85rem;
  border-radius:999px;
  background:linear-gradient(135deg,#2aabee,#229ed9);
  color:#fff !important;
  font-size:0.82rem;
  font-weight:700;
  text-decoration:none !important;
  box-shadow:0 8px 20px rgba(34,158,217,0.35);
  transition:transform 0.2s ease,box-shadow 0.2s ease
}

.ai-chat__tg-btn:hover {
  transform:translateY(-2px);
  color:#fff !important;
  box-shadow:0 12px 26px rgba(34,158,217,0.5)
}

.ai-chat__hints {
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  padding:0 1rem 0.65rem
}

.ai-chat__hints button {
  border:1px solid rgba(255,74,143,0.25);
  border-radius:999px;
  background:rgba(255,74,143,0.08);
  color:#ffb1c5;
  font-size:0.75rem;
  padding:0.4rem 0.7rem;
  cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease
}

.ai-chat__hints button:hover {
  background:rgba(255,74,143,0.2);
  color:#fff
}

.ai-chat__form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:0.5rem;
  padding:0.75rem 1rem;
  border-top:1px solid var(--line-soft);
  align-items:end
}

.ai-chat__form textarea {
  width:100%;
  min-height:2.6rem;
  max-height:7.5rem;
  resize:none;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--ink);
  padding:0.7rem 0.85rem;
  font:inherit;
  line-height:1.35
}

.ai-chat__form textarea:focus {
  outline:none;
  border-color:rgba(255,74,143,0.55);
  box-shadow:0 0 0 3px rgba(255,74,143,0.15)
}

.ai-chat__send {
  width:2.6rem;
  height:2.6rem;
  border:0;
  border-radius:14px;
  background:var(--primary-container);
  color:#fff;
  font-size:1.15rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 18px var(--primary-glow)
}

.ai-chat__send:disabled {
  opacity:0.55;
  cursor:wait
}

.ai-chat__note {
  margin:0;
  padding:0 1rem 0.85rem;
  font-size:0.72rem;
  color:var(--muted);
  line-height:1.35
}

.ai-chat__note a {
  color:#ffb1c5
}

@media (max-width:980px) {
  .ai-chat {
    left:0.85rem;
    bottom:0.85rem
  }
  .ai-chat__toggle-label {
    display:none
  }
  .ai-chat__toggle {
    width:3.25rem;
    height:3.25rem;
    padding:0;
    justify-content:center
  }
  .ai-chat__panel {
    width:min(22rem,calc(100vw - 1.2rem));
    height:min(32rem,calc(100svh - 5.5rem))
  }
}

@media (max-width:640px) {
  body:has(.cookie-banner:not([hidden])) .ai-chat {
    display:none
  }
  body.nav-open .ai-chat {
    display:none
  }
  .ai-chat__panel {
    position:fixed;
    left:0.5rem;
    right:0.5rem;
    bottom:0.5rem;
    width:auto;
    height:min(78svh,34rem)
  }
}