/* v12.1.2 — compact expanding header actions */
.toolbar .header-action{
  --header-action-size:40px;
  --header-action-expanded:138px;
  position:relative;
  box-sizing:border-box;
  display:inline-flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  width:var(--header-action-size);
  min-width:var(--header-action-size);
  max-width:var(--header-action-size);
  min-height:40px;
  padding:0!important;
  overflow:hidden;
  white-space:nowrap;
  flex:0 0 var(--header-action-size)!important;
  font-size:0!important;
  color:transparent!important;
  transition:max-width .3s cubic-bezier(.2,.8,.2,1),flex-basis .3s cubic-bezier(.2,.8,.2,1),border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.toolbar .header-action::before{
  content:attr(data-header-icon);
  flex:0 0 var(--header-action-size);
  width:var(--header-action-size);
  min-width:var(--header-action-size);
  height:38px;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  color:var(--ink)!important;
  font:600 17px/1 Georgia,serif;
  letter-spacing:0;
  opacity:.94;
  transform:translateX(0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,color .2s ease;
}
.toolbar .header-action::after{
  content:attr(data-header-label);
  display:block;
  min-width:0;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transform:translateX(-8px);
  color:var(--ink)!important;
  font:600 11px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.015em;
  transition:max-width .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1),margin .3s ease;
}
.toolbar .header-action:hover,
.toolbar .header-action:focus-visible,
.toolbar .header-action.header-action-open{
  max-width:var(--header-action-expanded);
  flex-basis:var(--header-action-expanded)!important;
  border-color:color-mix(in srgb,var(--gold) 40%,var(--line));
  background:rgba(210,177,116,.075);
  box-shadow:0 9px 24px rgba(0,0,0,.20);
}
.toolbar .header-action:hover::before,
.toolbar .header-action:focus-visible::before,
.toolbar .header-action.header-action-open::before{
  transform:translateX(-2px) scale(.94);
  opacity:.72;
  color:var(--gold-2)!important;
}
.toolbar .header-action:hover::after,
.toolbar .header-action:focus-visible::after,
.toolbar .header-action.header-action-open::after{
  max-width:calc(var(--header-action-expanded) - var(--header-action-size) - 12px);
  margin-right:12px;
  opacity:1;
  transform:translateX(0);
}
.toolbar{align-items:center;gap:5px}
.toolbar .header-action.audio-live::after{position:static;width:auto;height:auto;border-radius:0;background:none;box-shadow:none}
.toolbar .header-action.audio-live::before{animation:audioHeaderPulse 2.1s ease-in-out infinite}
@keyframes audioHeaderPulse{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 13px var(--gold)}}
@media (min-width:761px) and (max-width:1120px){
  .toolbar .header-action{--header-action-size:36px;min-height:36px}
  .toolbar .header-action::before{height:34px;font-size:15px}
  .toolbar{gap:4px}
}
@media(max-width:760px){
  .toolbar .header-action,
  body.mobile-layout .toolbar .header-action{
    --header-action-size:42px;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    flex:1 1 auto!important;
    min-height:44px;
    justify-content:flex-start;
  }
  .toolbar .header-action::before{height:42px;font-size:17px}
  .toolbar .header-action::after{
    max-width:none!important;
    margin-right:12px;
    opacity:1;
    transform:none;
    font-size:13px;
  }
}