/* ==== App shell ==== */
.chat-app{
  height:calc(100vh - 65px);
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:2;
}

/* ==== Login screen ==== */
.login-screen{
  flex:1; display:flex; align-items:center; justify-content:center; padding:6vh 6vw;
  background:
    radial-gradient(ellipse 60% 60% at 50% 20%, rgba(179,36,27,0.25), transparent 70%),
    var(--void);
}
.login-card{
  width:100%; max-width:380px; border:1px solid rgba(201,162,75,0.2);
  background:linear-gradient(180deg, rgba(21,13,8,0.85), rgba(11,7,5,0.85));
  padding:2.6rem 2.2rem; text-align:center;
}
.login-card .portal.small{margin-bottom:1.4rem;}
.login-card h1{
  font-family:'Cinzel Decorative',serif; font-size:1.7rem; font-weight:900;
  background:linear-gradient(180deg,var(--gold),var(--fire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:0.4rem;
}
.login-card .desc{color:var(--smoke); font-size:0.9rem; font-style:italic; margin-bottom:2rem;}
.field{text-align:left; margin-bottom:1.2rem;}
.field label{
  display:block; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem;
}
.field input{
  width:100%; background:rgba(0,0,0,0.4); border:1px solid rgba(201,162,75,0.25);
  color:var(--parch); padding:0.8rem 1rem; font-family:'Crimson Text',serif; font-size:1rem;
  outline:none; transition:border-color .3s;
}
.field input:focus{border-color:var(--fire);}
.field .hint{font-size:0.75rem; color:var(--smoke); margin-top:0.4rem; font-style:italic;}
.login-card .btn{width:100%; margin-top:0.6rem;}
.login-error{
  margin-top:1.2rem; padding:0.8rem 1rem; border:1px solid rgba(179,36,27,0.5);
  background:rgba(179,36,27,0.1); color:#ff9a8f; font-size:0.85rem; text-align:left; display:none;
}
.login-error.show{display:block;}
.login-status{margin-top:1rem; font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--smoke); display:none;}
.login-status.show{display:block;}

/* ==== Chat layout ==== */
.chat-wrap{flex:1; display:none; overflow:hidden; min-height:0; flex-direction:column;}
.chat-wrap.show{display:flex;}

.chat-body{flex:1; display:flex; overflow:hidden; min-height:0; position:relative;}

.sidebar{
  width:220px; flex-shrink:0; background:rgba(11,7,5,0.9);
  border-right:1px solid rgba(201,162,75,0.15);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; transition:width .25s ease, opacity .2s ease;
}
.sidebar.right{border-right:none; border-left:1px solid rgba(201,162,75,0.15);}
.sidebar.collapsed{width:0; opacity:0; overflow:hidden; border:none;}

.sidebar h3{
  font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--smoke); padding:1rem 1rem 0.5rem;
}
.chan-list, .user-list, .pm-list{list-style:none;}
.chan-item, .pm-item{
  display:flex; align-items:center; gap:8px; padding:0.55rem 1rem; cursor:pointer;
  font-family:'Crimson Text',serif; font-size:0.95rem; color:var(--parch); opacity:0.75;
  border-left:2px solid transparent; transition:all .2s;
  min-width:0;
}
.chan-item:hover, .pm-item:hover{opacity:1; background:rgba(179,36,27,0.08);}
.chan-item.active, .pm-item.active{
  opacity:1; border-left-color:var(--fire); background:rgba(179,36,27,0.12); color:var(--fire);
}
.chan-item .item-label, .pm-item .item-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chan-item .unread{
  background:var(--ember); color:var(--parch); font-size:0.65rem;
  padding:1px 6px; border-radius:8px; font-family:'JetBrains Mono',monospace;
}
.item-close{
  flex-shrink:0; background:none; border:none; color:var(--smoke); font-size:0.85rem;
  cursor:pointer; padding:2px 4px; line-height:1; opacity:0.55; transition:opacity .2s, color .2s;
}
.item-close:hover{opacity:1; color:var(--fire);}
.add-channel{
  display:flex; gap:6px; padding:0.6rem 1rem; margin-top:0.4rem;
  min-width:0;
}
.add-channel input{
  flex:1 1 auto; min-width:0; background:rgba(0,0,0,0.4); border:1px solid rgba(201,162,75,0.2);
  color:var(--parch); padding:0.4rem 0.6rem; font-size:0.8rem; outline:none;
}
.add-channel button{
  flex-shrink:0;
  background:none; border:1px solid rgba(201,162,75,0.3); color:var(--gold);
  padding:0.4rem 0.7rem; cursor:pointer; font-family:'Cinzel',serif; font-size:0.75rem;
}
.add-channel button:hover{border-color:var(--gold); background:rgba(201,162,75,0.1);}

