/* GIRUZIN 033 V431 — camada global de responsividade */
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100vw;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,picture{max-width:100%;height:auto}
iframe{max-width:100%;width:100%}
pre,code,.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
input,textarea,select,button{max-width:100%;font:inherit}
.container,.shell,.wrap,.v21-wrap,.g1-wrap,.lab-shell,.chat-wrap{max-width:100%;margin-left:auto;margin-right:auto}

@media (max-width: 900px){
  .hero,.chat-grid,.dashboard-grid,.tools-grid,.news-grid,.match-grid,.features-grid{grid-template-columns:1fr!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v21-top-inner,.topbar,.section-head,.section-header,.actions,.footer{flex-wrap:wrap}
  .v21-nav{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .v21-nav a{flex:0 0 auto}
  .hero-art{max-width:100%;min-width:0}
  .card,.panel,.section-content,.lab-panel,.g1-card,.v21-card{min-width:0}
  .row,.control{min-width:0}
}

@media (max-width: 640px){
  body{font-size:16px}
  .container,.shell,.wrap,.v21-wrap,.g1-wrap,.lab-shell,.chat-wrap{width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .grid{grid-template-columns:1fr!important}
  .hero{padding-left:12px!important;padding-right:12px!important}
  .section,.page-hero{padding-left:12px!important;padding-right:12px!important}
  .card,.panel,.g1-card,.v21-card,.lab-card{max-width:100%;overflow-wrap:anywhere}
  .actions,.top-actions,.composer{width:100%;flex-wrap:wrap}
  .btn,.icon-btn,.v21-btn,.g1-btn,.lab-btn{min-height:44px}
  input:not([type="checkbox"]):not([type="radio"]),textarea,select{width:100%;min-height:44px}
  .composer textarea{flex:1 1 100%;min-width:0}
  .composer .send{flex:1 1 auto;min-height:44px}
  .chat-head{padding:18px!important;border-radius:18px!important}
  .chat-head h1{font-size:clamp(25px,9vw,36px)!important}
  .chat-grid{gap:12px!important}
  .chat-panel{min-height:calc(100dvh - 250px)!important}
  .messages{min-height:300px!important;max-height:55dvh!important;padding:12px!important}
  .bubble-wrap{max-width:88%!important}
  .online-list{max-height:150px!important}
  .footer{gap:12px}
  .hero h1,.page-hero h1{overflow-wrap:anywhere}
  table{font-size:14px}
}

@media (max-width: 390px){
  .container,.shell,.wrap,.v21-wrap,.g1-wrap,.lab-shell,.chat-wrap{padding-left:9px!important;padding-right:9px!important}
  .card,.panel,.g1-card,.v21-card,.lab-card{border-radius:14px!important}
  .btn,.icon-btn,.v21-btn,.g1-btn,.lab-btn{padding-left:10px!important;padding-right:10px!important}
  .bubble-wrap{max-width:92%!important}
}

@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto!important}
  .hero-art{height:min(240px,60vh)!important}
  .messages{max-height:52vh!important}
}