.hb-chat{
  --hb-red:#d6111e;
  --hb-gold:#ddc76d;
  --hb-radius:8px;

  --hb-shadow:0 14px 40px rgba(0,0,0,.45);
  --hb-glow:0 0 0 1px rgba(214,17,30,.35), 0 0 28px rgba(214,17,30,.18);

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Floating */
.hb-chat--floating{
  position:fixed;
  right:22px;
  bottom:95px;              /* ikoni */
  z-index:999999;
  width:min(420px, calc(100vw - 24px));
  pointer-events:none;
}
.hb-chat--floating .hb-chat__launcher,
.hb-chat--floating .hb-chat__shell{ pointer-events:auto; }

/* Launcher */
.hb-chat__launcher{
  position:absolute;
  right:0;
  bottom:0;
  width:62px;
  height:62px;
  border-radius:8px;
  border:1px solid rgba(221,199,109,.22);
  background: radial-gradient(20px 20px at 30% 30%, rgba(214,17,30,.55), rgba(0,0,0,.92));
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  cursor:pointer;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Shell */
.hb-chat__shell{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:rgba(0,0,0,.88);
  box-shadow:var(--hb-shadow), var(--hb-glow);
}

/* Aukeavan ikkunan paikka: base */
.hb-chat--floating .hb-chat__shell{
  position:absolute;
  right:0;
  bottom:0 !important;   /* pysyy alhaalla */
  width:100%;

  /* ESTÄ YLÄREUNAN LEIKKAANTUMINEN */
  max-height: calc(100vh - 120px); /* jättää tilaa ylös (header + selaimen chrome) */
  margin-top: 60px;                /* turvallinen yläväli */
  overflow: hidden;                /* ei vuoda ulos */
}


/* Desktop: vielä hieman alemmas */
@media (min-width: 1024px){
  .hb-chat--floating .hb-chat__shell{ bottom:85px; }
}

/* Mobiili: myös vähän alemmas + pienempi offset */
@media (max-width: 480px){
  .hb-chat--floating{
    right:14px;
    bottom:85px;
    width:min(420px, calc(100vw - 18px));
  }
  .hb-chat--floating .hb-chat__shell{ bottom:95px; }
}

/* Header */
.hb-chat__header{
  padding:14px 16px;
  background:rgba(0,0,0,.55);
  border-bottom:1px solid rgba(214,17,30,.35);
}
.hb-chat__title{
  color:var(--hb-red);
  font-weight:900;
}

/* Messages */
.hb-chat__messages{
  height:320px;
  overflow:auto;
  padding:12px;
}

/* Bubbles */
.hb-msg{ display:flex; margin:14px 0; }
.hb-msg--me{ justify-content:flex-end; }

.hb-msg__bubble{
  max-width:92%;
  padding:12px;
  border-radius:8px;
  background:#fff;
  color:#111;
}

/* ✅ BOTIN VASTAUS TÄYSLEVEÄNÄ */
.hb-msg--other{ justify-content:flex-start; }
.hb-msg--other .hb-msg__bubble{
  width:100%;
  max-width:100%;
}

/* Typing dots */
.hb-typing{ display:inline-flex; gap:4px; vertical-align:middle; margin-right:6px; }
.hb-typing i{
  width:6px; height:6px; border-radius:999px;
  background:rgba(214,17,30,.85);
  display:inline-block;
  animation:hbDot 1s infinite ease-in-out;
}
.hb-typing i:nth-child(2){ animation-delay:.12s; }
.hb-typing i:nth-child(3){ animation-delay:.24s; }
@keyframes hbDot{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(-3px); opacity:1; }
}

/* Articles title */
.hb-articlesTitle{
  font-weight:900;
  margin:0 0 12px;
  color:#d6111e !important;
}

/* Täysleveä lista */
.hb-articlesList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ✅ Täysleveä rivi-kortti (pieni kuva, ei vie tilaa) */
.hb-rowCard{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
  border-radius:8px;
  padding:10px 12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.hb-rowCard:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  background:rgba(255,255,255,1);
}

/* Pieni “thumbnail” (ikoni-tyylinen) */
.hb-rowCard__img{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(214,17,30,.18);
  flex:0 0 44px;
}
.hb-rowCard__img--empty{
  display:inline-block;
  width:44px;
  height:44px;
  border-radius:8px;
  border:1px solid rgba(214,17,30,.18);
  background:linear-gradient(135deg, rgba(214,17,30,.14), rgba(0,0,0,.06));
  flex:0 0 44px;
}

/* Otsikko punainen, ei “kapeaksi” */
.hb-rowCard__title{
  color:#d6111e !important;
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  flex:1 1 auto;
  text-align:left;
  word-break:break-word;
}

/* Composer */
.hb-chat__composer{
  padding:12px;
  background:rgba(0,0,0,.82);
  border-top:1px solid rgba(214,17,30,.30);
}
.hb-chat__input{
  width:100%;
  border-radius:8px;
  background:#000;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  padding:10px 12px;
  border:1px solid rgba(214,17,30,.45);
}
.hb-chat__input::placeholder{ color:rgba(255,255,255,.55); }
.hb-chat__send{
  margin-top:8px;
  width:100%;
  border-radius:8px;
  background:linear-gradient(135deg, #d6111e, #3a0003);
  color:#fff;
  font-weight:900;
  padding:10px;
}