/* ============================================================================
   Pravno istraživanje — landing (/istrazivanje)
   ----------------------------------------------------------------------------
   "Apple za advokate" — PRO kompozicija: jedan heroj (kompozer), jedan akcenat
   (brand plava na CTA + izabranom segmentu), minimalan broj elemenata, vazduh.

   Umesto tri pojasa kartica (nivoi / primeri / koraci) sve je svedeno na:
     1. Kompozer-heroj sa segmentnim biračem dubine (iOS-style)
     2. Tihi red "Probajte" čipova (popunjavaju kompozer, ne troše kredit)
     3. Istorija kao glavni sadržaj (ili smiren empty-state)
     4. Tok motora kao jedna suptilna linija na dnu

   Učitava se SAMO na ovoj strani (link u @section Styles); `.ri-page` scope drži
   override-e iznad foundation sloja i van AskPravna/ContractReview.
   ============================================================================ */

.ri-page {
    --ri-gap: 30px;
}

/* ---------- Hero — smiren podnaslov ------------------------------------- */
.ri-page .pb-page-head { margin-bottom: 22px; }
.ri-page .pb-page-head__subtitle {
    max-width: 620px;
    margin-top: 12px;
    color: var(--c-text-secondary);
    font-size:var(--fs-md);
    line-height: 1.62;
}
.ri-page .ri-em {
    color: var(--c-text-primary);
    font-weight: var(--p-fw-semibold);
}

/* ============================================================================
   1. KOMPOZER — heroj stranice
   ============================================================================ */
.ri-composer-wrap {
    margin-bottom: var(--ri-gap);
}
/* Kompozer koristi globalnu pb-search-pill--grow pilulu (kao /pocetna).
   CTA dugme: poravnaj „Pošalji" tekst sa AI-credit badge-om. */
.ri-composer-wrap .pb-search-pill__go {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
/* ============================================================================
   3. ISTORIJA (glavni sadržaj) / EMPTY STATE
   ============================================================================ */
.ri-page .pb-panel { margin-bottom: var(--ri-gap); }

/* Prazno stanje „Još nemate pitanja" koristi deljeni _EmptyState (.pb-empty) —
   isti stilski fazon kao /dokumenti i /analiza-ugovora. */


/* ============================================================================
   Funkcionalni stilovi — istorija
   ============================================================================ */
.pb-flash__body { display: flex; flex-direction: column; gap: .15rem; }
.pb-flash .pb-cta-pill { flex: 0 0 auto; }

/* .dx-mini-spinner / .dx-pill-gen definisani globalno u modules/ai.css */

/* =====================================================================
   Lista pitanja + filter traka (preseljeno iz AskPravna/Index inline)
   Pico gradient/senka preko STAMP tokena (--g/--e-brand-square).
   ===================================================================== */
/* Panel ikonica — isti gradient rounded-square kao na detaljnoj strani (Pitanje/Tok rada/Odgovor) */
.ri-head { display:flex; align-items:center; gap:.7rem; min-width:0; }
.ri-pico { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--p-white); background:var(--g-brand-square); box-shadow:var(--e-brand-square); }

/* Filter traka (oblasti / tagovi) — čipovi su STAMP .pb-chip; ovde samo raspored
   trake, broj uz čip i „Prikaži još" toggle (kolaps na 1 red preko JS-a). */
.ri-fbar { display:flex; gap:7px; flex-wrap:wrap; padding:.7rem 0 1rem; }
.ri-fbar .pb-chip { text-decoration:none; }
.ri-fpill__ct { margin-left:6px; opacity:.6; font-variant-numeric:tabular-nums; }
.ri-fbar .pb-chip.is-active .ri-fpill__ct { opacity:.7; }

/* Tagovi: kad ih ima više od 2 reda — skupi i ponudi „Prikaži još" (JS).
   Razmak do liste ispod: kad je skupljen, donji padding .ri-fbar-a se kliperuje
   (overflow:hidden), pa razmak nosi wrap — inače tagovi naliježu na grid kartica. */
