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

body {
  background: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center;
  padding: 20px 0 10px;
}

.header h1 {
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #00d4ff;
}

.header .subtitle {
  font-size: 0.75rem;
  color: #555;
  letter-spacing: 2px;
  margin-top: 4px;
}

/* --- Orb --- */
.orb-container {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.orb {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #0e3d5e, #071a2b);
  border: 2px solid #00d4ff33;
  box-shadow: 0 0 40px #00d4ff22, inset 0 0 30px #00d4ff11;
  transition: all 0.4s ease;
  position: relative;
}

.orb::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid #00d4ff11;
}

.orb.listening {
  border-color: #00ff8855;
  box-shadow: 0 0 60px #00ff8833, inset 0 0 40px #00ff8811;
  animation: pulse-green 1.5s infinite;
}

.orb.processing {
  border-color: #ffd60055;
  box-shadow: 0 0 60px #ffd60033, inset 0 0 40px #ffd60011;
  animation: pulse-yellow 1s infinite;
}

.orb.speaking {
  border-color: #00d4ff88;
  box-shadow: 0 0 80px #00d4ff44, inset 0 0 50px #00d4ff22;
  animation: pulse-cyan 0.8s infinite;
}

@keyframes pulse-green {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pulse-yellow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes pulse-cyan {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.status-text {
  text-align: center;
  font-size: 0.8rem;
  color: #555;
  letter-spacing: 1px;
  margin-bottom: 10px;
  min-height: 20px;
}

/* --- Conversation --- */
.conversation {
  flex: 1;
  width: 100%;
  max-width: 600px;
  overflow-y: auto;
  padding: 0 20px;
  margin-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: #222 #0a0a0a;
}

.msg {
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 85%;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.user {
  background: #1a2a3a;
  margin-left: auto;
  border-bottom-right-radius: 4px;
  color: #b0d0e8;
}

.msg.pamela {
  background: #0f1f1f;
  border: 1px solid #00d4ff22;
  border-bottom-left-radius: 4px;
  color: #c0e8e8;
}

.msg .tier-badge {
  font-size: 0.6rem;
  color: #555;
  margin-top: 4px;
  display: block;
}

/* --- Controls --- */
.controls {
  width: 100%;
  max-width: 600px;
  padding: 10px 20px 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn-voice {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #00d4ff44;
  background: #111;
  color: #00d4ff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-voice:hover { background: #1a2a3a; }
.btn-voice.active {
  background: #002a2a;
  border-color: #00ff88;
  color: #00ff88;
  animation: pulse-green 1s infinite;
}

.text-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 28px;
  border: 1px solid #222;
  background: #111;
  color: #e0e0e0;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.text-input:focus { border-color: #00d4ff44; }

.text-input::placeholder { color: #444; }

.btn-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #00d4ff44;
  background: #111;
  color: #00d4ff;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.btn-send:hover { background: #1a2a3a; }

/* Mobile */
@media (max-width: 640px) {
  body { height: 100dvh; }
  .header { padding: 12px 0 6px; }
  .header h1 { font-size: 1.2rem; letter-spacing: 4px; }
  .header .subtitle { font-size: 0.65rem; }
  .orb-container { padding: 12px 0; }
  .orb { width: 90px; height: 90px; }
  .conversation { padding: 0 12px; }
  .msg { font-size: 0.85rem; padding: 8px 12px; }
  .controls { padding: 8px 10px calc(env(safe-area-inset-bottom, 8px) + 8px); gap: 8px; }
  .btn-voice { width: 48px; height: 48px; font-size: 1.2rem; }
  .text-input { padding: 10px 14px; font-size: 0.85rem; }
  .btn-send { width: 38px; height: 38px; }
}

/* PWA standalone mode */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0); }
  .controls { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}