* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #050508;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#shell {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; width: 100%;
}
.top { width: 100%; display: flex; justify-content: flex-end; }
.badge {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #9a9aa5; border: 1px solid #26262e; border-radius: 999px; padding: 4px 10px;
}
.hero { display: flex; flex-direction: column; align-items: center; margin-top: 4vh; }
.orb {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  display: grid; place-items: center;
}
.orb-img { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; }
.ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #ff3d9a, #a64dff, #3b82ff, #ff3d9a);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 14px rgba(255,61,154,.45));
  animation: spin 9s linear infinite;
}
.ring2 { inset: -10px; opacity: .35; animation-duration: 14s; animation-direction: reverse; }
.orb.listening .ring { animation-duration: 2.2s; filter: drop-shadow(0 0 22px rgba(255,61,154,.8)); }
.orb.speaking .ring { animation-duration: 1.1s; }
.orb.connecting .ring { animation-duration: 3s; opacity: .7; }
.orb.error .ring { background: conic-gradient(from 210deg, #ff8a3d, #ff3d5e, #ff8a3d); }
@keyframes spin { to { transform: rotate(360deg); } }
h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; margin-top: 18px; }
.tag { color: #c9c9d2; font-size: 15px; margin-top: 2px; }
.tagline {
  margin-top: 10px; font-size: 10.5px; letter-spacing: .3em; color: #7c7c88;
  background: linear-gradient(90deg, #ff3d9a, #3b82ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.status { margin-top: 16px; font-size: 14px; color: #9a9aa5; min-height: 20px; }
.status.hot { color: #ffb1d4; }
.transcript {
  width: 100%; flex: 1; margin-top: 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px;
}
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.msg.jeff { align-self: flex-start; background: #17171f; border: 1px solid #26262e; border-bottom-left-radius: 4px; }
.msg.you { align-self: flex-end; background: linear-gradient(135deg, #3b1e4d, #1e2a52); border: 1px solid #34345a; border-bottom-right-radius: 4px; color: #e8e8f2; }
.msg.sys { align-self: center; background: none; border: none; color: #7c7c88; font-size: 12.5px; text-align: center; }
.msg .who { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7c7c88; margin-bottom: 3px; }
.fallback { width: 100%; margin-top: 14px; }
.fallback.hidden { display: none; }
.fallback-note { color: #c9a86a; font-size: 13.5px; margin-bottom: 10px; text-align: center; }
#textForm { display: flex; gap: 8px; }
#textInput {
  flex: 1; background: #17171f; border: 1px solid #26262e; border-radius: 12px;
  color: #f5f5f7; padding: 12px 14px; font-size: 15px; outline: none;
}
#textInput:focus { border-color: #a64dff; }
#textForm button {
  background: linear-gradient(135deg, #ff3d9a, #3b82ff); color: #fff; border: none;
  border-radius: 12px; padding: 0 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.foot { margin-top: 12px; font-size: 11px; color: #55555f; }