.user-item{
  display:flex; align-items:center; gap:8px; padding:0.4rem 1rem;
  font-family:'Crimson Text',serif; font-size:0.9rem;
}
.user-item .rank{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--gold); width:12px; text-align:center;
}
.user-group-label{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--smoke); padding:0.8rem 1rem 0.2rem;
}

/* ==== Center: messages ==== */
.chat-center{flex:1; display:flex; flex-direction:column; min-width:0;}

.chat-topbar{
  display:flex; align-items:center; gap:1rem; padding:0.8rem 1.2rem;
  border-bottom:1px solid rgba(201,162,75,0.15); background:rgba(11,7,5,0.7);
}
.sidebar-toggle{
  background:none; border:1px solid rgba(201,162,75,0.25); color:var(--gold);
  width:32px; height:32px; cursor:pointer; font-size:0.9rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.sidebar-toggle:hover{border-color:var(--gold); background:rgba(201,162,75,0.1);}
.chat-topbar .target-info{flex:1; min-width:0;}
.chat-topbar .target-name{
  font-family:'Cinzel',serif; font-size:1rem; color:var(--parch); letter-spacing:0.5px;
}
.chat-topbar .target-topic{
  font-size:0.8rem; color:var(--smoke); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.messages{
  flex:1; overflow-y:auto; padding:1rem 1.4rem; display:flex; flex-direction:column; gap:2px;
}
.msg-line{
  font-family:'Crimson Text',serif; font-size:0.98rem; line-height:1.55; color:#f2e8d5;
  padding:2px 6px; border-radius:2px;
}
.msg-line:hover{background:rgba(255,255,255,0.02);}
.msg-time{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:#a89f8f; margin-right:8px; opacity:0.85;
}
.msg-nick{font-weight:600; cursor:pointer;}
.nick-wrap{display:inline-flex; align-items:center; gap:3px;}
.nick-wrap::after{content:':'; color:#a89f8f; margin-right:6px;}
.nick-wrap.no-colon::after{content:''; margin-right:0;}
.nick-menu-trigger{
  background:none; border:none; color:var(--smoke); font-size:0.9rem; cursor:pointer;
  padding:0 2px; line-height:1; opacity:0.55; transition:opacity .2s, color .2s;
}
.nick-menu-trigger:hover{opacity:1; color:var(--fire);}
.is-away .msg-nick, .is-away .user-nick-name{opacity:0.65; font-style:italic;}
.msg-system{color:#b3aa9c; font-style:italic; font-size:0.88rem;}
.msg-notice{color:var(--gold); font-style:italic;}
.msg-error{color:#ff8a75;}
.msg-self .msg-text{color:#fbf3e1;}
.msg-action{font-style:italic; color:var(--gold);}
.msg-action .msg-nick{font-style:normal;}

.chat-input-row{
  position:relative;
  display:flex; gap:0.6rem; padding:0.8rem 1.2rem; border-top:1px solid rgba(201,162,75,0.15);
}
.nick-suggest{
  position:absolute; bottom:100%; left:1.2rem; right:1.2rem; margin-bottom:6px;
  background:linear-gradient(180deg, #1a1109, #0e0805);
  border:1px solid rgba(201,162,75,0.3);
  box-shadow:0 -8px 24px rgba(0,0,0,0.55);
  display:none; max-height:220px; overflow-y:auto; z-index:60;
}
.nick-suggest.show{display:block;}
.suggest-item{
  padding:0.55rem 1rem; font-family:'Crimson Text',serif; font-size:0.92rem; cursor:pointer;
}
.suggest-item:hover, .suggest-item.active{background:rgba(179,36,27,0.15);}

.emoji-toggle{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, rgba(179,36,27,0.18), rgba(232,100,28,0.18));
  border:1px solid rgba(201,162,75,0.3);
  color:var(--parch); font-size:1.25rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s;
}
.emoji-toggle:hover{
  border-color:var(--fire);
  background:linear-gradient(135deg, rgba(179,36,27,0.32), rgba(232,100,28,0.32));
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(232,100,28,0.35);
}
.emoji-toggle.active{
  background:linear-gradient(135deg,var(--ember),var(--fire));
  border-color:var(--fire);
  box-shadow:0 0 16px rgba(232,100,28,0.5);
}

.emoji-panel{
  position:absolute; bottom:100%; left:1.2rem; right:1.2rem; margin-bottom:6px;
  background:linear-gradient(180deg, #17100a, #0b0705);
  border:1px solid rgba(201,162,75,0.3);
  box-shadow:0 -10px 32px rgba(0,0,0,0.6);
  display:none; max-height:300px; overflow-y:auto; z-index:60;
  padding:1rem 1.1rem 0.6rem;
}
.emoji-panel.show{display:block;}
.emoji-cat-label{
  font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin:1.1rem 0 0.6rem; padding-bottom:0.4rem;
  border-bottom:1px solid rgba(201,162,75,0.15);
}
.emoji-cat-label:first-child{margin-top:0;}
.emoji-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:6px;}
.emoji-btn{
  background:rgba(255,255,255,0.03); border:1px solid rgba(201,162,75,0.1);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  font-size:1.35rem; cursor:pointer; border-radius:6px; line-height:1;
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, transform .1s;
}
.emoji-btn:hover{
  background:rgba(179,36,27,0.22); border-color:rgba(232,100,28,0.45);
  transform:translateY(-1px);
}
.chat-input-row input{
  flex:1; background:rgba(0,0,0,0.4); border:1px solid rgba(201,162,75,0.2);
  color:var(--parch); padding:0.7rem 1rem; font-family:'Crimson Text',serif; font-size:1rem; outline:none;
}
.chat-input-row input:focus{border-color:var(--fire);}
.chat-input-row button{
  background:linear-gradient(135deg,var(--ember),var(--fire)); border:none; color:var(--void);
  padding:0 1.4rem; font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer;
}

/* ==== Radio bar ==== */
.radio-bar{
  display:none; align-items:center; gap:1rem; padding:0.7rem 1.4rem;
  border-top:1px solid rgba(201,162,75,0.2); background:rgba(21,13,8,0.9); flex-shrink:0;
}
.radio-bar.show{display:flex;}
.radio-play{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg,var(--ember),var(--fire)); border:none;
  display:flex; align-items:center; justify-content:center; color:var(--void); font-size:0.9rem;
}
.radio-info{flex:1; min-width:0;}
.radio-label{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--fire); display:flex; align-items:center; gap:6px;
}
.radio-label .dot{width:5px; height:5px; border-radius:50%; background:var(--fire); box-shadow:0 0 6px var(--fire); animation:pulse 2s infinite;}
.radio-title{
  font-family:'Crimson Text',serif; font-style:italic; color:var(--parch); font-size:0.92rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ==== Context menu (right-click on a nick) ==== */
.nick-menu{
  position:fixed; z-index:200; min-width:190px;
  background:linear-gradient(180deg, #1a1109, #0e0805);
  border:1px solid rgba(201,162,75,0.3);
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  padding:6px 0; display:none;
}
.nick-menu.show{display:block;}
.nick-menu .menu-header{
  padding:0.5rem 1rem 0.4rem; font-family:'Cinzel',serif; font-size:0.8rem;
  border-bottom:1px solid rgba(201,162,75,0.15); margin-bottom:4px;
}
.nick-menu .menu-item{
  padding:0.5rem 1rem; font-family:'Crimson Text',serif; font-size:0.9rem; color:var(--parch);
  cursor:pointer; white-space:nowrap;
}
.nick-menu .menu-item:hover{background:rgba(179,36,27,0.15); color:var(--fire);}
.nick-menu .menu-item.danger:hover{color:#ff6a55; background:rgba(179,36,27,0.2);}
.nick-menu .menu-sep{height:1px; background:rgba(201,162,75,0.15); margin:5px 0;}

/* ==== Responsive ==== */
@media(max-width:900px){
  .sidebar{position:absolute; top:0; bottom:0; z-index:10; height:100%;}
  .sidebar.left{left:0;}
  .sidebar.right{right:0;}
  .sidebar:not(.collapsed){width:78vw; max-width:280px; box-shadow:0 0 30px rgba(0,0,0,0.6);}
}