/* Nut tra loi/bieu cam, video + the link trong chat. (Tach tu styles.css - nap theo DUNG thu tu trong index.html) */

/* =====================================================================
   Nut "Tra loi" + "Tha bieu cam" khi re chuot vao tin nhan: 1 vien thuoc
   gom 2 icon net, xuat hien canh bong bong.
   ===================================================================== */
.msg-hover-actions {
  gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(23, 32, 51, .12);
}
.msg-row.in .msg-hover-actions { right: -76px; }
.msg-row.out .msg-hover-actions { left: -76px; }
/* Dang mo bang chon bieu cam -> giu cum nut hien (bang nam trong cum nut) */
.msg-hover-actions:has(.msg-reaction-picker) { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.msg-action-btn {
  width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; box-shadow: none;
  color: var(--chat-toolbar-icon); display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.msg-action-btn:hover { transform: none; }
.msg-reply-btn:hover { background: var(--primary-soft); color: var(--primary); }
.msg-react-btn:hover { background: var(--warning-soft); color: var(--warning); }
.msg-reaction-picker { bottom: calc(100% + 8px); }

/* =====================================================================
   Video + the link trong khung chat
   ===================================================================== */
.msg:has(> .msg-video), .msg:has(> .msg-link-card) { padding: 4px; }
.msg-video {
  position: relative; width: 300px; max-width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: #0f172a;
}
.msg-video.portrait { width: 220px; max-height: 400px; }
.msg-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0f172a; }
.msg-video-overlay {
  position: absolute; inset: 0; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%);
}
.msg-video-play {
  width: 54px; height: 54px; border-radius: 50%; color: #fff; padding-left: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); border: 2px solid rgba(255, 255, 255, .85);
  backdrop-filter: blur(4px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: transform .2s var(--ease), background .2s;
}
.msg-video-overlay:hover .msg-video-play { transform: scale(1.1); background: var(--primary); border-color: #fff; }
.msg-video-duration {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.msg-video.failed { aspect-ratio: auto; width: auto; background: transparent; }
.msg-video-fallback { display: block; padding: 8px 10px; font-size: 13px; }
.msg.out .msg-video-fallback { color: #fff; }

.msg-link-card {
  display: flex; flex-direction: column; width: 280px; max-width: 100%;
  border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow .2s, transform .2s var(--ease);
}
.msg-link-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.msg-link-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); display: block; }
.msg-link-body { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 10px; }
.msg-link-body strong { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-link-desc { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-link-host { font-size: 11.5px; color: var(--muted); }

/* Cot thong tin: o anh/video */
.info-media-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--surface-hover); transition: transform .2s var(--ease), box-shadow .2s;
}
.info-media-cell:hover { transform: scale(1.04); box-shadow: var(--shadow); }
.info-media-grid .info-media-cell img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; transform: none; box-shadow: none; }
.info-media-cell.is-video { background: #0f172a; }
.info-media-video-tag {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 10.5px; font-weight: 600;
}
/* The link nam trong bong bong "out" (nen xanh, link mac dinh chu trang) van giu chu toi */
.msg.out .msg-link-card, .msg.in .msg-link-card { color: var(--text); text-decoration: none; }