/* Pravna.rs — live support chat widget (pb-* stamp). */

.pb-support { position: fixed; right: 18px; bottom: 8px; z-index: 1200; }

.pb-support-fab {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--c-brand); color: var(--p-white);
    border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.28);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
    opacity: .85;
}
.pb-support-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.4); opacity: 1; }
.pb-support-fab svg { width: 18px; height: 18px; }
.pb-support-fab__dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-danger); border: 2px solid var(--p-white);
}

.pb-support-panel {
    position: absolute; right: 0; bottom: 54px;
    width: 360px; max-width: calc(100vw - 32px);
    height: 540px; max-height: calc(100vh - 120px);
    background: var(--c-surface, var(--p-white)); color: var(--c-text, var(--c-side-bg));
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.22);
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--c-border, rgba(0,0,0,.08));
    animation: pb-support-pop .18s ease-out;
}

.pb-support-panel[hidden] { display: none; }
@keyframes pb-support-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pb-support-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--c-border, rgba(0,0,0,.06));
    background: linear-gradient(180deg, rgba(37,99,235,.06), transparent);
}

.pb-support-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-support-agent__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-brand); color: var(--p-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; overflow: hidden; flex: 0 0 auto;
}
.pb-support-agent__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-support-agent__meta { display: flex; flex-direction: column; min-width: 0; }
.pb-support-agent__meta strong { font-size: 14px; line-height: 1.1; }
.pb-support-agent__status {
    font-size: 12px; color: var(--c-muted, var(--c-text-secondary));
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
}
.pb-support-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-success);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.pb-support-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent;
    cursor: pointer; color: var(--c-muted, var(--c-text-secondary));
    display: inline-flex; align-items: center; justify-content: center;
}
.pb-support-icon-btn:hover { background: rgba(0,0,0,.05); color: var(--c-text, var(--c-side-bg)); }

.pb-support-actions { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.pb-support-menu {
    position: absolute; top: 36px; right: 0; min-width: 180px;
    background: var(--c-surface, var(--p-white)); color: var(--c-text, var(--c-side-bg));
    border: 1px solid var(--c-border, rgba(0,0,0,.1));
    border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.16);
    padding: 6px; z-index: 5;
    animation: pb-support-fade .14s ease-out;
}
.pb-support-menu[hidden] { display: none; }
.pb-support-menu__item {
    display: block; width: 100%; text-align: left;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; color: inherit;
    padding: 8px 10px; border-radius: 6px;
}
.pb-support-menu__item:hover { background: rgba(37,99,235,.08); color: var(--c-brand); }

.pb-support-thread {
    flex: 1 1 auto; overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--c-bg-subtle, var(--c-surface-page-soft));
}

.pb-support-msg { display: flex; }
.pb-support-msg__bubble {
    max-width: 78%;
    padding: 9px 12px; border-radius: 14px;
    font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,.03);
    animation: pb-support-fade .18s ease-out;
}
@keyframes pb-support-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-support-msg--user { justify-content: flex-end; }
.pb-support-msg--user .pb-support-msg__bubble {
    background: var(--c-brand); color: var(--p-white);
    border-bottom-right-radius: 4px;
}
.pb-support-msg--agent .pb-support-msg__bubble {
    background: var(--p-white); color: var(--c-text, var(--c-side-bg));
    border: 1px solid var(--c-border, rgba(0,0,0,.06));
    border-bottom-left-radius: 4px;
}
.pb-support-msg--director .pb-support-msg__bubble {
    background: var(--c-warn-surface); color: var(--c-warn-deep);
    border: 1px solid var(--c-warn-surface);
    border-bottom-left-radius: 4px;
}
.pb-support-msg.is-filler .pb-support-msg__bubble {
    background: var(--p-app-surface-3); color: var(--p-slate-500); font-style: italic;
}

/* Neuspešno slanje — poruka ostaje u thread-u, vizuelno označena, tekst se vraća u input. */
.pb-support-msg--failed { flex-direction: column; align-items: flex-end; gap: 2px; }
.pb-support-msg--failed .pb-support-msg__bubble { opacity: .55; }
.pb-support-msg__failed-label { font-size: 11px; color: var(--c-danger-strong); font-weight: 600; }

