/* messenger.css — styles for messenger.html.
 *
 * Same defensive var(--token, fallback) approach as profile.css/group.css:
 * additive and self-contained, doesn't redefine anything from base.css,
 * feed.css, threads.css, etc.
 */

/* ---------- topbar spacing on this page ----------
   Same fix as group.css: the who-pill (shorter box) sits centered
   against the taller Bulletin pill in the same row, reading as flush
   against the top with no room above it, and base.css's shared
   `main{padding-top:26px}` leaves too much air above the search bar /
   conversation list on this page too. */
.who-pill{ margin-top:6px; }
main{ padding-top:0; }

/* ---------- side breathing room, matching group.html's 14px ----------
   Same fix, now for the topbar row itself — the Bulletin pill and the
   who-pill were sitting flush against the screen edges, same as the
   search bar was before. Padding only, added to .topbar as a whole
   (it's a flex row with justify-content:space-between, so its two
   children sit right at its own edges) — nothing subtracted. */
.topbar{ padding-left:14px; padding-right:14px; }

#listView > .msgr-search-row,
#listView > .msgr-convo-list{
  padding-left:14px; padding-right:14px;
}

/* ---------- loading state ----------
   Swaps the generic spinner for a soft, staggered three-dot pulse in
   the app's blue gradient — reads calmer for something people glance
   at while a conversation loads. */
.msgr-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:52px 20px; text-align:center;
  color:var(--ink-400, #93A6D6); font-size:.86rem; font-weight:500; letter-spacing:.01em;
  animation: msgrLoadingIn .35s ease both;
}
.msgr-loading-dots{ display:flex; align-items:center; gap:6px; }
.msgr-loading-dots span{
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-400,#6FA0FF), var(--blue-600,#2F6FED));
  box-shadow:0 0 10px -2px rgba(79,132,255,.6);
  animation: msgrLoadingPulse 1.1s cubic-bezier(.45,0,.55,1) infinite;
}
.msgr-loading-dots span:nth-child(2){ animation-delay:.14s; }
.msgr-loading-dots span:nth-child(3){ animation-delay:.28s; }

