/* Chat Window */
#chat-window{
  position:fixed;bottom:80px;left:30px;width:340px;height:480px;
  background:rgba(15,15,15,.97);backdrop-filter:blur(20px);
  border:1px solid #333;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.9);
  display:none;flex-direction:column;overflow:hidden;
  z-index:99998;color:#fff;font-family:'Rajdhani',sans-serif;
}
#chat-window.show{display:flex;}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #222;
  cursor:grab;flex-shrink:0;user-select:none;
}
.chat-header:active{cursor:grabbing;}
.chat-header-left{display:flex;align-items:center;gap:10px;}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#44ff88;animation:pulseDot 2s infinite;}
.chat-title{font-family:'Azionix','Orbitron',sans-serif;font-size:12px;letter-spacing:2px;color:#ddd;}
.chat-header-right{display:flex;align-items:center;gap:10px;}
.chat-status{font-size:10px;color:#666;letter-spacing:.5px;}
.chat-close{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-close:hover{background:#2a2a2a;color:#fff;}

.chat-nick-change{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-nick-change:hover{background:#2a2a2a;color:#4fc3f7;}

.chat-clear-all{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-clear-all:hover{background:#3a1a1a;color:#ff5252;}

.chat-owner-toggle{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-owner-toggle:hover{background:#2a2a1a;color:#ffd54f;}
.chat-owner-toggle.active{background:#3a2f00;color:#ffd54f;box-shadow:0 0 10px rgba(255,213,79,.3);}

/* ============ CHAT ROOM TABS ============ */
.chat-room-tabs{
  display:flex;
  gap:4px;
  padding:8px 12px 0;
  border-bottom:1px solid #1a1a1a;
  flex-shrink:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.chat-room-tabs::-webkit-scrollbar{display:none;}

.chat-room-tab{
  background:transparent;
  border:none;
  color:#666;
  font-family:'Rajdhani',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.3px;
  padding:6px 12px 8px;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  transition:all .15s;
  display:flex;
  align-items:center;
  gap:5px;
  position:relative;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.chat-room-tab:hover{color:#ccc;background:rgba(255,255,255,.03);}
.chat-room-tab.active{
  color:#fff;
  border-bottom-color:#4fc3f7;
  background:rgba(79,195,247,.08);
}
.chat-room-tab i{font-size:10px;opacity:.7;}

.chat-tab-badge{
  display:none;
  background:#ff4444;
  color:#fff;
  font-size:9px;
  font-weight:800;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.chat-tab-badge.show{display:inline-flex;}

.chat-nick-row{
  display:flex;gap:8px;padding:10px 14px;
  border-bottom:1px solid #1a1a1a;flex-shrink:0;
}
.chat-nick-row input{
  flex:1;background:#0d0d0d;border:1px solid #333;border-radius:8px;
  color:#fff;font-family:inherit;font-size:13px;padding:8px 12px;outline:none;
}
.chat-nick-row input:focus{border-color:#4fc3f7;}
.chat-nick-row button{
  background:#4fc3f7;border:none;border-radius:8px;color:#000;
  font-family:inherit;font-weight:700;font-size:12px;
  padding:0 16px;cursor:pointer;transition:.15s;
}
.chat-nick-row button:hover{background:#7ad4f9;}

.chat-messages{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.chat-messages::-webkit-scrollbar{width:5px;}
.chat-messages::-webkit-scrollbar-thumb{background:#333;border-radius:5px;}
.chat-empty{color:#444;text-align:center;font-size:12px;margin-top:30px;}

.chat-msg{
  max-width:85%;padding:8px 12px;border-radius:12px;
  font-size:13px;line-height:1.4;word-wrap:break-word;
  animation:chatPop .2s cubic-bezier(.2,.8,.2,1);
}
.chat-msg.mine{align-self:flex-end;background:#2b65f6;color:#fff;border-bottom-right-radius:4px;}
.chat-msg.other{align-self:flex-start;background:#1a1a1a;color:#e0e0e0;border:1px solid #2a2a2a;border-bottom-left-radius:4px;}
.chat-msg-meta{
  display:flex;align-items:center;gap:6px;
  font-size:10px;margin-bottom:3px;opacity:.75;
}
.chat-msg.other .chat-msg-meta{color:#4fc3f7;}
.chat-msg.mine .chat-msg-meta{color:#bcd4ff;justify-content:flex-end;}
@keyframes chatPop{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.chat-owner-tag{
  display:inline-flex;align-items:center;gap:3px;
  background:linear-gradient(90deg,#ffd54f,#ffab00);
  color:#000;font-size:9px;font-weight:800;
  padding:1px 6px;border-radius:8px;
  letter-spacing:.5px;text-transform:uppercase;
  margin-right:4px;
}
.chat-owner-tag i{font-size:8px;}

/* Own message with owner tag — gold border accent */
.chat-msg.mine.owner-msg{box-shadow:0 0 0 1px rgba(255,213,79,.5);}
.chat-msg.other.owner-msg{border-color:rgba(255,213,79,.4);}

.chat-msg{position:relative;}
.chat-delete-btn{
  position:absolute;top:6px;right:6px;
  background:rgba(180,30,30,.85);border:1px solid rgba(255,80,80,.4);
  color:#fff;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:6px;cursor:pointer;
  opacity:0;transition:.15s;pointer-events:none;
  display:flex;align-items:center;gap:4px;letter-spacing:.3px;
}
.chat-msg:hover .chat-delete-btn{opacity:1;pointer-events:auto;}
.chat-delete-btn:hover{background:#e53935;}
.chat-msg.mine .chat-delete-btn{right:auto;left:6px;}

.chat-input-row{
  display:flex;gap:8px;padding:10px 14px;
  border-top:1px solid #222;flex-shrink:0;background:#0a0a0a;
}
.chat-input-row input{
  flex:1;background:#0d0d0d;border:1px solid #333;border-radius:10px;
  color:#fff;font-family:inherit;font-size:13px;padding:9px 12px;outline:none;
}
.chat-input-row input:focus{border-color:#4fc3f7;}
.chat-input-row button{
  background:#4fc3f7;border:none;border-radius:10px;color:#000;
  width:40px;cursor:pointer;transition:.15s;
  display:flex;align-items:center;justify-content:center;
}
.chat-input-row button:hover{background:#7ad4f9;}
.chat-input-row button:disabled{opacity:.4;cursor:not-allowed;}

/* ============================================================
   Floating Timer — slim horizontal card
   ============================================================ */

#timer-widget{
  position:fixed;top:120px;right:40px;z-index:99998;
  background:#000;
  border:1px solid #1e2028;
  border-radius:20px;
  padding:16px 20px;
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  box-shadow:0 20px 50px rgba(0,0,0,.85);
  display:none;
  width:380px;
  user-select:none;
  align-items:center;
  gap:18px;
}
#timer-widget.show{display:flex;}

/* Left: ring */
#timer-widget .tm-left{
  flex-shrink:0;
  display:flex;
  align-items:center;
}
#timer-widget .tm-ring-wrap{
  position:relative;width:100px;height:100px;
}
#timer-widget .tm-ring{
  transform:rotate(-90deg);
  display:block;
}
#timer-widget .tm-ring circle{
  fill:none;
  stroke-width:8;
  stroke-linecap:round;
}
#timer-widget .tm-ring .tm-track{stroke:#1e2028;}
#timer-widget .tm-ring .tm-progress{
  stroke:#f5b544;
  transition:stroke-dashoffset .3s linear;
}
#timer-widget .tm-time{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
#timer-widget .tm-time-main{
  font-size:20px;font-weight:800;
  letter-spacing:.5px;line-height:1;
  font-variant-numeric:tabular-nums;
}
#timer-widget .tm-time-sub{
  font-size:9px;color:#8b93a1;
  font-weight:600;margin-top:4px;
  letter-spacing:.5px;
}

/* Right: header + controls + inputs */
#timer-widget .tm-right{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  min-width:0;
}

#timer-widget .tm-header{
  display:flex;flex-direction:column;align-items:flex-end;
  cursor:grab;
}
#timer-widget .tm-header:active{cursor:grabbing;}
#timer-widget .tm-label{
  font-size:11px;letter-spacing:2px;font-weight:800;
  text-transform:uppercase;color:#fff;
}
#timer-widget .tm-sub{
  font-size:11px;color:#8b93a1;font-weight:600;
  margin-top:2px;letter-spacing:.3px;
}

/* Controls */
#timer-widget .tm-controls{
  display:flex;gap:10px;
}
#timer-widget .tm-btn{
  width:38px;height:38px;border-radius:50%;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all .15s ease;
}
#timer-widget .tm-btn.cancel{
  background:#1e2028;color:#c7cdd6;
}
#timer-widget .tm-btn.cancel:hover{
  background:#2a2d38;color:#fff;transform:scale(1.08);
}
#timer-widget .tm-btn.toggle{
  background:#f5b544;color:#000;
  box-shadow:0 4px 12px rgba(245,181,68,.4);
}
#timer-widget .tm-btn.toggle:hover{
  background:#ffc55a;transform:scale(1.08);
  box-shadow:0 6px 16px rgba(245,181,68,.55);
}

/* Inputs */
#timer-widget .tm-inputs{
  display:flex;gap:6px;align-items:center;justify-content:flex-end;
}
#timer-widget .tm-field{
  display:flex;flex-direction:column;align-items:center;
}
#timer-widget .tm-field input{
  width:44px;text-align:center;
  background:#0a0b0f;border:1px solid #1e2028;border-radius:8px;
  color:#fff;font-family:'Rajdhani',sans-serif;
  font-size:15px;font-weight:700;padding:5px 0;outline:none;
  -moz-appearance:textfield;
}
#timer-widget .tm-field input::-webkit-outer-spin-button,
#timer-widget .tm-field input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
#timer-widget .tm-field input:focus{border-color:#f5b544;}
#timer-widget .tm-field label{
  font-size:8px;color:#666;letter-spacing:1px;
  text-transform:uppercase;margin-top:3px;
}
#timer-widget .tm-colon{
  font-size:15px;font-weight:700;color:#555;padding-bottom:14px;
}
#timer-widget.running .tm-inputs,
#timer-widget.paused  .tm-inputs{display:none;}