/* DropX Chat Link Preview System — responsive, safe-by-default cards */
.dx-chat-link-preview {
  display: block;
  width: min(100%, 460px);
  max-width: 100%;
  min-width: 0;
  margin: 12px 0 4px;
  overflow: hidden;
  color: var(--dx-chat-style-text, #f4f4f4);
  background: linear-gradient(145deg, rgba(22, 23, 27, .96), rgba(8, 9, 12, .94));
  border: 1px solid color-mix(in srgb, var(--dx-chat-style-toolbar, #dba900) 55%, rgba(255,255,255,.12));
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
  text-align: left;
  isolation: isolate;
}
.dx-chat-preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(255,174,0,.2), #07090d 72%);
}
.dx-chat-preview-media-tiktok { aspect-ratio: 9 / 16; width: min(100%, 280px); max-height: 480px; margin-inline: auto; }
.dx-chat-preview-thumbnail, .dx-chat-preview-image {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.dx-chat-preview-image-link { display:block; max-height:240px; overflow:hidden; }
.dx-chat-preview-image-link .dx-chat-preview-image { height:auto; max-height:240px; object-fit:cover; }
.dx-chat-preview-play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 58px; height: 58px; padding: 0;
  color: #111; background: var(--dx-chat-style-toolbar, #e0ae22);
  border: 2px solid rgba(255,255,255,.82); border-radius: 50%;
  box-shadow: 0 5px 24px rgba(0,0,0,.5); font-size: 22px; cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.dx-chat-preview-play:hover { transform: translate(-50%, -50%) scale(1.07); filter: brightness(1.08); }
.dx-chat-preview-media.is-playing { aspect-ratio: 16 / 9; }
.dx-chat-preview-media-tiktok.is-playing { aspect-ratio: 9 / 16; }
.dx-chat-preview-player { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.dx-chat-preview-media.has-no-thumbnail::after { content:'DROPX VIDEO PREVIEW'; position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.6); font:700 11px/1.2 system-ui,sans-serif; letter-spacing:.14em; }
.dx-chat-preview-body { min-width:0; padding:10px 12px 12px; }
.dx-chat-preview-site { display:flex; align-items:center; gap:7px; min-width:0; margin-bottom:7px; color:rgba(235,237,242,.66); font:600 10px/1.3 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.dx-chat-preview-favicon { flex:0 0 20px; width:20px; height:20px; object-fit:contain; border-radius:5px; background:rgba(255,255,255,.08); }
.dx-chat-preview-domain { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-chat-preview-open { flex:0 0 auto; margin-left:auto; color:var(--dx-chat-style-toolbar, #f0bd2f); font-size:11px; font-weight:700; text-decoration:none; letter-spacing:0; text-transform:none; }
.dx-chat-preview-open:hover { text-decoration:underline; }
.dx-chat-preview-title { color:var(--dx-chat-style-text, #f7f7f7); font-size:14px; font-weight:750; line-height:1.35; overflow-wrap:anywhere; }
.dx-chat-preview-description { margin-top:5px; color:rgba(235,237,242,.72); font-size:12px; line-height:1.5; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.dx-chat-preview-url { margin-top:8px; color:rgba(235,237,242,.42); font:10px/1.35 system-ui,sans-serif; overflow-wrap:anywhere; }
.dx-chat-preview-google { border-color:rgba(66,133,244,.55); }
.dx-chat-preview-google .dx-chat-preview-domain { color:#8ab4f8; }
.dx-chat-preview-youtube { border-color:rgba(255,65,65,.48); }
.dx-chat-preview-tiktok { border-color:rgba(37,244,238,.34); }
.dx-chat-inline-link { color:var(--dx-chat-style-toolbar, #f4c542); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.dx-chat-inline-link:hover { filter:brightness(1.15); }
@media (max-width: 480px) {
  .dx-chat-link-preview { width:100%; border-radius:11px; margin-top:9px; }
  .dx-chat-preview-body { padding:9px 10px 10px; }
  .dx-chat-preview-title { font-size:13px; }
  .dx-chat-preview-description { font-size:11px; }
  .dx-chat-preview-play { width:48px; height:48px; font-size:19px; }
  .dx-chat-preview-media-tiktok { width:min(100%, 235px); max-height:400px; }
}


/* Composer previews appear above the toolbar while a URL is being typed or pasted. */
.dx-chat-composer-previews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px 4px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .16);
  border-top: 1px solid rgba(220, 170, 20, .14);
}
.dx-chat-composer-previews:empty { display: none; }
.dx-chat-composer-previews .dx-chat-link-preview { margin: 0; width: min(100%, 460px); }
.dx-chat-composer-preview-card .dx-chat-preview-media { max-height: 220px; }
.dx-chat-composer-preview-card .dx-chat-preview-media-tiktok { max-height: 300px; }
@media (max-width: 480px) {
  .dx-chat-composer-previews { padding: 6px 7px 3px; }
  .dx-chat-composer-preview-card .dx-chat-preview-media { max-height: 170px; }
}


/* Ensure live previews occupy a full row above the composer in every popup type. */
.chat-popup-form > .dx-chat-composer-previews,
.dx-event-popup-form > .dx-chat-composer-previews {
  display: block;
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 0;
  max-height: 180px;
  overflow-y: auto;
  box-sizing: border-box;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-link-preview,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-link-preview {
  width: min(100%, 280px);
  max-width: 100%;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media {
  max-height: 112px;
  aspect-ratio: 16 / 9;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok {
  max-height: 140px;
  aspect-ratio: 9 / 16;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-body,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-body {
  padding: 6px 8px 7px;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-description,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-description {
  display: none;
}
.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-title,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
}


/* Composer preview placement fix:
   anchor the live preview above the bottom composer without expanding the popup
   layout, so the header and message viewport remain visible. */
.chat-popup-form,
.dx-event-popup-form {
  position: relative;
}

.chat-popup-form > .dx-chat-composer-previews,
.dx-event-popup-form > .dx-chat-composer-previews {
  position: absolute;
  inset: auto 0 calc(100% + 6px) 0;
  z-index: 30;
  width: 100%;
  max-width: 100%;
  max-height: 174px;
  margin: 0;
  padding: 6px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(8, 8, 9, .12), rgba(8, 8, 9, .88));
  border: 0;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  pointer-events: auto;
}

.chat-popup-form > .dx-chat-composer-previews .dx-chat-link-preview,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-link-preview {
  width: min(100%, 280px);
  max-width: 100%;
  margin: 0;
}

.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media {
  max-height: 100px;
  aspect-ratio: 16 / 9;
}

.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok {
  max-height: 120px;
  aspect-ratio: 9 / 16;
}

.chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-body,
.dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-body {
  padding: 5px 7px 6px;
}

@media (max-width: 480px) {
  .chat-popup-form > .dx-chat-composer-previews,
  .dx-event-popup-form > .dx-chat-composer-previews {
    max-height: 154px;
    padding: 5px 6px;
  }

  .chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media,
  .dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media {
    max-height: 86px;
  }

  .chat-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok,
  .dx-event-popup-form > .dx-chat-composer-previews .dx-chat-preview-media-tiktok {
    max-height: 110px;
  }
}