/* ─────────────────────────────────────────────────────────────────────────────
   WorkNow — Εμφάνιση συνομιλιών, κοινή για τις δύο πλευρές.

   Οι δύο σελίδες (messages.html για την εταιρεία, user_messages.html για τον
   υποψήφιο) έχουν ίδια δομή και ίδια ονόματα κλάσεων, οπότε ένα αρχείο τις
   ντύνει και τις δύο. Φορτώνεται ΜΕΤΑ το inline <style> κάθε σελίδας, ώστε να
   έχει τον τελευταίο λόγο χωρίς !important.

   Τι διορθώνει: πλήρης ημερομηνία κάτω από ΚΑΘΕ μήνυμα (θόρυβος), βαριές
   κορεσμένες φούσκες, και φούσκες που άπλωναν σχεδόν σε όλο το πλάτος αντί να
   διαβάζονται ως διάλογος.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Κέλυφος ──────────────────────────────────────────────────────────────── */
.conversations-sidebar,
.chat-area {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(15, 40, 70, 0.45);
}

/* ── Λίστα συνομιλιών ─────────────────────────────────────────────────────── */
.sidebar-header {
  border-bottom: 1px solid rgba(203, 221, 238, 0.5);
  font-weight: 700;
  color: #17293b;
  letter-spacing: 0.01em;
}

.conversation-item {
  border-bottom: 1px solid rgba(226, 235, 243, 0.7);
  padding: 0.9rem 1rem;
  transition: background 0.18s ease, box-shadow 0.18s ease;
  border-left: 3px solid transparent;
}

.conversation-item:hover { background: rgba(232, 243, 255, 0.7); }

.conversation-item.active {
  background: linear-gradient(90deg, rgba(227, 242, 253, 0.95), rgba(240, 248, 255, 0.75));
  border-left-color: #1976d2;
}

.conversation-item.unread-item { background: rgba(255, 253, 245, 0.9); }

/* Το όνομα δεν πρέπει να σπάει σε δύο γραμμές: κόβεται με αποσιωπητικά. */
.conversation-item .user-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #17293b;
  font-size: 0.94rem;
}

.conversation-item .last-message {
  color: #78909c;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  background: linear-gradient(135deg, #42a5f5, #1565c0) !important;
  box-shadow: 0 6px 14px -8px rgba(21, 101, 192, 0.9);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Κεφαλίδα συνομιλίας ──────────────────────────────────────────────────── */
.chat-header {
  border-bottom: 1px solid rgba(203, 221, 238, 0.5);
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.9), rgba(255, 255, 255, 0.6));
  border-radius: 16px 16px 0 0;
}

