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

:root {
  --bg: #1a1a2e; --surface: #16213e; --peter-bg: #2d2d5e; --user-bg: #4a4aad;
  --text: #e0e0e0; --text-dim: #888; --border: #2a2a4a;
  --green: #4caf50; --yellow: #ffb300; --red: #e53935;
  --radius: 12px; --input-h: 44px; --safe-b: env(safe-area-inset-bottom, 0px);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Status dot */
.status-dot {
  position: fixed; top: 14px; right: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  z-index: 100; transition: background 0.3s;
}
.status-dot.connected    { background: var(--green); }
.status-dot.reconnecting { background: var(--yellow); animation: pulse 1s infinite; }
.status-dot.disconnected { background: var(--red); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Login */
.login-section { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px 24px; display: flex; flex-direction: column; gap: 20px;
}
.login-card h1 { font-size: 1.4rem; font-weight: 600; text-align: center; letter-spacing: 0.02em; }
#login-form { display: flex; flex-direction: column; gap: 12px; }
#login-form input, #login-form button {
  width: 100%; height: var(--input-h); border-radius: 8px; font-size: 1rem; border: none; outline: none;
}
#login-form input { background: var(--bg); color: var(--text); padding: 0 14px; border: 1px solid var(--border); }
#login-form input:focus { border-color: var(--user-bg); }
#login-form button { background: var(--user-bg); color: #fff; cursor: pointer; font-weight: 600; }
#login-form button:active { opacity: 0.85; }
.login-error { color: var(--red); font-size: 0.875rem; text-align: center; min-height: 1.2em; }

/* Chat layout */
.chat-section { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.messages {
  flex: 1; overflow-y: auto; padding: 16px 16px 8px;
  display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}

/* Message bubbles */
.message {
  max-width: 82%; padding: 10px 14px; border-radius: var(--radius);
  word-break: break-word; white-space: pre-wrap; font-size: 0.9375rem;
}
.message.peter { align-self: flex-start; background: var(--peter-bg); border-bottom-left-radius: 4px; }
.message.user  { align-self: flex-end;   background: var(--user-bg);  border-bottom-right-radius: 4px; }
.message code {
  background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px;
  font-family: "SF Mono", Consolas, monospace; font-size: 0.875em;
}
.message a      { color: #90caf9; text-decoration: underline; }
.message strong { font-weight: 700; }

/* Typing indicator */
.typing-indicator {
  align-self: flex-start; background: var(--peter-bg);
  border-radius: var(--radius); border-bottom-left-radius: 4px;
  padding: 12px 16px; display: flex; gap: 5px; margin: 0 16px 8px;
}
.typing-indicator span {
  width: 7px; height: 7px; background: var(--text-dim);
  border-radius: 50%; animation: bounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }

/* Input area */
.input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px; padding-bottom: calc(8px + var(--safe-b));
  background: var(--surface); border-top: 1px solid var(--border);
}
#message-input {
  flex: 1; min-height: var(--input-h); max-height: 140px;
  padding: 10px 14px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 22px;
  font-size: 1rem; font-family: inherit; line-height: 1.5;
  resize: none; outline: none; overflow-y: auto;
}
#message-input:focus    { border-color: var(--user-bg); }
#message-input:disabled { opacity: 0.5; }
#send-button {
  width: var(--input-h); height: var(--input-h); min-width: var(--input-h);
  background: var(--user-bg); border: none; border-radius: 50%; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#send-button svg      { width: 18px; height: 18px; }
#send-button:active   { opacity: 0.8; }
#send-button:disabled { opacity: 0.4; cursor: default; }

/* Toast */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #333; color: var(--text); padding: 10px 20px;
  border-radius: 20px; font-size: 0.875rem; z-index: 200;
  max-width: 90vw; text-align: center; pointer-events: none;
}

/* Chat header */
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-title { font-weight: 600; font-size: 1rem; }

/* Voice toggle button */
.voice-toggle-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.voice-toggle-btn.active { background: var(--user-bg); color: #fff; border-color: var(--user-bg); }
.voice-toggle-btn:active { opacity: 0.8; }

/* Push-to-talk button */
.ptt-btn {
  position: relative;
  width: 56px; height: 56px; min-width: 56px; border-radius: 50%; border: none;
  background: var(--user-bg); color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0; gap: 2px; transition: background 0.15s;
  touch-action: none; /* prevent scroll during PTT */
}
.ptt-btn:active, .ptt-btn.recording { background: var(--red); }
.ptt-btn.recording { box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.35); animation: ptt-pulse 1s infinite; }
@keyframes ptt-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.35); }
  50%       { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0.15); }
}
.ptt-timer { font-size: 0.6rem; line-height: 1; pointer-events: none; }

/* TTS speaking indicator */
.tts-indicator {
  align-self: flex-start; margin: 0 16px 4px;
  font-size: 0.8125rem; color: var(--text-dim); font-style: italic;
}

/* Tablet / desktop */
@media (min-width: 600px) {
  .messages   { padding: 24px; }
  .message    { max-width: 68%; }
  .input-area { padding: 12px 24px; padding-bottom: calc(12px + var(--safe-b)); }
}