/* ============================================
   MOBILE OVERRIDES — SnapLinked v11.34.0
   Carregado GLOBALMENTE em todas as páginas.
   Corrige responsividade para telas 375px-768px.
   ============================================ */

/* ---- C1: iOS zoom prevention ---- */
/* Inputs com font < 16px causam auto-zoom no iOS Safari */
@media (max-width: 768px) {
  .form-control,
  .form-select,
  textarea.form-control,
  .ai-prompt-input,
  .input-3d,
  .lm-input,
  .schedule-panel .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---- H5: Notification dropdown overflow ---- */
@media (max-width: 480px) {
  .notification-dropdown,
  .notification-menu {
    width: calc(100vw - 24px) !important;
    max-width: 380px;
    right: 12px !important;
    left: auto !important;
  }
}

/* ---- H6: Flash container / toast overflow ---- */
@media (max-width: 480px) {
  .flash-container {
    right: var(--space-3, 12px);
    left: var(--space-3, 12px);
    max-width: none;
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }
}

/* ---- H7: Table container scroll ---- */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- C2: Calendar week header sync with body on mobile ---- */
@media (max-width: 992px) {
  .week-header {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .week-header-cell {
    min-width: 120px;
    flex-shrink: 0;
  }
}

/* ---- H3: Calendar toolbar stack on mobile ---- */
@media (max-width: 576px) {
  .calendar-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-toolbar .calendar-nav,
  .calendar-toolbar .view-tabs {
    width: 100%;
    justify-content: center;
  }

  .calendar-toolbar .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* ---- C4: Snap AI chat sidebar ---- */
@media (max-width: 768px) {
  .snap-sidebar {
    display: none !important;
  }

  .snap-sidebar.mobile-open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 9999;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
  }

  .snap-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
  }

  .snap-sidebar-overlay.active {
    display: block;
  }

  .snap-mobile-toggle {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .snap-mobile-toggle {
    display: none !important;
  }

  .snap-sidebar-overlay {
    display: none !important;
  }
}

/* ---- C3: Content Studio sidebar ---- */
@media (max-width: 576px) {
  .cs-customize-sidebar {
    max-height: 35vh;
  }

  .cs-preview-area {
    min-height: 250px;
  }
}

/* ---- H9: Emoji picker overflow ---- */
@media (max-width: 480px) {
  .emoji-picker-container {
    width: calc(100vw - 32px) !important;
    max-width: 300px;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* ---- M1: Touch targets minimum 44px ---- */
@media (max-width: 768px) {
  .btn-icon.btn-sm,
  .remove-media-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .form-check-input {
    width: 22px;
    height: 22px;
  }

  .form-check-label {
    padding-left: 4px;
  }
}

/* ---- H8: Cards grid safeguard for narrow screens ---- */
@media (max-width: 480px) {
  .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Auth pages: better mobile spacing ---- */
@media (max-width: 480px) {
  .auth-wrapper-3d {
    padding: 1rem;
  }

  .auth-container-3d {
    border-radius: 16px;
    max-width: 100%;
  }

  .auth-branding-3d {
    padding: 1.5rem;
  }

  .brand-title-3d {
    font-size: 1.5rem;
  }

  .brand-subtitle-3d {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }

  .auth-form-3d {
    padding: 1.5rem;
  }

  .btn-submit-3d {
    min-height: 48px;
    font-size: 1rem;
  }
}

/* ---- Pricing page: mobile CTA prominence ---- */
@media (max-width: 480px) {
  .plan-cta-btn,
  .pricing-cta-button {
    min-height: 52px;
    font-size: 1.0625rem;
    border-radius: 12px;
  }
}

/* ---- General mobile: body overflow protection ---- */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* Prevent horizontal scroll from any element */
  .main-content,
  .content-area {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ---- Settings: fix sticky nav on mobile ---- */
@media (max-width: 768px) {
  .settings-nav {
    position: static !important;
    top: auto !important;
  }
}

/* ---- Snap Studio wizard: readable labels ---- */
@media (max-width: 576px) {
  .wizard-step .step-label {
    font-size: 0.75rem;
  }
}

/* ---- Calendar draft text: minimum readability ---- */
@media (max-width: 768px) {
  .draft-content {
    font-size: 0.8125rem;
  }

  .draft-meta {
    font-size: 0.75rem;
  }
}

/* ---- Quick actions & header: mobile improvements ---- */
@media (max-width: 480px) {
  .quick-actions .btn {
    min-height: 44px;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }

  .app-header {
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================
   MOBILE AUDIT FIXES — v11.34.0
   ============================================ */

/* ---- P1: Snap Studio Create — mobile layout fixes ---- */
@media (max-width: 480px) {
  .tmpl-grid-sm {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .panel-left {
    max-height: 160px !important;
  }

  .panel-center {
    min-height: 280px;
    padding: 0.75rem !important;
  }

  .preview-canvas {
    max-width: 100% !important;
  }

  .preview-canvas img {
    max-height: calc(100vh - 320px);
  }

  .preview-actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
  }

  .preview-actions .btn {
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    min-height: 40px;
  }
}

/* Remove slide button — touch friendly on mobile */
@media (max-width: 768px) {
  .slide-thumb .remove-slide {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
    top: -4px !important;
    right: -4px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .slide-add {
    min-width: 56px;
    min-height: 70px;
  }

  /* Snap Studio panel-right inputs: prevent iOS zoom */
  .panel-right input,
  .panel-right textarea,
  .panel-right select,
  .layer-input input,
  .layer-input textarea {
    font-size: 16px !important;
  }
}

/* ---- P2: Calendar — week view mobile improvements ---- */
@media (max-width: 768px) {
  .calendar-page {
    gap: 0.5rem;
  }

  .week-header {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .week-header::-webkit-scrollbar {
    display: none;
  }

  .week-header-cell {
    min-width: 110px;
    flex-shrink: 0;
  }

  .week-header-cell .day-number {
    font-size: 1.1rem;
  }

  .week-body {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .week-body::-webkit-scrollbar {
    display: none;
  }

  .week-day-col {
    min-width: 110px;
    flex-shrink: 0;
  }

  .calendar-title {
    min-width: auto;
    font-size: 1rem;
  }

  .btn-nav {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .view-tabs button {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }

  .drafts-panel .draft-actions .btn {
    min-height: 36px;
    min-width: 36px;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .calendar-toolbar {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .calendar-toolbar .calendar-actions {
    width: 100%;
    display: flex;
    gap: 0.375rem;
  }

  .calendar-toolbar .calendar-actions .btn {
    flex: 1;
    font-size: 0.75rem;
    min-height: 44px;
    padding: 0.375rem 0.5rem;
    white-space: nowrap;
  }

  .week-header-cell {
    min-width: 95px;
  }

  .week-day-col {
    min-width: 95px;
  }
}

/* ---- [REMOVED] P3: Snap AI Chat — removed in v12.34.0 ---- */

/* ---- P4: Dashboard profile card — 375px overflow fix ---- */
@media (max-width: 480px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem !important;
  }

  .profile-header .text-end {
    text-align: center !important;
  }

  .stat-card {
    padding: 0.75rem;
  }

  .stat-card h2 {
    font-size: 1.25rem;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
  }

  .card-header .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .card-header .btn-sm {
    font-size: 0.75rem;
  }
}

/* ---- P5: New Post — extra mobile breakpoints ---- */
@media (max-width: 768px) {
  .composer-actions {
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .composer-actions .btn {
    min-height: 44px;
  }

  .media-toolbar .btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- P7: Pricing — extra small refinements ---- */
@media (max-width: 480px) {
  .value-comparison-grid {
    gap: 0.75rem;
  }

  .value-total {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .proof-stats {
    gap: 1.5rem;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .plan-card {
    padding: 1.25rem;
  }
}

/* ---- P9: Global touch targets minimum — all small buttons ---- */
@media (max-width: 768px) {
  .btn-sm,
  .btn-outline-secondary.btn-sm,
  button.btn-sm {
    min-height: 38px;
    min-width: 38px;
  }

  .credits-add {
    width: 44px;
    height: 44px;
  }

  /* All form control selects */
  select.form-select,
  .form-select-sm {
    min-height: 44px;
    font-size: 16px !important;
  }
}

/* ---- Safe areas for iPhone notch ---- */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .panel-right .panel-footer,
    .preview-actions {
      padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
  }
}

/* ---- Scroll snap hint for horizontal scrollable areas ---- */
@media (max-width: 768px) {
  .week-body,
  .week-header,
  .slide-nav {
    scroll-snap-type: x mandatory;
  }

  .week-day-col,
  .week-header-cell,
  .slide-thumb {
    scroll-snap-align: start;
  }
}

/* ============================================
   MOBILE PERFORMANCE — ISSUE-161
   Disable heavy infinite decorative animations on
   mobile to reduce GPU/CPU usage and improve
   Performance score. Hover effects and scroll
   reveal animations are preserved (user-initiated).
   ============================================ */
@media (max-width: 768px) {
  /* Kill heavy infinite background animations (orbs, blobs, particles, glows) */
  .orb-3d,
  .particle,
  .bg-particle,
  .bg-morph-blob,
  .glow-line,
  .floating-shape,
  .aurora-blob,
  .aurora-effect::before,
  .aurora-effect::after {
    animation: none !important;
  }

  /* Pause — not remove — continuous element animations for smoother feel */
  /* ISSUE-164: NÃO pausar hero-title-3d nem highlight-3d aqui —
     a animação fadeInUp usa fill-mode:both e pausar congela em opacity:0.
     Em vez disso, forçamos o estado final abaixo. */
  .float-3d,
  .card-3d-hover,
  .testimonial-card-3d,
  .pricing-card-3d,
  .social-proof-3d .avatar-stack img,
  .live-badge-3d .live-dot::after {
    animation-play-state: paused !important;
  }

  /* ISSUE-164: Force final state for entry animations on mobile.
     fadeInUp starts at opacity:0 — we skip the animation and show directly. */
  .hero-title-3d,
  .hero-title-3d .highlight-3d {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable 3D perspective transforms on mobile (expensive compositing) */
  .hero-card-3d,
  .mockup-3d,
  .card-3d-hover {
    transform: none !important;
    perspective: none !important;
  }

  /* Disable backdrop-filter on mobile (very expensive on lower-end GPUs) */
  .glass-card,
  .glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Force GPU layer promotion for elements that do animate on mobile */
  .reveal-3d,
  .reveal-3d-left,
  .reveal-3d-right {
    will-change: transform, opacity;
  }
}


/* ============================================
   MOBILE PHASE C5 — v12.57+ FINAL POLISH
   ============================================ */

/* ---- M2: All Bootstrap modals scrollable on mobile ---- */
/* Avoid content cutoff in long modals (forms, lists) on small screens */
@media (max-width: 768px) {
  .modal-dialog:not(.modal-dialog-scrollable):not(.modal-fullscreen) {
    max-height: calc(100vh - 1rem);
    margin: 0.5rem auto;
  }

  .modal-dialog:not(.modal-dialog-scrollable):not(.modal-fullscreen) .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .modal-dialog:not(.modal-dialog-scrollable):not(.modal-fullscreen) .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- M3: Images & embeds never overflow viewport ---- */
@media (max-width: 768px) {
  img:not([width]):not(.no-mobile-shrink),
  picture > img,
  video,
  iframe:not(.no-mobile-shrink) {
    max-width: 100%;
    height: auto;
  }
}

/* ---- M4: Long unbreakable strings (URLs, code) wrap on mobile ---- */
@media (max-width: 480px) {
  code,
  pre,
  .text-break-mobile,
  td,
  th {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  pre {
    white-space: pre-wrap;
  }
}

/* ---- M5: Dropdown menus never overflow viewport ---- */
@media (max-width: 480px) {
  .dropdown-menu {
    max-width: calc(100vw - 24px);
    overflow-x: hidden;
  }
}

/* ---- M6: Bootstrap container padding too tight on small screens ---- */
@media (max-width: 360px) {
  .container,
  .container-fluid {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
}

/* ---- M7: Card titles & headers don't get cut off ---- */
@media (max-width: 480px) {
  .card-title,
  .card-header h1,
  .card-header h2,
  .card-header h3,
  .card-header h4,
  .card-header h5 {
    word-break: break-word;
  }
}