@keyframes msgrLoadingPulse{
  0%, 80%, 100%{ transform:scale(.55); opacity:.35; }
  40%{ transform:scale(1); opacity:1; }
}
@keyframes msgrLoadingIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- search ---------- */
.msgr-search-row{ margin-bottom: 4px; }
.msgr-search-wrap{ position:relative; }
.msgr-search-ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--ink-500, #7C8FC2); pointer-events:none;
}
.msgr-search-wrap input{
  width:100%; box-sizing:border-box; font:inherit; font-size:.92rem;
  color:var(--ink-0, #F5F8FF);
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.16));
  border-radius:999px; padding:12px 16px 12px 40px;
  transition:border-color .15s ease, background .15s ease;
}
.msgr-search-wrap input::placeholder{ color:var(--ink-500, #7C8FC2); }
.msgr-search-wrap input:focus{
  outline:none; border-color:var(--blue-400, #6FA0FF);
  background:var(--glass-fill-strong, rgba(255,255,255,.08));
}

.msgr-search-results{
  display:flex; flex-direction:column; gap:2px;
  margin:8px 0 18px; padding:8px;
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  border-radius:16px;
}
/* .msgr-search-results' own display:flex above always beats the browser's
   built-in [hidden]{display:none} — an author rule outranks a
   user-agent rule regardless of specificity — so box.hidden = true
   (and the plain `hidden` attribute in the markup) was doing nothing
   visually, leaving an empty pill showing under the search field. This
   rule is more specific than the one above, so it wins instead. */
.msgr-search-results[hidden]{ display:none; }
.msgr-search-result{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:9px 10px; border:none; border-radius:12px; background:transparent;
  color:var(--ink-0, #F5F8FF); font:inherit; font-size:.9rem; font-weight:500; cursor:pointer;
}
.msgr-search-result:hover, .msgr-search-result:focus-visible{
  background:var(--glass-fill-strong, rgba(255,255,255,.1));
}
.msgr-search-empty{
  padding:12px 10px; font-size:.85rem; color:var(--ink-500, #7C8FC2);
}

/* ---------- conversation list ---------- */
.msgr-convo-list{ display:flex; flex-direction:column; gap:4px; }
.msgr-convo-row{
  position:relative; display:flex; align-items:center; gap:12px; width:100%;
  text-align:left; padding:12px; border:none; border-radius:16px;
  background:var(--glass-fill, rgba(255,255,255,.04));
  border:1px solid transparent; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.msgr-convo-row:hover, .msgr-convo-row:focus-visible{
  background:var(--glass-fill-strong, rgba(255,255,255,.09));
  border-color:var(--glass-border, rgba(255,255,255,.14));
}
.msgr-convo-row .avatar{ flex:none; }
.msgr-convo-body{ flex:1; min-width:0; }
.msgr-convo-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.msgr-convo-name{
  font-family:var(--font-display, inherit); font-weight:600; font-size:.92rem;
  color:var(--ink-0, #F5F8FF); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msgr-convo-time{ flex:none; font-family:var(--font-mono, monospace); font-size:.68rem; color:var(--ink-500, #7C8FC2); }
.msgr-convo-preview{
  font-size:.84rem; color:var(--ink-300, #A9BAE0); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msgr-convo-row.unread .msgr-convo-name{ color:#fff; }
.msgr-convo-row.unread .msgr-convo-preview{ color:var(--ink-0, #F5F8FF); font-weight:500; }
.msgr-unread-dot{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--blue-400, #6FA0FF); box-shadow:0 0 8px var(--blue-400, #6FA0FF);
}

/* ---------- thread header ---------- */
.msgr-thread-head{
  display:flex; align-items:center; gap:12px; padding:12px 14px 16px;
}
.msgr-back-btn{
  flex:none; width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-200, #C9D6F5);
  background:var(--glass-fill, rgba(255,255,255,.06));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  transition:background .15s ease, color .15s ease;
}
.msgr-back-btn:hover, .msgr-back-btn:focus-visible{
  background:var(--glass-fill-strong, rgba(255,255,255,.12)); color:#fff;
}
.msgr-thread-head .avatar.sm{ flex:none; }
.msgr-thread-name{ font-family:var(--font-display, inherit); font-weight:700; font-size:1.02rem; color:var(--ink-0, #F5F8FF); }

/* ---------- messages (chat bubbles) ---------- */
.msgr-messages{
  display:flex; flex-direction:column; gap:10px;
  max-height:min(58vh, 560px); overflow-y:auto; padding:4px 14px 12px;
}
.msgr-bubble-row{ display:flex; align-items:flex-end; gap:8px; max-width:82%; }
.msgr-bubble-row.mine{ align-self:flex-end; flex-direction:row-reverse; }
.msgr-bubble-row .avatar.sm{ flex:none; }
.msgr-bubble{
  padding:10px 14px; border-radius:18px 18px 18px 4px;
  background:var(--glass-fill-strong, rgba(255,255,255,.09));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
}
.msgr-bubble-row.mine .msgr-bubble{
  border-radius:18px 18px 4px 18px;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  border-color:transparent;
}
.msgr-bubble-text{
  font-size:.9rem; line-height:1.5; color:var(--ink-0, #F5F8FF);
  white-space:pre-wrap; word-break:break-word;
}
.msgr-bubble-row.mine .msgr-bubble-text{ color:#fff; }
.msgr-bubble-time{
  font-family:var(--font-mono, monospace); font-size:.64rem; margin-top:4px;
  color:var(--ink-500, #7C8FC2);
}
.msgr-bubble-row.mine .msgr-bubble-time{ color:rgba(255,255,255,.75); text-align:right; }

/* ---------- composer ---------- */
.msgr-composer{
  display:flex; align-items:flex-end; gap:10px; margin-top:14px;
  padding:10px; border-radius:20px;
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
}
.msgr-composer textarea{
  flex:1; min-width:0; resize:none; overflow:hidden;
  min-height:22px; max-height:140px; background:transparent; border:none;
  color:var(--ink-0, #F5F8FF); font:inherit; font-size:.92rem; line-height:1.5;
  padding:8px 4px; outline:none;
}
.msgr-composer textarea::placeholder{ color:var(--ink-500, #7C8FC2); }
.msgr-send-btn{
  flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  box-shadow:0 8px 18px -6px rgba(47,111,237,.6);
  transition:transform .15s ease, opacity .15s ease;
}
.msgr-send-btn:hover:not(:disabled){ transform:scale(1.06); }
.msgr-send-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }

@media (max-width:480px){
  .msgr-bubble-row{ max-width:90%; }
}