/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Copyright (C) 2026 the tapey-1 contributors */

/* The agent on the panel (agent.js): its button in the bar and the banner a click on
   it shows, the keys and knobs it touches, ringed for a moment in its own colour, and
   its part of the settings. */

:root {
  --agent: #b18cff;
  --agent-glow: rgba(177, 140, 255, 0.55);
  --agent-ring: calc(var(--c) * 0.035);
}

/* ----------------------------------------------------------- the button */

/* No agent: a quiet word with a grey dot. An agent there: a violet pill, a stop
   square and "Stop", pulsing while it plays. Stopped: an amber pill, a play
   triangle and "Let it play". */
:root {
  --agent-stopped: #f3b443;
  --agent-stopped-ink: #ffd27a;
}
.bar-agent { position: relative; transition: background 160ms, color 160ms, box-shadow 160ms; }
.bar-agent .agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4a4f57;
  transition: background 160ms, box-shadow 160ms;
}
.bar-agent .agent-ico { display: none; width: 12px; height: 12px; flex: none; fill: currentColor; }
.bar-agent .agent-play { display: none; }
.bar-agent .agent-action:empty,
.bar-agent .agent-short { display: none; }
.bar-agent .agent-action {
  margin-left: 2px;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
  font-weight: 650;
}

.bar-agent.control { padding: 0 11px 0 9px; border-radius: 13px; }
.bar-agent.control .agent-dot { display: none; }
.bar-agent.control .agent-ico { display: block; }

.bar-agent.connected,
.bar-agent.acting {
  color: #e4d8ff;
  background: rgba(177, 140, 255, 0.13);
  border-color: rgba(177, 140, 255, 0.45);
}
.bar-agent.connected:hover,
.bar-agent.acting:hover { color: #fff; background: rgba(177, 140, 255, 0.24); border-color: var(--agent); }
.bar-agent.connected .agent-ico,
.bar-agent.acting .agent-ico { color: var(--agent); }
.bar-agent.acting { animation: agent-pulse 1.3s ease-in-out infinite; }

.bar-agent.paused {
  color: var(--agent-stopped-ink);
  background: rgba(243, 180, 67, 0.16);
  border-color: rgba(243, 180, 67, 0.6);
}
.bar-agent.paused:hover { color: #fff1d0; background: rgba(243, 180, 67, 0.27); border-color: var(--agent-stopped); }
.bar-agent.paused .agent-stop { display: none; }
.bar-agent.paused .agent-play { display: inline; }
.bar-agent.paused .agent-ico { color: var(--agent-stopped); }

/* A click, or the shortcut, nudges the button so the eye finds it. */
.bar-agent.bump { animation: agent-bump 360ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.bar-agent.acting.bump { animation: agent-bump 360ms cubic-bezier(0.3, 1.6, 0.5, 1), agent-pulse 1.3s ease-in-out 360ms infinite; }

@keyframes agent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(177, 140, 255, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(177, 140, 255, 0); background-color: rgba(177, 140, 255, 0.22); }
}
@keyframes agent-bump { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bar-agent.acting, .bar-agent.bump, .bar-agent.acting.bump { animation: none; }
  .agent-toast { transition: none; }
}

/* The vertical skin shows icons only. A connected agent is a violet pill round its
   stop square; a stopped one keeps a word, in amber, so it is never missed. */
:root[data-layout="vertical"] .bar-agent .agent-label,
:root[data-layout="vertical"] .bar-agent .agent-action { display: none; }
:root[data-layout="vertical"] .bar-agent.control { padding: 0 9px; }
:root[data-layout="vertical"] .bar-agent.paused { gap: 5px; padding: 0 10px 0 8px; }
:root[data-layout="vertical"] .bar-agent.paused .agent-short { display: inline; font-size: 12px; font-weight: 650; }

/* ------------------------------------------------- the banner over the panel */

.agent-toast {
  position: fixed;
  left: 50%;
  bottom: 52px;
  z-index: 35;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: min(460px, calc(var(--vw, 100vw) - 32px));
  padding: 11px 16px 11px 13px;
  border: 1px solid rgba(177, 140, 255, 0.55);
  border-radius: 12px;
  background: rgba(30, 28, 38, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  color: #ece6ff;
  font-size: 13px;
  line-height: 1.4;
  cursor: default;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity 160ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.agent-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 160ms ease-out, transform 200ms ease-out; }
.agent-toast .agent-ico { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: var(--agent); }
.agent-toast .agent-stop { display: none; }
.agent-toast.stopped { border-color: rgba(243, 180, 67, 0.7); background: rgba(38, 31, 20, 0.96); color: #fff3dc; }
.agent-toast.stopped .agent-ico { fill: var(--agent-stopped); }
.agent-toast.stopped .agent-stop { display: inline; }
.agent-toast.stopped .agent-play { display: none; }

/* ----------------------------------------------- what the agent touches */

.key.agent-down .cap {
  transform: translateY(calc(var(--c) * 0.012)) scale(0.985);
  background: var(--cap-face-down);
}
.key .cap { transition: transform 60ms ease-out, box-shadow 160ms ease-out, background 60ms; }
.key.agent-touch .cap { box-shadow: var(--cap-pressed), 0 0 0 var(--agent-ring) var(--agent), 0 0 calc(var(--c) * 0.2) var(--agent-glow); }
.rec.agent-down .cap { background: radial-gradient(120% 100% at 40% 32%, #f57a48, #e0400c 55%, #c93606); }
.bar-key.agent-down { color: var(--text); background: #2d3036; box-shadow: 0 0 0 2px var(--agent); }

.enc .enc-ring { transition: box-shadow 220ms ease-out; }
.enc.agent-touch .enc-ring { box-shadow: var(--ring-edge), 0 0 0 var(--agent-ring) var(--agent), 0 0 calc(var(--c) * 0.3) var(--agent-glow); }
.volume.agent-touch .vol-knob { box-shadow: 0 0 0 var(--agent-ring) var(--agent), 0 0 calc(var(--c) * 0.25) var(--agent-glow); border-radius: 50%; }

.wk.agent-down .bar {
  transform: translateY(calc(var(--c) * 0.012));
  background: var(--white-face-down);
  box-shadow: var(--cap-pressed), 0 0 0 var(--agent-ring) var(--agent);
}
.bk.agent-down {
  transform: translateY(calc(var(--c) * 0.012)) scale(0.97);
  background: var(--black-face-down);
  box-shadow: 0 0 0 var(--agent-ring) var(--agent);
}

/* ------------------------------------------------- the settings and the welcome */

.wl-prompt { margin-top: 12px; }
.wl-prompt > p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-soft, #a7adb5); }
.wl-copy textarea {
  flex: 1;
  min-width: 0;
  height: 9.2em;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: #e7e9ec;
  font: 11.5px/1.5 var(--mono);
  resize: none;
  outline: none;
}
.wl-agent-state { font-weight: 500; }
.wl-agent-state.paused { color: #ff9b8c; }