/* ===========================================================================
   The Chat page, as Apple Messages.
   ---------------------------------------------------------------------------
   The same frame as mail.css - one full-height card, a list on the left, the
   conversation on the right - so the two pages read as one app rather than as
   two skins. Bubbles instead of rows, and the composer is the same rounded
   field and round send button the Mail reply uses.

   Outgoing bubbles are Felicet emerald where Messages uses blue, for the same
   reason the Mail selection is: emerald is this app's one accent.

   Tokens come from apple.css. Everything here is under .amsg.
   =========================================================================== */

.amsg {
  display: flex;
  height: calc(100vh - 120px);   /* viewport, less the 52px topbar and the content padding */
  min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ---------------------------------------------------- conversation list --- */

.amsg-side {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--separator);
  background: rgba(250, 250, 251, .92);
}

.amsg-side-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--separator); flex-shrink: 0; }
.amsg-side-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.amsg-side-title { flex: 1; color: var(--label); font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.amsg-new {
  border: 0; background: var(--accent-tint); color: var(--accent);
  border-radius: 7px; font-size: 12.5px; font-weight: 600; padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 5px;
}
.amsg-new:hover { background: var(--accent); color: #fff; }

.amsg-search {
  width: 100%; background: var(--fill); border: 0; border-radius: 8px;
  height: 30px; padding: 0 10px; font-size: 13px; color: var(--label);
}
.amsg-search::placeholder { color: var(--label-3); }
.amsg-search:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.amsg-list { flex: 1; overflow-y: auto; padding: 6px; }

.amsg-conv {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 9px; border-radius: 10px; margin-bottom: 1px;
  color: inherit;
}
.amsg-conv:hover { background: var(--fill-2); }
.amsg-conv.on { background: var(--accent); }
.amsg-conv.on .amsg-conv-title,
.amsg-conv.on .amsg-conv-when,
.amsg-conv.on .amsg-conv-prev,
.amsg-conv.on .amsg-conv-kind { color: #fff; }
.amsg-conv.on .amsg-conv-prev { opacity: .88; }
.amsg-conv.on .amsg-unread { background: #fff; color: var(--accent); }

.amsg-conv-body { flex: 1; min-width: 0; }
.amsg-conv-top { display: flex; align-items: center; gap: 6px; }
.amsg-conv-kind { color: var(--label-3); font-size: 12px; }
.amsg-conv-title {
  flex: 1; min-width: 0; color: var(--label); font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amsg-conv-when { color: var(--label-3); font-size: 11px; white-space: nowrap; }
.amsg-conv-bot { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.amsg-conv-prev {
  flex: 1; min-width: 0; color: var(--label-2); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amsg-unread {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center;
}

/* ------------------------------------------------------------- thread --- */

.amsg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.amsg-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; flex-shrink: 0;
  border-bottom: 1px solid var(--separator);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.amsg-head-name { color: var(--label); font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.amsg-head-sub { color: var(--label-3); font-size: 11.5px; }

/* Messages hangs a conversation off the bottom of the pane: the newest bubble
   sits just above the composer and short threads leave the space above empty,
   rather than starting at the top with a gulf underneath. A flex column with
   `margin-top: auto` on the first child does that and still scrolls normally
   once the thread is taller than the pane, which justify-content: flex-end
   does not - that one clips the top of an overflowing column. */
.amsg-scroll {
  flex: 1; overflow-y: auto; padding: 18px 18px 8px;
  display: flex; flex-direction: column;
}
.amsg-scroll > :first-child { margin-top: auto; }

/* A bubble row. The avatar only appears on somebody else's messages, the same
   way Messages shows it: your own are unmistakably yours by side and colour. */
.amsg-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.amsg-row.mine { flex-direction: row-reverse; }
.amsg-av { flex: 0 0 auto; }

.amsg-stack { display: flex; flex-direction: column; max-width: 72%; min-width: 0; }
.amsg-row.mine .amsg-stack { align-items: flex-end; }

.amsg-sender { color: var(--label-3); font-size: 11px; font-weight: 600; margin: 0 0 3px 12px; }

.amsg-bubble {
  background: var(--fill);
  color: var(--label);
  border-radius: 18px;
  padding: 8px 13px;
  font-size: 13.5px; line-height: 1.42;
  white-space: pre-wrap; word-break: break-word;
}
/* The flattened corner is the tail, as Messages draws it. */
.amsg-row:not(.mine) .amsg-bubble { border-bottom-left-radius: 5px; }
.amsg-row.mine .amsg-bubble {
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 5px; border-bottom-left-radius: 18px;
}

.amsg-when { color: var(--label-3); font-size: 10.5px; margin: 3px 12px 0; }

.amsg-earlier { text-align: center; margin-bottom: 14px; }
.amsg-earlier button {
  border: 0; background: var(--fill); color: var(--label-2);
  border-radius: 999px; font-size: 12px; font-weight: 600; padding: 5px 14px;
}
.amsg-earlier button:hover { background: var(--fill-2); color: var(--label); }

/* ------------------------------------------------------------- compose --- */

.amsg-compose {
  border-top: 1px solid var(--separator);
  padding: 12px 18px 14px;
  background: rgba(252, 252, 253, .9);
  flex-shrink: 0;
}
.amsg-compose-row { display: flex; align-items: flex-end; gap: 10px; }
.amsg-compose textarea {
  flex: 1; resize: none;
  background: var(--fill); border: 0; border-radius: 18px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.45; color: var(--label);
  min-height: 40px; max-height: 150px;
}
.amsg-compose textarea:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.amsg-send {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-size: 15px;
}
.amsg-send:disabled { background: var(--fill); color: var(--label-3); }

/* --------------------------------------------------------------- empty --- */

.amsg-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--label-3); text-align: center; padding: 32px;
}
.amsg-empty i { font-size: 40px; color: var(--separator); }
.amsg-empty .t { color: var(--label-2); font-size: 14px; font-weight: 500; }
.amsg-empty .s { font-size: 12.5px; max-width: 300px; }

/* One pane at a time on a phone, as on the Mail page. */
.amsg-back { display: none; }
@media (max-width: 900px) {
  .amsg { height: calc(100vh - 100px); }
  .amsg-side { width: 100%; border-right: 0; }
  .amsg-main { display: none; }
  .amsg.reading .amsg-side { display: none; }
  .amsg.reading .amsg-main { display: flex; }
  .amsg-stack { max-width: 82%; }
  .amsg-back {
    display: inline-flex; align-items: center;
    background: transparent; border: 0; color: var(--accent);
    font-size: 18px; padding: 0 2px 0 0;
  }
}