/* ══════════════════════════════════════════════════════
   ForeverFitWithAsh — Messages / Chat Shared Styles
   Used by admin.html (trainer inbox) and portal.html
══════════════════════════════════════════════════════ */

/* ── Admin messages shell layout ───────────────────── */
.msg-shell { display:flex; height:calc(100vh - 160px); border:1.5px solid #fad4e8; border-radius:16px; overflow:hidden; background:#fff; }
.msg-left  { width:270px; flex-shrink:0; border-right:1.5px solid #fad4e8; display:flex; flex-direction:column; background:#fff; }
.msg-left-top { padding:14px 14px 10px; border-bottom:1.5px solid #fad4e8; }
.msg-compose-btn { width:100%; padding:10px; background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; border:none; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; transition:opacity .2s; }
.msg-compose-btn:hover { opacity:.9; }
.msg-tabs  { display:flex; gap:4px; }
.msg-tab   { flex:1; padding:7px 4px; border:1.5px solid #fad4e8; background:#fff0f5; border-radius:8px; font-size:.75rem; font-weight:600; color:#7b3560; cursor:pointer; text-align:center; transition:all .15s; }
.msg-tab.active { background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; border-color:transparent; }
.msg-search { width:100%; padding:7px 12px; border:1.5px solid #fad4e8; border-radius:8px; font-size:.8rem; font-family:'Inter',sans-serif; outline:none; background:#fff0f5; color:#2b0a1e; margin-top:8px; }
.msg-search:focus { border-color:#e91e8c; background:#fff; }
.msg-list  { flex:1; overflow-y:auto; }

/* ── Message list items ─────────────────────────────── */
.msg-item  { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #fdf4f8; cursor:pointer; transition:background .15s; position:relative; }
.msg-item:hover    { background:#fff0f5; }
.msg-item.active   { background:#fff0f5; border-left:3px solid #e91e8c; }
.msg-item.unread .msg-item-name    { font-weight:700; color:#2b0a1e; }
.msg-item.unread .msg-item-preview { color:#7b3560; font-weight:500; }
.msg-item-av { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.msg-item-av.sent-av { background:linear-gradient(135deg,#7b3560,#c2185b); }
.msg-item-body { flex:1; min-width:0; }
.msg-item-name    { font-size:.85rem; font-weight:600; color:#2b0a1e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-item-preview { font-size:.74rem; color:#b06090; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.msg-item-time    { font-size:.68rem; color:#cbb0c8; flex-shrink:0; align-self:flex-start; margin-top:2px; }
.msg-empty-list   { text-align:center; padding:40px 16px; color:#cbb0c8; font-size:.85rem; }
.msg-empty-list i { font-size:2rem; display:block; margin-bottom:10px; color:#fad4e8; }

/* ── Right panel ─────────────────────────────────────── */
.msg-right { flex:1; display:flex; flex-direction:column; min-width:0; }
.msg-right-placeholder { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#cbb0c8; text-align:center; padding:32px; }
.msg-right-placeholder i  { font-size:3.5rem; color:#fad4e8; margin-bottom:16px; }
.msg-right-placeholder h3 { font-size:1rem; color:#b06090; margin-bottom:6px; }

/* ── Compose panel ─────────────────────────────────── */
.msg-compose-panel  { flex:1; display:flex; flex-direction:column; }
.msg-compose-header { padding:14px 18px; border-bottom:1.5px solid #fad4e8; background:#fff0f5; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.msg-compose-header h3 { font-size:.95rem; font-weight:700; color:#2b0a1e; margin:0; }
.msg-compose-body   { flex:1; padding:20px; overflow-y:auto; }
.msg-compose-field  { margin-bottom:14px; }
.msg-compose-field label { display:block; font-size:.8rem; font-weight:700; color:#7b3560; margin-bottom:5px; }
.msg-compose-field select,
.msg-compose-field input { width:100%; padding:10px 12px; border:1.5px solid #fad4e8; border-radius:10px; font-family:'Inter',sans-serif; font-size:.88rem; color:#2b0a1e; outline:none; background:#fff; transition:border-color .2s; }
.msg-compose-field select:focus,
.msg-compose-field input:focus  { border-color:#e91e8c; }
.msg-compose-textarea { width:100%; min-height:180px; padding:12px 14px; border:1.5px solid #fad4e8; border-radius:10px; font-family:'Inter',sans-serif; font-size:.88rem; color:#2b0a1e; outline:none; resize:vertical; line-height:1.6; transition:border-color .2s; }
.msg-compose-textarea:focus { border-color:#e91e8c; }
.msg-compose-footer { padding:14px 20px; border-top:1.5px solid #fad4e8; display:flex; gap:10px; align-items:center; flex-shrink:0; }
.msg-btn-send  { padding:10px 22px; background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; border:none; border-radius:10px; font-size:.88rem; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px; transition:opacity .2s; }
.msg-btn-send:hover     { opacity:.9; }
.msg-btn-send:disabled  { opacity:.5; cursor:not-allowed; }
.msg-btn-clear { padding:10px 16px; background:#fff0f5; color:#7b3560; border:1.5px solid #fad4e8; border-radius:10px; font-size:.88rem; font-weight:600; cursor:pointer; transition:background .15s; }
.msg-btn-clear:hover    { background:#fce4ec; }
.msg-send-status { font-size:.82rem; color:#4caf50; margin-left:auto; display:none; }

/* ── Thread header ──────────────────────────────────── */
.msg-thread-header { padding:13px 18px; border-bottom:1.5px solid #fad4e8; background:#fff; display:flex; align-items:center; gap:12px; flex-shrink:0; }
.msg-thread-av   { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.msg-thread-name { font-size:.92rem; font-weight:700; color:#2b0a1e; }
.msg-thread-sub  { font-size:.73rem; color:#b06090; }
.msg-reply-btn   { margin-left:auto; padding:7px 14px; background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; border:none; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; }

/* ── Message thread area ────────────────────────────── */
.msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fdf4f8;
  scroll-behavior: smooth;
}
.msg-row         { display: flex; }
.msg-row.mine    { justify-content: flex-end; }
.msg-row.theirs  { justify-content: flex-start; }
.msg-bbl {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .88rem;
  line-height: 1.55;
  word-break: break-word;
}
.msg-row.mine   .msg-bbl { background:linear-gradient(135deg,#e91e8c,#c2185b); color:#fff; border-bottom-right-radius:4px; }
.msg-row.theirs .msg-bbl { background:#fff; color:#2b0a1e; border:1.5px solid #fad4e8; border-bottom-left-radius:4px; }
.msg-meta { display:flex; align-items:center; gap:6px; margin-top:5px; font-size:.68rem; opacity:.8; flex-wrap:wrap; }
.msg-row.mine   .msg-meta { justify-content:flex-end; color:rgba(255,255,255,0.85); }
.msg-row.theirs .msg-meta { color:#b06090; }
.msg-read { font-size:.7rem; }
.msg-date-divider { text-align:center; font-size:.72rem; color:#cbb0c8; margin:8px 0 4px; display:flex; align-items:center; gap:10px; }
.msg-date-divider::before,
.msg-date-divider::after  { content:''; flex:1; height:1px; background:#fad4e8; }

/* ── Input row ─────────────────────────────────────── */
.msg-input-row { display:flex; gap:8px; align-items:flex-end; padding:12px 16px; background:#fff; border-top:1.5px solid #fad4e8; flex-shrink:0; }
.msg-textarea   { flex:1; border:1.5px solid #fad4e8; border-radius:12px; padding:10px 14px; font-family:'Inter',sans-serif; font-size:.88rem; color:#2b0a1e; resize:none; outline:none; background:#fff0f5; max-height:100px; line-height:1.5; transition:border-color .2s, background .2s; }
.msg-textarea:focus       { border-color:#e91e8c; background:#fff; }
.msg-textarea::placeholder { color:#cbb0c8; }
.msg-send-btn { width:42px; height:42px; background:linear-gradient(135deg,#e91e8c,#c2185b); border:none; border-radius:12px; color:#fff; font-size:.95rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .15s, box-shadow .15s; }
.msg-send-btn:hover    { transform:scale(1.08); box-shadow:0 4px 14px rgba(233,30,140,0.35); }
.msg-send-btn:active   { transform:scale(.95); }
.msg-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Empty / loading ────────────────────────────────── */
.msg-empty   { text-align:center; padding:40px 20px; color:#cbb0c8; font-size:.88rem; }
.msg-empty i { font-size:2rem; display:block; margin-bottom:10px; color:#fad4e8; }

/* ── Unread badge ───────────────────────────────────── */
.unread-badge { background:#e91e8c; color:#fff; border-radius:50px; padding:1px 7px; font-size:.65rem; font-weight:700; margin-left:4px; vertical-align:middle; display:inline-block; min-width:18px; text-align:center; line-height:1.6; }

/* ── Animated online dot ────────────────────────────── */
.online-dot-sm { width:7px; height:7px; background:#4caf50; border-radius:50%; display:inline-block; animation:pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width:768px) {
  .msg-shell { flex-direction:column; height:auto; }
  .msg-left  { width:100%; border-right:none; border-bottom:1.5px solid #fad4e8; max-height:220px; }
  .msg-bbl   { max-width:85%; }
}