html,body{
  height:100%;
  margin:0;
  background:#000;
  color:#0f0;
  font-family:Tahoma,Verdana,Arial,sans-serif;
  font-size:13px;
}

*{
  box-sizing:border-box;
}

#app{
  height:100%;
  display:flex;
  flex-direction:column;
}

.toolbar,.inputbar{
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px;
  background:#d4d0c8;
  border-bottom:1px solid #8a867f;
  color:#000;
  flex-wrap:wrap;
  position:relative;
  z-index:20;
}

.inputbar{
  border-top:1px solid #8a867f;
  border-bottom:none;
  flex-wrap:nowrap;
}

.toolbar input,.inputbar input{
  background:#fff;
  border:1px solid #7f9db9;
  padding:4px 6px;
  height:24px;
}

.inline-group{
  display:flex;
  align-items:center;
  gap:5px;
  color:#000;
}

#serverInput{width:170px}
#portInput{width:60px}
#nickInput{width:100px}
#channelInput{width:110px}
#messageInput{flex:1}

button{
  height:26px;
  padding:0 10px;
  background:#d4d0c8;
  border:1px solid #404040;
  border-right-color:#fff;
  border-bottom-color:#fff;
  cursor:pointer;
}

button:hover{
  filter:brightness(.98);
}

button:active{
  border-right-color:#404040;
  border-bottom-color:#404040;
  border-left-color:#fff;
  border-top-color:#fff;
}

.status{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}

.status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
  transition:box-shadow .15s ease, background .15s ease;
}

.status-dot.on{
  background:#26c926;
  box-shadow:0 0 8px rgba(38,201,38,.85);
}

.status-dot.off{
  background:#9b1414;
  box-shadow:0 0 8px rgba(155,20,20,.75);
}

.tabs{
  display:flex;
  gap:2px;
  background:#bdb8ad;
  padding:4px 4px 0;
  border-bottom:1px solid #6d6962;
  min-height:30px;
  overflow:auto;
  position:relative;
  z-index:20;
}

.tab{
  display:flex;
  align-items:center;
  gap:6px;
  background:#d4d0c8;
  border:1px solid #6d6962;
  border-bottom:none;
  padding:4px 8px;
  white-space:nowrap;
  position:relative;
  flex:0 0 auto;
}

.tab:hover{
  background:#dbd6ce;
}

.tab.active{
  background:#000;
  color:#0f0;
}

.tab.has-unread{
  box-shadow:inset 0 -2px 0 #00ff99;
}

.tab-label{
  cursor:pointer;
  user-select:none;
}

.tab-close{
  height:18px;
  min-width:18px;
  padding:0 4px;
  line-height:16px;
  background:#c8c3ba;
  border:1px solid #6d6962;
  color:#000;
  cursor:pointer;
}

.tab-close:hover{
  background:#bcb7af;
}

.tab.active .tab-close{
  background:#111;
  color:#0f0;
  border-color:#2c8a2c;
}

.layout{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  min-height:0;
  overflow:hidden;
}

.log-wrap{
  min-height:0;
  overflow:hidden;
  position:relative;
  z-index:1;
}

