/* ============================================================
   bot-schedule-quick-20260713.css
   Améliore le "Studio de publication" (bot-composer-pro) :
   - raccourcis de planification (chips) + ligne heure résolue
   - champ heure lisible (16px, pas de zoom iOS, 44px)
   - aperçu Telegram repliable sur mobile
   - largeur mobile récupérée (double padding admin)
   - tap targets 44px + polish desktop
   Purement additif : n'écrase pas bot-composer-pro, le complète.
   ============================================================ */

/* --- 1. Largeur mobile : tuer le double padding admin (~96px) --- */
/* Conteneurs tagués par le JS (bqs-host*) -> pas de :has fragile. */
@media (max-width: 640px) {
  .bqs-host-outer { padding-left: 10px !important; padding-right: 10px !important; }
  .bqs-host { padding-left: 8px !important; padding-right: 8px !important; }
}

/* --- 2. Champ heure lisible partout (anti-zoom iOS + 44px) ------ */
.bot-pro-field input.bot-pro-at,
.bot-edit-modal input.bot-edit-at {
  font-size: 16px !important;
  height: 44px;
  padding: 11px 12px;
}
.bot-pro-field { gap: 7px; }
.bot-pro-field > .bot-pro-flabel,
.bqs-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  font-weight: 800; color: #7f8ba0;
}

/* --- 2b. Aide CTA : expliquer les boutons cliquables ----------- */
.bqs-cta-help {
  font-size: 12px; line-height: 1.5; color: #9aa7ba;
  background: #0e1622; border: 1px solid #22303f; border-radius: 8px;
  padding: 9px 11px; margin-bottom: 11px;
}
.bqs-cta-help b { color: #cfdae8; font-weight: 700; }
.bot-cta-quick[data-bqs-hint]::before {
  content: attr(data-bqs-hint);
  flex-basis: 100%; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: #7f8ba0;
  margin-bottom: 2px;
}
/* champ lien à remplir : petit halo pour guider */
.bot-cta-url.bqs-need { border-color: #2aabee !important; box-shadow: 0 0 0 2px rgba(42,171,238,.18) !important; }

/* --- 3. Bloc raccourcis de planification ----------------------- */
.bqs {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.bqs-title { margin-bottom: 9px; }
.bqs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bqs-chip {
  border: 1px solid #344054; background: #1a2230; color: #dce4ef;
  border-radius: 999px; padding: 9px 13px; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; min-height: 40px;
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .12s, background .12s, color .12s;
}
.bqs-chip:hover { border-color: #2aabee; color: #fff; }
.bqs-chip.is-active {
  border-color: #2aabee; background: #17384d; color: #fff;
  box-shadow: 0 0 0 2px rgba(42,171,238,.18);
}
.bqs-chip small { opacity: .62; font-weight: 600; font-size: 11px; }
.bqs-resolved {
  margin-top: 10px; font-size: 13px; color: #cdd7e5;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.bqs-resolved b { color: #fff; font-weight: 800; }
.bqs-resolved .bqs-rel {
  font-size: 11px; color: #8fcffc; background: #223044;
  border-radius: 999px; padding: 3px 8px; font-weight: 700;
}
.bqs-resolved.is-past { color: #ff9d9d; }
.bqs-resolved.is-past .bqs-rel { color: #ffb4b4; background: #3a2029; }

/* --- 4. Rangée d'action : plus lisible ------------------------- */
.bot-pro-actions { align-items: end; }
.bot-pro-btn.bot-schedule { min-width: 130px; }

/* --- 5. Aperçu Telegram repliable (mobile) --------------------- */
.bqs-preview-toggle {
  display: none;
  width: 100%; margin-top: 12px;
  border: 1px solid #38465a; background: #202a39; color: #dbe4ef;
  border-radius: 8px; padding: 0 14px; height: 46px;
  font: inherit; font-weight: 800; cursor: pointer;
  align-items: center; justify-content: center; gap: 8px;
}
.bqs-preview-toggle:hover { border-color: #2aabee; }
.bqs-preview-toggle .bqs-caret { transition: transform .18s; }
.bot-pro.bqs-preview-open .bqs-preview-toggle .bqs-caret { transform: rotate(180deg); }

/* --- 6. Tap targets 44px sur mobile + boutons pleine largeur ---- */
@media (max-width: 640px) {
  .bot-quick { min-height: 40px; font-size: 13px; }
  .bot-cta-add { min-height: 42px; font-size: 13px; }
  .bot-pro-btn { height: 46px; font-size: 14px; }
  /* Planifier = action principale pleine largeur */
  .bot-pro-actions .bot-pro-btn.bot-schedule { width: 100%; }
  /* Publier maintenant : pleine largeur, aligné */
  .bot-pro-left > div:has(> .bot-publish) { justify-content: stretch !important; }
  .bot-publish { width: 100%; }
  .bqs-chip { flex: 1 1 auto; justify-content: center; min-height: 44px; }

  /* Aperçu : caché par défaut, révélé par le bouton */
  .bqs-preview-toggle { display: flex; }
  .bot-pro-preview { display: none; }
  .bot-pro.bqs-preview-open .bot-pro-preview { display: block; }
}

/* --- 7. Cartes file d'attente : un poil plus d'air (mobile) ---- */
@media (max-width: 640px) {
  .bot-sched-card { padding: 13px; gap: 6px; }
  .bot-card-btn { min-height: 38px; font-size: 12px; }
}