/* ═══════════════════════════════════════════════════════════════
   Studio Cota & Acao — Mobile Responsive Layer
   Arquivo separado para nao impactar desktop (app.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger Button (hidden on desktop) ── */
.hamburger-btn{display:none;}

/* ── Sidebar Overlay (hidden on desktop) ── */
.sidebar-overlay{display:none;}

/* ── Kanban mobile toggle (hidden on desktop) ── */
.kb-mob-toggle{display:none;}

/* ── List cards (hidden on desktop, shown only on mobile) ── */
.lst-cards{display:none;}

/* ── Calendar mobile list (hidden on desktop) ── */
.cal-mobile-list{display:none;}

/* ═══════════════════════════════════════════════════════════════
   TIER 3: Tablet (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  /* Analytics grid: 3 cols instead of 4 */
  .agrid{grid-template-columns:repeat(3,1fr);}
  /* Kanban columns slightly narrower */
  .col{min-width:240px;max-width:240px;}
}

/* ═══════════════════════════════════════════════════════════════
   TIER 2: Small tablet / landscape phone (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Analytics grid: 2 cols */
  .agrid{grid-template-columns:repeat(2,1fr);padding:16px;}
  /* Email KPIs: 2 cols */
  .em-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .em-report-kpis{grid-template-columns:repeat(2,1fr);}
  /* Campaign grid */
  .em-camp-grid{grid-template-columns:1fr;}
  /* Automation grid */
  .em-aut-grid{grid-template-columns:1fr;}
  /* Prompts: stack */
  .prompts-wrap{flex-direction:column;height:auto;}
  .prompts-list{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:200px;overflow-y:auto;}
  /* Contact layout */
  .em-contact-layout{grid-template-columns:1fr;}
  /* Wizard cols */
  .em-wiz-cols{grid-template-columns:1fr;}
  /* Thumbgrid: 4 cols */
  .thumbgrid{grid-template-columns:repeat(4,1fr);}
  /* Template grid */
  .tmplgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));padding:16px;}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE EDITOR — hidden on desktop, shown via @media
   ═══════════════════════════════════════════════════════════════ */
.ed-mobile-topbar{display:none;}
.ed-mobile-dots{display:none;}
.ed-mobile-tab-bar{display:none;}
.ed-ctx-toolbar{display:none;}
.ed-mobile-fabs{display:none;}
.ed-mobile-fab-add{display:none;}

/* ═══════════════════════════════════════════════════════════════
   REUSABLE PATTERNS (all breakpoints, toggled via classes)
   ═══════════════════════════════════════════════════════════════ */

/* ── Mobile Icon Button (44×44 touch target) ── */
.mobile-icon-btn{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--muted2);font-size:16px;transition:all .15s;flex-shrink:0;}
.mobile-icon-btn:hover{background:var(--surface2);color:var(--text);}

/* ── Touch Target 44 (minimum touch target wrapper) ── */
.touch-target-44{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}

/* ── Scroll Fade Indicator (horizontal scroll hint) ── */
/* Wrapper approach (JS-managed) */
.scroll-fade-wrap{position:relative;overflow:hidden;}
.scroll-fade-wrap>.scroll-fade-inner{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.scroll-fade-wrap>.scroll-fade-inner::-webkit-scrollbar{display:none;}
.scroll-fade-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface));opacity:1;transition:opacity .2s;}
.scroll-fade-wrap.scrolled-end::after{opacity:0;}
.scroll-fade-wrap::before{content:'';position:absolute;top:0;left:0;bottom:0;width:32px;pointer-events:none;background:linear-gradient(to left,transparent,var(--surface));opacity:0;transition:opacity .2s;z-index:1;}
.scroll-fade-wrap.scrolled-start::before{opacity:1;}
/* CSS-only fade for containers with overflow-x:auto (no JS needed) */
.scroll-fade-auto{-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);}

/* ── Bottom Sheet (overflow menu) ── */
.bottom-sheet-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;-webkit-tap-highlight-color:transparent;}
.bottom-sheet-overlay.open{display:block;}
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-radius:16px 16px 0 0;z-index:2001;transform:translateY(100%);transition:transform .25s ease;max-height:70vh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);}
.bottom-sheet-overlay.open .bottom-sheet{transform:translateY(0);}
.bottom-sheet-handle{width:40px;height:4px;background:var(--border2);border-radius:2px;margin:10px auto;}
.bottom-sheet-title{padding:4px 20px 12px;font-size:14px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border);}
.bottom-sheet-item{display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:14px;color:var(--text);cursor:pointer;transition:background .1s;min-height:48px;-webkit-tap-highlight-color:transparent;}
.bottom-sheet-item:active{background:var(--surface2);}
.bottom-sheet-item .bsi-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0;}
.bottom-sheet-item.danger{color:var(--danger);}
.bottom-sheet-cancel{display:flex;align-items:center;justify-content:center;padding:14px 20px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-top:1px solid var(--border);min-height:48px;}
.bottom-sheet-cancel:active{background:var(--surface2);}

