/* =========================================================
   HCB UI PATCH v4.8
   - fixes avatar
   - smaller suggestion cards
   - larger chat reading area
   - cleaner compact layout
========================================================= */

/* Μεγαλύτερο συνολικό widget, αλλά όχι υπερβολικό */
.chatbox {
  width: 470px !important;
  height: 790px !important;
  max-height: calc(100vh - 95px) !important;
  bottom: 86px !important;
}

/* Πολύ πιο compact header για να φαίνεται περισσότερο το chat */
.chat-hero {
  min-height: 86px !important;
  padding: 8px 16px 6px !important;
}

.chat-hero::before {
  right: -80px !important;
  bottom: -80px !important;
  width: 260px !important;
  height: 135px !important;
}

.chat-hero::after {
  left: 98px !important;
  right: -45px !important;
  bottom: 10px !important;
  height: 48px !important;
  opacity: 0.22 !important;
}

.chat-hero-top {
  align-items: flex-start !important;
  gap: 10px !important;
}

.chat-brand {
  gap: 11px !important;
}

.chat-logo {
  width: 44px !important;
  height: 44px !important;
}

.chat-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.chat-title {
  font-size: 19px !important;
  line-height: 1 !important;
}

.verified-badge {
  width: 19px !important;
  height: 19px !important;
  font-size: 12px !important;
}

.chat-subtitle {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

.chat-status {
  margin-top: 4px !important;
  font-size: 10.8px !important;
  gap: 5px !important;
}

.status-dot {
  width: 10px !important;
  height: 10px !important;
}

#close-chat {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  font-size: 23px !important;
}

.hero-wave {
  height: 18px !important;
  bottom: -7px !important;
}

.chat-safe-note {
  padding: 5px 14px !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
}



/* Μεγαλώνουμε ουσιαστικά τον χώρο συνομιλίας */
.chat-messages {
  padding: 18px 18px 14px !important;
  min-height: 0 !important;
}

