/* "Udelat z toho znalost" (14. 10. 2026): tlacitko v hlavicce AI vlakna + maly modal nad nim.
   Jen vlastni tridy (.cct-kb-btn, .modal-kbft, .kbft-*), zbytek appky se nemeni. */
.cct-kb-btn { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.cct-kb-btn svg { display: block; opacity: .85; }
.cct-kb-btn:hover svg { opacity: 1; }

.modal.modal-kbft { z-index: 1600; align-items: flex-end; }
.modal-kbft .modal-panel { height: auto; max-height: 92dvh; max-width: 560px; }
.modal-kbft .modal-body { padding: 16px; }
.modal-kbft .field { display: block; margin-bottom: 12px; }
.modal-kbft .field > span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; opacity: .8; }
.modal-kbft input[type="text"], .modal-kbft textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; /* iOS: bez zoomu */
  padding: 10px 12px; border-radius: 10px;
}
.modal-kbft textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.kbft-hint { font-size: 12.5px; }
.kbft-wait { display: flex; align-items: center; gap: 14px; padding: 18px 4px; }
.kbft-wait .muted { font-size: 13px; margin-top: 4px; }
.kbft-spin {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb, 77,186,182), .25); border-top-color: var(--accent, #4dbab6);
  animation: kbft-spin .9s linear infinite;
}
@keyframes kbft-spin { to { transform: rotate(360deg); } }
.kbft-err {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
  background: rgba(242,97,122,.12); border: 1px solid rgba(242,97,122,.35);
}
.kbft-done { padding: 18px 4px; font-weight: 600; color: var(--accent, #4dbab6); }
.kbft-foot { flex-wrap: wrap; }
.kbft-foot .btn { flex: 1 1 180px; }

@media (min-width: 720px) {
  .modal.modal-kbft { align-items: center; padding: 24px; }
  .modal-kbft .modal-panel { border-radius: 18px; }
}