/* ── Το ταμπλό της συνομιλίας ─────────────────────────────────────────────── */
.messages-container {
  background:
    radial-gradient(700px 420px at 80% 0%, rgba(25, 118, 210, 0.05), transparent 60%),
    rgba(248, 251, 254, 0.7);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Το «Τεχνικός Συντήρησης» κάτω από το όνομα σε μία γραμμή. */
.conversation-item .job-context {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}

.conversation-item .conversation-info { min-width: 0; }
.conversation-item .message-time { white-space: nowrap; font-size: 0.76rem; color: #9aa8b5; }

/* Χωρίστρα ημέρας: η ημερομηνία λέγεται ΜΙΑ φορά, όχι σε κάθε μήνυμα. */
.day-divider {
  align-self: center;
  margin: 1rem 0 0.6rem;
  padding: 0.22rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(203, 221, 238, 0.7);
  color: #78909c;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Φούσκες ──────────────────────────────────────────────────────────────── */
.message {
  max-width: 62%;
  width: fit-content;
  padding: 0.6rem 0.85rem 0.45rem;
  border-radius: 16px;
  font-size: 0.93rem;
  line-height: 1.5;
  position: relative;
  margin: 0;
  box-shadow: 0 4px 14px -10px rgba(15, 40, 70, 0.5);
  word-break: break-word;
}

/* Οι αλλαγές γραμμής του μηνύματος μένουν όπως γράφτηκαν (Shift+Enter). */
.message-content { white-space: pre-wrap; }

/* Διαδοχικά μηνύματα του ίδιου προσώπου κολλάνε: το μάτι τα διαβάζει ως μία
   ατάκα αντί για τρεις ξεχωριστές. */
.message + .message { margin-top: 0.12rem; }
.message.first-of-group { margin-top: 0.7rem; }

.message.sent {
  align-self: flex-end;
  background: linear-gradient(135deg, #2f8ae0, #1565c0);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.message.received {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.96);
  color: #2c3e50;
  border: 1px solid rgba(214, 228, 241, 0.9);
  border-bottom-left-radius: 5px;
}

/* Η ώρα ζει μέσα στη φούσκα, μικρή και υποτονισμένη. */
.message-timestamp {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

.message.sent .message-timestamp { color: rgba(255, 255, 255, 0.72); }
.message.received .message-timestamp { color: #9aa8b5; }

/* ── Σύνθεση μηνύματος ────────────────────────────────────────────────────── */
.message-input-container,
.chat-input-area {
  border-top: 1px solid rgba(203, 221, 238, 0.5);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(247, 251, 255, 0.9));
  border-radius: 0 0 16px 16px;
}

.message-input,
.chat-input-area input[type="text"] {
  border: 1px solid rgba(203, 221, 238, 0.9);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.message-input:focus,
.chat-input-area input[type="text"]:focus {
  outline: none;
  border-color: rgba(25, 118, 210, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.12);
}

.send-button,
.send-btn {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  box-shadow: 0 10px 20px -12px rgba(13, 71, 161, 0.95);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.send-button:hover,
.send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -12px rgba(13, 71, 161, 1);
}

/* ── Κενή κατάσταση ───────────────────────────────────────────────────────── */
.empty-chat-state {
  color: #90a4ae;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 2rem;
}

@media (max-width: 700px) {
  .message { max-width: 84%; }
}

/* ── Κινητό: η συνομιλία σε όλη την οθόνη ─────────────────────────────────
   Στο κινητό η .chat-area ανοίγει πάνω από τη λίστα (position: fixed, από το
   inline <style> της σελίδας). Δεν μπορούσες να γράψεις και να στείλεις:
   - με z-index 100 ήταν κάτω από το navbar (1000), που σκέπαζε την
     κεφαλίδα: ούτε ο συνομιλητής φαινόταν ούτε το «←» πατιόταν·
   - η λίστα μηνυμάτων είχε σταθερά 500px, όποιο κι αν ήταν το ύψος της
     οθόνης·
   - το πεδίο είχε 15.2px και το iPhone έκανε zoom μόλις το πατούσες.
   Θέση και ύψος έρχονται από το visualViewport (js/chat-composer.js). Όταν
   ανοίγει το πληκτρολόγιο, το κουτί χωράει στο κομμάτι που μένει ορατό: η
   κεφαλίδα μένει πάνω και το πεδίο ακριβώς πάνω από τα πλήκτρα. */
@media (max-width: 768px) {
  .chat-area {
    z-index: 1001;
    top: var(--chat-top, 0px);
    height: var(--chat-height, 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Αδιαφανές: από κάτω είναι η λίστα, που αλλιώς φαινόταν θολή. */
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Όσο η συνομιλία είναι ανοιχτή, η σελίδα από κάτω δεν κυλά. */
  html:has(.chat-area.active),
  html:has(.chat-area.active) body {
    overflow: hidden;
  }

  /* …ούτε φαίνεται. Με ανοιχτό πληκτρολόγιο το iPhone κυλά τη σελίδα ως
     κάτω, και στη ζώνη πάνω από τα πλήκτρα (ημιδιαφανής στο iOS 26) έβγαινε
     το μπλε footer. Το visibility κρατά τη διάταξη όπως είναι: όταν κλείσει η
     συνομιλία, η λίστα ξαναφαίνεται στην ίδια θέση. */
  html:has(.chat-area.active) body > :not(.messaging-container),
  html:has(.chat-area.active) .conversations-sidebar {
    visibility: hidden;
  }

  .chat-header {
    border-radius: 0;
    padding: 0.5rem 0.75rem 0.5rem 0.25rem;
    gap: 0.5rem;
  }

  /* Μακρύ όνομα ή τίτλος: μία γραμμή με αποσιωπητικά, όχι σπρώξιμο. */
  .chat-header > div { flex: 1; min-width: 0; }
  .chat-header-info { min-width: 0; }

  .chat-header-info h3,
  .chat-header-info p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-header-info h3 { font-size: 1rem; }

  /* 44×44: το ελάχιστο που πατιέται άνετα με το δάχτυλο. */
  .close-chat-mobile {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin-right: 0.25rem;
    color: #1565c0;
  }

  /* Πιο μικρό, για να χωρά το όνομα του υποψηφίου δίπλα του. */
  .view-app-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.45rem 0.7rem;
    font-size: 0.8rem;
  }

  .messages-container {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0.9rem 0.85rem;
    overscroll-behavior: contain;
  }

  .input-area {
    flex: 0 0 auto;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  }

  /* 16px: με λιγότερα, το Safari του iPhone κάνει zoom στο πάτημα. Ως ~5
     γραμμές, ώστε με ανοιχτό πληκτρολόγιο να φαίνονται και τα μηνύματα. */
  .input-area textarea {
    font-size: 16px;
    min-height: 44px;
    max-height: 132px;
    padding: 0.6rem 1rem;
  }

  .send-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
  }
}