:root{
  --chat-bg: rgba(20, 28, 50, 0.90);
  --chat-border: rgba(0, 170, 255, 0.35);
  --chat-text: #e9f2ff;
  --chat-muted: rgba(233, 242, 255, 0.70);
}

/* Launcher bottom-left */
#chat-italia-launcher{
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,170,255,0.95), rgba(0,120,220,0.95));
  box-shadow: 0 0 18px rgba(0,170,255,0.45), 0 0 30px rgba(0,0,0,0.45);
  display: grid;
  place-items: center;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 9999;
  user-select: none;
}

#chat-italia{
  position: fixed;
  left: 20px;
  bottom: 78px;
  width: 340px;
  height: 420px;
  background: var(--chat-bg);
  color: var(--chat-text);
  border: 1px solid var(--chat-border);
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(0,0,0,0.65);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(3px);
  user-select: none;
}
@media (max-width:768px){

  #chat-italia{

    width: 80vw !important;

    height: 42vh !important;

    left: 25px !important;

    bottom: 65px !important;

    border-radius: 14px !important;

  }

}
#chat-italia.closed{ display:none; }
#chat-italia.big{ width:480px; height:560px; }

#chat-italia-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-bottom: 1px solid rgba(0,170,255,0.22);
  background: rgba(0,0,0,0.18);
  cursor: grab;
}
#chat-italia.dragging #chat-italia-header{ cursor: grabbing; }

#chat-italia-header .left{ display:flex; flex-direction:column; gap:2px; }
#chat-italia-header .badge{ font-weight:900; }
#chat-italia-header .room{ font-family: monospace; font-size:12px; color: var(--chat-muted); }

.icon-btn{
  border:none;
  background: rgba(0,170,255,0.15);
  color: var(--chat-text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:800;
}
.icon-btn:hover{ background: rgba(0,170,255,0.26); }
.icon-btn.danger{ background: rgba(192,57,43,0.25); }
.icon-btn.danger:hover{ background: rgba(192,57,43,0.40); }

#chat-italia-tools{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-bottom: 1px solid rgba(0,170,255,0.18);
  background: rgba(0,0,0,0.10);
}
.tool{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--chat-muted);
}
.tool input[type="range"]{ width:110px; }
.tool input[type="checkbox"]{ transform: scale(1.1); }

.tool-btn{
  margin-left:auto;
  border:none;
  background: rgba(0,170,255,0.15);
  color: var(--chat-text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:800;
}
.tool-btn:hover{ background: rgba(0,170,255,0.26); }
.tool-btn.active{ outline: 2px solid rgba(255,255,255,0.25); }

#chat-italia-body{ flex:1; padding:10px; overflow:hidden; }
#chat-italia-messages{ height:100%; overflow-y:auto; padding-right:4px; }

.chat-msg{ margin:8px 0; display:flex; flex-direction:column; gap:3px; user-select:text; }
.chat-meta{ font-size:11px; color: var(--chat-muted); display:flex; gap:8px; }
.chat-meta .nick{ font-weight:800; color:#fff; }

.chat-bubble{
  background: rgba(13, 28, 58, 0.75);
  border: 1px solid rgba(0, 170, 255, 0.18);
  border-radius: 12px;
  padding: 8px 10px;
  line-height: 1.25;
  font-size: 13px;
  word-break: break-word;
}
.chat-msg.me .chat-bubble{
  background: rgba(34, 204, 136, 0.16);
  border-color: rgba(34, 204, 136, 0.35);
}

#chat-italia-form{
  display:flex;
  gap:8px;
  padding:10px;
  border-top: 1px solid rgba(0,170,255,0.18);
  background: rgba(0,0,0,0.12);
}
#chat-italia-input{
  flex:1;
  border-radius:12px;
  border:1px solid rgba(0,170,255,0.25);
  background: rgba(17,34,68,0.75);
  color: var(--chat-text);
  padding:10px;
  outline:none;
  user-select:text;
}
#chat-italia-send{
  border:none;
  border-radius:12px;
  background: rgba(0,170,255,0.90);
  color:#fff;
  font-weight:900;
  padding:0 14px;
  cursor:pointer;
}

#chat-italia-resize-handle{
  position:absolute;
  right:0;
  bottom:0;
  width:22px;
  height:22px;
  cursor:nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, rgba(0,170,255,0.35) 50%),
    linear-gradient(135deg, transparent 65%, rgba(0,170,255,0.20) 65%);
  opacity:0.9;
}