/* Chat estilo GTA (desktop): mensagens soltas no canto esquerdo, somem sozinhas.
   T ou Enter abrem a caixa para escrever; Esc ou enviar fecham. */
.chat-flag{display:inline-block;width:16px;height:11px;margin-right:6px;vertical-align:-1px;border-radius:2px;background-size:cover;box-shadow:0 0 0 1px #0007}
.chat-flag.flag-br{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23009c3b'/%3E%3Cpath d='M10 1.6 18.2 7 10 12.4 1.8 7z' fill='%23ffdf00'/%3E%3Ccircle cx='10' cy='7' r='3.3' fill='%23002776'/%3E%3Cpath d='M6.8 6.3q3.4-.9 6.4.9' stroke='%23fff' stroke-width='.6' fill='none'/%3E%3C/svg%3E")}
.chat-flag.flag-pt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%23d10a11'/%3E%3Cpath d='M10 2.4l1.2 3.3h3.5l-2.8 2.1 1.1 3.4L10 9.1l-2.9 2.1 1.1-3.4-2.8-2.1h3.5z' fill='%23fff'/%3E%3C/svg%3E")}

@keyframes gta-chat-fade{0%,82%{opacity:1}100%{opacity:0}}

@media (pointer:fine){
  body:not(.mobile-hud) #hud .chat-panel{
    left:22px;right:auto;top:30vh;bottom:auto!important;width:min(460px,calc(100vw - 44px));
    background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;
    pointer-events:none;transition:background .15s,border-color .15s
  }
  body:not(.mobile-hud) #hud .chat-panel #chat-content{display:block!important}
  body:not(.mobile-hud) .chat-panel .chat-title,
  body:not(.mobile-hud) .chat-panel .chat-tabs,
  body:not(.mobile-hud) .chat-panel .chat-size{display:none}
  /* Fica no layout (sem display:none) para o T/Enter conseguirem focar o campo. */
  body:not(.mobile-hud) .chat-panel #chat-form{height:0;padding:0;border:0;overflow:hidden;opacity:0;pointer-events:none}
  body:not(.mobile-hud) #hud .chat-panel #messages{
    height:auto!important;max-height:220px;padding:4px 2px;overflow:hidden;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px)
  }
  body:not(.mobile-hud) .chat-panel .chat-note{display:none}
  body:not(.mobile-hud) .chat-panel .message{
    margin:2px 0;font:600 14px/1.35 system-ui,sans-serif;
    text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000,0 0 6px #000c;
    animation:gta-chat-fade 12s linear forwards
  }
  body:not(.mobile-hud) .chat-panel .message button{font-size:14px;color:#fff;margin-right:4px;pointer-events:auto}
  body:not(.mobile-hud) .chat-panel .message button:after{content:":";color:#ddd}
  body:not(.mobile-hud) .chat-panel .message button.me{color:var(--gold)}
  body:not(.mobile-hud) .chat-panel .message>span{color:#f2f2f2}
  body:not(.mobile-hud) .chat-panel .message small{font-size:10px;color:#9fd8ff;text-transform:uppercase;margin-right:5px}
  body:not(.mobile-hud) .chat-panel .message small:before{content:"["}
  body:not(.mobile-hud) .chat-panel .message small:after{content:"]"}
  body:not(.mobile-hud) .chat-panel .message.superchat{text-shadow:none}

  /* Aberto para escrever */
  body.gta-chat-open:not(.mobile-hud) #hud .chat-panel{background:#0d0e0dc4;border-color:#ffffff22;pointer-events:auto}
  body.gta-chat-open:not(.mobile-hud) .chat-panel .chat-tabs{display:flex}
  body.gta-chat-open:not(.mobile-hud) .chat-panel #chat-form{height:auto;padding:8px 10px;border-top:1px solid #ffffff22;opacity:1;pointer-events:auto}
  body.gta-chat-open:not(.mobile-hud) #hud .chat-panel #messages{max-height:300px;overflow-y:auto;scrollbar-width:thin;-webkit-mask-image:none;mask-image:none}
  body.gta-chat-open:not(.mobile-hud) .chat-panel .message{animation:none;opacity:1}
  body.gta-chat-open:not(.mobile-hud) #chat-input{font-size:14px}
}

/* Cards do canto superior esquerdo removidos (local, zona de paz, corrida). */
#hud .location,.peace-zone-badge,.race-board{display:none!important}

/* Barra do topo enxuta: logo no centro; só online, conta (login), volume, tela cheia e opções. */
body.playing .telao-top,body.playing .apoio-top,body.playing #help{display:none!important}
@media (min-width:761px){
  .topbar .top-actions{position:relative;z-index:2;margin-left:auto}
}