:root {
    --bg: #0a0a0b; --card: #141417; --line: #26262b;
    --text: #f5f5f6; --dim: #9a9aa3; --accent: #e8b04b; --ok: #4ade80; --err: #f87171;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--text); min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    padding: 24px; line-height: 1.5;
  }
  .wrap { width: 100%; max-width: 560px; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 32px; text-align: center;
  }
  h1 { font-size: 1.35rem; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
  .sub { color: var(--dim); font-size: 0.9rem; margin-bottom: 26px; }
  .orb {
    width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 26px;
    background: radial-gradient(circle at 34% 30%, #3a3a42, #1a1a1e);
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; transition: all .3s ease; position: relative;
  }
  .orb.idle { opacity: .45; }
  .orb.live { box-shadow: 0 0 0 0 rgba(232,176,75,.5); animation: pulse 2s infinite; }
  .orb.speaking { background: radial-gradient(circle at 34% 30%, var(--accent), #a87a25); }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,176,75,.45); }
    70%  { box-shadow: 0 0 0 22px rgba(232,176,75,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,176,75,0); }
  }
  button {
    width: 100%; padding: 15px; font-size: 1rem; font-weight: 600;
    border-radius: 12px; border: none; cursor: pointer;
    background: var(--accent); color: #1a1205; transition: opacity .2s;
  }
  button:disabled { opacity: .35; cursor: not-allowed; }
  button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); margin-top: 10px; }
  .status { margin-top: 20px; font-size: .875rem; color: var(--dim); min-height: 1.4em; }
  .status.err { color: var(--err); }
  .status.ok { color: var(--ok); }
  .log {
    margin-top: 22px; text-align: left; background: #0d0d0f; border: 1px solid var(--line);
    border-radius: 12px; padding: 14px; max-height: 190px; overflow-y: auto;
    font-size: .82rem; display: none;
  }
  .log.on { display: block; }
  .log div { margin-bottom: 7px; color: var(--dim); }
  .log .me { color: var(--text); }
  .log .ai { color: var(--accent); }
  .note { margin-top: 20px; font-size: .75rem; color: #6b6b74; }

/* gumb "Završi" skriven je do aktivacije razgovora — bez style= atributa,
   jer strogi style-src bez unsafe-inline to blokira */
#stop { display: none; }