/* ═══════════════════════════════════════════════════
   MESSAGES INBOX — 2026-09-25 (Gil: "improve the section gui to bubbles")
   Loaded after the skin so it reads that skin's variables and works on
   a / c / e. The thread view keeps its existing .chat-msg bubbles.
   ═══════════════════════════════════════════════════ */

.mi-new {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-bottom:14px;
  padding:13px; border:none; border-radius:var(--radius-md); background:var(--accent); color:#fff;
  font-family:var(--font); font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);
}
.mi-new span { font-size:18px; line-height:1; }
.mi-list { display:flex; flex-direction:column; gap:10px; }

.mi-row {
  display:flex; align-items:center; gap:12px; width:100%; padding:14px; text-align:left;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-card);
  color:var(--text); font-family:var(--font); cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, border-color .12s ease;
}
.mi-row:hover { border-color:var(--accent); }
.mi-row:active { transform:scale(.99); }
.mi-row.unread { border-color:var(--accent); box-shadow:var(--shadow-md); }

.mi-av {
  position:relative; width:46px; height:46px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-size:18px; font-weight:800;
}
.mi-av-ch {
  position:absolute; right:-3px; bottom:-3px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px;
  background:var(--bg-card); border:2px solid var(--bg-card); box-shadow:0 1px 3px rgba(0,0,0,.15);
}

.mi-body { display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.mi-top { display:flex; align-items:center; gap:8px; min-width:0; }
.mi-name { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-chip { flex-shrink:0; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--text-secondary); font-size:11px; font-weight:600; }
.mi-time { margin-left:auto; flex-shrink:0; font-size:12px; color:var(--text-muted); }

/* the last message, as a speech bubble */
.mi-bubble {
  position:relative; align-self:flex-start; max-width:100%; padding:8px 12px;
  border-radius:14px; border-top-left-radius:4px; background:var(--bg-input); color:var(--text-secondary);
  font-size:14px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mi-row.unread .mi-name { color:var(--text); }
.mi-row.unread .mi-bubble { background:var(--info-bg); color:var(--text); font-weight:600; }

.mi-badge {
  flex-shrink:0; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--badge-bg); color:var(--badge-text); font-size:12px; font-weight:700;
}
.mi-chev { flex-shrink:0; font-size:22px; color:var(--text-muted); line-height:1; }

@media (min-width:768px) {
  #msgInbox { max-width:760px; margin:0 auto; }
}
.mi-sub { font-size:12px; color:var(--text-muted); margin-top:-4px; }

/* "Open Willow" button inside a Willow (auto) reply (2026-09-25) */
.wl-msg-btn {
  display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:8px 14px 8px 8px;
  border:none; border-radius:999px; background:#1f5f3f; color:#fff; cursor:pointer;
  font-family:var(--font, inherit); font-size:14px; font-weight:700; box-shadow:0 2px 6px rgba(31,95,63,.3);
}
.wl-msg-btn img { width:26px; height:26px; border-radius:50%; }
.wl-msg-btn:active { transform:scale(.97); }