/* HOP — Messages (messages.js, v131) */
.msg-btn{ position:relative; }
.msg-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#e0453a; color:#fff;
  font-size:11px; font-weight:800; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--bg); }
.msg-badge[hidden]{ display:none; }
.msg-badge.is-inline{ position:static; display:inline-block; box-shadow:none; vertical-align:2px; margin-left:4px; }
.msg-main{ padding-top:8px; }
.msg-main > .btn{ margin-bottom:14px; display:flex; align-items:center; justify-content:center; gap:8px; }
.msg-list{ padding:4px 0; }
.msg-empty{ margin:14px 16px; font-size:15px; line-height:1.45; color:var(--text-muted); text-align:center; }
.msg-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; font:inherit; color:var(--text); background:none; border:0; border-top:1px solid var(--border);
  padding:12px 14px; cursor:pointer; }
.msg-row:first-child{ border-top:0; }
.msg-ava{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--accent-100); color:var(--accent-700); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; }
.msg-row-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.msg-row-t b{ font-size:16px; }
.msg-row-t span{ font-size:14px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msg-row.is-unread .msg-row-t span{ color:var(--text); font-weight:600; }
.msg-row-r{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.msg-row-r i{ font-style:normal; font-size:12px; color:var(--text-muted); }
/* a conversation */
.msg-flow{ display:flex; flex-direction:column; gap:6px; padding:6px 2px 10px; }
.msg-b{ max-width:80%; align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:18px 18px 18px 6px; padding:8px 11px 6px; }
.msg-b.is-me{ align-self:flex-end; background:#0f6aa8; border-color:#0f6aa8; color:#fff; border-radius:18px 18px 6px 18px; }
:root[data-theme="dark"] .msg-b.is-me{ background:#1f5f8b; border-color:#1f5f8b; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .msg-b.is-me{ background:#1f5f8b; border-color:#1f5f8b; } }
.msg-tx{ font-size:16px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-at{ font-size:11px; margin-top:3px; opacity:.7; text-align:right; }
.msg-img{ display:block; width:100%; max-width:260px; min-height:60px; border-radius:12px; margin:2px 0 6px; background:rgba(127,127,127,.15); object-fit:cover; cursor:zoom-in; }
.msg-img.is-missing{ min-height:0; cursor:default; }
.msg-full img{ display:block; width:100%; height:auto; border-radius:12px; }
.msg-compose{ position:relative; margin-top:6px; padding:10px; border-radius:20px; background:var(--surface); border:1px solid var(--border-strong); }
.msg-compose[hidden]{ display:none; }
.msg-row-c{ display:flex; align-items:flex-end; gap:8px; }
.msg-row-c textarea{ flex:1; min-width:0; resize:none; height:44px; min-height:44px; box-sizing:border-box; font:inherit; font-size:16px; line-height:1.4; padding:9px 12px; border-radius:16px; border:1.5px solid var(--border-strong);
  background:var(--bg); color:var(--text); max-height:160px; }
.msg-row-c textarea:focus{ outline:3px solid var(--accent-400); outline-offset:0; }
.msg-attach, .msg-send{ flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:0; }
.msg-attach{ background:var(--surface-2, #eef2f7); color:var(--text); }
.msg-send{ background:#0f6aa8; color:#fff; }
.msg-send:disabled{ opacity:.5; }
.msg-pending{ position:relative; margin:0 0 8px 52px; width:110px; }
.msg-pending[hidden]{ display:none; }
.msg-pending img{ display:block; width:110px; height:110px; object-fit:cover; border-radius:12px; }
.msg-pending button{ position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%; border:0; background:#10274a; color:#fff; font-size:13px; cursor:pointer; }
.msg-hint{ margin:6px 0 0 52px; font-size:12.5px; color:var(--text-muted); }
.msg-compose .acct-err{ margin:4px 0 0 52px; min-height:0; }
/* narrow phones with HOP's Challenge on: Appearance steps aside on Today (it's also in HOP's Office) so the banner fits */
@media (max-width:400px){ .hop-home-head:has(.ch-banner):has(.msg-btn) .hop-home-actions [data-theme-open]{ display:none; } }