/* ============================================================
   AI chat u statistici (per-QR + globalna) — preslikan vizuelni
   jezik AI Guide chatbota sa javne single QR strane (style.css).
   Sve klase koriste `_` umesto razmaka (projektno pravilo).
   ============================================================ */

/* --- Thread --------------------------------------------------- */
.qrc_ai_thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 26rem;
    overflow-y: auto;
    padding: 14px;
    border-radius: 16px;
    background: #fbfdfd;
    border: 1px solid rgba(13, 148, 136, .10);
    scroll-behavior: smooth;
}
.dark .qrc_ai_thread { background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .07); }

/* --- Poruke (bubble) ------------------------------------------ */
.qrc_ai_msg { max-width: 85%; padding: 12px 16px; font-size: 14px; line-height: 1.45; border-radius: 18px; word-break: break-word; }

/* Korisnik DESNO (akcent) */
.qrc_ai_msg__user {
    align-self: flex-end;
    background: #0d9488;
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(13, 148, 136, .20);
}
/* AI LEVO (teal tint) */
.qrc_ai_msg__bot {
    align-self: flex-start;
    background: rgba(13, 148, 136, .10);
    color: #0f3f47;
    border: 1px solid rgba(13, 148, 136, .15);
    border-bottom-left-radius: 4px;
}
.dark .qrc_ai_msg__bot { background: rgba(13, 148, 136, .16); color: #d1fae5; border-color: rgba(13, 148, 136, .30); }

/* --- „Kuca…" indikator ---------------------------------------- */
.qrc_ai_typing { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: rgba(13, 148, 136, .06); border: 1px solid rgba(13, 148, 136, .10); }
.dark .qrc_ai_typing { background: rgba(13, 148, 136, .10); border-color: rgba(13, 148, 136, .18); color: #99f6e4; }
.qrc_ai_typing_label { font-size: 11px; font-weight: 700; color: #0f766e; }
.dark .qrc_ai_typing_label { color: #5eead4; }
.qrc_ai_dot { width: 6px; height: 6px; border-radius: 50%; background: #0d9488; animation: qrc_ai_bounce 1.4s infinite; }
@keyframes qrc_ai_bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* --- Predlozi pitanja ----------------------------------------- */
.qrc_ai_sugg {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(13, 148, 136, .08);
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, .18);
    padding: 8px 12px; border-radius: 10px;
    font-size: 11px; font-weight: 700; line-height: 1.2;
    cursor: pointer; transition: background .15s, color .15s;
}
.qrc_ai_sugg:hover { background: #0d9488; color: #fff; }
.qrc_ai_sugg:disabled { opacity: .5; cursor: not-allowed; }
.dark .qrc_ai_sugg { color: #5eead4; }
.dark .qrc_ai_sugg:hover { color: #fff; }

/* --- Unos ------------------------------------------------------ */
.qrc_ai_form { display: flex; gap: 8px; align-items: center; }
.qrc_ai_input {
    flex: 1; min-width: 0;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    padding: 13px 16px;
    border-radius: 14px;
    outline: none;
    font-size: 14px;
    color: #0f3f47;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.qrc_ai_input::placeholder { color: #94a3b8; }
.qrc_ai_input:focus { border-color: #0d9488; background: #fff; box-shadow: 0 0 0 4px rgba(13, 148, 136, .10); }
.dark .qrc_ai_input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .10); color: #e5e7eb; }
.dark .qrc_ai_input:focus { background: rgba(255, 255, 255, .06); border-color: #14b8a6; }

.qrc_ai_send {
    width: 48px; height: 48px; flex: none;
    border: none; border-radius: 14px;
    background: #0d9488; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px -2px rgba(13, 148, 136, .45);
    transition: background .18s, transform .12s, box-shadow .18s;
}
.qrc_ai_send:hover { background: #0f766e; }
.qrc_ai_send:active { transform: scale(.93); }
.qrc_ai_send:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* --- Obavezna AI napomena (EU AI Act) ------------------------- */
.qrc_ai_notice { display: flex; align-items: flex-start; gap: .45rem; font-size: 11px; line-height: 1.45; color: #94a3b8; margin: 0; }
.qrc_ai_notice svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.dark .qrc_ai_notice { color: #9ca3af; }
/* varijanta na teal zaglavlju */
.qrc_ai_notice__head { color: rgba(255, 255, 255, .85); }
.dark .qrc_ai_notice__head { color: rgba(255, 255, 255, .85); }

/* --- Rang medalje (zamena za emoji) --------------------------- */
.qrc_rank_medal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 9999px;
    font-size: 11px; font-weight: 800; color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.qrc_rank_medal__1 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.qrc_rank_medal__2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.qrc_rank_medal__3 { background: linear-gradient(135deg, #d8a06a, #b45309); }

/* --- Mobilni --------------------------------------------------- */
@media (max-width: 640px) {
    .qrc_ai_thread { padding: 10px; gap: 9px; max-height: 20rem; }
    .qrc_ai_msg { max-width: 92%; font-size: 13.5px; padding: 10px 13px; border-radius: 16px; }
    .qrc_ai_input { padding: 11px 13px; font-size: 13.5px; border-radius: 12px; }
    .qrc_ai_send { width: 42px; height: 42px; border-radius: 12px; }
    .qrc_ai_send svg { width: 17px; height: 17px; }
}