/* A largura do menu acompanha os grupos realmente visíveis. O limite da
   viewport vira rolagem interna somente quando não existe espaço físico. */
@media (min-width:781px) {
  #stage .unified-client-actions.mainbar:not(.mainbar-collapsed) {
    width:var(--mainbar-required-width,fit-content)!important;
    min-width:0!important;
    /* 100% here was relative to the narrow header anchor, so the visual
       background stopped before Support/Vote even with free viewport space. */
    max-width:var(--mainbar-available-width,calc(100vw - 8px))!important;
    box-sizing:border-box!important;
    background-size:100% 100%!important;
    background-color:#111b18!important;
    background-repeat:no-repeat!important;
  }

  #stage .unified-client-actions.mainbar:not(.mainbar-collapsed)>.mainbar-buttons {
    width:max-content!important;
    max-width:none!important;
    flex:0 0 auto!important;
    isolation:isolate!important;
  }

  /* O PNG historico da barra possui uma cauda transparente. O backdrop fica
     preso ao conteudo real dos botoes, portanto tambem cobre Suporte e Votar
     quando esses grupos ultrapassam a largura visual original da imagem. */
  #stage .unified-client-actions.mainbar:not(.mainbar-collapsed)>.mainbar-buttons::before {
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    inset:0 -5px!important;
    display:block!important;
    border:1px solid #75612f!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,#1b2926f5 0%,#111b19fa 48%,#090f0efa 100%)!important;
    box-shadow:inset 0 1px 0 #f5d56c18,0 4px 12px #0009!important;
    pointer-events:none!important;
  }

  #stage .unified-client-actions.mainbar:not(.mainbar-collapsed)>.mainbar-buttons>* {
    position:relative;
    z-index:1;
  }

  #stage .unified-client-actions.mainbar.mainbar-overflowing:not(.mainbar-collapsed) {
    overflow:hidden!important;
  }

  #stage .unified-client-actions.mainbar.mainbar-overflowing:not(.mainbar-collapsed)>.mainbar-buttons {
    max-width:calc(var(--mainbar-available-width,100vw) - 10px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scrollbar-color:#b7953a #101916;
    scrollbar-width:thin;
  }

  #stage .unified-client-actions.mainbar.mainbar-overflowing>.mainbar-buttons::-webkit-scrollbar {height:4px}
  #stage .unified-client-actions.mainbar.mainbar-overflowing>.mainbar-buttons::-webkit-scrollbar-track {background:#101916}
  #stage .unified-client-actions.mainbar.mainbar-overflowing>.mainbar-buttons::-webkit-scrollbar-thumb {border-radius:999px;background:#b7953a}
}

#stage #mainbar-buff-tray {
  width:max-content;
  min-width:max-content;
  max-width:calc(100vw - 8px);
  flex-wrap:nowrap;
  box-sizing:border-box;
}

.combat-vocation-controls {
  margin:6px 10px 10px;
  padding:8px;
  border:1px solid #315c5b;
  border-radius:9px;
  background:linear-gradient(145deg,#10272a,#09191d);
  box-shadow:inset 0 1px 0 #78d6c61c;
}
.combat-vocation-purchase {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:end}
.combat-vocation-purchase label {display:grid;gap:4px;min-width:0;color:#8ab9b4;font-size:7px;font-weight:900;letter-spacing:1px}
.combat-vocation-purchase select {width:100%;height:31px;border:1px solid #356b68;border-radius:6px;background:#0a1b20;color:#e8f5f2;font-size:8px;font-weight:800;padding:0 7px}
#activate-combat-vocation {min-width:160px;height:31px;padding:0 10px;border:1px solid #d0a334;border-radius:7px;background:linear-gradient(#9c6a08,#654100);color:#fff4bf;font-size:8px;font-weight:950;letter-spacing:.35px;cursor:pointer;box-shadow:inset 0 1px 0 #fff3a844}
#activate-combat-vocation:disabled {cursor:not-allowed;filter:grayscale(.45);opacity:.56}
#combat-vocation-status {display:block;margin-top:7px;color:#72e0c2;font-size:8px;font-weight:850}
.combat-vocation-policy {display:block;margin-top:3px;color:#7e9d9a;font-size:6px;line-height:1.45}
#mainbar-buff-tray .mainbar-combat-vocation {border-color:#c89b38!important;background:linear-gradient(145deg,#2b2211dd,#0b191bdd)!important}
#mainbar-buff-tray .combat-vocation-caption {display:none!important}

@media (max-width:560px) {
  .combat-vocation-purchase {grid-template-columns:1fr}
  #activate-combat-vocation {width:100%;min-width:0}
}