/* Linkovi unutar bubble-a (preview profakture i sl.) — vidljivi kao link. */
.pb-support-msg__bubble a {
    color: var(--c-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    word-break: break-all;
}
.pb-support-msg__bubble a:hover { text-decoration-thickness: 2px; }
.pb-support-msg--user .pb-support-msg__bubble a {
    color: var(--p-white);
    text-decoration-color: rgba(255,255,255,.7);
}

/* Typing indicator (3 dots). */
.pb-support-typing .pb-support-msg__bubble {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 12px;
}
.pb-support-typing .pb-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--c-muted, var(--c-text-secondary)); opacity: .5;
    animation: pb-support-blink 1.2s infinite ease-in-out;
}
.pb-support-typing .pb-dot:nth-child(2) { animation-delay: .15s; }
.pb-support-typing .pb-dot:nth-child(3) { animation-delay: .3s; }
@keyframes pb-support-blink {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-2px); }
}

.pb-support-composer {
    display: flex; gap: 8px; align-items: center;
    padding: 10px; border-top: 1px solid var(--c-border, rgba(0,0,0,.08));
    background: var(--c-surface, var(--p-white));
}
.pb-support-composer input {
    flex: 1 1 auto; min-width: 0; height: 38px;
    border: 1px solid var(--c-border, rgba(0,0,0,.12));
    border-radius: 999px; padding: 0 14px;
    /* 16px OBAVEZNO: iOS Safari auto-zoom-uje fokusiran input < 16px, što razvuče
       fiksni panel i izgura „Pošalji" dugme van ekrana. */
    font-size: 16px; outline: none; background: var(--c-surface, var(--p-white));
    color: var(--c-text, var(--c-side-bg));
}
.pb-support-composer input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pb-support-send {
    width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: var(--c-brand); color: var(--p-white); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pb-support-send:hover { filter: brightness(1.05); }

@media (max-width: 480px) {
    .pb-support { right: 10px; bottom: 6px; }
    /* Na mobilnom panel postaje skoro full-screen overlay umesto da
       "visi" iznad FAB-a (gde mu se desni rub veže za dugme pa istura
       levo van ekrana). */
    .pb-support-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: 8px;
        top: calc(var(--topbar-h, 56px) + 8px);
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border-radius: 14px;
    }
}


/* ---------- Peek bubble (greeting / nepročitana poruka) ---------- */
.pb-support-peek {
    position: absolute;
    right: 72px;
    bottom: 8px;
    max-width: 320px;
    min-width: 220px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 30px 12px 12px;
    background: var(--p-white);
    color: var(--p-ink-900);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 28, 60, 0.18), 0 2px 6px rgba(20, 28, 60, 0.08);
    border: 1px solid rgba(37,99,235, 0.18);
    cursor: pointer;
    transform-origin: bottom right;
    animation: pb-support-peek-in .28s cubic-bezier(.2,.9,.3,1.2);
}
.pb-support-peek:hover { box-shadow: 0 16px 38px rgba(20,28,60,.22); }
.pb-support-peek[hidden] { display: none !important; }
.pb-support-peek::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 14px;
    width: 14px;
    height: 14px;
    background: var(--p-white);
    border-right: 1px solid rgba(37,99,235,.18);
    border-bottom: 1px solid rgba(37,99,235,.18);
    transform: rotate(-45deg);
    border-radius: 0 0 3px 0;
}
.pb-support-peek__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--c-text-subtle);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.pb-support-peek__close:hover { background: var(--p-app-surface-3); color: var(--p-ink-900); }
.pb-support-peek__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-accent-indigo), var(--c-brand-300));
    color: var(--p-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    overflow: hidden;
}
.pb-support-peek__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-support-peek__body { min-width: 0; }
.pb-support-peek__name { font-size: .78rem; font-weight: 600; color: var(--c-text-muted); margin-bottom: 2px; }
.pb-support-peek__text { font-size: .92rem; line-height: 1.35; color: var(--p-ink-900); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes pb-support-peek-in {
    0% { opacity: 0; transform: translateY(8px) scale(.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .pb-support-peek { right: 60px; max-width: calc(100vw - 96px); }
}