/* ============================================================================
   AbiiApp Post Composer — visual redesign of WoWonder's existing #tagPostBox
   modal (story/publisher-box.phtml). This file only restyles the chrome;
   every feature (polls, colors, GIFs, stickers, AI, feelings, map, music,
   files, monetization) keeps its original markup/classes/JS untouched.
   ========================================================================== */

@media (max-width: 520px) {
  /* The stock mobile rule forces #post-textarea to height:100%, which used to
     leave a large dead gap below a one-line caption since the textarea itself
     only grows to fit its content. Let the composer size to its content instead
     and let the media/attachment area take any real extra space. */
  .tag_pub_box.modal-content > form.publisher-box #post-textarea {
    height: auto !important;
    flex: 0 0 auto;
  }
  .tag_pub_box.modal-content > form.publisher-box {
    justify-content: flex-start;
  }
}

.tag_pub_box.modal-content {
  background: var(--abii-surface, #101114);
  color: var(--abii-ink, #E7E9EA);
}

/* ---- Header ---- */
.tag_pub_box .modal-header {
  border-bottom: 1px solid var(--abii-line, rgba(255,255,255,.12));
  min-height: 56px;
  padding: 10px 14px;
}
.tag_pub_box .modal-header .btn-default {
  color: var(--abii-ink, #E7E9EA);
}
.tag_pub_box .modal-header .btn-success {
  background: transparent;
  color: var(--abii-brand, #C64D53);
  border: 1px solid var(--abii-brand, #C64D53);
  border-radius: var(--abii-r-full, 999px);
  font-weight: 600;
}
.tag_pub_box .charsLeft-post {
  color: var(--abii-muted, #71767B);
  opacity: 1;
}
.tag_pub_box .modal-header .btn-main {
  background: var(--abii-brand, #C64D53);
  border-color: var(--abii-brand, #C64D53);
  border-radius: var(--abii-r-full, 999px);
  font-weight: 700;
  min-width: 84px;
}

/* ---- Caption ---- */
#post-textarea {
  padding: 14px;
}
.wow_pub_txtara_combo {
  border-radius: var(--abii-r-md, 12px);
}
.publisher-box textarea.postText {
  color: var(--abii-ink, #E7E9EA);
  font-size: var(--abii-fs-md, 16px);
  background: transparent;
}
.publisher-box textarea.postText::placeholder {
  color: var(--abii-muted, #71767B);
}

/* ---- Footer: hashtag/mention/emoji row + privacy pill ---- */
.publisher-box .publisher-box-footer .pub-footer-bottom {
  border-top: 1px solid var(--abii-line, rgba(255,255,255,.12));
  padding: 10px 14px;
}
.wow_pub_privacy_dropdown {
  background: var(--abii-surface-2, #1C1F24);
  border-radius: var(--abii-r-full, 999px);
  padding: 6px 12px;
  color: var(--abii-ink, #E7E9EA);
}
.wow_pub_privacy_dropdown p { margin: 0; color: inherit; }
.tag_pub_btn_hasat,
.publisher-box .add-emoticons .dropdown-toggle {
  color: var(--abii-ink-2, #B0B6BC);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tag_pub_btn_hasat:hover,
.publisher-box .add-emoticons .dropdown-toggle:hover {
  background: var(--abii-surface-2, #1C1F24);
}

/* ---- Attachment/action chips: icon-only on mobile (labels hidden by the
   stock @media(max-width:520px) rule), restyled as a clean scroll strip
   instead of a wrapped grid with dead padding. ---- */
.publisher-box .publisher-box-footer .pub-footer-upper {
  border-top: 1px solid var(--abii-line, rgba(255,255,255,.12));
  padding: 10px 10px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch;
}
.tag_pub_box_btns {
  background: var(--abii-surface-2, #1C1F24) !important;
  color: var(--abii-ink, #E7E9EA) !important;
  flex: 0 0 auto;
}
.tag_pub_box_btns svg { color: var(--abii-brand, #C64D53); }
@media (max-width: 520px) {
  .tag_pub_box_btns {
    width: var(--abii-touch, 44px) !important;
    min-width: var(--abii-touch, 44px) !important;
    height: var(--abii-touch, 44px) !important;
    line-height: var(--abii-touch, 44px) !important;
    border-radius: 50% !important;
    margin: 0 !important;
  }
}

/* ---- Media previews (kept full width, just themed) ---- */
.tag_pub_imgs { color: var(--abii-ink, #E7E9EA); }