talkie/public/style.css

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f0f13;
  color: #e8e8f0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen { display: none; width: 100%; max-width: 420px; padding: 24px; }
.screen.active { display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* JOIN */
.logo { font-size: 2.4rem; font-weight: 700; letter-spacing: -1px; }
.subtitle { color: #888; font-size: 0.9rem; }

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #2a2a3a;
  border-radius: 12px;
  background: #1a1a24;
  color: #e8e8f0;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
input:focus { border-color: #5b5ef4; }
input::placeholder { color: #555; }

#btn-join {
  padding: 14px;
  background: #5b5ef4;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
#btn-join:hover { background: #4749d4; }
#btn-join:active { transform: scale(0.98); }

/* TALKIE */
#talkie-screen.active {
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
  padding: 24px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

#room-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #5b5ef4;
  letter-spacing: 2px;
}

#btn-leave {
  padding: 8px 14px;
  background: transparent;
  color: #888;
  border: 1.5px solid #2a2a3a;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s, border-color 0.2s;
}
#btn-leave:hover { color: #e05252; border-color: #e05252; }

/* PEERS LIST */
#peers-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 0;
}

.peer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1a1a24;
  border-radius: 12px;
  border: 1.5px solid #2a2a3a;
  transition: border-color 0.2s;
}

.peer-item.talking {
  border-color: #22c55e;
  background: #0d1f14;
}

.peer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #2a2a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #5b5ef4;
  flex-shrink: 0;
}

.peer-item.talking .peer-avatar {
  background: #22c55e22;
  color: #22c55e;
}

.peer-name { font-size: 0.95rem; font-weight: 500; }

.talking-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: #22c55e;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s;
}
.peer-item.talking .talking-badge { opacity: 1; }

/* PTT */
.ptt-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  width: 100%;
}

#status-text {
  font-size: 0.85rem;
  color: #666;
  transition: color 0.2s;
}

#ptt-btn {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #1a1a24;
  border: 3px solid #2a2a3a;
  color: #888;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#ptt-btn svg { width: 44px; height: 44px; }
#ptt-btn span { font-size: 0.75rem; font-weight: 500; text-align: center; line-height: 1.3; }

#ptt-btn:hover { border-color: #5b5ef4; color: #5b5ef4; }

#ptt-btn.active {
  background: #22c55e18;
  border-color: #22c55e;
  color: #22c55e;
  transform: scale(1.05);
  box-shadow: 0 0 32px #22c55e44;
}

#ptt-btn.active span::before { content: 'Stai trasmettendo'; }
#ptt-btn:not(.active) span::before { content: 'Tieni premuto per parlare'; }
#ptt-btn span { font-size: 0; }
#ptt-btn span::before { font-size: 0.75rem; }

#btn-lock-mic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid #2a2a3a;
  border-radius: 24px;
  color: #888;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
#btn-lock-mic svg { width: 16px; height: 16px; flex-shrink: 0; }
#btn-lock-mic:hover { border-color: #5b5ef4; color: #5b5ef4; }
#btn-lock-mic.locked {
  background: #e05252;
  border-color: #e05252;
  color: white;
}
#btn-lock-mic.locked:hover { background: #c04040; border-color: #c04040; }