/**
 * AI Agent – style.css (Drupal verze)
 * ----------------------------------
 * Původ: /richardai/css/style.css
 *
 * Hlavní změna pro Drupal:
 * - odstraněné globální body {...}
 * - veškeré styly jsou "scoped" pod wrapperem .ai-agent-ask-scope,
 *   aby modul NEměnil design celého webu.
 *
 * Jak to funguje:
 * - Twig template /ask musí mít obal s class="ai-agent-ask-scope"
 *   (doporučím ti níže 1 řádek úpravy v template).
 */

.rv-login-link{margin-top:40px}
.ai-agent-ask-scope {
  /* CSS proměnné držíme scoped – nehrozí kolize se zbytkem webu */
  --c-brand:#2b0d90;
  --c-bar-bg:#222;
  --c-bar-track:#444;
  --c-bar-fill:#fff;
  --c-bar-text:#ccc;
  --c-brandh:red;
  --c-gray:#999;
  --c-mgray:#ccc;
  --c-lgray:#eee;
  --c-green:#00bd00;
  --c-white:#fff;
  --br:9px;

  /* ------------------------------------------------------------
   * Ikonový send button (kolečko + SVG)
   * ------------------------------------------------------------
   * Důvod: v původním CSS mají buttony padding 10px 15px a text.
   * U ikonového tlačítka chceme:
   * - kruhový tvar daný width/height
   * - SVG vycentrované přes inline-flex
   * - velikost ikony řízená proměnnou (a tím nepřímo "padding")
   *
   * Pokud budeš chtít jiné rozměry, měň jen tyto dvě hodnoty:
   */
  --rv-send-size: 50px;       /* průměr kolečka */
  --rv-send-icon-size: 50px;  /* velikost ikonky uvnitř */
}

.ai-agent-ask-scope .clear { clear: both; }

/**
 * Původně bylo body { ... } – v Drupalu to nesmí být globální.
 * Tady styling aplikujeme na wrapper.
 */
.ai-agent-ask-scope {
  /* background: var(--c-white); */
  color: var(--c-gray);
  padding: 1vh;
  text-align: center;
  width: 50%;
  margin: 0 auto;

  /* Font-family:
   * Fallback zůstává.
   */
  font-optical-sizing: auto;
  font-style: normal;
}

.ai-agent-ask-scope p { padding: 0; margin: 0; }

.ai-agent-ask-scope input,
.ai-agent-ask-scope button {
  font-size: 1rem;
  padding: 10px 15px;
  border: 0px solid #000;
  border-radius: var(--br);
  box-sizing: border-box;
}

.ai-agent-ask-scope h1 {
  font-size: 3em;
  color: var(--c-brand);
}

.ai-agent-ask-scope .rv-chat-header {
  margin: 0 0 40px 0;
}

.ai-agent-ask-scope button {
  background: var(--c-brand);
  color: var(--c-white);
  cursor: pointer;
}

.ai-agent-ask-scope button:hover {
  background: var(--c-brandh);
}

/* ------------------------------------------------------------
 * Send (ikonové tlačítko)
 * ------------------------------------------------------------ */
.ai-agent-ask-scope #rv-send {
  /* přepíšeme globální padding z .ai-agent-ask-scope button */
  padding: 0;

  /* kruh */
  width: var(--rv-send-size);
  height: var(--rv-send-size);

  /* přebíjíme --br z globálního button stylu + případné theme CSS */
  border-radius: 9999px !important;

  /* centrování SVG */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;

  /* explicitně držíme barvy (nezávislé na ostatních button stylech) */
  background: #000;
  color: var(--c-white);
  opacity:.5;

  /* jemné UX (bez změny logiky/JS) */
  transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

/* Nutné kvůli specifičnosti: #rv-send { background: ... } přebije obecné button:hover */
.ai-agent-ask-scope #rv-send:hover {
  /* background: var(--c-brandh); */
  opacity:1;
}

.ai-agent-ask-scope #rv-send:active {
  transform: scale(0.98);
}

