/* chat.css — гном-консультант в углу страницы «Астрогном» */

.hx-launch{
  position:fixed; right:clamp(1rem,2.4vw,1.7rem); bottom:clamp(1rem,2.4vw,1.7rem); z-index:60;
  width:62px; height:62px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:url("gnome.jpg") 50% 30%/205% no-repeat, #171041;
  box-shadow:
    0 0 0 1px rgba(232,184,75,.55),
    0 0 0 5px rgba(10,8,32,.55),
    0 14px 40px -10px rgba(0,0,0,.75),
    0 0 34px rgba(232,184,75,.35);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.hx-launch:hover,.hx-launch:focus-visible{
  outline:none; transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 1px rgba(247,222,151,.85),
    0 0 0 5px rgba(10,8,32,.55),
    0 18px 46px -10px rgba(0,0,0,.8),
    0 0 48px rgba(232,184,75,.55);
}
.hx-launch::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(232,184,75,.35); animation:hx-halo 3.6s ease-in-out infinite;
}
@keyframes hx-halo{
  0%,100%{opacity:.25; transform:scale(1)}
  50%{opacity:.7; transform:scale(1.06)}
}
.hx-launch .hx-dot{
  position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%;
  background:var(--emerald,#4FB79A); border:2px solid #0d0a26;
}
.hx-tip{
  position:fixed; right:calc(clamp(1rem,2.4vw,1.7rem) + 74px); bottom:calc(clamp(1rem,2.4vw,1.7rem) + 18px);
  z-index:60; pointer-events:none; opacity:0; transform:translateX(8px);
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-size:.92rem;
  color:#EFEAFB; background:rgba(18,13,51,.92); border:1px solid rgba(214,223,242,.2);
  border-radius:999px; padding:.5rem .95rem; white-space:nowrap;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.8);
  transition:opacity .25s ease, transform .25s ease;
}
.hx-launch:hover + .hx-tip,.hx-launch:focus-visible + .hx-tip{opacity:1; transform:none}