.ri-fbar-wrap { position: relative; margin-bottom: 14px; }
.ri-fbar.is-collapsed { overflow: hidden; }   /* max-height postavlja JS = 1 red */
/* Kad ima skrivenih tagova, rezerviši mesto desno za toggle ikonu (ista linija). */
.ri-fbar-wrap.has-toggle .ri-fbar { padding-right: 38px; }
.ri-fbar__toggle {
    position: absolute;
    top: .7rem;                                 /* poravnaj sa prvim redom tagova */
    right: 0;
    display: none;                              /* JS otkriva (inline-flex) kad ima >1 red */
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    padding: 0; margin: 0;
    border: 1px solid var(--c-border-subtle);
    border-radius: 999px;
    background: var(--p-white);
    color: var(--c-brand-strong);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ri-fbar__toggle:hover { border-color: var(--c-brand-200); background: var(--c-brand-surface); }
.ri-fbar__toggle-lab { display: none; }        /* tekst skriven — ostaje samo chevron */
.ri-fbar__chev { display: block; transition: transform .15s ease; }
.ri-fbar__toggle.is-open .ri-fbar__chev { transform: rotate(180deg); }

/* Lista pitanja — full-width naslagane kartice (STAMP .pb-card; kontejner bez
   paddinga jer ga nosi unutrašnji <a class="ri-card__main">). */
.ri-list__grp { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--c-text-subtle); padding:.95rem 0 .5rem; }
.ri-card { position:relative; padding:0; margin-bottom:.7rem; }
.ri-card__main { display:block; padding:.95rem 1.15rem 1rem; text-decoration:none; color:inherit; }
.ri-card__q { margin:0; padding-right:1.8rem; font-size:var(--fs-base); font-weight:600; line-height:1.4; letter-spacing:-.005em; color:var(--c-text-primary); }
.ri-card__prev { margin:.5rem 0 0; font-size:var(--fs-sm); line-height:1.6; color:var(--p-slate-500); }
.ri-card__foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:.75rem; flex-wrap:wrap; }
.ri-card__lft { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
/* Status na kartici = STAMP .pb-pill--* (brand/success/danger); animirana tačka = .pb-pulse-dot. */
.ri-card__status { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ri-card__dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.ri-card__meta { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--c-text-subtle); white-space:nowrap; }
.ri-card__meta svg { opacity:.7; }
.ri-card__del { position:absolute; top:.65rem; right:.6rem; display:flex; }
.ri-tag { font-size:var(--fs-2xs); padding:2px 9px; border-radius:999px; background:var(--p-app-surface-3); color:var(--p-slate-500); font-weight:500; white-space:nowrap; }
.ri-srcs { display:inline-flex; align-items:center; gap:10px; }
.ri-src { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); color:var(--p-slate-500); font-variant-numeric:tabular-nums; }
.ri-src__d { width:7px; height:7px; border-radius:50%; }
.ri-src__d--law { background:var(--c-brand); }
.ri-src__d--case { background:var(--c-accent-violet); }
.ri-src__d--op { background:var(--c-success); }

/* ============================================================================
   Responsive — kanonski breakpoint-i
   ============================================================================ */
/* Lista — naslov („Vaša pitanja" + broj) u prvom redu, pretraga u SVOM redu
   ispod (puna širina), kao na listi Analiza ugovora. */
@media (max-width: 720px) {
    .ri-toolbar { flex-wrap: wrap; gap: .7rem; align-items: center; padding: 14px 16px; }
    .ri-toolbar .ri-head { flex: 1 1 100%; min-width: 0; gap: .55rem; }
    .ri-toolbar .ri-pico { width: 34px; height: 34px; }
    .ri-toolbar .ri-pico svg { width: 17px; height: 17px; }
    .ri-toolbar .pb-panel__head-titles { min-width: 0; }
    .ri-toolbar .pb-toolbar__search {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    /* Tagovi: malo vazduha (ne nabijeno). */
    .ri-fbar { gap: 8px; }
}