/* Buddy Rooms 0.21.146 · control-pass corrective over owner-locked B/B/B.
   Scope: make speech CTA B real at every panel width and close ultra-narrow text clipping.
   Inherits 0.21.145 room geometry/chat density and 0.21.144 WAT/tongue arbitration unchanged. */

/* B must not silently collapse back to the old icon-only CTA above 680 px.
   Keep a stable text action in ORATOR AI wherever the speech toolbar is rendered. */
html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(152px,42%,168px)!important;
  gap:7px!important;
  align-items:stretch!important;
  width:100%!important;
}
html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  min-width:0!important;
  width:100%!important;
}
html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes>button{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  padding-inline:4px!important;
  font-size:10px!important;
  white-space:nowrap!important;
}
html[data-theme][data-buddy-room-view="active"] #aiSpeechRecordBtn.speech-record-button{
  box-sizing:border-box!important;
  display:inline-flex!important;
  width:100%!important;
  min-width:152px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 10px!important;
  gap:6px!important;
  font-size:12px!important;
  font-weight:800!important;
  place-items:unset!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
html[data-theme][data-buddy-room-view="active"] #aiSpeechRecordBtn.speech-record-button>span{
  display:inline-block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html[data-theme][data-buddy-room-view="active"] #aiSpeechRecordBtn.speech-record-button svg{
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
}

/* On desktop the docked AI panel itself is narrow even though the viewport is wide.
   Keep all four period labels readable instead of letting "Месяцы" lose its last pixel. */
@media(min-width:901px){
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes{gap:3px!important}
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes>button{
    padding-inline:1px!important;
    font-size:9px!important;
  }
}

/* 390-ish phones keep one row, but shave only the chrome – never the label. */
@media(max-width:420px){
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-toolbar{
    grid-template-columns:minmax(0,1fr) 148px!important;
    gap:5px!important;
  }
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes{gap:3px!important}
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes>button{
    padding-inline:1px!important;
    font-size:9px!important;
  }
  html[data-theme][data-buddy-room-view="active"] #aiSpeechRecordBtn.speech-record-button{
    min-width:148px!important;
    padding-inline:7px!important;
    font-size:11px!important;
  }
}

/* At 320-class widths two rows are the only honest layout: a full-width action plus
   four readable periods. This is the same B hierarchy, not a new visual choice. */
@media(max-width:350px){
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-toolbar{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:6px!important;
  }
  html[data-theme][data-buddy-room-view="active"] #aiSpeechRecordBtn.speech-record-button{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    font-size:12px!important;
  }
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes{
    grid-column:1!important;
    grid-row:2!important;
  }
  html[data-theme][data-buddy-room-view="active"] #aiAssistantPanel .speech-history-modes>button{
    font-size:9.5px!important;
    padding-inline:2px!important;
  }
}