/* Přístupnost: viditelný focus při ovládání klávesnicí */
.ai-agent-ask-scope #rv-send:focus-visible {
  outline: 2px solid var(--c-brandh);
  outline-offset: 2px;
}

/* Disable stav – pokud ho někdy použiješ v JS */
.ai-agent-ask-scope #rv-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* SVG uvnitř send buttonu:
 * - display:block odstraní nechtěné mezery
 * - width/height určuje "vnitřní padding" nepřímo
 * - fill:currentColor umožní barvu řídit přes CSS (color na buttonu)
 * - pointer-events:none zajistí, že hover vždy chytá button, ne SVG
 */
.ai-agent-ask-scope #rv-send .rv-icon {
  width: var(--rv-send-icon-size);
  height: var(--rv-send-icon-size);
  display: block;
  fill: currentColor;
  pointer-events: none;

  /* jemné optické doladění centrování (když bude potřeba) */
  transform: translate(0, 0);
}

/* Pokud v SVG necháš pomocný <circle class="rv-icon-box" ...>,
 * zajistíme, že se nikdy nebude kreslit (ani fill, ani stroke).
 */
.ai-agent-ask-scope #rv-send .rv-icon .rv-icon-box {
  fill: none;
  stroke: none;
}

/* Volitelná varianta pro outline/stroke ikony:
 * - pokud budeš chtít, dej SVG class="rv-icon rv-icon--stroke"
 */
.ai-agent-ask-scope #rv-send .rv-icon--stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------
 * Voice replay (ikonové tlačítko – stejné jako Send)
 * ------------------------------------------------------------
 * Požadavek:
 * - kruh 50×50px
 * - SVG uvnitř (bez textu)
 * - bez rámečku
 * - hover stejně jako Send (musí být explicitně kvůli specifičnosti)
 *
 * Pozn.:
 * - Tlačítko se defaultně skrývá inline style="display:none;" z Twigu.
 * - JS ho jen odkryje, až existuje poslední audio.
 */
.ai-agent-ask-scope #rv-voice-replay {
  /* přepíšeme globální padding z .ai-agent-ask-scope button */
  padding: 0;

  /* kruh */
  width: 50px;
  height: 50px;
  border-radius: 9999px !important;
  /* centrování SVG */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;

  /* explicitně držíme barvy (stejné jako send) */
  background: #000;
  color: #333;

  /* jemné UX (bez změny logiky/JS) */
  transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

/* Nutné kvůli specifičnosti: #rv-voice-replay { background: ... } přebije obecné button:hover */
.ai-agent-ask-scope #rv-voice-replay:hover {
  color: #FFF;
}

.ai-agent-ask-scope #rv-voice-replay:active {
  transform: scale(0.98);
}

/* Přístupnost: viditelný focus při ovládání klávesnicí */
.ai-agent-ask-scope #rv-voice-replay:focus-visible {
  outline: 2px solid var(--c-brandh);
  outline-offset: 2px;
}

/* Disable stav – pokud ho někdy použiješ v JS */
.ai-agent-ask-scope #rv-voice-replay:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* SVG uvnitř replay buttonu:
 * - velikost ikonky uvnitř kruhu
 * - CSS přebije i případný fill="#fff" v <path> (prezent. atribut)
 * - pointer-events:none zajistí, že hover vždy chytá button, ne SVG
 */
.ai-agent-ask-scope #rv-voice-replay svg {
    width: var(--rv-send-icon-size);
  height: var(--rv-send-icon-size);
  display: block;
  pointer-events: none;
}

.ai-agent-ask-scope #rv-voice-replay svg path {
  fill: currentColor;
}

.ai-agent-ask-scope #rv-input {
  border: 1px solid var(--c-gray);
  width: 100%;
}

.ai-agent-ask-scope .rv-input-row {
  width: 100%;
  /* display: flex; */
  text-align: center;
  margin: 40px 0 0 0;
}

.ai-agent-ask-scope .rv-input-row-inputs {
  width: 100%;
  margin: 0 auto;
  display: block;
}

