/* Coarse device hints, dictation controls and a shared compact header rhythm. */
.mobile-tools-toggle { display: none; }
.device-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  margin-right: 2px;
  vertical-align: -1px;
  line-height: 1;
}
.device-indicator img { display: block; width: 14px; height: 14px; }
.u-item .device-indicator { vertical-align: middle; }
.u-item[data-username] {
  --online-user-color-visible: var(--online-user-color, #aaa);
}
:root[data-theme="light"] .u-item[data-username] {
  --online-user-color-visible: var(--online-user-color-light, #3d3740);
}
.chat-header .chat-header__right > :is(button, select),
.chat-header .theme-switcher__toggle {
  box-sizing: border-box;
  min-height: 30px;
  height: 30px;
  padding: 0 9px;
  font: 600 12px/1.2 Arial, sans-serif;
  white-space: nowrap;
}
.chat-header .chat-header__right > button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
#telegram-button { flex: 0 0 auto; border-radius: 8px; }
.chat-header__right { min-width: 0; flex-wrap: wrap; }
.chat-header { flex-wrap: wrap; }
.chat-header__left { min-width: 0; }
.chat-header .layout-toolbar { flex-wrap: wrap; }
.chat-dictation-compose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #b5b5bd);
  cursor: pointer;
}
.chat-dictation-compose:hover, .chat-dictation-compose:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.chat-dictation-compose.is-listening { background: #841a41; color: #fff; border-color: #ff6799; }
.chat-dictation-status { margin: 0; padding: 0 10px 5px; font: 12px/1.4 Arial, sans-serif; color: var(--text); overflow-wrap: anywhere; }
.chat-dictation-status[hidden] { display: none; }
#dictation-consent-dialog { max-width: 540px; }
#dictation-consent-dialog .rules-dialog__footer { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .chat-header__left { flex: 1 1 250px; overflow: visible; }
  .chat-header__right { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 768px) {
  .chat-header .chat-header__left { flex: 1 1 100%; }
  .chat-header .chat-header__right { width: 100%; flex: 1 1 100%; gap: 5px; justify-content: flex-start; }
  .chat-header .room-switcher { flex: 1 1 120px; min-width: 0; max-width: none; }
  .chat-header .chat-header__right > :is(button, select), .chat-header .theme-switcher__toggle { min-height: 34px; height: 34px; }
  .composer-field { flex-wrap: wrap; gap: 4px; padding: 3px 6px; }
  .composer-field #input { flex: 1 1 0; width: 0; min-width: 0; height: 38px; font-size: 16px; padding-right: 0; }
  .composer-field :is(.chat-dictation-compose, .chat-photo-compose, .emoji-toggle) { width: 32px; height: 38px; flex: 0 0 32px; margin: 0; }
  .composer-row { min-width: 0; padding: 5px; gap: 4px; }
  .composer-row > .btn { min-width: 48px; height: 44px; min-height: 44px; padding: 0 7px; }
  .tools-container { padding: 0 5px; }
  .mobile-tools-toggle { display: block; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; background: transparent; color: var(--muted, #b5b5bd); font: 12px/1.3 Arial, sans-serif; text-align: left; cursor: pointer; }
  .mobile-tools-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .tools-container:not(.is-expanded) > .tools-row { display: none; }
  .tools-container.is-expanded > .tools-row { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 5px; max-height: 120px; overflow-y: auto; }
  .tools-container .btn-tool { min-height: 36px; }
  #target-nickname.selected-target, .composer-field .reply-reference { order: -2; max-width: 45%; }
  .composer-field:has(#target-nickname:not(.hidden), .reply-reference:not(.hidden))::before { content: ""; flex: 1 0 100%; height: 0; order: -1; }
  #dictation-consent-dialog h2, #message-edit-dialog h2 { font-size: 20px; }
}
@media (max-width: 480px) {
  .chat-header .header-control-label, .chat-header .theme-switcher__text { display: none; }
  .chat-header :is(#open-security-dashboard, #open-session-security, .theme-switcher__toggle) { width: 34px; padding: 0; }
  .chat-header__right { align-items: center; }
  .chat-header .room-switcher { flex-basis: 100px; }
}