/* ---------- панель ---------- */
.hx-panel{
  position:fixed; right:clamp(1rem,2.4vw,1.7rem); bottom:calc(clamp(1rem,2.4vw,1.7rem) + 76px);
  z-index:61; width:min(92vw,392px); height:min(72vh,586px);
  display:none; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#1a1442,#120d33);
  border:1px solid rgba(214,223,242,.2); border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.75), 0 0 60px rgba(167,139,230,.18);
  color:var(--star,#F6F4FF);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.hx-panel.open{display:flex; animation:hx-pop .34s cubic-bezier(.2,.7,.2,1)}
@keyframes hx-pop{from{opacity:0; transform:translateY(16px) scale(.98)}to{opacity:1; transform:none}}

.hx-head{
  display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem;
  border-bottom:1px solid rgba(214,223,242,.14); flex:none;
}
.hx-ava{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:url("gnome.jpg") 50% 30%/205% no-repeat, #171041;
  box-shadow:0 0 0 1px rgba(232,184,75,.5), 0 0 18px rgba(232,184,75,.25);
}
.hx-who{display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1}
.hx-who .hx-name{
  font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:1.02rem; letter-spacing:-.01em;
}
.hx-who .hx-state{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#9A97C4);
  display:flex; align-items:center; gap:.4rem;
}
.hx-who .hx-state i{
  width:6px; height:6px; border-radius:50%; background:var(--emerald,#4FB79A);
  box-shadow:0 0 8px rgba(79,183,154,.8); font-style:normal;
}
.hx-x{
  width:34px; height:34px; flex:none; border-radius:50%; cursor:pointer;
  background:rgba(228,235,248,.06); border:1px solid rgba(214,223,242,.2);
  color:var(--silver,#D6DFF2); font-size:1.25rem; line-height:1; display:grid; place-items:center;
  transition:background .2s ease, border-color .2s ease;
}
.hx-x:hover,.hx-x:focus-visible{outline:none; background:rgba(228,235,248,.14); border-color:rgba(224,232,247,.5)}

.hx-log{
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin; scrollbar-color:rgba(167,139,230,.4) transparent;
}
.hx-log::-webkit-scrollbar{width:8px}
.hx-log::-webkit-scrollbar-thumb{background:rgba(167,139,230,.35); border-radius:99px}

.hx-msg{
  max-width:86%; padding:.62rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.58;
  white-space:pre-wrap; word-wrap:break-word; animation:hx-in .26s ease;
}
@keyframes hx-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.hx-msg.bot{
  align-self:flex-start; background:rgba(228,235,248,.06);
  border:1px solid rgba(214,223,242,.16); border-bottom-left-radius:5px; color:#E4E1F8;
}
.hx-msg.me{
  align-self:flex-end; color:#1a1230; border-bottom-right-radius:5px;
  background:linear-gradient(180deg,#F7DE97,#E8B84B);
  box-shadow:0 8px 22px -10px rgba(232,184,75,.6);
}
.hx-msg.sys{
  align-self:center; max-width:100%; text-align:center; font-size:.74rem; line-height:1.5;
  color:var(--muted,#9A97C4); background:none; border:0; padding:.2rem .3rem;
}
.hx-msg.sys a{color:var(--gold-2,#F7DE97)}

.hx-typing{align-self:flex-start; display:flex; gap:.32rem; padding:.8rem .9rem}
.hx-typing span{
  width:7px; height:7px; border-radius:50%; background:var(--violet,#A78BE6);
  animation:hx-bounce 1.3s ease-in-out infinite;
}
.hx-typing span:nth-child(2){animation-delay:.18s}
.hx-typing span:nth-child(3){animation-delay:.36s}
@keyframes hx-bounce{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-5px)}}

.hx-chips{display:flex; flex-wrap:wrap; gap:.45rem; padding:0 1rem .7rem; flex:none}
.hx-chip{
  font:inherit; font-size:.79rem; cursor:pointer; color:var(--silver,#D6DFF2);
  background:rgba(228,235,248,.05); border:1px solid rgba(214,223,242,.18);
  border-radius:999px; padding:.42rem .8rem;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.hx-chip:hover,.hx-chip:focus-visible{
  outline:none; transform:translateY(-1px);
  border-color:rgba(224,232,247,.5); background:rgba(228,235,248,.1);
}

.hx-foot{
  flex:none; padding:.75rem 1rem 1rem; border-top:1px solid rgba(214,223,242,.14);
  display:flex; flex-direction:column; gap:.5rem;
}
.hx-row{display:flex; gap:.55rem; align-items:flex-end}
.hx-in{
  flex:1; font:inherit; font-size:.9rem; color:var(--star,#F6F4FF); resize:none;
  max-height:110px; min-height:44px; line-height:1.5;
  background:rgba(228,235,248,.05); border:1px solid rgba(214,223,242,.2);
  border-radius:12px; padding:.62rem .75rem;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hx-in::placeholder{color:#7c7da4}
.hx-in:focus{
  outline:none; border-color:var(--gold-2,#F7DE97); background:rgba(228,235,248,.09);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
}
.hx-send{
  width:44px; height:44px; flex:none; border:0; border-radius:12px; cursor:pointer;
  color:#1a1230; background:linear-gradient(180deg,#F7DE97,#E8B84B);
  box-shadow:0 10px 26px -12px rgba(232,184,75,.7);
  display:grid; place-items:center;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.hx-send:hover:not(:disabled),.hx-send:focus-visible:not(:disabled){
  outline:none; transform:translateY(-2px); box-shadow:0 14px 32px -12px rgba(232,184,75,.9);
}
.hx-send:disabled{opacity:.45; cursor:default}
.hx-send svg{width:19px; height:19px}
.hx-note{font-size:.68rem; line-height:1.45; color:var(--muted,#9A97C4); text-align:center}
.hx-note a{color:var(--gold-2,#F7DE97)}

@media (max-width:520px){
  .hx-panel{
    right:0; bottom:0; width:100vw; height:100dvh; max-height:none;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
  }
  .hx-tip{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hx-launch::after,.hx-typing span{animation:none}
  .hx-panel.open,.hx-msg{animation:none}
}