.ai-agent-ask-scope .rv-msg {
  clear: both;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--br);
  line-height: 1.68;
  word-wrap: break-word;
  font-size: 1rem;
  text-align: justify;
  width: auto;
  max-width: 61.8%;
}

.ai-agent-ask-scope .rv-user {
  background: #00FF00;
  color: #000;
  float: right;
  text-align: right;
  /* border-bottom-right-radius: 0px; */
}

.ai-agent-ask-scope .rv-assistant {
  background: var(--c-lgray);
  color: #000;
  float: left;
  text-align: left;
  /* border-bottom-left-radius: 0px; */
}

/* odstavce v rámci jedné bubliny */
.ai-agent-ask-scope .rv-msg p + p {
  margin-top: 10px;
}

.ai-agent-ask-scope .rv-loading {
  opacity: 0.6;
  font-style: italic;
}


/* ------------------------------------------------------------
 * Credit Counter Bar
 * ------------------------------------------------------------
 */
.ai-agent-ask-scope #credit-counter {
  margin-bottom: 2rem;
  /* background-color: var(--c-bar-bg); */
  padding: 0;
  border-radius: var(--br);
  color: var(--c-bar-text);
  font-family: sans-serif;
  position: relative;
  text-align: left;
  position:fixed;
  top:0;
  width:50%;
}

.ai-agent-ask-scope .credit-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
}

.ai-agent-ask-scope .credit-header .more-details {
  font-size: 0.9rem;
  color: var(--c-bar-text);
  text-decoration: none;
  font-weight: normal;
}
.ai-agent-ask-scope .credit-header .more-details:hover {
  text-decoration: underline;
}

.ai-agent-ask-scope .credit-progress-track {
  width: 100%;
  height: 6px;
  background-color: var(--c-bar-track);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.ai-agent-ask-scope .credit-progress-fill {
  height: 100%;
  background-color: var(--c-green);
  width: 0%; /* JS/Twig sets this */
  transition: width 0.3s ease;
}

.ai-agent-ask-scope .credit-stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.ai-agent-ask-scope .credit-upgrade a {
  color: var(--c-bar-text);
  text-decoration: none;
}
.ai-agent-ask-scope .credit-upgrade a:hover {
  color: #fff;
}

/* Zero credits overlay */
.ai-agent-ask-scope .credit-buy-actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--br);
  z-index: 10;
}

.ai-agent-ask-scope .credit-buy-btn {
  background: #fff;
  color: #000;
  border: none;
  font-weight: bold;
  text-decoration: none;
}
.ai-agent-ask-scope .credit-buy-btn:hover {
  background: #eee;
}

/* ------------------------------------------------------------
 * Voice toggle (avatar tlačítko)
 * ------------------------------------------------------------
 * Požadavek:
 * - stejný “kruh” jako send tlačítko: 50×50px
 * - bez rámečku (žádný ring/padding)
 * - ON = opacity 1, OFF = opacity 0.5
 * - obsah (IMG) vyplní kolečko a ořízne se do kruhu
 */
.ai-agent-ask-scope #rv-sound-toggle {
  /* přepíšeme globální padding z .ai-agent-ask-scope button */
  padding: 0;

  /* kruh */
  width: 50px;
  height: 50px;
  border-radius: 9999px !important;

  /* centrování obsahu */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;

  /* ořez obrázku do kruhu */
  overflow: hidden;

  /* jemné UX */
  transition: opacity 120ms ease;
}

/* Avatar uvnitř (PNG/JPG) */
.ai-agent-ask-scope #rv-sound-toggle .rv-voice-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.ai-agent-ask-scope #rv-sound-toggle.rv-sound-on {
  background: var(--c-green);
  opacity: 1;
}

.ai-agent-ask-scope #rv-sound-toggle.rv-sound-off {
  background: var(--c-mgray);
  opacity: 0.5;
}

/* Status bar dole */
.ai-agent-ask-scope #status { width: 100%; }