/* ── Action Bar Sticky (bottom sticky bar) ── */
.action-bar-sticky{position:sticky;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;z-index:10;display:flex;align-items:center;gap:8px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
.action-bar-sticky .btn{flex:1;justify-content:center;}

/* ═══════════════════════════════════════════════════════════════
   TIER 1: Mobile portrait (max-width: 600px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:600px){

  /* ── SIDEBAR → DRAWER ── */
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:280px;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:none;
  }
  .sidebar.mobile-open{
    transform:translateX(0);
    box-shadow:4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    z-index:999;
  }
  .sidebar-overlay.active{display:block;}

  /* ── HAMBURGER VISIBLE (14.2: 44×44 touch target) ── */
  .hamburger-btn{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    background:var(--surface2);border:1px solid var(--border);border-radius:8px;
    color:var(--text);font-size:20px;cursor:pointer;
    flex-shrink:0;transition:all .15s;
    margin-right:4px;
  }
  .hamburger-btn:hover{background:var(--border);}

  /* ── TOPBAR COMPACT (14.1, 14.3: bigger touch targets) ── */
  .topbar{padding:0 12px;gap:6px;height:48px;}
  .topbar-title{font-size:14px;}
  .topbar-right .topbar-icon-btn{width:40px!important;height:40px!important;font-size:16px!important;}
  #user-avatar{width:40px!important;height:40px!important;font-size:13px!important;}

  /* ── MAIN CONTENT FULL WIDTH ── */
  .main{width:100%;}

  /* ── MODALS FULLSCREEN ── */
  .modal,.modal.sm,.modal.lg,.modal.xlg{
    width:100vw!important;max-width:100vw!important;
    height:100vh;max-height:100vh;
    border-radius:0;
    margin:0;
  }
  .overlay.open{align-items:stretch;}
  .mhd{padding:14px 16px 12px;}
  .mbody{padding:14px 16px 16px;}
  .mfoot{padding:10px 16px;}
  .mtitle{font-size:17px;}
  .mclose{font-size:24px;padding:8px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;}

  /* ── POST EDITOR ── */
  .pe-split{flex-direction:column-reverse;gap:12px;min-height:auto;}
  .pe-campos{flex:none;max-height:none;padding-right:0;}
  .pe-preview{max-height:280px;overflow-y:auto;border-radius:8px;}
  .pe-header-meta{font-size:11px;gap:6px;flex-direction:column;}
  .pe-header-meta .pe-versions{margin-left:0;}
  .pe-slider-header button{padding:8px 16px;min-width:44px;min-height:44px;}
  /* Collapsible sections: open by default on mobile for visibility */
  .pe-section{border-radius:8px;}
  .pe-section summary{padding:12px 14px;font-size:14px;min-height:44px;display:flex;align-items:center;}
  .pe-section-body{padding:12px 14px;}
  /* 1.1: Modal footer → sticky action bar with overflow */
  .modal .mfoot{position:sticky;bottom:0;background:var(--surface);z-index:10;border-top:1px solid var(--border);padding:12px 16px;}
  #pm-foot{flex-wrap:wrap;gap:8px;}
  #pm-foot .btn{min-height:44px;font-size:13px;}
  #pm-foot .pe-overflow-trigger{width:44px;height:44px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--muted2);flex-shrink:0;}
  /* Sprint 0: Icon toolbar for post editor footer */
  .pe-icon-toolbar{display:flex;gap:0;width:100%;height:56px;padding-bottom:env(safe-area-inset-bottom,0px);}
  .pe-icon-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;min-height:56px;color:var(--muted2);transition:color .15s;-webkit-tap-highlight-color:transparent;padding:0;}
  .pe-icon-btn:active{color:var(--text);}
  .pe-icon-btn .pe-ib-ico{font-size:20px;line-height:1;}
  .pe-icon-btn .pe-ib-lbl{font-size:11px;line-height:1;font-weight:600;}
  .pe-icon-btn.pe-ib-primary{color:var(--primary);}
  .pe-icon-btn.pe-ib-primary:active{opacity:.8;}
  /* 1.2: Review actions full-width with labels */
  .pe-review-actions{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
  .pe-review-actions .btn{min-height:44px;font-size:13px;justify-content:center;display:flex;align-items:center;gap:6px;}
  /* 1.3-1.5: Copy, Swap, Regenerate → mobile-icon-btn style */
  .pe-copy-btn,.pe-swap-btn,.pe-regen-btn{min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;border-radius:8px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;font-size:16px!important;opacity:1!important;transition:all .15s;flex-shrink:0;padding:0!important;margin-left:6px!important;}
  .pe-swap-btn{font-size:14px!important;}
  /* 1.6: "Atualizar dados" and "Dados conferidos" sized */
  .pe-campos .btn-data-action{min-height:36px;font-size:12px!important;padding:8px 12px!important;}
  /* 1.7: Alternative dots scroll */
  .alt-selector{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;padding-bottom:4px;}
  .alt-dot{width:36px;height:36px;font-size:13px;flex-shrink:0;}
  .alt-regen{min-width:36px;min-height:36px;font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  /* 1.8: Version tabs scroll indicator */
  .pe-versions{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;max-width:100%;-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);}
  .vtab{flex-shrink:0;min-height:32px;padding:6px 12px;}
  /* 1.9: Slider dots bigger */
  .pe-slider-dots span{width:16px;height:16px;margin:0 4px;border-radius:50%;}
  .pe-slider-dots{padding:10px 0;gap:6px;}
  /* Legenda textarea auto-height */
  .pe-campos textarea{min-height:80px;}

  /* ── KANBAN (columns mode) ── */
  .kanban:not(.kanban-mobile-list){padding:12px 12px 0;gap:12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
  .kanban:not(.kanban-mobile-list) .col{min-width:85vw;max-width:85vw;scroll-snap-align:start;}

  /* ── KANBAN MOBILE TOGGLE ── */
  .kb-mob-toggle{display:flex;gap:4px;padding:8px 12px 0;}
  .kb-mob-btn{padding:6px 14px;font-size:12px;font-weight:600;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;min-height:36px;transition:all .15s;}
  .kb-mob-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

  /* ── KANBAN MOBILE LIST ── */
  .kanban-mobile-list{display:flex;flex-direction:column;gap:0;padding:8px 12px 12px;overflow-x:hidden;overflow-y:auto;}
  .kb-section{border-bottom:1px solid var(--border);}
  .kb-section:last-child{border-bottom:none;}
  .kb-section-hd{display:flex;align-items:center;gap:8px;padding:14px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .kb-section-arrow{font-size:12px;color:var(--muted);width:14px;text-align:center;}
  .kb-section-label{font-size:14px;font-weight:600;flex:1;}
  .kb-section-hd .col-cnt{font-size:12px;background:var(--surface2);padding:2px 8px;border-radius:10px;}
  .kb-section-body{display:flex;flex-direction:column;gap:8px;padding:0 0 12px;}

  /* ── CARDS (2.1-2.4) ── */
  .card{padding:12px;}
  .card-title{font-size:14px;}
  .card-meta{gap:4px;}
  .ctag{font-size:12px;padding:4px 8px;}
  .card-date{font-size:12px;}
  .card-type{font-size:11px;}
  /* 2.1: Review actions — primary visible + overflow */
  .card .card-review{display:flex!important;position:static!important;margin-top:8px;flex-wrap:nowrap;gap:6px!important;align-items:center;}
  .card .card-review button{min-height:36px;padding:6px 12px!important;font-size:12px!important;border-radius:8px!important;display:flex;align-items:center;gap:4px;}
  .card .card-review .cr-primary{flex:1;}
  .card .card-review .cr-overflow{width:36px;min-width:36px;height:36px;padding:0!important;justify-content:center;background:var(--surface2)!important;border:1px solid var(--border)!important;color:var(--muted2)!important;font-size:16px!important;}
  /* 2.2: Card badges touch targets */
  .cbadge{font-size:14px!important;opacity:.8!important;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;}
  /* 2.3: Card checkbox bigger */
  .card-select{width:24px!important;height:24px!important;opacity:1!important;}
  /* 2.4: Section headers padding */
  .kb-section-hd{padding:14px 12px!important;}

  /* ── POSTS TOGGLE / FILTERS (2.6) ── */
  #posts-toggle{padding:8px 12px 0;}
  .posts-view-btn{padding:8px 14px;font-size:13px;min-height:36px;}
  #filter-bar{padding:8px 12px 4px;}
  .filter-dd{min-width:70px;font-size:11px;padding:6px 8px;min-height:36px;}
  .filter-search{width:100%;min-width:0;min-height:36px;}
  .smart-toggle{font-size:12px;padding:6px 10px;min-height:36px;}
  #filter-dropdowns{gap:6px;}
  /* 2.6: Filter bar → collapsible on mobile */
  .filter-sheet-trigger{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--muted2);cursor:pointer;min-height:40px;width:100%;}
  .filter-sheet-trigger .fst-count{background:var(--primary);color:#fff;font-size:10px;padding:2px 7px;border-radius:10px;font-weight:700;}

  /* ── CALENDAR ── */
  .calhd{padding:10px 12px;gap:6px;flex-wrap:wrap;}
  .callabel{font-size:13px;min-width:auto;}
  .calfilt{margin-left:0;flex-wrap:wrap;}
  .calmonth{padding:8px 12px 12px;}
  .calday{min-height:44px;padding:3px;}
  .caldaynum{font-size:11px;text-align:center;}
  /* Pills → dots on mobile monthly */
  .calpill{font-size:0;padding:0;width:8px;height:8px;border-radius:50%;display:inline-block;margin:1px;overflow:hidden;min-height:0;line-height:0;}
  .calpill span{display:none;}
  .calmore{font-size:9px;text-align:center;}
  .calday .calpill{background:var(--muted);}
  .calday .calpill.industrial{background:#4caf50;}
  .calday .calpill.creative{background:#ff9800;}
  .calday .calpill.manual{background:var(--primary);}
  /* Weekly: horizontal scroll */
  .weekgrid{grid-template-columns:repeat(7,minmax(100px,1fr));overflow-x:auto;}

  /* ── CALENDAR MOBILE LIST ── */
  .cal-mobile-list{display:block;padding:8px 12px 12px;}
  .cal-mob-day{margin-bottom:12px;}
  .cal-mob-day-hd{font-size:13px;font-weight:600;color:var(--muted);padding:4px 0;border-bottom:1px solid var(--border);margin-bottom:6px;}
  .cal-mob-day-hd.today{color:var(--primary);}
  .cal-mob-item{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:8px;cursor:pointer;transition:background .15s;}
  .cal-mob-item:active{background:var(--surface2);}
  .cal-mob-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .cal-mob-title{font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cal-mob-status{font-size:10px;padding:2px 6px;border-radius:4px;color:#fff;flex-shrink:0;}

  /* ── LIST VIEW → CARDS ── */
  #list-container{padding:0 12px 12px;}
  /* Hide table on mobile, show cards */
  .lst-table{display:none;}
  .lst-cards{display:flex;flex-direction:column;gap:8px;}
  .lst-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:background .15s;}
  .lst-card:active{background:var(--surface2);}
  .lst-card-title{font-size:14px;font-weight:600;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lst-card-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
  .lst-card-row + .lst-card-row{margin-top:4px;}
  .lst-card-badge{font-size:10px;padding:2px 8px;border-radius:4px;color:#fff;}
  .lst-card-check{color:var(--success);}

  /* ── TEMPLATES / LAYOUTS GRID (8.1-8.2) ── */
  .tmplgrid{grid-template-columns:1fr;padding:12px;gap:10px;}
  .tcard{padding:14px;}
  .tcard-actions{opacity:1;position:static;display:flex;gap:6px;margin-top:8px;}
  .tcard-actions .tcard-btn{min-height:36px;padding:8px 12px!important;font-size:12px!important;}

  /* ── PROMPTS (7.1-7.2) ── */
  .prompts-wrap{flex-direction:column;height:auto;}
  .prompts-list{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:200px;}
  .prompts-list-hd{padding:12px 14px;}
  .prompts-list .prompt-item{padding:10px 14px;font-size:13px;min-height:40px;}
  .prompts-editor-hd{padding:12px 16px;gap:8px;}
  .prompts-editor-body{padding:14px 16px;}
  .prompts-editor-body textarea,.prompts-editor-body .fta{min-height:150px;font-size:14px;}
  /* 7.1: Model filter chips sized */
  .prompts-list-hd .chip{font-size:12px;padding:6px 10px;min-height:36px;}
  /* 7.2: Sticky save */
  .prompts-editor-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;z-index:10;}

  /* ── MÍDIA / IMAGES (6.1-6.4) ── */
  #images-content{padding:12px!important;}
  #images-content > div:first-child{flex-wrap:wrap;gap:8px;}
  #images-content .chip{font-size:12px;padding:6px 10px;min-height:36px;}
  /* 6.1: Star rating touch padding */
  .star-rating-btn{padding:4px 8px!important;font-size:18px!important;min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;}
  /* 6.2: Bulk toolbar 2 lines */
  .img-bulk-toolbar{flex-wrap:wrap!important;gap:8px;}
  /* 6.3: Selection checkbox bigger */
  .img-select-cb{width:24px!important;height:24px!important;}
  /* 6.4: Detail popover buttons sized */
  .img-detail-btn{min-height:36px;font-size:12px!important;padding:8px 12px!important;}

  /* ── ANALYTICS ── */
  .agrid{grid-template-columns:1fr 1fr;gap:10px;padding:12px;}
  .aval{font-size:22px;}

  /* ── ADMIN (5.1-5.6) ── */
  #view-admin > div{padding:12px!important;}
  /* 5.1: Tabs scroll indicator */
  #admin-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;padding-bottom:4px;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
  #admin-tabs .chip{flex-shrink:0;font-size:12px;padding:8px 12px;min-height:36px;}
  /* 5.5: Schedule actions sized */
  .sched-actions .btn{min-height:36px;gap:8px;}
  /* 5.6: Sector tags × bigger */
  .sector-tag-remove{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
  .sector-tag{min-height:32px;display:inline-flex;align-items:center;}

  /* ── FONTES WEB / SOURCES (9) ── */
  #view-sources-body{padding:12px!important;}
  #view-sources-body > div:first-child{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:4px;}
  #view-sources-body .chip{flex-shrink:0;min-height:36px;}
  /* Source card actions → overflow pattern */
  .source-card-actions .btn{min-height:36px;}

  /* ── AGENTES (3.1-3.6) ── */
  /* 3.1: Brief card actions — primary + overflow */
  .brief-card-actions{flex-wrap:wrap;gap:6px!important;}
  .brief-card-actions .btn{min-height:36px;}
  /* 3.2: Star rating padding between stars */
  .agent-star-rating .star-btn{padding:6px 8px!important;min-width:40px;min-height:40px;}
  /* 3.3: Ranking actions sized */
  .ranking-action-btn{min-height:36px!important;padding:8px 12px!important;font-size:12px!important;display:inline-flex;align-items:center;gap:4px;}
  /* 3.4: Bulk ranking actions — 2 lines */
  .ranking-bulk-actions{flex-wrap:wrap!important;gap:6px;}
  /* 3.5: Asset filter chips scroll */
  .asset-filter-chips{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important;padding-bottom:4px;}
  .asset-filter-chips .chip{flex-shrink:0;}

  /* ── EMAIL MODULE (4.1-4.8) ── */
  /* 4.1: Tabs with scroll fade */
  .em-tabs-bar{padding:0 12px;gap:0;position:relative;-webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);}
  .em-tab{padding:10px 12px;font-size:12px;flex-shrink:0;min-height:40px;}
  .em-topbar{padding:8px 12px;flex-wrap:wrap;}
  .em-body{padding:12px;}
  .em-kpi-grid{grid-template-columns:1fr 1fr;gap:8px;}
  .em-kpi{padding:12px 10px;}
  .em-kpi-val{font-size:22px;}
  .em-camp-grid{grid-template-columns:1fr;}
  .em-report-kpis{grid-template-columns:1fr 1fr;gap:8px;}
  .em-report-details{grid-template-columns:1fr;}
  .em-report{max-width:100%;}
  .em-report-summary{flex-direction:column;gap:8px;}
  .em-toolbar{gap:6px;flex-wrap:wrap;}
  .em-search{width:100%;}
  .em-preview-modal{width:100vw;max-width:100vw;height:100vh;border-radius:0;}
  .em-modal{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;}
  .em-aut-editor{flex-direction:column;height:auto;}
  .em-aut-sidebar{width:100%;border-left:none;border-top:1px solid var(--border2);}
  .em-aut-step{width:100%;max-width:none;}
  .em-aut-canvas{padding:16px;}
  .em-camp-card{padding:14px;}
  .em-camp-card-stats{gap:12px;flex-wrap:wrap;}
  /* 4.3: Wizard steps vertical on mobile */
  .em-wizard-steps{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;flex-direction:column;gap:0;}
  .em-wizard-step{flex-shrink:0;min-height:44px;}
  .em-bulk-bar{flex-wrap:wrap;gap:6px;}
  .em-bulk-bar .btn{font-size:12px;min-height:36px;}
  /* 4.4: Segment editor buttons stacked */
  .em-seg-actions{flex-direction:column;gap:6px;}
  .em-seg-actions .btn{width:100%;justify-content:center;}
  /* 4.8: Tag/list removal touch target */
  .em-tag-remove,.em-list-remove{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:16px!important;}

  /* ── EMAIL: Contacts table → cards ── */
  .em-table{font-size:12px;}
  .em-table thead{display:none;}
  .em-table tbody{display:flex;flex-direction:column;gap:8px;}
  .em-table tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
  .em-table tbody td{padding:0;border:none;}
  /* Hide less important columns: listas (4th), tags (5th), criado em (7th) */
  .em-table tbody td:nth-child(4),
  .em-table tbody td:nth-child(5),
  .em-table tbody td:nth-child(7){display:none;}
  /* Checkbox */
  .em-table tbody td:nth-child(1){order:-1;}
  /* Name: full width */
  .em-table tbody td:nth-child(2){flex:1;min-width:60%;font-weight:600;}
  .em-table tbody td:nth-child(2) a{font-size:14px;}
  /* Email: full width below name */
  .em-table tbody td:nth-child(3){width:100%;font-size:12px;color:var(--muted);}
  .em-table tbody td:nth-child(3) a{color:var(--muted);}
  /* Status badge */
  .em-table tbody td:nth-child(6){order:1;}
  /* Detail button */
  .em-table tbody td:nth-child(8){order:2;margin-left:auto;}
  .em-table tbody td .btn-icon{min-width:36px;min-height:36px;}
  .em-table .em-empty-row{display:block;padding:20px;text-align:center;background:none;border:none;}

  /* ── EMAIL: Campaigns table → cards ── */
  .em-camp-table thead{display:none;}
  .em-camp-table tbody{display:flex;flex-direction:column;gap:8px;}
  .em-camp-table tbody tr.em-camp-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
  .em-camp-table tbody td{padding:0;border:none;}
  /* Hide: preview (1st), sent date (3rd), sent count (4th), clicks (5th), last mod (6th) */
  .em-camp-table tbody td:nth-child(1),
  .em-camp-table tbody td:nth-child(3),
  .em-camp-table tbody td:nth-child(4),
  .em-camp-table tbody td:nth-child(5),
  .em-camp-table tbody td:nth-child(6){display:none;}
  /* Name + meta: full width */
  .em-camp-table tbody td:nth-child(2){width:100%;}
  .em-camp-row-name{font-size:14px;font-weight:600;}
  .em-camp-row-meta{margin-top:4px;}
  /* Actions: full width */
  .em-camp-table .em-camp-row-actions{width:100%;display:flex;gap:6px;margin-top:4px;}

  /* ── MONITOR (10.1-10.2) ── */
  #monitor-root{padding:12px!important;}
  #mon-logs,#mon-route-stats{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #mon-logs > div,#mon-route-stats > div{min-width:500px;}
  #mon-crons > div{grid-template-columns:1fr auto!important;gap:6px 8px!important;}
  #mon-health{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))!important;gap:8px!important;}
  #mon-kpis .agrid{grid-template-columns:1fr 1fr;}
  /* 10.1: Resolve button sized */
  .mon-resolve-btn{min-height:36px!important;padding:8px 12px!important;font-size:12px!important;}
  /* 10.2: Route stats clickable rows */
  .mon-route-row{min-height:44px;padding:8px 12px!important;}

  /* ── BATCH (12.1) ── */
  #view-batch > div{padding:12px!important;max-width:100%!important;}
  .batch-count-preset{min-width:36px;min-height:36px;font-size:12px!important;padding:6px 10px!important;}

  /* ── HOTMART / CUSTOMERS (13.1) ── */
  .hotmart-card-actions .btn{min-height:36px;}
  .hotmart-card-actions{gap:6px!important;flex-wrap:wrap;}

  /* ── TYPE SELECTOR (wizard) ── */
  .typeselector{grid-template-columns:1fr;gap:8px;}
  .typeopt{padding:12px;display:flex;align-items:center;gap:12px;text-align:left;}
  .typeopt-ico{font-size:20px;margin-bottom:0;}

  /* ── FORMS ── */
  .fg{grid-template-columns:1fr !important;} /* Force single column on mobile */
  .fi,.fs,.fta{font-size:14px;padding:10px 12px;} /* Bigger touch targets */
  .fl{font-size:13px;}

  /* ── BUTTONS ── */
  .btn{padding:10px 16px;font-size:14px;min-height:40px;}
  .btn-sm{padding:8px 12px;font-size:13px;min-height:36px;}
  .btn-icon{min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;}
  .new-btn{padding:12px;font-size:14px;}
  .mfoot{flex-wrap:wrap;gap:8px;}
  .mfoot .btn{flex:1;justify-content:center;min-width:0;}

  /* ── TOGGLE ── */
  .tgl{width:40px;height:24px;}
  .tgl::after{width:18px;height:18px;}
  .tgl.on::after{transform:translateX(16px);}

  /* ── TABS ── */
  .ui-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:0;padding-bottom:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,transparent,#000 16px,#000 calc(100% - 16px),transparent);}
  .ui-tab{padding:10px 14px;font-size:13px;flex-shrink:0;}

  /* ── DROPDOWNS ── */
  .ac-dropdown,.bdd-dropdown,.ui-dropdown-menu,.em-seg-dropdown{
    position:fixed!important;
    left:8px!important;right:8px!important;
    bottom:8px!important;
    top:auto!important;
    max-height:50vh;
    border-radius:12px;
    z-index:1100;
  }

  /* ── TOAST ── */
  .toast{left:12px;right:12px;bottom:12px;max-width:none;text-align:center;}

  /* ── NAV ITEMS (within sidebar drawer) ── */
  .nav-item{padding:12px 14px;font-size:14px;gap:12px;}
  .ni{font-size:18px;width:24px;}
  .nav-sec{font-size:11px;padding:18px 14px 8px;}

  /* ── TOUCH TARGETS (14.4 + view-specific) ── */
  .calnb{width:44px;height:44px;font-size:20px;} /* 11.1 */
  .bdd-check{width:24px;height:24px;}
  .ep-color{width:32px;height:32px;}
  .tcard-actions{opacity:1;} /* Always visible on touch */
  .em-camp-card-actions{opacity:1;}
  .em-aut-card-actions{opacity:1;}
  .em-aut-step-del{opacity:1;}
  /* 14.4: Global minimum touch targets */
  .chip{min-height:36px;display:inline-flex;align-items:center;}

  /* ── FONT SIZE MINIMUM ── */
  .col-cnt{font-size:12px;}
  .ep-label{font-size:11px;}
  .ep-slot-nm{font-size:12px;}
  .em-kpi-label{font-size:12px;}
  .em-report-kpi-label{font-size:12px;}

  /* ── THUMBGRID ── */
  .thumbgrid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .ep-results{grid-template-columns:repeat(3,1fr);gap:4px;}
  .ep-results-5{grid-template-columns:repeat(3,1fr);}

  /* ── BATCH (batch dropdown) ── */
  .bdd-trigger{min-height:44px;}
  .bdd-item{padding:10px 14px;font-size:14px;}

  /* ── IMAGE PICKER ── */
  .ip-tab{padding:10px 0;font-size:12px;}
  .ip-grid{max-height:200px;}

  /* ── SLIDES VIEWER ── */
  .slide-card{padding:12px;}
  .slide-text{font-size:14px;}

  /* ── USER MENU ── */
  #user-menu{right:-8px!important;min-width:200px!important;}

  /* ── SCROLLBAR: narrower visual for touch, keep hit area ── */
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{border:2px solid transparent;}

  /* ── MONITOR ── */
  /* health cards and kpis handled by .agrid rules above */

  /* ── TABLE horizontal scroll wrapper ── */
  .dtable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* ── MISC PADDING REDUCTIONS ── */
  .calweek{padding:0 12px 12px;}
  .em-detail-card{padding:12px;}
  .em-wiz-card{padding:16px;margin-bottom:12px;}
  .em-aut-card{padding:14px;}

  /* ═══════════════════════════════════════════════════════════════
     ART EDITOR — Mobile Canvas (Sprint 1-3)
     ═══════════════════════════════════════════════════════════════ */

  /* ── Sprint 1: Hide desktop topbar + panel, show mobile topbar ── */
  #ed-desktop-topbar{display:none!important;}
  #ed-right-panel{display:none!important;}
  #ed-desktop-zoom{display:none!important;}
  #ed-versions-drawer{display:none!important;}

  /* Mobile topbar */
  .ed-mobile-topbar{display:flex!important;height:48px;background:#13131f;border-bottom:1px solid #2a2a42;align-items:center;padding:0 12px;gap:8px;flex-shrink:0;}
  .ed-mob-back{background:#1a1a2e;border:1px solid #2a2a42;color:#9999bb;border-radius:7px;padding:0 12px;height:36px;font-family:'Syne',sans-serif;font-size:12px;cursor:pointer;white-space:nowrap;}
  .ed-mob-slide-info{flex:1;text-align:center;font-size:13px;color:#9999bb;font-weight:600;}
  .ed-mob-versions{background:#1a1a2e;border:1px solid #2a2a42;color:#9999bb;width:40px;height:40px;border-radius:8px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .ed-mob-export{background:#7c6aff;border:none;color:#fff;width:40px;height:40px;border-radius:8px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

  /* Mobile dots */
  .ed-mobile-dots{display:flex!important;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);gap:6px;align-items:center;z-index:50;}
  .ed-mobile-dots .ed-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:all .2s;flex-shrink:0;}
  .ed-mobile-dots .ed-dot.active{width:10px;height:10px;background:#7c6aff;}

  /* Thumb strip smaller */
  #ed-thumbs{height:64px!important;}

  /* Canvas area — no padding for zoom buttons (hidden) */
  #ed-canvas-area{touch-action:none;}
  /* Prevent scroll during Fabric text editing */
  #ov-editor.ed-text-editing{overflow:hidden!important;}
  #ov-editor.ed-text-editing #ed-canvas-area{overflow:hidden!important;}
  /* Pin Fabric's hidden textarea (Fabric v6 appends to <body>, not canvas-container).
     JS adds .fc-editing-ta class to it during editing. CSS !important prevents Fabric
     from repositioning it on line wrap, which prevents iOS scroll-to-element. */
  textarea.fc-editing-ta{position:fixed!important;top:10px!important;left:10px!important;width:1px!important;height:1px!important;opacity:0.01!important;font-size:16px!important;z-index:99999!important;}
  /* Keep contextual toolbar visible during text editing, positioned ABOVE keyboard.
     iOS: position:fixed bottom:0 goes behind keyboard. Move to top instead. */
  #ov-editor.ed-text-editing .ed-ctx-toolbar{display:flex!important;bottom:auto!important;top:48px!important;border-top:none!important;border-bottom:1px solid #2a2a42!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important;}

  /* Mobile FABs: add + undo/redo/overlay */
  .ed-mobile-fab-add{display:block!important;position:absolute;bottom:32px;left:12px;z-index:50;}
  .ed-fab-add-btn{width:44px;height:44px;border-radius:50%;background:#7c6aff;border:none;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 16px rgba(124,106,255,.4);display:flex;align-items:center;justify-content:center;}
  .ed-mobile-fabs{display:flex!important;position:absolute;bottom:32px;right:12px;gap:6px;z-index:50;}
  .ed-fab-btn{width:36px;height:36px;border-radius:8px;background:#1a1a2ecc;border:1px solid #2a2a42;color:#9999bb;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);}

  /* Add element button position */
  #ed-add-elem-btn{display:none!important;}
  #ed-elem-palette{display:none!important;}

  /* History panel hidden (will be bottom sheet in S3e) */
  #ed-history-panel{display:none!important;}

  /* ── Sprint 2: Floating contextual toolbar ── */
  .ed-ctx-toolbar{display:flex!important;position:fixed;bottom:0;left:0;right:0;background:#13131f;border-top:1px solid #2a2a42;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:6px;align-items:center;z-index:310;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;box-shadow:0 -4px 20px rgba(0,0,0,.5);}
  .ed-ctx-toolbar.ed-ctx-hidden{display:none!important;}
  .ed-ctx-btn{background:#1a1a2e;border:1px solid #2a2a42;color:#9999bb;min-width:36px;height:36px;border-radius:7px;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px;white-space:nowrap;flex-shrink:0;}
  .ed-ctx-btn.active{background:#7c6aff22;border-color:#7c6aff;color:#7c6aff;}
  .ed-ctx-sep{width:1px;height:24px;background:#2a2a42;flex-shrink:0;}
  .ed-ctx-select{background:#1a1a2e;border:1px solid #2a2a42;color:#e8e8f0;font-size:12px;height:36px;border-radius:7px;padding:0 8px;min-width:80px;font-family:'Syne',sans-serif;}
  .ed-ctx-size{background:#1a1a2e;border:1px solid #2a2a42;color:#e8e8f0;font-size:13px;width:48px;height:36px;text-align:center;border-radius:7px;font-family:'DM Mono',monospace;}
  .ed-ctx-color{width:36px;height:36px;border-radius:7px;border:1px solid #2a2a42;overflow:hidden;position:relative;cursor:pointer;background:#1a1a2e;flex-shrink:0;}
  .ed-ctx-color input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;}
  .ed-ctx-color .ed-ctx-color-dot{position:absolute;inset:4px;border-radius:4px;pointer-events:none;}

  /* When ctx toolbar visible, thumb strip shifts up */
  .ed-ctx-toolbar:not(.ed-ctx-hidden) ~ #ed-thumbs{display:none!important;}

  /* ── Sprint 3a: Tab bar ── */
  .ed-mobile-tab-bar{display:flex!important;position:fixed;bottom:0;left:0;right:0;height:48px;background:#13131f;border-top:1px solid #2a2a42;z-index:305;padding-bottom:env(safe-area-inset-bottom,0px);}
  .ed-mobile-tab-bar.ed-tabs-hidden{display:none!important;}
  .ed-mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;color:#9999bb;font-size:10px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;font-family:'Syne',sans-serif;text-transform:uppercase;letter-spacing:.3px;}
  .ed-mtab.active{color:#7c6aff;}
  .ed-mtab .ed-mtab-ico{font-size:16px;}

  /* Panel sheet (bottom sheet for panels) */
  .ed-panel-sheet{position:fixed;bottom:0;left:0;right:0;max-height:55vh;background:#13131f;border-radius:16px 16px 0 0;z-index:320;transform:translateY(100%);transition:transform .25s ease;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.6);}
  .ed-panel-sheet.open{transform:translateY(0);}
  .ed-panel-sheet-handle{width:40px;height:4px;background:#2a2a42;border-radius:2px;margin:10px auto 6px;}
  .ed-panel-sheet-title{padding:4px 16px 10px;font-size:12px;font-weight:700;color:#e8e8f0;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid #2a2a42;}
  .ed-panel-sheet-body{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;}
  .ed-panel-sheet-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:315;}
  .ed-panel-sheet-overlay.open{display:block;}

  /* When tab bar visible, thumbs need bottom margin */
  #ed-thumbs{margin-bottom:48px;}
  /* When ctx toolbar active, hide tab bar */
  .ed-ctx-toolbar:not(.ed-ctx-hidden) ~ .ed-mobile-tab-bar{display:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   TIER 0: Very small phones (max-width: 375px)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:375px){
  .kanban:not(.kanban-mobile-list) .col{min-width:90vw;max-width:90vw;}
  .agrid{grid-template-columns:1fr;gap:8px;}
  .em-kpi-grid{grid-template-columns:1fr;}
  .thumbgrid{grid-template-columns:repeat(2,1fr);}
  .ep-results{grid-template-columns:repeat(2,1fr);}
  .topbar-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;}
  .em-camp-card-stats{flex-direction:column;gap:6px;}
  .kb-section-label{font-size:13px;}
  .cal-mob-title{font-size:12px;}
  /* Email: even more compact */
  .em-table tbody td:nth-child(2) a{font-size:13px;}
  .em-table tbody td:nth-child(3){font-size:11px;}
  .em-camp-row-name{font-size:13px;}
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE (max-height: 500px + landscape)
   ═══════════════════════════════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape){
  .sidebar{width:220px;}
  .sidebar.mobile-open{width:220px;}
  .topbar{height:40px;}
  .hamburger-btn{width:32px;height:32px;font-size:16px;}
  .modal,.modal.sm,.modal.lg,.modal.xlg{height:100vh;max-height:100vh;overflow-y:auto;}
  .mbody{max-height:calc(100vh - 100px);overflow-y:auto;}
  .kanban-mobile-list .kb-section-hd{padding:10px 4px;}
  .pe-preview{max-height:180px;}
}

/* ═══════════════════════════════════════════════════════════════
   VIRTUAL KEYBOARD — prevent layout shift on input focus
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Prevent viewport resize when keyboard opens (iOS/Android) */
  html{height:100%;overflow:hidden;}
  body{height:100%;overflow:auto;overscroll-behavior-y:contain;}

  /* Ensure focused inputs are visible above keyboard */
  input:focus,textarea:focus,select:focus,.fi:focus,.fs:focus,.fta:focus{
    scroll-margin-bottom:120px;
  }

  /* Fixed dropdowns: safe-area aware on bottom */
  .ac-dropdown,.bdd-dropdown,.ui-dropdown-menu,.em-seg-dropdown{
    bottom:calc(8px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PWA STANDALONE — pull-to-refresh prevention + status bar
   ═══════════════════════════════════════════════════════════════ */
@media(display-mode:standalone){
  body{overscroll-behavior-y:contain;} /* Disable pull-to-refresh */
  .topbar{padding-top:env(safe-area-inset-top, 0px);}
}

/* ═══════════════════════════════════════════════════════════════
   SAFE AREA (notch / home indicator)
   ═══════════════════════════════════════════════════════════════ */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  @media(max-width:600px){
    .sidebar-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom));}
    .mfoot{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
    .toast{bottom:calc(12px + env(safe-area-inset-bottom));}
    /* Bulk bar safe area */
    #bulk-bar{bottom:calc(20px + env(safe-area-inset-bottom))!important;}
    /* Mobile editor safe area */
    .ed-mobile-tab-bar{padding-bottom:env(safe-area-inset-bottom);}
    .ed-ctx-toolbar{padding-bottom:calc(8px + env(safe-area-inset-bottom));}
    .ed-panel-sheet{padding-bottom:env(safe-area-inset-bottom);}
  }
}