﻿/* ClipMakerIA mobile compatibility layer. Loaded last on every frontend page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
button,a,label,input,select,textarea{touch-action:manipulation}
img,video,canvas,svg{max-width:100%}
video{-webkit-transform:translateZ(0)}

@media (max-width:900px){
  html{height:-webkit-fill-available;max-width:100%;overflow-x:hidden!important;overflow-x:clip!important}
  body{max-width:100%;overflow-x:hidden!important;overflow-x:clip!important}
  body{min-height:100dvh;min-height:-webkit-fill-available}
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  button,[role="button"],input[type="button"],input[type="submit"]{min-height:44px}

  body > main > header{min-height:calc(60px + env(safe-area-inset-top))!important;padding-top:env(safe-area-inset-top)!important}
  body > main > header > .flex.items-center.gap-3{flex-wrap:nowrap!important;gap:7px!important;min-width:0}
  body > main > header #avatar-wrap{flex:0 0 auto}
  body > main > header #avatar-wrap .avatar-vip-overlay{display:none!important}
  #clipemaster-chat-widget{right:calc(16px + env(safe-area-inset-right))!important;bottom:calc(16px + env(safe-area-inset-bottom))!important}
  .toast,[role="dialog"]{max-width:calc(100vw - 24px)!important}

  #dashtab-opcoes,#dashtab-opcoes .cm-opcoes-grid,#dashtab-opcoes .cm-opcoes-stack,#dashtab-opcoes .cm-glass-card{min-width:0!important;max-width:100%!important}
  #dashtab-opcoes .cm-glass-card{overflow-wrap:anywhere}
  #dashtab-opcoes #platform-selector button,#file-drop-zone,#agent-dropzone{-webkit-tap-highlight-color:transparent}
  #file-drop-zone{padding:24px 14px!important;min-height:150px!important}

  #agent-shell{width:100%;max-width:100%;padding:26px 14px calc(110px + env(safe-area-inset-bottom))!important;overflow-x:hidden}
  #agent-topbar,#agent-workspace{min-width:0}
  #agent-action-card,#agent-dropzone,#agent-queue-panel{width:100%;min-width:0}
  #agent-dropzone{min-height:320px!important;padding:36px 18px!important}
  #agent-select-btn{min-height:44px;justify-content:center}
  #agent-queue-head{align-items:flex-start!important}
  #agent-queue-title{flex-wrap:wrap}

  #page-profile > div:first-of-type{display:block!important;grid-template-columns:1fr!important;min-height:0!important;width:100%;overflow-x:hidden}
  #page-profile > div:first-of-type > div:first-child{width:100%;padding:12px 14px!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.06);overflow-x:auto;-webkit-overflow-scrolling:touch}
  #page-profile > div:first-of-type > div:first-child > div:first-child{display:none}
  #page-profile > div:first-of-type > div:first-child nav{width:max-content;min-width:100%;flex-direction:row!important;gap:6px!important}
  #page-profile .prof-tab-btn{width:auto!important;min-height:42px;flex:0 0 auto;padding:9px 12px!important;white-space:nowrap}
  #page-profile > div:first-of-type > div:nth-child(2){width:100%;min-width:0;padding:26px 16px calc(112px + env(safe-area-inset-bottom))!important}
  #page-profile .prof-panel,#page-profile .emblem-toolbar,#page-profile .conn-card{min-width:0;max-width:100%}
  #page-profile .emblem-preview{min-width:0!important}
  #page-profile .prof-save-btn{width:100%;justify-content:center}

  #page-consumo > div:first-of-type{padding:30px 16px calc(112px + env(safe-area-inset-bottom))!important;max-width:100%!important;overflow-x:hidden}
  #page-consumo > div:first-of-type > div:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #page-consumo .ccard{min-width:0;padding:16px!important}
  #page-consumo .ccard .cc-num{font-size:30px!important}
  #page-consumo > div:first-of-type > div:last-child{align-items:flex-start!important}

  .table-wrap,[class*="table-wrap"]{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}

  #modal-clip-editor{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #modal-clip-editor .cs-shell{min-height:100dvh!important;border-radius:0!important}
  #modal-clip-editor .cs-topbar{min-height:64px;height:auto!important;padding:10px 14px!important}
  #modal-clip-editor .cs-stage,#modal-clip-editor .cs-sidebar{padding:14px!important}
  #modal-clip-editor .cs-player{max-height:58dvh!important}
  #modal-clip-editor .cs-timeline-actions{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important}
  #modal-clip-editor .cs-source,#modal-clip-editor .cs-primary{grid-column:1/-1;width:100%;min-width:0!important;min-height:44px}
  #modal-clip-editor .cs-tabs{gap:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #modal-clip-editor .cs-tab{min-width:82px;flex:1 0 auto}
  #modal-clip-editor .cs-range::-webkit-slider-thumb{width:20px!important}
  #modal-clip-editor .cs-range::-moz-range-thumb{width:20px!important}
}

@media (max-width:540px){
  body > main > header a[onclick*="navigateTo('planos')"]{display:none!important}
  body > main > header #page-title{max-width:76px}
  #page-templates > div:first-child > div:first-child{align-items:flex-start!important;flex-direction:column!important}
  #page-templates > div:first-child > div:first-child > button{width:100%!important;justify-content:center!important}
  #dashtab-opcoes #platform-selector{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashtab-opcoes #platform-selector button{min-height:44px;padding:8px!important;font-size:11px!important}
  #page-affiliates #app-affiliate-phone{width:auto!important;min-width:0!important;flex:1 1 0!important}
  #page-affiliates #aff-state-apply > div{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
  #page-affiliates #aff-state-apply > div > div:first-child{display:none!important}
  #page-affiliates #aff-state-apply > div > div:last-child{width:100%!important;min-width:0!important;padding:32px 16px calc(112px + env(safe-area-inset-bottom))!important;border-left:0!important}
  #page-affiliates #app-affiliate-form{width:100%!important;min-width:0!important}
  #page-profile [style*="align-items:center"][style*="gap:20px"]{align-items:flex-start!important;gap:14px!important}
  #page-profile #prof-avatar-circle{width:62px!important;height:62px!important}
  #page-consumo > div:first-of-type > div:first-child > div:first-child{align-items:flex-start!important;flex-direction:column;gap:6px!important}
  #page-consumo .ccard .cc-label{line-height:1.35}
}

@media (max-width:380px){
  body > main > header{padding-left:10px!important;padding-right:10px!important}
  body > main > header #page-title{display:none!important}
  #page-consumo > div:first-of-type > div:nth-child(2){grid-template-columns:1fr!important}
  #page-consumo .ccard{min-height:156px}
}

@media (hover:none) and (pointer:coarse){
  button:hover,a:hover,[role="button"]:hover{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}



