/* Media attachment styles (image / video broadcasts) — uses tokens from styles.css */

/* ---------- composer: attach field ---------- */
.media-field { margin-top: 16px; }
.media-label { display: block; font-weight: 600; margin-bottom: 6px; }
.media-label small { font-weight: 400; color: var(--muted); }

.media-drop {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer;
  background: var(--bg); border: 1px dashed var(--line); border-radius: var(--radius);
  transition: background 120ms, border-color 120ms;
}
.media-drop[hidden] { display: none; }
.media-drop input { display: none; }
.media-drop:hover, .media-drop.over { background: var(--primary-tint); border-color: var(--primary); }
.media-drop-ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}

/* picked / kept attachment */
.media-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.media-thumb {
  flex: none; width: 120px; height: 90px; overflow: hidden; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.media-info b { overflow-wrap: anywhere; }
.media-info .row { margin-top: 6px; }

/* character counter over the caption limit */
#chars.over { color: var(--red); font-weight: 700; }

/* ---------- WhatsApp-style preview bubble ---------- */
.bubble-media { white-space: normal; margin: -4px -6px 8px; }
.bubble-media:empty { display: none; }
.bubble-media img, .bubble-media video {
  display: block; width: 100%; max-height: 280px; object-fit: cover;
  border-radius: calc(var(--radius) - 2px); background: var(--bg);
}

/* ---------- broadcast detail: attached media above the message ---------- */
.media-attached { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.media-attached img, .media-attached video {
  display: block; max-width: 100%; max-height: 360px; width: auto; align-self: flex-start;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ---------- lists: small 📷 / 🎬 marker after the title ---------- */
.media-flag { margin-left: 6px; font-size: 13px; vertical-align: 1px; }

@media (max-width: 560px) {
  .media-card { flex-direction: column; }
  .media-thumb { width: 100%; height: 160px; }
}