/* Concierge (S1), demandes transmises à l'équipe (E3) et réponses aux avis. */

/* --- Fil de messages (vacancier et équipe) ------------------------------------------------ */

.concierge { display: flex; flex-direction: column; gap: var(--space-4); }

.concierge-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.concierge-msg { display: flex; flex-direction: column; gap: 4px; max-width: min(88%, 560px); align-self: flex-start; }
.concierge-msg--guest { align-self: flex-end; align-items: flex-end; }
.concierge-msg--system { align-self: center; align-items: center; }

.concierge-msg__who { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 650; color: var(--muted); }
.concierge-msg__bubble {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); border-top-left-radius: 4px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere;
}
.concierge-msg__bubble p + p { margin-top: var(--space-2); }
.concierge-msg--guest .concierge-msg__bubble { background: var(--sea); border-color: var(--sea); color: var(--paper); border-top-left-radius: var(--radius); border-top-right-radius: 4px; }
.concierge-msg--staff .concierge-msg__bubble { background: var(--heather-soft); border-color: transparent; }
.concierge-msg--staff .concierge-msg__who { color: var(--heather); }
.concierge-msg--emergency .concierge-msg__bubble { background: var(--danger-soft); border-color: var(--danger); }
.concierge-msg__time { font-size: 0.75rem; color: var(--muted); }

.concierge-calls { margin-top: var(--space-3); }
.concierge-calls .btn { min-height: var(--tap); }

.concierge-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.concierge-source { min-height: 32px; text-decoration: none; color: var(--sea); }
a.concierge-source:hover { border-color: var(--line-strong); color: var(--sea-2); }

.concierge-banner { align-items: center; }

/* Indicateur de saisie : masqué dès que le dernier message du fil n'est plus celui du vacancier. */
.concierge-typing { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); padding-left: var(--space-2); }
.concierge-typing[hidden],
.concierge-thread:not(:has(> .concierge-msg--guest:last-child)) ~ .concierge-typing { display: none; }
.concierge-typing__dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.concierge-typing__dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--muted); animation: concierge-dot 1.2s infinite ease-in-out; }
.concierge-typing__dots span:nth-child(2) { animation-delay: .15s; }
.concierge-typing__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes concierge-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* --- Suggestions et saisie (vacancier) ---------------------------------------------------- */

.concierge-suggestions { display: flex; flex-direction: column; gap: var(--space-2); }
.concierge-suggestions ul { list-style: none; margin: 0; padding: 0; }
.concierge-chip-form { display: inline; }
.concierge-chip { min-height: var(--tap); padding: 0 var(--space-4); font: inherit; font-size: 0.92rem; cursor: pointer; color: var(--sea); }
.concierge-chip:hover { border-color: var(--line-strong); background: var(--sea-soft); }

.concierge-composer {
  position: sticky; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 10;
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 24px; box-shadow: var(--shadow);
}
.concierge-composer__input {
  flex: 1; min-height: var(--tap); max-height: 180px; padding: 10px 12px; border: 0; border-radius: 18px;
  background: transparent; resize: none; line-height: 1.4;
}
.concierge-composer__input:focus { box-shadow: none; outline: 2px solid var(--focus); outline-offset: 0; }
.concierge-composer__send { width: var(--tap); padding: 0; flex: none; }
@media (min-width: 760px) {
  .concierge-composer { bottom: 88px; }
}

/* --- Équipe : file des demandes et fil complet ------------------------------------------- */

.concierge-queue { padding-top: 0; padding-bottom: 0; }
.concierge-queue__item { padding: 0; }
.concierge-queue__link, .review-list__link {
  display: flex; align-items: flex-start; gap: var(--space-3); flex: 1; min-height: var(--tap); padding: var(--space-3) 0;
  color: inherit; text-decoration: none;
}
.concierge-queue__link:hover .concierge-queue__title strong, .review-list__link:hover strong { color: var(--sea); }
.concierge-queue__title, .concierge-queue__meta, .concierge-queue__excerpt, .review-list__excerpt { display: block; }
.concierge-queue__excerpt, .review-list__excerpt { margin-top: 2px; color: var(--ink-2); font-size: 0.93rem; }
.concierge-queue__item.is-unread .concierge-queue__title strong { font-weight: 750; }
.concierge-queue__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

.concierge-back { align-self: flex-start; margin-left: calc(-1 * var(--space-3)); }

.concierge-staff { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
  .concierge-staff { grid-template-columns: minmax(0, 1fr) 300px; }
}
.concierge-staff__thread { display: flex; flex-direction: column; gap: var(--space-5); }
.concierge-staff__side { display: flex; flex-direction: column; gap: var(--space-4); }
.concierge-thread--staff .concierge-msg { max-width: min(92%, 640px); }
.concierge-thread--staff .concierge-msg--guest { align-self: flex-start; align-items: flex-start; }
.concierge-thread--staff .concierge-msg--guest .concierge-msg__bubble { background: var(--sand); border-color: var(--line); color: var(--ink); border-top-left-radius: 4px; border-top-right-radius: var(--radius); }
.concierge-thread--staff .concierge-msg--assistant, .concierge-thread--staff .concierge-msg--staff { align-self: flex-end; align-items: flex-end; }
.concierge-thread--staff .concierge-msg--assistant .concierge-msg__bubble { background: var(--sea-soft); border-color: transparent; }
.concierge-reply { border-top: 1px solid var(--line); padding-top: var(--space-4); }

/* --- Avis ------------------------------------------------------------------------------------ */

.review-stars { display: inline-flex; gap: 1px; color: var(--line-strong); }
.review-stars .is-on { color: var(--ochre); fill: currentColor; }
.review-list > li { padding: 0; }
.review-quote { margin: var(--space-3) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--line-strong); font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink-2); }
.review-reviewed { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); }
.review-draft-form { display: inline; }