/* Καλύτερη αρχική σειρά με avatar */
.assistant-row {
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.assistant-avatar-mini {
  width: 44px !important;
  height: 44px !important;
}

.assistant-avatar-mini img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.mini-online-dot {
  width: 12px !important;
  height: 12px !important;
}

/* Welcome card πιο compact */
.welcome-message {
  max-width: calc(100% - 52px) !important;
  padding: 13px 15px !important;
}

.message-title {
  font-size: 11px !important;
  margin-bottom: 5px !important;
}

.welcome-text {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

/* Τίτλος προτάσεων πιο κοντά */
.suggestion-title {
  margin: 6px 0 10px 54px !important;
  font-size: 13px !important;
}

/* ΚΑΡΤΕΣ ΠΡΟΤΑΣΕΩΝ: μικρότερες, όμορφες, χωρίς να χαλάσει το design */
.suggestion-cards {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-left: 54px !important;
  margin-bottom: 14px !important;
}

.suggestion-cards button {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;

  grid-template-columns: 36px 1fr 14px !important;
  gap: 9px !important;

  box-shadow: 0 7px 18px rgba(15, 35, 65, 0.055) !important;
}

.suggestion-cards button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(13, 111, 201, 0.12) !important;
}

.suggestion-icon {
  width: 36px !important;
  height: 36px !important;
}

.suggestion-icon svg {
  width: 19px !important;
  height: 19px !important;
}

.suggestion-cards button span:nth-child(2) {
  font-size: 11.8px !important;
  line-height: 1.12 !important;
  font-weight: 850 !important;
}

.suggestion-arrow {
  font-size: 22px !important;
}

/* Τα κάτω quick buttons σε 2x2 grid, χωρίς οριζόντια μπάρα */
.quick-buttons {
  padding: 9px 12px !important;
  gap: 8px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.quick-buttons button {
  width: 100% !important;
  min-width: 0 !important;

  min-height: 34px !important;
  padding: 0 10px !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Input area καθαρό και λίγο πιο compact */
.chat-input {
  padding: 12px 16px !important;
  gap: 10px !important;
}

.chat-input input {
  height: 48px !important;
  font-size: 14px !important;
}

#send-btn {
  width: 52px !important;
  height: 52px !important;
}

#send-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* Footer note λίγο πιο λεπτό */
.chat-footer-note {
  padding: 10px 14px 12px !important;
  font-size: 11px !important;
}

/* Μην εμφανιστεί ποτέ attach button αν υπάρχει κάπου */
.attach-btn {
  display: none !important;
}

/* Καλύτερα bubbles για τις απαντήσεις μετά */
.bot-message,
.user-message {
  font-size: 14px !important;
  padding: 14px 15px !important;
  margin-bottom: 11px !important;
  line-height: 1.48 !important;
}

/* Σε μικρές οθόνες να μη σπάει */
@media (max-width: 600px) {
  .chatbox {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: calc(100vh - 92px) !important;
    bottom: 80px !important;
  }

  .chat-hero {
    min-height: 96px !important;
    padding: 10px 12px 10px !important;
  }

  .chat-logo {
    width: 50px !important;
    height: 50px !important;
  }

  .chat-title {
    font-size: 18px !important;
  }

  .chat-subtitle {
    font-size: 11px !important;
  }

  .chat-status {
    font-size: 11px !important;
  }

  .suggestion-title {
    margin-left: 0 !important;
  }

  .suggestion-cards {
    margin-left: 0 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .suggestion-cards button {
    min-height: 54px !important;
    padding: 9px 10px !important;
    grid-template-columns: 32px 1fr 12px !important;
  }

  .suggestion-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .suggestion-cards button span:nth-child(2) {
    font-size: 11.5px !important;
  }

  .assistant-avatar-mini {
    width: 40px !important;
    height: 40px !important;
  }

  .welcome-message {
    max-width: calc(100% - 48px) !important;
  }

  .chat-input {
    padding: 10px 12px !important;
  }

  .chat-input input {
    height: 46px !important;
  }

  #send-btn {
    width: 48px !important;
    height: 48px !important;
  }
}


/* =========================================================
   PREMIUM HERO HEADER ANIMATION + BETTER SPACING
   Δεν αλλάζει το ύψος του μπλε header
========================================================= */

.chat-hero {
  position: relative !important;
  isolation: isolate !important;

  background-size: 220% 220% !important;
  animation:
    hcbPremiumHeaderFlow 9s ease-in-out infinite alternate,
    hcbHeroGlow 6s ease-in-out infinite alternate !important;
}

/* πιο ζωντανή φωτεινή κίνηση πίσω δεξιά */
.chat-hero::before {
  opacity: 0.85 !important;
  filter: blur(1px) !important;
  animation: hcbPremiumHeaderOrb 6.5s ease-in-out infinite alternate !important;
}

/* οι γραμμές πίσω να κινούνται πιο όμορφα */
.chat-hero::after {
  opacity: 0.34 !important;
  animation: hcbPremiumHeaderLines 7.5s ease-in-out infinite alternate !important;
}

/* λίγο πιο άνετα μεταξύ logo και κειμένου */
.chat-brand {
  gap: 14px !important;
}

/* μικρό άνοιγμα μέσα στο κείμενο */
.chat-brand-text {
  padding-top: 2px !important;
}

/* να μην είναι κολλημένο το Γενικό Νοσοκομείο Άρτας */
.chat-subtitle {
  margin-top: 4px !important;
}

/* να μην είναι κολλημένο το Online με τον τίτλο */
.chat-status {
  margin-top: 7px !important;
}

/* μικρή ζωντανή κίνηση στην πράσινη κουκίδα */
.status-dot {
  animation: hcbPremiumOnlinePulse 1.8s ease-in-out infinite !important;
}

/* μικρή premium λάμψη στο verified */
.verified-badge {
  animation: hcbVerifiedPop 3s ease-in-out infinite, hcbVerifiedGlow 2.8s ease-in-out infinite !important;
}

@keyframes hcbPremiumHeaderFlow {
  0% {
    background-position: 0% 45%;
  }

  50% {
    background-position: 70% 55%;
  }

  100% {
    background-position: 100% 45%;
  }
}

@keyframes hcbPremiumHeaderOrb {
  0% {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }

  50% {
    transform: translate3d(-18px, -8px, 0) rotate(-5deg) scale(1.08);
  }

  100% {
    transform: translate3d(-34px, 4px, 0) rotate(-10deg) scale(1.02);
  }
}

@keyframes hcbPremiumHeaderLines {
  0% {
    transform: translateX(0) skewY(-8deg);
    opacity: 0.22;
  }

  50% {
    transform: translateX(-18px) skewY(-8deg);
    opacity: 0.38;
  }

  100% {
    transform: translateX(-34px) skewY(-8deg);
    opacity: 0.28;
  }
}

@keyframes hcbPremiumOnlinePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(46, 229, 143, 0.16),
      0 0 14px rgba(46, 229, 143, 0.28);
  }

  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 6px rgba(46, 229, 143, 0.12),
      0 0 22px rgba(46, 229, 143, 0.48);
  }
}

@keyframes hcbVerifiedGlow {
  0%, 100% {
    box-shadow:
      0 6px 12px rgba(31, 162, 255, 0.32),
      0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow:
      0 6px 14px rgba(31, 162, 255, 0.42),
      0 0 16px rgba(255, 255, 255, 0.35);
  }
}