/*
 * CRM Guest 360 — the Outlook correspondence surface, in the Ivory theme.
 *
 * The thread list and the thread view of crm-guest-360-correspondence.js,
 * rendered inside the Correspondence tab of the guest profile and of the
 * reservation record. Both are lists rather than tables: a thread is a
 * paragraph with chips, not a row of columns, so nothing here needs the
 * directory table's sticky proxy scrollbar or its scroll memory.
 *
 * This sheet exists rather than more rules in crm-guest-360.css because that
 * file sits at its architecture-audit line ceiling, and because the record
 * sheets are already split this way — crm-guest-360-case-settings.css set the
 * precedent for a small CRM-scoped sheet served through the module manifest,
 * and crm-guest-360-record.css is the style precedent this one follows.
 *
 * Every colour is consumed from the shared ground and semantic tokens in
 * crm-guest-360-ivory.css, declared on .crm-guest-360-view. Nothing is
 * re-declared here and there are no raw hex values.
 *
 * Loaded last of the CRM sheets: every class below is a .crm-mail-* name that
 * no earlier sheet declares, so it cannot win a tie it was not meant to win.
 * The state blocks (.crm-reservation-state), the loading bars and the
 * secondary button keep the treatment the record sheet already gives them.
 */

.crm-guest-360-view .crm-mail {
  display: grid;
  gap: 14px;
}

.crm-guest-360-view .crm-mail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--crm-ivory-hair);
}

.crm-guest-360-view .crm-mail-heading h4 {
  margin: 0;
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
}

.crm-guest-360-view .crm-mail-count {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.66rem;
  font-weight: 750;
  white-space: nowrap;
}

/* One quiet line above the list or the thread: a refusal the attachment route
   answered, or the confirmation of a manual link. It is a status region, not
   an alert — nothing on this surface fails destructively. */
.crm-guest-360-view .crm-mail-notice,
.crm-guest-360-view .crm-mail-undo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 10px;
  background: var(--crm-sem-info-soft);
  color: var(--crm-sem-info);
  font-size: 0.7rem;
  font-weight: 700;
}

