body { background: #f5f6f8; }
.phone { border: 0; border-radius: 1.25rem; }
.btn-round { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.btn-call { width: 72px; height: 72px; font-size: 1.7rem; }

.avatar {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: #fff; background: #adb5bd;
  transition: background .2s, box-shadow .2s;
}
.avatar[data-state="connecting"],
.avatar[data-state="initializing"] { background: #6c757d; animation: pulse 1.2s infinite; }
.avatar[data-state="listening"]    { background: #198754; }
.avatar[data-state="thinking"]     { background: #fd7e14; animation: pulse .8s infinite; }
.avatar[data-state="speaking"]     { background: #0d6efd; box-shadow: 0 0 0 10px rgba(13,110,253,.2), 0 0 0 20px rgba(13,110,253,.1); }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.25); } 100% { box-shadow: 0 0 0 18px rgba(0,0,0,0); } }

.log { height: 62vh; overflow-y: auto; background: #fafbfc; }
.bubble { max-width: 85%; padding: .45rem .7rem; border-radius: .8rem; margin-bottom: .45rem; font-size: .95rem; }
.bubble.user { background: #e8f0fe; margin-left: auto; border-bottom-right-radius: .2rem; }
.bubble.bot  { background: #fff; border: 1px solid #e3e6ea; border-bottom-left-radius: .2rem; }
.bubble.interim { opacity: .6; }
.bubble .who { font-size: .7rem; color: #888; }
.sys { text-align: center; font-size: .75rem; color: #888; margin: .4rem 0; }

.trace { height: 62vh; overflow-y: auto; background: #111418; color: #d6dde6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.trace .row-t { padding: .15rem 0; border-bottom: 1px solid #1d232a; white-space: pre-wrap; word-break: break-word; }
.trace .ts { color: #6c7a89; margin-right: .5rem; }
.trace .src { color: #6c7a89; margin-right: .4rem; }
.trace .step { color: #fff; font-weight: 600; }
.trace .warn .step { color: #ffc107; }
.trace .error .step, .trace .error { color: #ff6b6b; }
.trace .lat .step { color: #4dabf7; }