.ai-agent-ask-scope #rv-status-bar {
  margin-top: 20px;
  height: 30px;
  line-height: 16px;
  font-size: 13px;
  color: var(--c-gray);
  text-align: left;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  float: left;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

/* Per-bublina debug */
.ai-agent-ask-scope .rv-tts-debug {
  font-size: 11px;
  color: var(--c-gray);
  margin-top: 4px;
  font-style: italic;
}

.ai-agent-ask-scope #info {
  font-size: 10px;
  color: var(--c-gray);
  line-height: 12px;
  margin: 20px 0;
}

.ai-agent-ask-scope #info:empty {
  display: none;
  margin: 0;
}

.ai-agent-ask-scope #info p { margin: 10px 0; }

.ai-agent-ask-scope #info a { color: var(--c-gray); }
.ai-agent-ask-scope #info a:hover { color: var(--c-brand); }

.ai-agent-ask-scope .third {
  width: 34%;
  padding: 0;
  margin: 0;
  height: 50px;
}

.ai-agent-ask-scope .twothird {
  width: 66%;
  padding: 0;
  margin: 0;
  height: 50px;
}

.ai-agent-ask-scope .box { box-sizing: border-box; }
.ai-agent-ask-scope .tleft { text-align: left; }
.ai-agent-ask-scope .tright { text-align: right; }
.ai-agent-ask-scope .fleft { float: left; }

.ai-agent-ask-scope .ovladace {
  width: 100%;
  margin: 20px 0 0 0;
}



/* ------------------------------------------------------------
 * Ovládací tlačítka (zarovnání + mezery)
 * ------------------------------------------------------------
 * Cíl:
 * - levá část: Hlas + Replay vedle sebe, mezera 20px, svisle vycentrované
 * - pravá část: Send zarovnané doprava a svisle vycentrované
 *
 * Pozn.: Nezasahujeme do JS ani do zobrazování (display:none) Replay tlačítka.
 * Pouze sjednocujeme layout v rámci .ovladace.
 */
.ai-agent-ask-scope .ovladace .twothird {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  height: 50px;
}

.ai-agent-ask-scope .ovladace .third.tright {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
}
/* ------------------- MOBILNÍ VERZE ------------------- */
@media (max-width: 768px) {
  .ai-agent-ask-scope {
    width: 100%;
    padding: 2vh 10vw;
    margin: 0;
    text-align: left;
    box-sizing: border-box;
    overflow: auto;
  }
  .ai-agent-ask-scope #credit-counter{width:100%;padding:0 40px;box-sizing:border-box;position:fixed;left:0;top:0}

  .ai-agent-ask-scope .rv-chat-header {
    margin-bottom: 24px;
    text-align: center;
  }

  .ai-agent-ask-scope .rv-messages {
    padding: 0 4px;
  }

  .ai-agent-ask-scope #rv-chat {
    padding-bottom: calc(var(--rv-input-height, 120px) + 40px);
    box-sizing: border-box;
  }

  .ai-agent-ask-scope .rv-msg {
    font-size: 1rem;
    margin-bottom: 0.9rem;
    max-width: 100%;
  }

  .ai-agent-ask-scope .rv-user { margin-left: 15%; }
  .ai-agent-ask-scope .rv-assistant { margin-right: 15%; }

  .ai-agent-ask-scope .rv-input-row-inputs {
    width: 100%;
    margin: 0;
  }

  .ai-agent-ask-scope #rv-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    font-size: 16px; /* iOS zoom fix */
  }

  .ai-agent-ask-scope #rv-send {
    font-size: 16px;

    /* Na mobilu držíme stejné kruhové rozměry (aby se nerozbilo UI) */
    width: var(--rv-send-size);
    height: var(--rv-send-size);
  }

  .ai-agent-ask-scope input,
  .ai-agent-ask-scope button {
    border-radius: var(--br);
    font-size: 16px;
  }

  .ai-agent-ask-scope .rv-tts { font-size: 0.85rem; }
  .ai-agent-ask-scope #rv-status-bar { text-align: center; }

  .ai-agent-ask-scope #rv-input { font-size: 16px; }
}