/**
 * Shared media surfaces — external embeds + native video players.
 * Used by thread detail and chat room.
 */

.acc-video-embed {
  width: 100%;
  max-width: 100%;
  margin: var(--acc-space-4, 1rem) 0;
  border-radius: var(--acc-radius-card, 16px);
  overflow: hidden;
  background: #0f0f12;
  box-shadow: var(--acc-shadow-soft, 0 1px 2px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--acc-color-border, #d1d5db);
}

.acc-video-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.acc-video-embed__frame iframe,
.acc-video-embed__frame video,
.acc-native-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.acc-native-video-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: var(--acc-space-3, 0.75rem) 0;
  border-radius: var(--acc-radius-card, 16px);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--acc-color-border, #d1d5db);
  aspect-ratio: 16 / 9;
}

.acc-native-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.acc-thread-videos {
  display: flex;
  flex-direction: column;
  gap: var(--acc-space-4, 1rem);
  margin: var(--acc-space-5, 1.25rem) 0;
  min-width: 0;
}

.acc-video-url-field {
  margin-top: var(--acc-space-4, 1rem);
}

.acc-video-url-field .acc-field-hint {
  margin: 0 0 8px;
  font-size: var(--acc-font-size-sm, 0.875rem);
  color: var(--acc-color-text-muted, #6b7280);
}

.acc-video-url-field__preview {
  margin-top: 12px;
}

.acc-video-url-field__preview .acc-video-embed {
  margin: 0;
}

.acc-video-url-field__preview-card {
  display: flex;
  align-items: center;
  gap: var(--acc-space-3, 0.75rem);
  padding: var(--acc-space-2, 0.5rem);
  border: 1px solid var(--acc-color-border, #d1d5db);
  border-radius: var(--acc-radius-md, 12px);
  background: var(--acc-color-bg-elevated, #fff);
  min-width: 0;
}

.acc-video-url-field__preview-card--text {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--acc-space-3, 0.75rem);
}

.acc-video-url-field__thumb {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--acc-color-bg-soft, #f3f4f6);
}

.acc-video-url-field__preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acc-video-url-field__provider {
  font-size: var(--acc-font-size-sm, 0.875rem);
  font-weight: var(--acc-font-weight-semibold, 600);
  color: var(--acc-color-text, #111827);
}

.acc-video-url-field__preview-hint {
  font-size: var(--acc-font-size-xs, 0.75rem);
  color: var(--acc-color-text-muted, #6b7280);
}

/* Chat media bubbles — flush inside speech body (scoped to chat only) */
.acc-chat-bubble__media {
  margin: 0;
  padding: 0;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  height: auto;
  background: transparent;
  border-radius: var(--acc-radius-md, 12px);
  overflow: hidden;
}

.acc-chat-bubble__media .acc-video-embed,
.acc-chat-bubble__media .acc-native-video-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
}

.acc-chat-bubble__media .acc-native-video-wrap {
  /* Keep 16:9 box so absolute-positioned <video> has a stable frame */
  min-height: 120px;
  aspect-ratio: 16 / 9;
  max-height: var(--acc-chat-media-max-h, min(50vh, 360px));
  background: var(--acc-chat-media-letterbox, #0f0f12);
}

.acc-chat-bubble__media .acc-native-video-wrap video,
.acc-chat-bubble__media .acc-native-video {
  object-fit: contain;
  background: var(--acc-chat-media-letterbox, #0f0f12);
}

.acc-chat-bubble__media .acc-video-embed {
  /* Embeds stay 16:9; no outer chrome */
  border-radius: 0;
}

.acc-chat-bubble__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: initial;
  margin: 0;
  padding: 0;
  border-radius: var(--acc-radius-md, 12px);
  cursor: zoom-in;
  background: transparent;
}

/* WhatsApp-style media draft above input */
.acc-chat-composer__draft {
  display: flex;
  align-items: flex-start;
  gap: var(--acc-space-2, 0.5rem);
  padding: var(--acc-space-2, 0.5rem);
  margin: 0 0 2px;
  border: 1px solid var(--acc-color-border, #d1d5db);
  border-radius: var(--acc-radius-md, 12px);
  background: var(--acc-color-bg-soft, #f3f4f6);
  min-width: 0;
}

.acc-chat-composer__draft[hidden] {
  display: none !important;
}

.acc-chat-composer__draft-preview {
  flex-shrink: 0;
  max-width: 110px;
  max-height: 80px;
  width: auto;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}

.acc-chat-composer__draft--video .acc-chat-composer__draft-preview {
  width: min(100%, 220px);
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 140px;
}

.acc-chat-composer__draft--video {
  flex-wrap: wrap;
}

.acc-chat-composer__draft-img {
  display: block;
  width: auto;
  max-width: 110px;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

.acc-chat-composer__draft-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acc-chat-composer__draft--video .acc-chat-composer__draft-video {
  object-fit: contain;
  background: #000;
}

.acc-chat-composer__video-link[hidden],
.acc-chat-composer__draft-trim[hidden] {
  display: none !important;
}

.acc-chat-composer__draft-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acc-chat-composer__draft-label {
  font-size: var(--acc-font-size-xs, 0.75rem);
  font-weight: var(--acc-font-weight-semibold, 600);
  color: var(--acc-color-text, #111827);
}

.acc-chat-composer__draft-trim {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acc-chat-composer__draft-trim-row {
  display: grid;
  grid-template-columns: 48px 1fr 40px;
  align-items: center;
  gap: 6px;
  font-size: var(--acc-font-size-xs, 0.75rem);
  color: var(--acc-color-text-muted, #6b7280);
}

.acc-chat-composer__draft-trim-row input[type='range'] {
  width: 100%;
  min-width: 0;
}

.acc-chat-composer__draft-trim-hint {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--acc-color-text-muted, #6b7280);
}

.acc-chat-composer__draft-remove {
  flex-shrink: 0;
  align-self: flex-start;
}

.acc-chat-composer__tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 6px;
}

.acc-chat-composer__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.acc-chat-composer__row .acc-chat-composer__input {
  flex: 1 1 auto;
  min-width: 0;
}

.acc-chat-composer__video-link {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 4px 8px;
}

.acc-chat-composer__video-link-input {
  flex: 1 1 180px;
  min-width: 0;
}

@media (max-width: 768px) {
  .acc-chat-bubble__media {
    max-width: 100%;
  }

  /* Thread embeds only — do not override chat flush radius */
  .acc-root:not(.acc-page-chat) .acc-video-embed,
  .acc-root:not(.acc-page-chat) .acc-native-video-wrap {
    border-radius: 12px;
  }
}