.log{
  height:100%;
  overflow:auto;
  padding:8px 10px;
  background-image:url("/banner.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.line{
  white-space:pre-wrap;
  line-height:1.35;
}

.ts{color:#c0c0c0}
.msg-green{color:#00ff00}
.msg-cyan{color:#00ffff}
.msg-orange{color:#ff9900}
.msg-red{color:#ff4040}
.msg-purple{color:#cc66ff}
.msg-gray{color:#b0b0b0}

/* ?? ÒÂÎßÒ NICK (self) – ÎÏÐÀÂÅÍÎ */
.line.self{
  color:#00bfff;
  font-weight:bold;
  text-shadow:0 0 4px rgba(0,191,255,0.6);
}

.sidebars{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#d4d0c8;
  border-left:1px solid #6d6962;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}

.panel{
  display:flex;
  flex-direction:column;
  border-left:1px solid #8a867f;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.panel:first-child{
  border-left:none;
}

.panel-title{
  padding:5px 8px;
  background:#c6c1b8;
  color:#000;
  font-weight:bold;
  border-bottom:1px solid #8a867f;
  flex:0 0 auto;
}

.panel-body{
  flex:1 1 auto;
  overflow:auto;
  background:#fff;
  color:#000;
  min-height:0;
}

.panel-section{
  padding:5px 6px;
  background:#ece9e2;
  font-weight:bold;
  border-bottom:1px solid #d6d1c8;
}

.panel-item{
  padding:3px 6px;
  border-bottom:1px solid #efefef;
  user-select:none;
}

.panel-item.clickable,
.clickable{
  cursor:pointer;
}

.panel-item.selected{
  background:#0a246a;
  color:#fff;
}

.panel-item.orange{color:#b85a00}
.panel-item.cyan{color:#007f7f}
.panel-item.green{color:#007000}

.list-item{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.users{
  color:#666;
}

.row-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.grow{
  flex:1;
  min-width:0;
}

.mini-close{
  height:18px;
  min-width:18px;
  padding:0 4px;
  line-height:16px;
  background:#d4d0c8;
  border:1px solid #8a867f;
  color:#000;
  cursor:pointer;
}

.mini-close:hover{
  background:#c7c2b8;
}

.panel-item.selected .mini-close{
  background:#0a246a;
  color:#fff;
  border-color:#fff;
}

.nick-menu{
  position:absolute;
  z-index:9999;
  min-width:150px;
  background:#d4d0c8;
  border:1px solid #404040;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
  padding:2px;
}

.nick-menu.hidden{
  display:none;
}

.nick-menu-title{
  padding:6px 8px;
  background:#0a246a;
  color:#fff;
  font-weight:bold;
  border-bottom:1px solid #8a867f;
  margin-bottom:2px;
}

.nick-menu-item{
  display:block;
  width:100%;
  text-align:left;
  height:24px;
  padding:0 8px;
  border:1px solid transparent;
  background:#d4d0c8;
  color:#000;
  cursor:pointer;
}

.nick-menu-item:hover{
  background:#0a246a;
  color:#fff;
  border-color:#0a246a;
}

#nickList,
#channelList{
  overscroll-behavior:contain;
}

.inputbar,.toolbar,.tabs{
  flex:0 0 auto;
}

.brand{
  font-weight:bold;
  color:#000;
  padding-right:8px;
  white-space:nowrap;
}
.my-nick{
  color:#00bfff;
  font-weight:bold;
}

.panel-item.my-own-nick{
  color:#4aa3ff !important;
  font-weight:bold;
}




@media (max-width: 768px){
  html,body{
    height:100%;
    margin:0;
    overflow:hidden;
    font-size:14px;
  }

  #app{
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:6px;
    align-items:flex-start;
  }

  .brand{
    width:100%;
    padding-right:0;
    margin-bottom:2px;
  }

  .inline-group{
    display:flex;
    align-items:center;
    gap:4px;
    width:calc(50% - 2px);
    min-width:0;
  }

  .inline-group input{
    flex:1;
    min-width:0;
    width:auto !important;
  }

  .status{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  .tabs{
    min-height:34px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }

  .layout{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 42%;
    min-height:0;
    overflow:hidden;
  }

  .log-wrap{
    min-height:0;
    overflow:hidden;
    border-right:1px solid #6d6962;
  }

  .log{
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:8px;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
    background-position:center;
    background-size:cover;
  }

  .sidebars{
    display:block;
    min-width:0;
    min-height:0;
    height:100%;
    border-left:none;
    overflow:hidden;
    background:#d4d0c8;
  }

  .sidebars .panel:first-child{
    display:flex;
    flex-direction:column;
    height:100%;
    border-left:none;
    border-top:none;
    min-height:0;
    overflow:hidden;
  }

  .sidebars .panel:last-child{
    display:none;
  }

  .panel-title{
    padding:6px 8px;
    font-size:13px;
    flex:0 0 auto;
  }

  .panel-body{
    flex:1 1 auto;
    height:auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    min-height:0;
  }

  .panel-item{
    padding:6px 8px;
    font-size:13px;
  }

  .inputbar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  background:#d4d0c8;
  padding:6px;
  display:flex;
  gap:6px;
}
  #messageInput{
    flex:1 1 auto;
    min-width:0;
    width:auto !important;
    font-size:16px;
    height:36px;
  }

  #sendBtn{
    flex:0 0 auto;
    height:36px;
    min-width:64px;
  }

  .nick-menu{
    max-width:90vw;
  }
}