/* Mobile optimization for New Post page */

/* Global Edit mode elements (Close button) - only for iframe/extension mode */
html.iframe-mode #publishedEditCloseBtnStatic {
  display: flex;
  position: absolute;
  top: 0.75rem !important;
  right: 0.75rem !important;
  transform: none !important;
  z-index: 2100 !important;
  background: var(--secondary) !important;
  border: 1px solid var(--border) !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.625rem !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Always hide in main app unless in iframe */
#publishedEditCloseBtnStatic {
  display: none !important;
}

/* Adjust header padding only if button is actually shown (iframe mode) */
html.iframe-mode #sectionNewPost .flex.items-center.justify-between.pb-3 {
  padding-right: 2.5rem;
}

@media (max-width: 1023px) {
  /* Hide horizontal scrollbar for tabs */
  .app-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .app-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  /* Hide tagline in mobile header */
  .app-header p {
    display: none !important;
  }

  /* Center header items vertically */
  .app-header {
    align-items: center !important;
  }

  .app-header .flex.items-center.gap-3 {
    align-items: center !important;
  }

  .app-header .flex.flex-col.justify-center {
    justify-content: center !important;
  }

  #sectionNewPost {
    padding: 1rem !important;
  }

  #sectionNewPost #publishForm {
    padding: 0 !important;
    gap: 1rem;
  }

  #sectionNewPost .lg\:col-span-2 > .glass-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Modal mode (Edit post) adjustments */
  html.iframe-mode #sectionNewPost {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 2000 !important;
  }

  html.iframe-mode #sectionNewPostInner {
    border-radius: 0 !important;
    border: none !important;
    height: 100% !important;
    box-shadow: none !important;
  }

  html.iframe-mode #publishForm {
    padding: 1rem !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    gap: 1.25rem !important;
  }

  /* Header/Close button moved to global section */

  #sectionNewPost #newPostText,
  #sectionNewPost #dropZone {
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  #sectionNewPost #newPostText {
    padding: 0.875rem !important;
    padding-bottom: 2.75rem !important;
    min-height: 250px !important;
  }

  #sectionNewPost #newPostToolbar {
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  #sectionNewPost #newPostToolbar .w-10.h-10 {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }

  #sectionNewPost .platform-btn {
    height: 1.875rem;
    padding-inline: 0.625rem;
    font-size: 0.8rem;
  }

  #sectionNewPost #postTypeMessageBtn,
  #sectionNewPost #postTypePollBtn {
    height: 2rem;
    padding-inline: 0.875rem;
    font-size: 0.85rem;
  }

  #sectionNewPost #tagsBlock {
    padding-top: 0.75rem;
    gap: 0.5rem;
  }

  #sectionNewPost #dropZone {
    min-height: 80px;
    padding: 0.75rem;
  }

  #sectionNewPost #inlineButtonsList {
    gap: 0.5rem;
  }

  #sectionNewPost .flex.flex-col.gap-4 > .glass-panel {
    padding: 0.875rem !important;
  }

  #sectionNewPost #scheduledPopoverCalendar {
    padding: 0.5rem;
  }

  #sectionNewPost #messageEditorContainer {
    gap: 0.75rem;
  }

  #sectionNewPost label.text-sm {
    font-size: 0.8rem;
  }

  /* Move attachments block to the top on mobile */
  #sectionNewPost .lg\:col-span-2 > .glass-panel {
    display: flex;
    flex-direction: column;
  }

  /* Attachments section (pt-4 border-t) - move to top */
  #sectionNewPost .pt-4.border-t.border-border.space-y-4:has(#dropZone) {
    order: -10;
    padding-top: 0 !important;
    border-top: none !important;
    margin-bottom: 1rem;
  }

  /* Platform selection stays at very top */
  #sectionNewPost .flex.items-center.justify-between.pb-3 {
    order: -20;
  }

  /* Post type buttons */
  #sectionNewPost .flex.items-center.gap-2.mb-1 {
    order: -19;
  }

  /* Message/Poll editor container */
  #sectionNewPost #messageEditorContainer,
  #sectionNewPost #pollEditorContainer {
    order: -5;
  }

  /* Tags block */
  #sectionNewPost #tagsBlock {
    order: -3;
  }

  /* Inline buttons */
  #sectionNewPost .pt-4.border-t.border-border.space-y-3:has(#inlineButtonsList) {
    order: -2;
  }
}

@media (max-width: 639px) {
  #sectionNewPost {
    padding: 1rem !important;
  }

  #sectionNewPost #publishForm {
    padding: 0 !important;
  }

  #sectionNewPost #newPostText {
    padding: 0.75rem !important;
    padding-bottom: 2.5rem !important;
    border-radius: 0.75rem;
  }

  #sectionNewPost #newPostToolbar button span.hidden.sm\:inline {
    display: none !important;
  }

  #sectionNewPost #newPostToolbar .btn-secondary {
    padding-inline: 0.5rem;
  }
}