.app{
  min-height:100vh;
  height:100vh;
  display:grid;
  grid-template-rows:72px 1fr 58px;
}
.app.embed-mode{
  min-height:100%;
  height:100%;
}
.toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.05)),
    linear-gradient(180deg,var(--toolbar1),var(--toolbar2));
  border-bottom:1px solid rgba(255,255,255,.45);
  box-shadow:0 2px 18px rgba(45,27,110,.28);
  min-width:0;
}
.brand{
  color:#fff;
  font-weight:bold;
  letter-spacing:.2px;
  margin-right:8px;
  white-space:nowrap;
  flex:0 0 auto;
  text-shadow:0 1px 0 rgba(45,27,110,.5);
}
.fieldLabel{
  color:#f8f5ff;
  font-weight:bold;
  font-size:12px;
  white-space:nowrap;
  flex:0 0 auto;
  text-shadow:0 1px 0 rgba(45,27,110,.4);
}
.toolbar input{ height:32px; padding:0 10px; min-width:0; }
.toolbarSelect{
  height:32px;
  min-width:124px;
  padding:0 8px;
  margin-left:6px;
}
.toolbarToggle{ height:32px; min-width:78px; }
.toolbarToggle.is-off{ filter:saturate(.5); opacity:.8; }
#nickInput{ width:130px; }
#channelInput{ width:140px; }
.mobileConnectedOnly{ display:none; }

.radioBox{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    linear-gradient(135deg, rgba(255,95,162,.26), rgba(112,214,255,.22), rgba(255,255,255,.08)),
    linear-gradient(180deg,#6f56ca,#5b43b3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 4px 14px rgba(46,28,114,.22);
}
.radioBadge{ display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:24px; padding:0 9px; border-radius:999px; border:1px solid rgba(255,255,255,.45); background:linear-gradient(180deg,var(--radioPink),#cf2f77); color:#fff; font-size:11px; font-weight:bold; letter-spacing:.5px; text-shadow:0 1px 0 rgba(0,0,0,.25); box-shadow:0 0 10px rgba(255,95,162,.25); flex:0 0 auto; }
.radioMeta{ display:flex; flex-direction:column; min-width:0; line-height:1.12; }
.radioTitle{ color:#fff; font-weight:bold; font-size:12px; white-space:nowrap; text-shadow:0 1px 0 rgba(40,26,101,.35); }
.radioSub{ color:#efeaff; font-size:11px; opacity:.95; white-space:nowrap; }
.radioControls{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.radioBtn{ height:28px; padding:0 10px; }
.radioStatus{ color:#fff; font-size:11px; font-weight:bold; min-width:52px; text-align:center; text-shadow:0 1px 0 rgba(45,27,110,.45); }
#audioPlayer{ display:none; }

.main{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 240px;
  min-height:0;
  padding:12px;
  gap:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.leftPane,.rightPane,.centerPane{ min-height:0; min-width:0; }
.leftPane,.rightPane,.centerPane{
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.55)), linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.leftPane,.rightPane{ overflow:auto; }
.centerPane{
  position:relative;
  display:grid;
  grid-template-rows:42px minmax(0,1fr);
  min-height:0;
}
.centerPane::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(112,214,255,.18), transparent 24%),
    radial-gradient(circle at bottom left, rgba(255,95,162,.12), transparent 20%);
  pointer-events:none;
}
.app.nicklist-collapsed .main{
  grid-template-columns:220px minmax(0,1fr);
}
.app.nicklist-collapsed .rightPane{
  display:none;
}
.footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px 90px 90px 110px;
  gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), linear-gradient(180deg,var(--footer1),var(--footer2));
  border-top:1px solid rgba(255,255,255,.4);
  box-shadow:0 -3px 14px rgba(45,27,110,.18);
  min-width:0;
  align-items:end;
}
.footer input,.footer textarea,.footer button{ min-width:0; }
.messageComposer{ position:relative; min-width:0; }
#messageInput{
  width:100%;
  min-height:34px;
  max-height:160px;
  resize:none;
  overflow-y:auto;
  padding:8px 10px;
  line-height:1.35;
}