@media (max-width: 1100px){
  .main{ grid-template-columns:180px minmax(0,1fr) 190px; }
  .radioTitle{ font-size:11px; }
  .radioSub{ font-size:10px; }
}
@media (max-width: 900px){
  .main{ grid-template-columns:170px minmax(0,1fr); }
  .rightPane{ display:none; }
}
@media (max-width: 680px){
  .app{ grid-template-rows:auto 1fr auto; height:100vh; min-height:100vh; }
  .toolbar{ flex-wrap:wrap; align-items:stretch; gap:8px; padding:8px; }
  .brand{ width:100%; margin-right:0; }
  .fieldLabel{ flex:0 0 auto; align-self:center; min-width:74px; font-size:12px; }
  #nickInput,#channelInput{ flex:1 1 calc(100% - 82px); width:auto; min-width:0; }
  .toolbar button, .toolbar select{ flex:1 1 calc(33.333% - 6px); min-width:0; }
  .radioBox{ margin-left:0; width:100%; justify-content:space-between; padding:8px 10px; }
  .radioMeta{ flex:1 1 auto; }
  .mobileConnectedOnly{ display:none; }
  .toolbar.mobile-connected .fieldLabel,
  .toolbar.mobile-connected #nickInput,
  .toolbar.mobile-connected #connectBtn,
  .toolbar.mobile-connected #disconnectBtn,
  .toolbar.mobile-connected #channelInput,
  .toolbar.mobile-connected #joinBtn{ display:none; }
  .toolbar.mobile-connected .mobileConnectedOnly{ display:block; }
  .toolbar.mobile-connected .mobileConnectedOnly.channelJoinWrap{
    flex:1 1 100%; display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:8px;
  }
  .toolbar.mobile-connected .mobileConnectedOnly input,
  .toolbar.mobile-connected .mobileConnectedOnly button{ width:100%; min-width:0; height:38px; }
  .main{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); padding:8px; gap:8px; }
  .leftPane{ display:none !important; }
  .centerPane{ border-radius:14px; grid-template-rows:auto 38px minmax(0,1fr); order:2; min-height:0; }
  .mobileChannelBar{ display:flex; }
  .chatHeader{ font-size:12px; padding:7px 10px; }
  .channelToggleBtn{ display:none !important; }
  .chatView{ padding:12px; font-size:14px; line-height:1.42; min-height:0; }
  .chatLine,.chatMessage{ margin:0 0 8px; }
  .chatAvatar{ width:52px; height:52px; flex-basis:52px; }
  .chatText{ font-size:14px; line-height:1.42; }
  .footer{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "message message"
      "emoji image"
      "send clear";
    gap:8px; padding:8px; align-items:stretch;
  }
  .messageComposer{ grid-area:message; width:100%; min-width:0; }
  #messageInput{ width:100%; min-height:44px; max-height:140px; font-size:16px; line-height:1.35; }
  #emojiBtn{ grid-area:emoji; height:40px; }
  #sendBtn{ grid-area:send; height:40px; }
  #clearBtn{ grid-area:clear; height:40px; }
  #uploadBtn{ grid-area:image; height:40px; }
}
@media (max-width: 480px){
  .toolbar{ gap:7px; }
  .fieldLabel{ min-width:68px; font-size:11px; }
  #nickInput,#channelInput{ flex:1 1 calc(100% - 75px); }
  .toolbar button, .toolbar select{ flex:1 1 calc(33.333% - 5px); }
  .toolbar.mobile-connected .mobileConnectedOnly.channelJoinWrap{ grid-template-columns:minmax(0,1fr) 88px; }
  .centerPane{ grid-template-rows:auto 36px minmax(0,1fr); }
  .mobileChannelBar{ padding:7px 8px; gap:5px; }
  .mobileChannelChip{ padding:6px 9px; font-size:11px; }
  .chatView{ font-size:13px; line-height:1.4; padding:10px 11px; }
  .chatText{ font-size:13px; line-height:1.4; }
  .footer{ gap:6px; padding:6px; }
  .footer input,.footer textarea,.footer button{ font-size:14px; }
  #sendBtn,#clearBtn,#uploadBtn,#emojiBtn{ height:38px; }
  #messageInput{ min-height:42px; font-size:16px; }
  .radioBtn{ padding:0 8px; }
  .radioStatus{ min-width:auto; }
}