/* Mobile-first media controls and compact sharing. Loaded after all legacy style layers. */
.attach-control,
.upload-zone {
  position: relative;
  isolation: isolate;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.attach-control input[type="file"],
.upload-zone input[type="file"] {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  /* Keep the native file control intact: Android WebView can ignore a file
     picker when appearance is overridden. */
}

.short-video-upload-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.short-video-upload-options .attach-control {
  flex: 1 1 150px;
  justify-content: center;
  min-width: 0;
}

.short-video-cover-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.short-video-selection-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.short-video-composer-footer {
  min-width: 0;
}

@media (max-width: 600px) {
  .composer-footer,
  .short-video-composer-footer {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
  }

  .composer-footer .primary-btn,
  .short-video-composer-footer .primary-btn {
    width: 100%;
    min-height: 46px;
  }

  .composer-footer .attachments {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .composer-footer .media-quality-note {
    width: 100%;
    order: 3;
  }

  .short-video-composer-footer .short-video-selection-status {
    flex: 1 1 100%;
  }

  .short-video-upload-options .attach-control {
    min-height: 46px;
    padding: 0 8px;
    font-size: 12px;
  }

  .post-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .post-actions .action-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    justify-content: center;
    padding: 0 5px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .post-actions .action-btn:last-child {
    grid-column: span 2;
  }

  .share-backdrop {
    align-items: flex-end !important;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .share-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
  }

  .share-modal .editor-head {
    gap: 8px;
  }

  .share-modal .editor-head > div {
    min-width: 0;
  }

  .share-modal .editor-head h2 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .share-external,
  .share-chat {
    min-height: 52px;
  }
}

@media (max-width: 380px) {
  .post-actions .action-btn {
    padding: 0 3px;
    font-size: 11px;
  }

  .share-modal {
    padding: 14px;
  }
}