/* ============================================================
   topdevphone — Messages app styles
   Thread list, iMessage-style bubbles, typing dots, composer.
   Uses base.css tokens only — works in dark AND light theme.
   ============================================================ */

/* ---------- thread list ---------- */
.msg-rows {
  background: var(--bg-secondary);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  margin-top: 4px;
}
.msg-thread-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; position: relative;
}
.msg-thread-row + .msg-thread-row::before {
  content: ''; position: absolute; top: 0; left: 72px; right: 0;
  height: 1px; background: var(--separator);
}
.msg-thread-row:active { background: var(--bg-tertiary); }
.msg-av { width: 46px; height: 46px; font-size: 16px; }
.msg-av.group { background: linear-gradient(140deg, #3ddc68, #1fb14c); font-size: 20px; }
.msg-av.small { width: 34px; height: 34px; font-size: 12px; }
.mt-main { flex: 1; min-width: 0; }
.mt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mt-name {
  font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-time { font-size: 12px; color: var(--text-tertiary); flex: 0 0 auto; }
.mt-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.mt-preview {
  font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- chat header ---------- */
.msg-chat-head { border-bottom: 1px solid var(--separator); padding-bottom: 8px; }
.mch-id { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mch-name {
  font-size: 13px; font-weight: 600; max-width: 210px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mch-sub { font-size: 10.5px; color: var(--text-tertiary); }

/* ---------- messages ---------- */
.msg-scroll {
  flex: 1; overflow-y: auto;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.msg-scroll::-webkit-scrollbar { width: 0; }
.msg-day { text-align: center; font-size: 11px; color: var(--text-tertiary); margin: 10px 0 6px; flex: 0 0 auto; }
.msg-more-row { display: flex; justify-content: center; margin-bottom: 6px; }
.msg-more { font-size: 12px; font-weight: 600; color: var(--accent-blue); padding: 6px 12px; }

.msg-b {
  max-width: 76%;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.35;
  word-wrap: break-word; overflow-wrap: break-word;
  flex: 0 0 auto;
}
.msg-b.mine {
  align-self: flex-end;
  background: var(--accent-blue); color: #fff;
  border-bottom-right-radius: 5px;
}
.msg-b.theirs {
  align-self: flex-start;
  background: var(--bg-tertiary); color: var(--text-primary);
  border-bottom-left-radius: 5px;
}
.msg-sender { font-size: 10.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; }
.msg-img { display: block; max-width: 100%; min-width: 140px; border-radius: 12px; margin: 2px 0 4px; }
.msg-img-ph {
  width: 150px; height: 100px;
  background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 26px;
}
.msg-receipt {
  align-self: flex-end;
  font-size: 10.5px; color: var(--text-tertiary);
  margin-top: 2px; padding-right: 4px;
}

/* ---------- typing indicator ---------- */
.typing-bubble {
  align-self: flex-start;
  background: var(--bg-tertiary);
  border-radius: 18px; border-bottom-left-radius: 5px;
  padding: 12px 14px;
  display: flex; gap: 4px; margin-top: 2px;
  flex: 0 0 auto;
}
.typing-bubble span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary);
  animation: msgTyping 1.2s infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes msgTyping {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- composer ---------- */
.msg-composer {
  flex: 0 0 auto;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px 22px;
  border-top: 1px solid var(--separator);
  background: var(--bg-primary);
}
.mc-attach {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-tertiary); color: var(--accent-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex: 0 0 auto;
}
.mc-input-wrap { flex: 1; min-width: 0; }
.mc-media { margin-bottom: 6px; }
.mc-chip { position: relative; display: inline-block; }
.mc-chip .msg-img { max-width: 120px; max-height: 90px; min-width: 0; margin: 0; }
.mc-chip .msg-img-ph { width: 90px; height: 64px; font-size: 20px; border-radius: 12px; }
.mc-chip button {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.mc-input {
  width: 100%;
  background: var(--bg-tertiary); color: var(--text-primary);
  border: 0; outline: none;
  border-radius: 17px; padding: 8px 14px; font-size: 14px;
}
.mc-input::placeholder { color: var(--text-tertiary); }
.mc-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 auto;
  transition: transform 0.1s, filter 0.15s;
}
.mc-send:active { transform: scale(0.92); filter: brightness(0.85); }

/* ---------- compose (new message / group) ---------- */
.msg-compose-body { flex: 1; overflow-y: auto; padding: 0 14px 20px; }
.msg-compose-body::-webkit-scrollbar { width: 0; }
.mcp-row { margin-bottom: 10px; }
.mcp-contacts {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  overflow: hidden; margin: 4px 0 14px;
}
.mcp-c {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; cursor: pointer; position: relative;
}
.mcp-c + .mcp-c::before {
  content: ''; position: absolute; top: 0; left: 56px; right: 0;
  height: 1px; background: var(--separator);
}
.mcp-c:active { background: var(--bg-tertiary); }
.mcp-c .avatar { width: 34px; height: 34px; font-size: 12px; }
.mcp-c .cmain { flex: 1; min-width: 0; }
.mcp-c .cname {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcp-c .cnum { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.mcp-c .csel {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.6px solid var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; flex: 0 0 auto;
}
.mcp-c .csel .ic { display: none; }
.mcp-c.sel .csel { background: var(--accent-green); border-color: var(--accent-green); }
.mcp-c.sel .csel .ic { display: block; }