.controls button {
  transition: transform 160ms ease, box-shadow 250ms ease, background 250ms ease;
}

.controls {
  width: 100%;
  justify-items: center;
  align-items: center;
}
.controls[hidden]{display:none}

.controls > button {
  margin-inline: auto;
}

.rings {
  position: absolute;
  inset: -1px;
  border: 1px solid #b9f26455;
  border-radius: 50%;
  animation: breathe 2.2s ease-out infinite;
  pointer-events: none;
}

.controls button.connecting .rings {
  animation: pulse 750ms ease-out infinite;
}

.controls button.active {
  transform: scale(.94);
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .25; }
  50% { transform: scale(1.09); opacity: .8; }
}

@keyframes pulse {
  0% { transform: scale(.96); opacity: 1; }
  100% { transform: scale(1.22); opacity: 0; }
}

.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#101e1a;border:1px solid var(--line);border-radius:14px}
.mode-switch button{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-weight:700}
.mode-switch button.selected{background:#263b34;color:var(--green);box-shadow:inset 0 1px #fff1}
.text-panel{display:flex;flex-direction:column;gap:14px;min-height:260px;max-height:58dvh}
.text-panel[hidden]{display:none}
#textMessages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px}
.text-message{max-width:88%;padding:10px 12px;border-radius:14px;white-space:pre-wrap;font-size:14px}
.text-message.user{align-self:flex-end;background:var(--green);color:#102016}
.text-message.assistant{align-self:flex-start;background:#22352f;color:var(--ink)}
#textForm{display:grid;grid-template-columns:1fr auto;gap:8px;border-top:1px solid var(--line);padding-top:12px}
#textInput{resize:none;border:1px solid var(--line);border-radius:12px;background:#0d1a17;color:var(--ink);padding:10px;font:inherit}
#textForm button{border:0;border-radius:12px;background:var(--green);color:#102016;padding:0 16px;font-weight:800}