/* Voice call with OCKY (voice.js): the call bar above the message box. The call button itself is one of the
   message box's tool buttons and gets its look from styles.css (.tool.call). Radii follow the site's scale. */
.callbar {
  display: flex; align-items: center; gap: 8px; min-height: 34px; margin-bottom: 6px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--accent-line); border-radius: var(--radius, 12px); background: var(--accent-dim); font-size: 12px;
}
.callbar[hidden] { display: none; }
.call-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); }
.callbar[data-state="listening"] .call-dot { background: var(--ok, #12b76a); }
.callbar[data-state="listening"].talking .call-dot { box-shadow: 0 0 0 4px rgba(18, 183, 106, .25); }
.callbar[data-state="speaking"] .call-dot { background: var(--accent); animation: call-pulse 1s ease-in-out infinite; }
.callbar[data-state="working"] .call-dot { background: var(--warn, #f2b84b); animation: call-pulse 1.4s ease-in-out infinite; }
.callbar.muted .call-dot { background: var(--bad); box-shadow: none; }
@keyframes call-pulse { 50% { transform: scale(1.5); opacity: .55; } }
.call-state { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
/* the caption keeps its newest words in view: a long line is cut on the left */
.call-caption { flex: 1; min-width: 0; display: flex; justify-content: flex-end; overflow: hidden; white-space: nowrap; color: var(--text-2); }
.call-caption span { margin-right: auto; }
.call-caption b { font-weight: 600; color: var(--muted); }
.call-time { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
#callMic { flex: none; width: 26px; height: 26px; padding: 0 2px; border: 1px solid var(--line-2); border-radius: var(--r-ctl, 7px); background: var(--panel); color: var(--text-2); font-size: 12px; }
#callMic:focus, #callMic.attn { width: 150px; }
#callMic.attn { border-color: var(--warn, #f2b84b); }
.call-ctl { width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-ctl, 7px); background: var(--panel); color: var(--text-2); }
.call-ctl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.call-ctl:hover { color: var(--text); border-color: var(--muted); }
.call-ctl[aria-pressed="true"] { color: #fff; background: var(--bad); border-color: var(--bad); }
.call-ctl.end { color: #fff; background: var(--bad); border-color: var(--bad); }
.call-ctl.end:hover { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .callbar .call-dot { animation: none; } }