.crm-guest-360-view .crm-mail-threads,
.crm-guest-360-view .crm-mail-messages {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-guest-360-view .crm-mail-thread {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 12px;
  background: var(--crm-ivory-card);
}

/* The whole card is the affordance: the subject is the link, and the chips
   under it travel with it rather than sitting outside the hit area. */
.crm-guest-360-view .crm-mail-thread-open {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.crm-guest-360-view .crm-mail-thread-open:hover .crm-mail-subject,
.crm-guest-360-view .crm-mail-thread-open:focus-visible .crm-mail-subject {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crm-guest-360-view .crm-mail-subject {
  color: var(--crm-ivory-ink);
  font-family: Marcellus, Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 400;
}

.crm-guest-360-view .crm-mail-when,
.crm-guest-360-view .crm-mail-participants {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.68rem;
  font-weight: 650;
}

.crm-guest-360-view .crm-mail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-guest-360-view .crm-mail-chip {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 999px;
  background: var(--crm-sem-neutral-soft);
  color: var(--crm-sem-neutral);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.crm-guest-360-view .crm-mail-chip.is-mailbox {
  background: var(--crm-sem-info-soft);
  color: var(--crm-sem-info);
}

.crm-guest-360-view .crm-mail-chip.is-linked {
  background: var(--crm-sem-good-soft);
  color: var(--crm-sem-good);
}

.crm-guest-360-view .crm-mail-chip.is-deleted {
  background: var(--crm-sem-warn-soft);
  color: var(--crm-sem-warn);
}

.crm-guest-360-view .crm-mail-thread-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--crm-ivory-hair-soft);
}

.crm-guest-360-view .crm-mail-action {
  font-size: 0.64rem;
}

.crm-guest-360-view .crm-mail-thread-nav {
  display: flex;
}

/* The end of the list stacks: an append that failed says so above the control
   that retries it, rather than replacing the rows that did load. */
.crm-guest-360-view .crm-mail-more {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.crm-guest-360-view .crm-mail-message {
  display: grid;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid var(--crm-ivory-hair);
  border-radius: 12px;
  background: var(--crm-ivory-card);
}

/* Direction is carried by the word in the header; the edge rule is the second
   channel, never the only one. */
.crm-guest-360-view .crm-mail-message.is-outbound {
  box-shadow: inset 3px 0 0 var(--crm-sem-info);
}

.crm-guest-360-view .crm-mail-message.is-inbound {
  box-shadow: inset 3px 0 0 var(--crm-ivory-rule);
}

.crm-guest-360-view .crm-mail-message.is-deleted {
  background: var(--crm-ivory-ground);
}

.crm-guest-360-view .crm-mail-message-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.crm-guest-360-view .crm-mail-direction {
  color: var(--crm-ivory-ink-soft);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Where the message is filed. It sits beside the direction because the two
   answer the same kind of question about the message rather than about its
   content, and it takes the neutral chip so it never competes with the
   mailbox chips of the thread list. */
.crm-guest-360-view .crm-mail-chip.crm-mail-folder {
  margin-right: auto;
  font-weight: 700;
  text-transform: none;
}

.crm-guest-360-view .crm-mail-addresses {
  display: grid;
  gap: 3px;
  margin: 0;
}

.crm-guest-360-view .crm-mail-addresses > div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
}

.crm-guest-360-view .crm-mail-addresses dt {
  color: var(--crm-ivory-ink-faint);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.crm-guest-360-view .crm-mail-addresses dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--crm-ivory-ink);
  font-size: 0.7rem;
}

.crm-guest-360-view .crm-mail-flag {
  margin: 0;
  color: var(--crm-sem-warn);
  font-size: 0.66rem;
  font-weight: 700;
}

/* The body is the mailbox's own plain text, rendered as text: the API never
   sends HTML and this surface never asks for it. Pre-wrap keeps the sender's
   line breaks without letting a long URL widen the record. */
.crm-guest-360-view .crm-mail-body {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--crm-ivory-hair-soft);
  border-radius: 10px;
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-guest-360-view .crm-mail-quoted {
  border-left: 3px solid var(--crm-ivory-rule);
  color: var(--crm-ivory-ink-soft);
}

.crm-guest-360-view .crm-mail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-guest-360-view .crm-mail-attachment {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--crm-ivory-hair-strong);
  border-radius: 999px;
  background: var(--crm-ivory-ground);
  color: var(--crm-ivory-ink);
  font-size: 0.63rem;
  font-weight: 750;
  text-decoration: none;
}

.crm-guest-360-view .crm-mail-attachment:hover,
.crm-guest-360-view .crm-mail-attachment:focus-visible {
  border-color: var(--crm-ivory-rule);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crm-guest-360-view .crm-mail-outlook {
  justify-self: start;
  color: var(--crm-sem-info);
  font-size: 0.66rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .crm-guest-360-view .crm-mail-addresses > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Why a thread or a message is here when no address matched: the reservation
   reference the sender quoted. The chip carries the identifier itself, so a
   reader can compare it with the reservation in front of them rather than
   trusting the word "matched". It is ruled rather than tinted - the sheet's
   five tints are spoken for, and the word in the chip is what carries the
   meaning here as everywhere else. */
.crm-guest-360-view .crm-mail-chip.is-reference {
  border-color: var(--crm-ivory-rule);
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
}

/* The stay the reference belongs to. It is a real control - the reservation
   card's own - so it is styled as a chip and behaves as the button it is. */
.crm-guest-360-view .crm-mail-chip.is-reservation {
  display: inline-flex;
  width: auto;
  border-color: var(--crm-ivory-rule);
  background: var(--crm-ivory-card);
  color: var(--crm-ivory-ink);
  font: inherit;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.crm-guest-360-view .crm-mail-chip.is-reservation:hover,
.crm-guest-360-view .crm-mail-chip.is-reservation:focus-visible {
  border-color: var(--crm-ivory-ink);
  background: var(--crm-ivory-ground);
}