/* =============================================================================
chat2.css — Zdravko.ai · nova UI/UX verzija (chat2.php) — v2
-----------------------------------------------------------------------------
Sve je skopirano pod body.chat2-ui kako NE bi utjecalo na postojeći chat.php.
Učitava se ZADNJI (nakon app.css / doctor-calculators.css) pa nadjačava bazu.
v2 mijenja arhitekturu prema referentnim vizualizacijama (srp 2026):
- lijevi sidebar sad nosi "Novi razgovor" + "Nedavni razgovori" + izbornik
(Postavke / Pomoć / Privatnost / Odjava) — ChatGPT-stil
- desni rail je UKLONJEN u potpunosti
- iznad chata je naslov razgovora + podijeli + izbornik (preimenuj/obriši)
- poruke dobivaju avatar, feedback red (palac/kopiraj/vrijeme) i generički
stil za naslove unutar strukturiranih AI odgovora
============================================================================= */
body.chat2-ui{
--c2-green: #128C7E;
--c2-green-dark: #075E54;
--c2-ink: #0f172a;
--c2-muted: #5b6b7b;
--c2-muted-soft: #7b8794;
--c2-line: rgba(15,23,42,.08);
--c2-line-soft: rgba(15,23,42,.055);
--c2-surface: #ffffff;
--c2-surface-2: #f7faf9;
--c2-tint: rgba(18,140,126,.055);
--c2-tint-strong: rgba(18,140,126,.11);
--c2-tint-border: rgba(18,140,126,.18);
--c2-shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.045);
--c2-shadow-md: 0 14px 36px rgba(15,23,42,.08);
--c2-radius: 18px;
--c2-radius-lg: 24px;
--c2-side-w: 318px;
--c2-chat-bg: #fafcfb;
--c2-content-w: 1080px;
--c2-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
--c2-fw-normal: 400;
--c2-fw-medium: 500;
--c2-fw-semibold: 600;
--c2-fw-bold: 700;
--c2-lh-body: 1.55;
--c2-lh-sidebar: 1.3;
--c2-lh-ui: 1.2;
font-family: var(--c2-font);
background: #f4f8f7;
}
/* =============================================================================
1) TOPBAR
============================================================================= */
body.chat2-ui .topbar{
box-sizing: border-box;
height: auto;
min-height: calc(var(--topbar-h, 56px) + var(--za-native-safe-top, 0px));
border-top: none;
margin: 0;
background: linear-gradient(180deg, #023f3b 0%, var(--c2-green-dark) 100%);
box-shadow: 0 2px 14px rgba(7,94,84,.22);
border-bottom: 1px solid rgba(255,255,255,.10);
}
body.chat2-ui .topbar-inner{
box-sizing: border-box;
min-height: var(--topbar-h, 56px);
max-width: none; margin: 0; width: 100%;
padding: 0 clamp(18px, 2.4vw, 34px);
}
body.chat2-ui .topbar-left{ gap: 12px; margin-left: -4px; }
body.chat2-ui .brand-link{ margin-top: 0; align-items: center; }
body.chat2-ui .topbar-logo{ width: 40px; height: 40px; margin-right: 10px; transform: translateY(-0.5px); }
/* Mobitel: logo (slika+tekst) 3px dolje + 2px lijevo (dodatno) */
@media (max-width: 767px){
body.chat2-ui .topbar-left{ margin-left: -6px; transform: translateY(3px); }
}
body.chat2-ui .brand{ font-size: 1.12rem; letter-spacing: -.3px; }
body.chat2-ui .brand-dot{ color: rgba(255,255,255,.72); }
body.chat2-ui .chat2-subtitle{
font-size: .74rem; font-weight: var(--c2-fw-semibold); letter-spacing: .01em;
color: rgba(255,255,255,.74); margin-top: 1px;
}
@media (min-width: 576px){
body.chat2-ui .brand-link{ flex-direction: row; }
body.chat2-ui .brand-link .brand{ line-height: 1.05; }
}
body.chat2-ui .topbar-right{ gap: 10px; align-items: center; }
/* "Liječnički alati" pill — translucent outline na headeru; ISTI natpis na
desktopu i mobitelu (samo se ikona mijenja radi kompaktnosti na uskom) */
body.chat2-ui .chat2-tools-pill{
gap: 7px;
padding: .5rem .85rem;
min-height: 38px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.32);
background: rgba(255,255,255,.12);
color: #fff;
font-size: .82rem;
font-weight: var(--c2-fw-bold);
box-sizing: border-box;
}
body.chat2-ui .chat2-tools-pill:hover{ background: rgba(255,255,255,.2); color: #fff; }
body.chat2-ui .chat2-caret{ font-size: .7rem; opacity: .8; margin-left: 1px; }
body.chat2-ui .chat2-tools-pill__icon-plain{ font-size: 1rem; font-weight: var(--c2-fw-bold); line-height: 1; display: inline-flex; }
/* "Moj račun" pill — isti ton kao "Liječnički alati" (translucentno na headeru) */
body.chat2-ui .chat2-userpill{
position: relative;
box-sizing: border-box;
gap: 0;
min-height: 38px;
padding: .5rem .8rem .5rem 2.15rem;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.32);
background: rgba(255,255,255,.12);
color: #fff;
font-size: .82rem; font-weight: var(--c2-fw-bold);
}
body.chat2-ui .chat2-userpill:hover{ background: rgba(255,255,255,.2); }
body.chat2-ui .chat2-userpill::before{
content: "";
position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
body.chat2-ui .chat2-userpill::after{ content: "▾"; font-size: .7rem; opacity: .75; margin-left: .4rem; }
body.chat2-ui .chat-app-menu-button{
width: 34px; height: 34px; border-radius: 9px; box-sizing: border-box;
border: none; background: transparent; color: rgba(255,255,255,.92);
}
body.chat2-ui .chat-app-menu-button:hover{ background: rgba(255,255,255,.12); }
@media (min-width: 992px){
/* Hamburger je sad isključivo mobilni okidač za sidebar; na desktopu
sidebar je trajno vidljiv (ili skupljen na ikone preko #chat2SideCollapse) */
body.chat2-ui .chat-app-menu-button{ display: none !important; }
}
/* Mobitel: tools pill zadržava ISTI natpis "Liječnički alati" i istu ikonu
(stetoskop), samo je pill kompaktniji; user pill → prozirni krug */
@media (max-width: 767px){
body.chat2-ui .chat2-tools-pill{ padding: .45rem .85rem; }
/* Bez ikona u pilulama na mobitelu — samo tekst (čišći, uži header) */
body.chat2-ui .chat2-tools-pill__icon-plain{ display: none; }
/* "Moj račun" se na mobitelu uopće ne prikazuje u headeru — dostupan je
kroz sidebar (v. #chat2DrawerAccount u chat2.js). */
body.chat2-ui .chat2-userpill{ display: none; }
}
/* =============================================================================
2) LAYOUT — sidebar | chat (BEZ desnog raila; chat puni ostatak širine,
a sadržaj unutra je centriran udobnom širinom čitanja — v. sekcija 8/9)
============================================================================= */
body.chat2-ui .content{ max-width: none; width: 100%; margin: 0; }
@media (min-width: 992px){
body.chat2-ui .sidebar{ width: var(--c2-side-w); padding: 14px 10px; border-right: 1px solid var(--c2-line-soft); }
body.chat2-ui .sidebar.chat2-side-rail{ width: 76px; }
}
@media (min-width: 992px){
body.chat2-ui .chat-log{ padding: 22px clamp(8px, 1vw, 17px) 122px; background: var(--c2-chat-bg); }
}
/* =============================================================================
3) LIJEVI SIDEBAR — Novi razgovor / Nedavni razgovori / izbornik
============================================================================= */
body.chat2-ui .chat2-side{ display: flex; flex-direction: column; gap: 4px; height: 100%; background: var(--c2-surface); }
body.chat2-ui .chat2-side-brand{ display: flex; align-items: center; gap: 10px; padding: 6px 8px 4px; font-weight: 800; font-size: 1.05rem; color: var(--c2-ink); text-decoration: none; }
body.chat2-ui .chat2-side-brand img{ width: 28px; height: 28px; flex: 0 0 auto; }
body.chat2-ui .chat2-side-user-email{ display: block; font-size: .78rem; color: var(--c2-muted-soft); word-break: break-all; padding: 0 8px 2px 46px; margin-top: -10px; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-user-email{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-brand{ display: none; }
body.chat2-ui .chat2-side-top{ display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
body.chat2-ui .chat2-newchat{
flex: 1 1 auto;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 48px; padding: 0 16px;
border-radius: 14px; border: 1.5px solid var(--c2-tint-border);
background: var(--c2-surface); box-shadow: var(--c2-shadow-sm);
color: var(--c2-green-dark); font-weight: var(--c2-fw-bold); font-size: .96rem; cursor: pointer;
white-space: nowrap; overflow: hidden;
}
body.chat2-ui .chat2-newchat:hover{ border-color: var(--c2-green); background: var(--c2-tint); box-shadow: var(--c2-shadow-md); }
body.chat2-ui .chat2-newchat-ico{ color: var(--c2-green-dark); display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
body.chat2-ui .chat2-newchat-ico svg{ display: block; }
body.chat2-ui .chat2-newchat{ line-height: var(--c2-lh-ui); }
/* Split-button: glavni dio (novi razgovor) + strelica (promjena načina rada),
omotani u zajednički kontejner — hover/fokus na BILO KOJEM dijelu
označava CIJELI gumb, ne samo taj segment. */
body.chat2-ui .chat2-side-top{ gap: 8px; }
body.chat2-ui .chat2-newchat-split{ flex: 1 1 auto; display: flex; min-width: 0; }
body.chat2-ui .chat2-newchat-main{ flex: 1 1 auto; min-width: 0; }
body.chat2-ui .chat2-newchat-main{
border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0;
}
body.chat2-ui .chat2-newchat-ico-rail{ display: none; }
body.chat2-ui .chat2-newchat-role-toggle{
flex: 0 0 auto; height: 48px; width: 30px;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--c2-tint-border); border-left: 1px solid var(--c2-line);
border-top-right-radius: 14px; border-bottom-right-radius: 14px;
background: var(--c2-surface); box-shadow: var(--c2-shadow-sm);
color: var(--c2-green-dark); cursor: pointer;
}
body.chat2-ui .chat2-newchat-split:hover .chat2-newchat-main,
body.chat2-ui .chat2-newchat-split:hover .chat2-newchat-role-toggle,
body.chat2-ui .chat2-newchat-split:focus-within .chat2-newchat-main,
body.chat2-ui .chat2-newchat-split:focus-within .chat2-newchat-role-toggle{
border-color: var(--c2-green); background: var(--c2-tint); box-shadow: var(--c2-shadow-md);
}
body.chat2-ui .chat2-newchat-role-toggle .chat2-caret{ font-size: .72rem; }
body.chat2-ui .chat2-side-collapse{
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
border: 1px solid var(--c2-line); background: var(--c2-surface); box-shadow: var(--c2-shadow-sm);
color: var(--c2-green-dark); display: none; align-items: center; justify-content: center; cursor: pointer;
}
body.chat2-ui .chat2-side-collapse:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); }
@media (min-width: 992px){ body.chat2-ui .chat2-side-collapse{ display: inline-flex; } }
body.chat2-ui .chat2-side-section{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 2px 6px 0; }
body.chat2-ui .chat2-side-heading{
display: flex; align-items: center; justify-content: space-between; width: 100%;
border: none; background: transparent; cursor: pointer; padding: 2px 8px 8px;
font-size: .78rem; font-weight: var(--c2-fw-bold); letter-spacing: .05em; text-transform: uppercase;
color: var(--c2-muted-soft); white-space: nowrap;
}
body.chat2-ui .chat2-side-chev{ font-size: .7rem; transition: transform .16s ease; }
body.chat2-ui .chat2-side-heading[aria-expanded="false"] .chat2-side-chev{ transform: rotate(180deg); }
body.chat2-ui .chat2-side-section.is-collapsed .chat2-recent,
body.chat2-ui .chat2-side-section.is-collapsed .chat2-rail-empty,
body.chat2-ui .chat2-side-section.is-collapsed .chat2-side-showall{ display: none; }
body.chat2-ui .chat2-recent{
display: grid; gap: 7px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.16) transparent;
}
body.chat2-ui .chat2-recent::-webkit-scrollbar{ width: 6px; }
body.chat2-ui .chat2-recent::-webkit-scrollbar-track{ background: transparent; }
body.chat2-ui .chat2-recent::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.14); border-radius: 999px; }
body.chat2-ui .chat2-recent::-webkit-scrollbar-thumb:hover{ background: rgba(15,23,42,.24); }
body.chat2-ui .chat2-recent-row{
display: flex; align-items: flex-start; gap: 11px; width: 100%;
padding: 10px 11px 10px 13px; border: none; border-left: 3px solid transparent;
background: transparent; border-radius: 12px;
text-align: left; cursor: pointer; color: var(--c2-ink);
transition: background .14s ease;
}
body.chat2-ui .chat2-recent-row:hover{ background: var(--c2-tint); }
body.chat2-ui .chat2-recent-row:focus-visible{ outline: 2px solid var(--c2-tint-border); outline-offset: 1px; }
body.chat2-ui .chat2-recent-row.is-active{
background: var(--c2-tint-strong);
border-left-color: var(--c2-green-dark);
}
body.chat2-ui .chat2-recent-ico{ flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; display: inline-flex; color: var(--c2-muted-soft); }
body.chat2-ui .chat2-recent-row.is-active .chat2-recent-ico{ color: var(--c2-green-dark); }
body.chat2-ui .chat2-recent-main{ flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
body.chat2-ui .chat2-recent-title{
font-size: .87rem; font-weight: var(--c2-fw-semibold); line-height: 1.35; color: var(--c2-ink);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden; word-break: normal; overflow-wrap: break-word;
}
body.chat2-ui .chat2-recent-row.is-active .chat2-recent-title{ font-weight: var(--c2-fw-bold); color: var(--c2-green-dark); }
body.chat2-ui .chat2-recent-time{ flex: 0 0 auto; font-size: .76rem; color: var(--c2-muted-soft); white-space: nowrap; margin-top: 2px; }
body.chat2-ui .chat2-recent-skel{
height: 34px; border-radius: 10px; margin: 4px 0;
background: linear-gradient(90deg, rgba(15,23,42,.05) 25%, rgba(15,23,42,.09) 37%, rgba(15,23,42,.05) 63%);
background-size: 400% 100%; animation: chat2Shimmer 1.4s ease infinite;
}
@keyframes chat2Shimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: 0 0; } }
body.chat2-ui .chat2-rail-empty{ font-size: .82rem; color: var(--c2-muted-soft); line-height: 1.5; margin: 4px 8px; }
body.chat2-ui .chat2-side-showall{
margin: 6px 6px 4px; padding: 9px 8px;
border: none; background: transparent; cursor: pointer;
color: var(--c2-green-dark); font-weight: var(--c2-fw-bold); font-size: .85rem; text-align: center;
}
body.chat2-ui .chat2-side-showall:hover{ text-decoration: underline; }
/* Diskretan razdjelnik + linkovi (Baza lijekova / Liste čekanja) odmah
ispod popisa razgovora — ista vizualna linija kao iznad footera. */
body.chat2-ui .chat2-side-divider{
flex: 0 0 auto; height: 1px; margin: 6px 6px 6px; background: var(--c2-line-soft);
}
body.chat2-ui .chat2-side-section-links{
flex: 0 0 auto; display: grid; gap: 1px; padding: 0 6px;
}
body.chat2-ui .chat2-side-footer{
flex: 0 0 auto; display: grid; gap: 3px;
padding: 10px 6px 6px; border-top: 1px solid var(--c2-line-soft); margin-top: 6px;
}
body.chat2-ui .chat2-side-mobile-account{ display: none; }
@media (max-width: 767px){ body.chat2-ui .chat2-side-mobile-account{ display: flex; } }
body.chat2-ui .chat2-side-foot-item{
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 8px 10px; border: none; background: transparent; border-radius: 11px;
text-align: left; cursor: pointer; color: var(--c2-ink); text-decoration: none;
font-size: .88rem; font-weight: var(--c2-fw-semibold); white-space: nowrap; overflow: hidden;
}
body.chat2-ui .chat2-side-foot-item:hover{ background: var(--c2-tint); text-decoration: none; color: var(--c2-ink); }
body.chat2-ui .chat2-side-foot-ico{ flex: 0 0 auto; display: inline-flex; color: var(--c2-muted-soft); }
body.chat2-ui .chat2-side-foot-danger{ color: #b3261e; }
body.chat2-ui .chat2-side-foot-danger .chat2-side-foot-ico{ color: #b3261e; }
body.chat2-ui .chat2-side-foot-danger:hover{ background: rgba(179,38,30,.07); color: #b3261e; }
/* ---- Skupljeni sidebar (samo ikone) — samo desktop ----------------------- */
@media (min-width: 992px){
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-top{ flex-direction: column; padding: 8px 2px 16px; }
/* Ikona za otvaranje/zatvaranje sidebara ide IZNAD "+" gumba kad je skupljeno,
razdvojena diskretnom vodoravnom linijom. */
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-collapse{ order: -1; margin-bottom: 11px; position: relative; transform: rotate(180deg); }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-collapse::after{
content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%) rotate(180deg);
width: 22px; height: 1px; background: var(--c2-line-soft);
}
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat-split{ flex: 0 0 auto; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat{ width: 44px; height: 44px; padding: 0; flex: 0 0 auto; border-radius: 13px; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat-txt{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat-ico{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat-ico-rail{ display: inline-flex; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-newchat-role-toggle{ display: none; }
/* "Baza lijekova"/"Liste čekanja" zadržavaju ikone i u rail modu */
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-section-links{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-section-links .chat2-side-foot-txt{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-section-links .chat2-side-foot-item{ width: 40px; height: 40px; justify-content: center; padding: 0; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-section{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-divider{ display: none; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-footer{ padding: 10px 0 4px; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-foot-item{ justify-content: center; padding: 9px 0; }
body.chat2-ui .sidebar.chat2-side-rail .chat2-side-foot-txt{ display: none; }
}
/* ---- Mobitel (<992px): ISTI sidebar element postaje off-canvas panel,
otvara/zatvara ga hamburger u headeru. Nema više zasebnog "drawer" klona —
jedan sidebar, jedan izvor sadržaja. ------------------------------------- */
body.chat2-ui .chat2-side-mobile-close{ display: none; }
body.chat2-ui .chat2-side-backdrop{
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15,23,42,.45);
z-index: 205;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity .2s ease, visibility 0s linear .2s;
}
body.chat2-ui .chat2-side-backdrop.is-visible{
opacity: 1; pointer-events: auto; visibility: visible;
transition: opacity .2s ease, visibility 0s linear 0s;
}
@media (max-width: 991px){
body.chat2-ui .sidebar.chat2-side{
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(86vw, 320px);
max-width: 320px;
background: var(--c2-surface);
z-index: 210;
padding: 14px 12px;
box-shadow: 0 20px 60px rgba(15,23,42,.28);
transform: translateX(-105%);
transition: transform .22s ease;
box-sizing: border-box;
}
body.chat2-ui .sidebar.chat2-side.chat2-mobile-open{ transform: translateX(0); }
body.chat2-ui .chat2-side-collapse{ display: none !important; }
body.chat2-ui .chat2-side-mobile-close{
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
border: 1px solid var(--c2-line); background: var(--c2-surface);
color: var(--c2-muted); font-size: 1.1rem; cursor: pointer;
}
body.chat2-ui .chat2-side-mobile-close:hover{ background: var(--c2-tint); color: var(--c2-green-dark); }
}
/* =============================================================================
4) NASLOV RAZGOVORA (iznad chat-loga)
============================================================================= */
body.chat2-ui .chat2-convo-head{
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 15px clamp(12px, 1.7vw, 24px) 14px;
border-bottom: 1px solid var(--c2-line-soft);
background: var(--c2-surface);
}
body.chat2-ui .chat2-convo-title{
margin: 0; font-size: 1.04rem; font-weight: var(--c2-fw-bold); color: var(--c2-ink); letter-spacing: -.2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.chat2-ui .chat2-convo-head-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
@media (max-width: 767px){
body.chat2-ui .chat2-convo-head{ padding: 9px 12px 8px; gap: 8px; }
body.chat2-ui .chat2-convo-title{ font-size: .93rem; }
body.chat2-ui .chat2-convo-head .chat2-topicon{ width: 28px; height: 28px; }
body.chat2-ui .chat2-convo-head-actions{ gap: 6px; }
}
body.chat2-ui .chat2-convo-disclaimer{ font-size: .74rem; color: var(--c2-muted-soft); opacity: .85; white-space: nowrap; display: none; }
@media (min-width: 700px){ body.chat2-ui .chat2-convo-disclaimer{ display: inline; } }
/* Na mobitelu se ista poruka ne vidi u zaglavlju (nema mjesta) — umjesto
fiksnog/sticky elementa (ranije bilo pogrešno, preklapalo se s composerom),
sad je to običan element koji chat2.js ubacuje kao POSLJEDNJE dijete
chat-loga — prirodno se scrolla s porukama, samo "leži" na dnu razgovora. */
body.chat2-ui .chat2-inline-disclaimer{
display: none;
padding: 6px 4px 2px; text-align: right;
font-size: .72rem; line-height: 1.3; color: var(--c2-muted-soft);
}
@media (max-width: 699px){
body.chat2-ui .chat2-inline-disclaimer{ display: block; }
}
body.chat2-ui .chat2-convo-head .chat2-topicon{ color: var(--c2-muted-soft); width: 34px; height: 34px; border-radius: 999px; }
body.chat2-ui .chat2-convo-head .chat2-topicon:hover{ background: var(--c2-tint); color: var(--c2-green-dark); }
body.chat2-ui .chat2-convo-menu-wrap{ position: relative; }
/* Popover izbornik (Preimenuj / Podijeli / Obriši) i zvono-stil popover baza */
body.chat2-ui .chat2-pop{
position: fixed; z-index: 260; min-width: 200px; max-width: 320px;
background: #fff; color: var(--c2-ink);
border: 1px solid var(--c2-line); border-radius: 14px;
box-shadow: 0 18px 44px rgba(15,23,42,.18);
padding: 6px;
}
body.chat2-ui .chat2-pop-title{ font-weight: var(--c2-fw-bold); font-size: .92rem; margin: 8px 9px 4px; }
body.chat2-ui .chat2-pop-text{ font-size: .85rem; color: var(--c2-muted); line-height: 1.45; margin: 4px 9px 8px; }
body.chat2-ui .chat2-pop-item{
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 10px; border: none; background: transparent; border-radius: 9px;
text-align: left; cursor: pointer; color: var(--c2-ink); font-size: .87rem; font-weight: var(--c2-fw-semibold);
text-decoration: none !important;
}
body.chat2-ui .chat2-pop-item:hover, body.chat2-ui .chat2-pop-item:visited, body.chat2-ui .chat2-pop-item:link{ text-decoration: none !important; }
body.chat2-ui .chat2-pop-item:hover{ background: var(--c2-tint); }
body.chat2-ui .chat2-pop-item.is-danger{ color: #b3261e; }
body.chat2-ui .chat2-pop-item.is-danger:hover{ background: rgba(179,38,30,.08); }
body.chat2-ui .chat2-pop-item svg{ flex: 0 0 auto; }
/* Desktop padajući izbornik za "Liječnički alati" — ista lista/ikone kao u
fullscreen modalu na mobitelu, samo kao kompaktan popover */
body.chat2-ui .chat2-tools-pop{ min-width: 280px; padding: 8px; }
body.chat2-ui .chat2-tools-pop-item{
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 10px; border: none; background: transparent; border-radius: 10px;
text-align: left; cursor: pointer; color: var(--c2-ink);
}
body.chat2-ui .chat2-tools-pop-item:hover{ background: var(--c2-tint); }
body.chat2-ui .chat2-tools-pop-ico{
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c2-tint-strong); color: var(--c2-green-dark);
}
body.chat2-ui .chat2-tools-pop-ico svg{ width: 18px; height: 18px; }
body.chat2-ui .chat2-tools-pop-label{ font-size: .89rem; font-weight: var(--c2-fw-bold); }
/* =============================================================================
5) STANDARDNA POZDRAVNA PORUKA — obična poruka (bez posebne "hero" kartice
po novom zahtjevu), samo bez feedback reda i vizualno trajna. Naslijeđuje
generički .bubble stil (radius/padding/sjena) — ovdje samo sitne dorade.
============================================================================= */
body.chat2-ui .chat2-greeting-row{ margin-bottom: 4px; }
/* =============================================================================
6) BRZE RADNJE (prazno stanje, samo pro) — kompaktan red za hero alat +
kolabirana grupa ostalih (isti obrazac na svim širinama; hero je vodoravna
kartica, ne visoka prazna kutija)
============================================================================= */
body.chat2-ui .chat2-qa-row{ margin: 10px 0 6px; }
body.chat2-ui .chat2-qa-row .msg-stack{ max-width: 80%; width: 100%; }
body.chat2-ui .chat2-qa{ position: relative; width: 100%; padding: 4px 0 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; }
body.chat2-ui .chat2-qa-eyebrow{ display: block; font-size: .82rem; font-weight: var(--c2-fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--c2-muted-soft); margin: 2px 2px 12px; }
body.chat2-ui .chat2-qa-grid{ display: flex; flex-direction: column; gap: 10px; }
/* Kartica = vodoravan red (ikona | naslov+opis | strelica/chevron), i za
hero i za stavke unutar kolabirane grupe — samo je hero malo krupniji. */
body.chat2-ui .chat2-qa-card{
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 14px 16px;
border: 1px solid var(--c2-line); border-radius: var(--c2-radius);
background: var(--c2-surface); box-shadow: var(--c2-shadow-sm); color: var(--c2-ink);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.chat2-ui .chat2-qa-card:hover{ transform: translateY(-1px); box-shadow: var(--c2-shadow-md); border-color: var(--c2-tint-border); }
body.chat2-ui .chat2-qa-card:focus-visible{ outline: 2px solid var(--c2-green); outline-offset: 2px; }
body.chat2-ui .chat2-qa-ico{
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c2-tint-strong); color: var(--c2-green-dark);
}
body.chat2-ui .chat2-qa-body{ flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
body.chat2-ui .chat2-qa-name{ font-size: .96rem; font-weight: var(--c2-fw-bold); letter-spacing: -.1px; line-height: var(--c2-lh-ui); }
body.chat2-ui .chat2-qa-desc{ font-size: .84rem; color: var(--c2-muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chat2-ui .chat2-qa-link{
flex: 0 0 auto; display: none; align-items: center; gap: 6px;
font-size: .83rem; font-weight: var(--c2-fw-bold); color: var(--c2-green-dark); white-space: nowrap;
}
body.chat2-ui .chat2-qa-link i{ font-style: normal; transition: transform .14s ease; }
body.chat2-ui .chat2-qa-card:hover .chat2-qa-link i{ transform: translateX(3px); }
body.chat2-ui .chat2-qa-chev{ flex: 0 0 auto; color: var(--c2-muted-soft); font-size: 1.3rem; line-height: 1; }
@media (min-width: 560px){
body.chat2-ui .chat2-qa-link{ display: inline-flex; }
body.chat2-ui .chat2-qa-chev{ display: none; }
body.chat2-ui .chat2-qa-desc{ white-space: normal; }
}
/* Hero — malo krupniji, blaga tint pozadina da se izdvoji kao "istaknuta radnja" */
body.chat2-ui .chat2-qa-hero{
padding: 18px 20px;
border-color: var(--c2-tint-border);
background: radial-gradient(120% 160% at 0% 0%, rgba(18,140,126,.07), rgba(18,140,126,.015) 60%), var(--c2-surface);
}
body.chat2-ui .chat2-qa-hero .chat2-qa-ico{
width: 50px; height: 50px; color: #fff;
background: linear-gradient(135deg, #0f766e, var(--c2-green));
box-shadow: 0 8px 18px rgba(18,140,126,.24);
}
body.chat2-ui .chat2-qa-hero .chat2-qa-name{ font-size: 1.02rem; }
body.chat2-ui .chat2-qa-hero .chat2-qa-desc{ font-size: .87rem; }
/* "Ostali liječnički alati" — isti red-obrazac, otvara/zatvara kolabiranu grupu */
body.chat2-ui .chat2-qa-more{
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 14px 16px;
border: 1px solid var(--c2-line); border-radius: var(--c2-radius);
background: var(--c2-surface); box-shadow: var(--c2-shadow-sm); color: var(--c2-ink);
}
body.chat2-ui .chat2-qa-more:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); }
body.chat2-ui .chat2-qa-more-ico{
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c2-tint-strong); color: var(--c2-green-dark); font-size: 1.3rem; font-weight: var(--c2-fw-bold);
}
body.chat2-ui .chat2-qa-more-title{ flex: 1 1 auto; min-width: 0; font-size: .96rem; font-weight: var(--c2-fw-bold); }
body.chat2-ui .chat2-qa-more-sub{ display: none; }
@media (min-width: 560px){
body.chat2-ui .chat2-qa-more-title{ display: block; }
body.chat2-ui .chat2-qa-more-sub{ display: block; font-size: .84rem; color: var(--c2-muted); font-weight: var(--c2-fw-normal); margin-top: 1px; }
}
body.chat2-ui .chat2-qa-more-chev{
flex: 0 0 auto; color: var(--c2-muted-soft); font-size: 1.3rem; line-height: 1; transition: transform .16s ease;
}
body.chat2-ui .chat2-qa-more[aria-expanded="true"] .chat2-qa-more-chev{ transform: rotate(90deg); }
body.chat2-ui .chat2-qa-extra{ display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
body.chat2-ui .chat2-qa.is-collapsed .chat2-qa-extra{ display: none; }
body.chat2-ui .chat2-qa-extra .chat2-qa-card{ padding: 11px 14px; }
body.chat2-ui .chat2-qa-extra .chat2-qa-ico{ width: 38px; height: 38px; border-radius: 11px; }
/* ---- Pacijent/sestra/ljekarnik "Brze opcije" (qs-* klase iz quickstart.js,
JS/sadržaj NETAKNUT) — vizualno usklađeno s gornjim chat2-qa-* obrascem:
isti radius, sjena, icon-container, spacing i stil strelice/chevrona. ---- */
body.chat2-ui #quickStartRow .msg-stack{ max-width: 80%; width: 100%; }
body.chat2-ui .qs-bubble{
max-width: 100% !important; width: 100%;
padding: 4px 0 0 !important; border: none !important;
background: transparent !important; box-shadow: none !important;
}
body.chat2-ui .qs-title{
font-size: .82rem; font-weight: var(--c2-fw-bold); letter-spacing: .05em; text-transform: uppercase;
color: var(--c2-muted-soft); margin: 2px 2px 12px;
}
body.chat2-ui .qs-hero,
body.chat2-ui .qs-more-toggle{
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 14px 16px; margin-bottom: 8px;
border: 1px solid var(--c2-line); border-radius: var(--c2-radius);
background: var(--c2-surface); box-shadow: var(--c2-shadow-sm); color: var(--c2-ink);
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.chat2-ui .qs-hero:hover{ transform: translateY(-1px); box-shadow: var(--c2-shadow-md); border-color: var(--c2-tint-border); }
body.chat2-ui .qs-more-toggle:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); }
body.chat2-ui .qs-hero{
padding: 18px 20px;
border-color: var(--c2-tint-border);
background: radial-gradient(120% 160% at 0% 0%, rgba(18,140,126,.07), rgba(18,140,126,.015) 60%), var(--c2-surface);
}
body.chat2-ui .qs-hero-icon,
body.chat2-ui .qs-more-icon{
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c2-tint-strong); color: var(--c2-green-dark); font-size: 1.1rem;
position: relative;
}
body.chat2-ui .qs-hero-icon{ width: 50px; height: 50px; color: #fff; background: linear-gradient(135deg, #0f766e, var(--c2-green)); box-shadow: 0 8px 18px rgba(18,140,126,.24); }
body.chat2-ui .qs-hero-doc{ font-size: 1.3rem; }
body.chat2-ui .qs-hero-upload{ position: absolute; right: -3px; bottom: -3px; font-size: .75rem; background: #fff; color: var(--c2-green-dark); border-radius: 999px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--c2-shadow-sm); }
body.chat2-ui .qs-hero-copy,
body.chat2-ui .qs-more-copy{ flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
body.chat2-ui .qs-hero-title,
body.chat2-ui .qs-more-title{ font-size: .96rem; font-weight: var(--c2-fw-bold); color: var(--c2-ink); line-height: var(--c2-lh-ui); }
body.chat2-ui .qs-hero-title{ font-size: 1.02rem; }
body.chat2-ui .qs-hero-sub,
body.chat2-ui .qs-more-sub{ font-size: .84rem; color: var(--c2-muted); line-height: 1.4; font-weight: var(--c2-fw-normal); }
body.chat2-ui .qs-chevron{ flex: 0 0 auto; color: var(--c2-muted-soft); font-size: 1.3rem; line-height: 1; transition: transform .16s ease; }
body.chat2-ui .qs-more-toggle.is-open .qs-chevron{ transform: rotate(180deg); }
body.chat2-ui .qs-more-panel{ margin-top: 2px; }
body.chat2-ui .qs-topic-list{ display: flex; flex-direction: column; gap: 8px; }
body.chat2-ui .qs-topic-btn{
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 14px;
border: 1px solid var(--c2-line); border-radius: var(--c2-radius); background: var(--c2-surface);
box-shadow: var(--c2-shadow-sm); color: var(--c2-ink);
}
body.chat2-ui .qs-topic-btn:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); }
body.chat2-ui .qs-topic-btn span{
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c2-tint-strong); font-size: 1.05rem;
}
body.chat2-ui .qs-topic-btn strong{ font-weight: var(--c2-fw-bold); font-size: .93rem; display: block; }
body.chat2-ui .qs-topic-btn small{ font-weight: var(--c2-fw-normal); font-size: .82rem; color: var(--c2-muted); display: block; margin-top: 1px; }
/* =============================================================================
7) PORUKE — avatar, feedback red, generički stil naslova u odgovoru
============================================================================= */
/* Svaki red poruke centriran udobnom širinom čitanja (pozadina chat-loga i
dalje puni cijeli preostali prostor — samo je SADRŽAJ centriran, v. i
sekciju 2/8 za composer/naslov istog ponašanja) */
body.chat2-ui .chat-log > .msg-row{
max-width: var(--c2-content-w);
width: 100%;
margin-left: auto; margin-right: auto;
margin-top: 0; margin-bottom: 0;
}
/* Veći razmak između poruka (zamjenjuje bazni 6px margin) */
body.chat2-ui .chat-log > .msg-row + .msg-row{ margin-top: 18px; }
/* Mekši, prozračniji bubbleovi (veći radius/padding, blaža sjena) */
body.chat2-ui .bubble{
border-radius: 20px !important;
padding: 12px 15px !important;
border-color: var(--c2-line) !important;
box-shadow: var(--c2-shadow-sm) !important;
line-height: 1.56 !important;
}
body.chat2-ui .bubble.user{
background: rgba(18,140,126,.10) !important;
border-color: rgba(18,140,126,.16) !important;
color: var(--c2-ink) !important;
}
body.chat2-ui .bubble.ai{ background: var(--c2-surface) !important; }
/* Uži baloni poruka (WhatsApp stil) — QA/quickstart ostaju 100% (viša specifičnost) */
body.chat2-ui .msg-stack{ max-width: 80%; }
/* Avatar uz AI poruke (ne uz hero pozdrav, taj ima svoj) */
body.chat2-ui .msg-row.ai:not(.chat2-hello){ align-items: flex-start; gap: 12px; }
body.chat2-ui .chat2-msg-avatar{
flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; margin-top: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #0f766e, var(--c2-green-dark));
box-shadow: 0 4px 12px rgba(7,94,84,.22);
}
body.chat2-ui .chat2-msg-avatar img{ width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }
/* Na mobitelu stvarni AI odgovor koristi cijelu širinu koja u chat-logu
ostaje uz avatar. Posebne AI kartice (brze radnje, nudges) nisu obuhvaćene. */
@media (max-width: 767px){
body.chat2-ui .msg-row.ai.ai-answer-row .msg-stack{
flex: 1 1 0;
width: auto;
min-width: 0;
max-width: none;
align-items: stretch;
}
body.chat2-ui .msg-row.ai.ai-answer-row .bubble.ai[data-role="assistant"]{
width: 100%;
max-width: none;
box-sizing: border-box;
}
}
/* Feedback red (palac gore/dolje/kopiraj + vrijeme) — prostraniji, diskretniji */
body.chat2-ui .chat2-msg-actions{
display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--c2-line-soft);
}
body.chat2-ui .chat2-msg-act{
width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent;
color: var(--c2-muted-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
opacity: .8;
}
body.chat2-ui .chat2-msg-act:hover{ background: var(--c2-tint); color: var(--c2-green-dark); opacity: 1; }
body.chat2-ui .chat2-msg-act.is-active-up{ color: var(--c2-green-dark); background: var(--c2-tint-strong); opacity: 1; }
body.chat2-ui .chat2-msg-act.is-active-down{ color: #b3261e; background: rgba(179,38,30,.08); opacity: 1; }
body.chat2-ui .chat2-msg-act.is-copied{ color: var(--c2-green-dark); opacity: 1; }
body.chat2-ui .chat2-msg-fbtext{
font-size: .76rem; color: var(--c2-green-dark); font-weight: var(--c2-fw-semibold);
opacity: 0; transform: translateY(2px); transition: opacity .18s ease, transform .18s ease;
pointer-events: none;
}
body.chat2-ui .chat2-msg-fbtext.is-visible{ opacity: 1; transform: translateY(0); }
body.chat2-ui .chat2-msg-time{ margin-left: auto; font-size: .74rem; color: var(--c2-muted-soft); padding-right: 2px; }
/* Timestamp na korisničkim porukama — UNUTAR bubblea, dolje desno */
body.chat2-ui .msg-row.user .bubble.user{
position: relative;
padding-right: 18px !important;
padding-bottom: 26px !important;
}
body.chat2-ui .chat2-user-time{
position: absolute; right: 14px; bottom: 9px;
display: flex; align-items: center; gap: 4px;
font-size: .72rem; color: rgba(7,94,84,.6);
pointer-events: none;
}
body.chat2-ui .chat2-user-time svg{ color: var(--c2-green-dark); opacity: .8; }
/* Generički stil naslova unutar strukturiranih AI odgovora (## Sažetak i sl.) */
body.chat2-ui .bubble.ai h1, body.chat2-ui .bubble.ai h2, body.chat2-ui .bubble.ai h3{
display: flex; align-items: center; gap: 8px;
font-size: .96rem; font-weight: var(--c2-fw-bold); color: var(--c2-ink);
margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--c2-line-soft);
}
body.chat2-ui .bubble.ai h1:first-child, body.chat2-ui .bubble.ai h2:first-child, body.chat2-ui .bubble.ai h3:first-child{
margin-top: 2px; padding-top: 0; border-top: none;
}
body.chat2-ui .bubble.ai h1::before, body.chat2-ui .bubble.ai h2:not(.resume-nudge-title)::before, body.chat2-ui .bubble.ai h3::before{
content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
background: var(--c2-tint-strong);
}
body.chat2-ui .bubble.ai ol{ counter-reset: chat2-ol; }
body.chat2-ui .bubble.ai ol > li{ color: var(--c2-ink); }
body.chat2-ui .bubble.ai ol > li::marker{ color: var(--c2-green-dark); font-weight: var(--c2-fw-bold); }
body.chat2-ui .bubble.ai ul > li::marker{ color: var(--c2-green); }
/* Typing indicator (avatar + "Piše odgovor..." + točkice) */
body.chat2-ui .chat2-typing-dots{ display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
body.chat2-ui .chat2-typing-dots span{
width: 5px; height: 5px; border-radius: 999px; background: var(--c2-muted-soft);
animation: chat2TypingBounce 1.1s ease infinite;
}
body.chat2-ui .chat2-typing-dots span:nth-child(2){ animation-delay: .15s; }
body.chat2-ui .chat2-typing-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes chat2TypingBounce{ 0%,60%,100%{ opacity:.35; transform: translateY(0); } 30%{ opacity:1; transform: translateY(-2px); } }
/* =============================================================================
8) COMPOSER — minimalno (bez okvira oko inputa), centrirano udobnom
širinom čitanja unutar preostalog prostora (v. i sekciju 2/9)
============================================================================= */
body.chat2-ui .composer{
position: absolute; left: 0; right: 0; bottom: 0;
background: transparent; border-top: none; z-index: 30;
padding: 34px clamp(10px, 1.5vw, 19px) calc(15px + env(safe-area-inset-bottom, 0px));
pointer-events: none;
}
/* Sami composer-row/attach-strip moraju primati klikove natrag (roditelj im
je pointer-events:none upravo da prazan prostor OKO njih ne "krade" klik
od poruka koje se scrollaju ispod). */
body.chat2-ui .composer-row,
body.chat2-ui #attachStrip{ pointer-events: auto; }
/* Chat-log dobiva dodatni donji razmak jednak otprilike visini composera
(v. gore u sekciji 2/layout), da zadnja poruka i mobilni disclaimer mogu
doći do vidljivog dijela iznad njega, umjesto da ostanu trajno "ispod"
prekrivene zone sad kad je composer position:absolute preko chat-loga. */
body.chat2-ui .composer-row{
max-width: var(--c2-content-w, 900px);
margin: 0 auto;
display: flex !important; align-items: flex-end; gap: 8px;
padding: 4px 6px 4px 12px;
background: var(--c2-surface);
border: 1px solid var(--c2-line);
border-radius: 999px;
box-shadow: var(--c2-shadow-md);
}
body.chat2-ui .composer:not(.composer-multiline) .composer-row{ align-items: center; }
/* BUG FIX: baznom CSS-u (app.css) composer-row u "multiline" stanju postaje
CSS grid s fiksnim imenovanim područjima (attach/spacer/send) koja ne znaju
za naš mode-wrap, pa se on nepredvidivo auto-postavljao i "bježao" ulijevo
kad bi tekst narastao. Rješenje: uvijek forsiramo flex (gore), pa svi
elementi (attach/input/mode/send) idu kroz JEDAN, predvidiv flex red;
ovdje samo osiguravamo da textarea ispravno raste ŠIRINOM prostora koji
joj preostane, a ne da pokušava zauzeti 100% (što bi guralo ostatak van). */
body.chat2-ui .composer.composer-multiline .composer-row{
display: grid !important;
grid-template-columns: 40px 1fr auto 44px;
grid-template-rows: auto auto;
grid-template-areas: "input input input input" "attach spacer mode send";
column-gap: 6px; row-gap: 6px;
align-items: end;
}
body.chat2-ui .composer.composer-multiline .composer-input{
grid-area: input; width: auto !important;
}
body.chat2-ui .composer.composer-multiline .btn-attach{ grid-area: attach; }
body.chat2-ui .composer.composer-multiline .chat2-mode-wrap{ grid-area: mode; }
body.chat2-ui .composer.composer-multiline .btn-send{ grid-area: send; }
/* BUG FIX (poravnanje): ovo je prije bilo bezuvjetno pa je nadjačavalo
align-items:center roditelja i u praznom/jednorednom stanju — sad se
"spusti uz dno" primjenjuje SAMO kad je composer stvarno multiline. */
body.chat2-ui .composer.composer-multiline .btn-attach,
body.chat2-ui .composer.composer-multiline .chat2-mode-wrap,
body.chat2-ui .composer.composer-multiline .btn-send{ align-self: flex-end; }
body.chat2-ui .composer:not(.composer-multiline) .btn-attach,
body.chat2-ui .composer:not(.composer-multiline) .chat2-mode-wrap,
body.chat2-ui .composer:not(.composer-multiline) .btn-send{ align-self: center; margin: 0; }
/* Stari vanjski redovi (chip "Dodaj nalaz", toggle "Detaljna analiza",
"Podijeli") više se ne prikazuju — zamijenjeni klamericom + padajućim
izbornikom izravno u composer-row (v. niže) i "Podijeli" u zaglavlju. */
body.chat2-ui #chips,
body.chat2-ui .composer-actions-row{ display: none !important; }
body.chat2-ui .composer:not(.composer-multiline) .composer-row{ min-height: 54px; }
body.chat2-ui .btn-attach{
flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
border: none; background: transparent; color: var(--c2-muted);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
body.chat2-ui .btn-attach:hover{ background: var(--c2-tint); color: var(--c2-green-dark); }
body.chat2-ui .btn-attach .icon{ width: 19px; height: 19px; }
/* Attach-strip (thumbnailovi priloženih slika) — poravnaj s istim rubovima
kao composer-row pilula, ne uz sam vanjski rub composera. */
body.chat2-ui #attachStrip{
max-width: var(--c2-content-w, 900px);
margin: 0 auto; padding: 0 0 8px 4px;
}
body.chat2-ui .att-item{ border-radius: 12px; border-color: var(--c2-line); box-shadow: var(--c2-shadow-sm); }
body.chat2-ui .att-x{
display: inline-flex; align-items: center; justify-content: center;
line-height: 1; padding: 0; font-size: 13px;
}
body.chat2-ui .att-x svg{ display: block; }
body.chat2-ui .composer-input{
flex: 1 1 auto; min-width: 0;
border: none !important; box-shadow: none !important; background: transparent !important;
padding: 8px 4px !important;
}
body.chat2-ui .composer-input:focus{ outline: none; box-shadow: none; }
/* Item 5: u jednorednom composeru (osobito pro mod s mode-gumbom) textarea/
placeholder poravnaj vertikalno na centar, jednako kao attach/mode/send. */
body.chat2-ui .composer:not(.composer-multiline) .composer-input{ align-self: center; }
/* Padajući izbornik "Standardno / Detaljno" — unutar composer-row, prije send */
body.chat2-ui .chat2-mode-wrap{ position: relative; flex: 0 0 auto; }
body.chat2-ui .chat2-mode-btn{
display: inline-flex; align-items: center; gap: 5px;
height: 34px; padding: 0 10px;
border: 1px solid var(--c2-line); border-radius: 999px;
background: var(--c2-surface-2); color: var(--c2-muted);
font-size: .78rem; font-weight: var(--c2-fw-bold); cursor: pointer; white-space: nowrap;
}
body.chat2-ui .chat2-mode-btn:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); color: var(--c2-green-dark); }
body.chat2-ui .chat2-mode-btn.is-detailed{ color: var(--c2-green-dark); background: var(--c2-tint-strong); border-color: var(--c2-tint-border); }
body.chat2-ui .chat2-mode-btn.is-advanced{ color: var(--c2-green-dark); background: var(--c2-tint-strong); border-color: var(--c2-tint-border); }
body.chat2-ui .chat2-mode-btn .chat2-caret{ font-size: .65rem; }
body.chat2-ui .btn-send{
flex: 0 0 auto;
width: 38px; height: 38px;
background: linear-gradient(135deg, #0f766e, var(--c2-green)) !important;
border: none !important; box-shadow: 0 4px 12px rgba(18,140,126,.26);
}
body.chat2-ui .btn-send:hover{ filter: brightness(1.03); }
body.chat2-ui .chat2-compose-hint{
display: none; text-align: right; font-size: .76rem; color: var(--c2-muted-soft);
max-width: var(--c2-content-w, 900px); margin: 6px auto 0;
}
@media (min-width: 992px){ body.chat2-ui .chat2-compose-hint{ display: block; } }
body.chat2-ui .chat2-kbd{ font-weight: var(--c2-fw-bold); color: var(--c2-muted); }
/* Padajući popover za način analize (Standardno/Detaljno), reusable klasa */
body.chat2-ui .chat2-mode-pop{
position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 60;
min-width: 240px;
background: #fff; border: 1px solid var(--c2-line); border-radius: 14px;
box-shadow: 0 18px 44px rgba(15,23,42,.16); padding: 6px;
}
body.chat2-ui .chat2-mode-pop-item{
display: flex; align-items: flex-start; gap: 10px; width: 100%;
padding: 9px 10px; border: none; background: transparent; border-radius: 9px;
text-align: left; cursor: pointer; color: var(--c2-ink);
}
body.chat2-ui .chat2-mode-pop-item:hover{ background: var(--c2-tint); }
body.chat2-ui .chat2-mode-pop-item.is-active{ background: var(--c2-tint-strong); }
body.chat2-ui .chat2-mode-pop-check{ flex: 0 0 auto; width: 16px; color: var(--c2-green-dark); margin-top: 1px; }
body.chat2-ui .chat2-mode-pop-copy{ display: grid; gap: 1px; min-width: 0; }
body.chat2-ui .chat2-mode-pop-title{ font-size: .87rem; font-weight: var(--c2-fw-bold); }
body.chat2-ui .chat2-mode-pop-sub{ font-size: .78rem; color: var(--c2-muted); line-height: 1.3; }
/* Scroll-down: na desktopu poravnaj s desnim rubom centriranog sadržaja
(composer/poruke), ne s krajnjim desnim rubom širokog chat panela; na
mobitelu spusti bliže composeru (bio predaleko/previsoko). */
body.chat2-ui .scroll-down{
right: max(14px, calc((100% - var(--c2-content-w)) / 2 + 14px));
z-index: 35;
}
@media (max-width: 767px){
body.chat2-ui .scroll-down{ right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 78px); }
/* Placeholder malo manji na mobitelu — inače lomi u 2 retka (sam upisani
tekst OSTAJE 16px, to ne diramo jer sprječava iOS auto-zoom na fokus). */
body.chat2-ui .composer-input::placeholder{ font-size: 1rem; }
/* Na mobitelu composer-row treba dodatno niže (više od desktopa) da
disclaimer ("AI može pogriješiti...") iznad njega ostane vidljiv. */
body.chat2-ui .composer{ padding-top: 40px; }
body.chat2-ui .chat-log{ padding-bottom: 128px !important; }
}
/* =============================================================================
9) PWA INSTALL BANNER
============================================================================= */
body.chat2-ui .pwa-banner{ margin: 4px 0 2px; }
body.chat2-ui .pwa-banner-inner{
border: 1px solid var(--c2-line) !important; border-radius: var(--c2-radius) !important;
background: var(--c2-surface-2) !important; box-shadow: var(--c2-shadow-sm) !important;
}
body.chat2-ui .pwa-badge{ background: var(--c2-tint-strong) !important; color: var(--c2-green-dark) !important; border-radius: 12px !important; }
/* =============================================================================
11) TOASTOVI — X za zatvaranje na SVIM širinama; na desktopu dodatno
kompaktni gore desno u chat polju umjesto preko cijele širine.
============================================================================= */
body.chat2-ui .toast-error,
body.chat2-ui .toast-info,
body.chat2-ui .toast-success{
padding-right: 34px; cursor: pointer;
}
body.chat2-ui .toast-error::after,
body.chat2-ui .toast-info::after,
body.chat2-ui .toast-success::after{
content: "✕"; position: absolute; top: 10px; right: 12px;
font-size: .8rem; opacity: .55; line-height: 1;
}
@media (min-width: 768px){
body.chat2-ui .toast-error,
body.chat2-ui .toast-info,
body.chat2-ui .toast-success{
left: auto; right: 18px; top: 14px;
width: min(360px, calc(100% - 36px));
padding: 12px 34px 12px 14px;
}
}
/* =============================================================================
12) MODALI — attach centriran i vertikalno; profil širi i niži na desktopu;
liječnički alati BEZ prisilne pune-ekranske visine (bazni #doctorToolsModal
ima height≈100vh bez obzira na sadržaj, pa kraći koraci ostave velik
prazan prostor — ovdje mijenjamo u max-height, raste SAMO koliko treba).
============================================================================= */
@media (min-width: 768px){
body.chat2-ui #doctorToolsModal,
body.chat2-ui #alliedToolsModal{
height: auto !important;
max-height: min(680px, calc((var(--vh, 1vh) * 100) - 64px)) !important;
top: 50% !important; transform: translate(-50%, -50%) !important;
}
}
@media (min-width: 768px){
body.chat2-ui #attachModal{
top: 50% !important; transform: translate(-50%, -50%) !important;
}
}
@media (min-width: 992px){
body.chat2-ui #profileModal{
width: min(820px, calc(100vw - 48px)) !important;
top: 50% !important; transform: translate(-50%, -50%) !important;
max-height: min(640px, calc((var(--vh, 1vh) * 100) - 64px)) !important;
}
}
/* =============================================================================
13) "Nastavi raniji razgovor?" kartica (resume_nudge.js — JS/logika
netaknuta) — vizualno usklađeno s ostatkom; BUG FIX: postojeća JS funkcija
hideStarterWelcome() dodaje klasu .resume-nudge-hidden-welcome na pozdravnu
poruku, ali ta klasa nigdje (ni u baznom app.css ni ovdje) nije imala
display:none, pa pozdrav ostaje vidljiv ispod kartice — ovo to popravlja.
============================================================================= */
body.chat2-ui .resume-nudge-hidden-welcome{ display: none !important; }
body.chat2-ui .resume-nudge-card{
display: block; max-width: 100%;
}
body.chat2-ui .resume-nudge-title{
margin: 0 0 6px; font-size: 1rem; font-weight: var(--c2-fw-bold); color: var(--c2-ink); line-height: var(--c2-lh-ui);
}
body.chat2-ui .resume-nudge-text{
margin: 0 0 14px; font-size: .87rem; color: var(--c2-muted); line-height: 1.5;
}
body.chat2-ui .resume-nudge-list{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
body.chat2-ui .resume-nudge-item{
appearance: none; font: inherit; text-align: left; cursor: pointer;
display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%;
padding: 11px 14px;
border: 1px solid var(--c2-line); border-radius: var(--c2-radius); background: var(--c2-surface-2);
color: var(--c2-ink);
}
body.chat2-ui .resume-nudge-item:hover{ border-color: var(--c2-tint-border); background: var(--c2-tint); }
body.chat2-ui .resume-nudge-item-title{ font-size: .89rem; font-weight: var(--c2-fw-semibold); }
body.chat2-ui .resume-nudge-item-meta{ align-self: flex-end; font-size: .78rem; color: var(--c2-muted-soft); white-space: nowrap; }
body.chat2-ui .resume-nudge-actions{ display: flex; }
body.chat2-ui .resume-nudge-new{
appearance: none; font: inherit; cursor: pointer;
padding: 10px 16px; border: none; border-radius: 999px;
background: linear-gradient(135deg, #0f766e, var(--c2-green)); color: #fff;
font-size: .87rem; font-weight: var(--c2-fw-bold);
box-shadow: 0 4px 12px rgba(18,140,126,.26);
}
body.chat2-ui .resume-nudge-new:hover{ filter: brightness(1.04); }
/* =============================================================================
10) reduced motion
============================================================================= */
@media (prefers-reduced-motion: reduce){
body.chat2-ui *, body.chat2-ui *::before, body.chat2-ui *::after{
animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
}
}
/* ============ "Načini odgovora" bottom drawer (liječnički mod) ============ */
body.chat2-ui .chat2-mode-drawer-overlay{ position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-end; justify-content: center; background: rgba(6,20,18,.44); opacity: 0; transition: opacity .22s ease; }
body.chat2-ui .chat2-mode-drawer-overlay.is-open{ opacity: 1; }
body.chat2-ui .chat2-mode-drawer{ box-sizing: border-box; width: 100%; max-width: 640px; background: var(--c2-surface, #fff); border-radius: 26px 26px 0 0; padding: 10px 18px calc(14px + env(safe-area-inset-bottom, 0px)); max-height: 86vh; overflow-y: auto; position: relative; box-shadow: 0 -12px 40px rgba(7,40,36,.24); transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1); }
body.chat2-ui .chat2-mode-drawer-overlay.is-open .chat2-mode-drawer{ transform: translateY(0); }
body.chat2-ui .chat2-mode-drawer-handle{ width: 42px; height: 4px; border-radius: 4px; background: rgba(15,60,52,.18); margin: 2px auto 9px; }
body.chat2-ui .chat2-mode-drawer-close{ position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%; background: rgba(15,23,42,.05); color: var(--c2-muted, #5b6b76); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
body.chat2-ui .chat2-mode-drawer-close:hover{ background: rgba(15,23,42,.11); }
body.chat2-ui .chat2-mode-drawer-title{ margin: 2px 0 3px; font-size: 1.1rem; font-weight: 900; letter-spacing: -.3px; color: var(--c2-ink, #0c1c33); }
body.chat2-ui .chat2-mode-drawer-sub{ margin: 0 0 11px; font-size: .88rem; color: var(--c2-muted, #5b6b76); line-height: 1.35; }
body.chat2-ui .chat2-mode-opt{ appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%; position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 13px; margin-bottom: 8px; border: 1.5px solid var(--c2-line, rgba(15,60,52,.13)); border-radius: 18px; background: var(--c2-surface, #fff); color: var(--c2-ink, #0c1c33); transition: border-color .15s ease, background .15s ease; }
body.chat2-ui .chat2-mode-opt.is-active{ border-color: var(--c2-green, #128C7E); background: rgba(18,140,126,.05); }
body.chat2-ui .chat2-mode-opt-ico{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(15,60,52,.06); color: var(--c2-green-dark, #075E54); }
body.chat2-ui .chat2-mode-opt-ico svg{ width: 22px; height: 22px; }
body.chat2-ui .chat2-mode-opt.is-active .chat2-mode-opt-ico{ background: rgba(18,140,126,.12); }
body.chat2-ui .chat2-mode-opt-main{ flex: 1 1 auto; min-width: 0; display: flex; }
body.chat2-ui .chat2-mode-opt-main--std{ align-items: center; }
body.chat2-ui .chat2-mode-opt-fairbadge{ position: absolute; top: 10px; right: 12px; font-size: .7rem; color: var(--c2-muted, #5b6b76); background: rgba(15,60,52,.06); border-radius: 999px; padding: 2px 9px; pointer-events: none; }
body.chat2-ui .chat2-mode-opt-deepbadge{ position: absolute; top: 10px; right: 12px; font-size: .7rem; font-weight: 700; color: #8a5a06; background: rgba(214,158,46,.16); border-radius: 999px; padding: 2px 9px; pointer-events: none; white-space: nowrap; }
body.chat2-ui .chat2-mode-opt-main--metered{ flex-direction: column; align-items: stretch; gap: 7px; }
body.chat2-ui .chat2-mode-opt-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.chat2-ui .chat2-mode-opt-title{ font-size: 1.0rem; font-weight: 800; color: var(--c2-ink, #0c1c33); }
body.chat2-ui .chat2-mode-opt-desc{ font-size: .82rem; color: var(--c2-muted, #5b6b76); line-height: 1.3; }
body.chat2-ui .chat2-mode-opt-badgewrap{ flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
body.chat2-ui .chat2-mode-opt-badge{ font-size: .76rem; font-weight: 800; color: var(--c2-green-dark, #075E54); background: rgba(18,140,126,.13); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
body.chat2-ui .chat2-mode-opt-note{ font-size: .76rem; color: var(--c2-muted, #5b6b76); white-space: nowrap; }
body.chat2-ui .chat2-mode-opt-usagebar{ display: flex; align-items: center; gap: 14px; }
body.chat2-ui .chat2-mode-opt-bar{ flex: 1 1 auto; min-width: 0; height: 7px; border-radius: 999px; background: rgba(15,60,52,.10); overflow: hidden; }
body.chat2-ui .chat2-mode-opt-bar-fill{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--c2-green, #128C7E), var(--c2-green-dark, #075E54)); }
body.chat2-ui .chat2-mode-opt-usage{ flex: 0 0 auto; white-space: nowrap; font-size: .86rem; color: var(--c2-muted, #5b6b76); }
body.chat2-ui .chat2-mode-opt-usage strong{ color: var(--c2-green-dark, #075E54); font-weight: 800; }
body.chat2-ui .chat2-mode-opt-mark{ flex: 0 0 auto; align-self: center; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
body.chat2-ui .chat2-mode-opt-check{ border: 1.5px solid rgba(18,140,126,.55); color: var(--c2-green, #128C7E); }
body.chat2-ui .chat2-mode-opt-radio{ border: 2px solid rgba(15,60,52,.28); }
body.chat2-ui .chat2-mode-opt-radio.is-on{ border-color: var(--c2-green, #128C7E); }
body.chat2-ui .chat2-mode-opt-radio.is-on::after{ content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c2-green, #128C7E); }
body.chat2-ui .chat2-mode-drawer-foot{ display: flex; align-items: center; gap: 10px; margin-top: 2px; padding: 10px 13px; border-radius: 15px; background: rgba(18,140,126,.06); }
body.chat2-ui .chat2-mode-drawer-foot-ico{ flex: 0 0 auto; color: var(--c2-green-dark, #075E54); display: flex; }
body.chat2-ui .chat2-mode-drawer-foot-ico svg{ width: 20px; height: 20px; }
body.chat2-ui .chat2-mode-drawer-foot-copy{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.chat2-ui .chat2-mode-drawer-foot-copy strong{ font-size: .85rem; font-weight: 800; color: var(--c2-green-dark, #075E54); white-space: normal; line-height: 1.25; }
body.chat2-ui .chat2-mode-drawer-foot-copy span{ font-size: .75rem; color: var(--c2-muted, #5b6b76); white-space: normal; line-height: 1.3; }
body.chat2-ui .chat2-mode-drawer-foot-info{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(18,140,126,.3); color: var(--c2-green-dark, #075E54); display: flex; align-items: center; justify-content: center; }
body.chat2-ui .chat2-mode-drawer-foot-info svg{ width: 15px; height: 15px; }
/* ============ Preimenuj razgovor — mali modal (umjesto JS prompt) ============ */
body.chat2-ui .chat2-rename-overlay{ position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,20,18,.5); opacity: 0; transition: opacity .18s ease; }
body.chat2-ui .chat2-rename-overlay.is-open{ opacity: 1; }
body.chat2-ui .chat2-rename-modal{ box-sizing: border-box; width: 100%; max-width: 420px; background: var(--c2-surface, #fff); border-radius: 20px; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(7,40,36,.3); transform: translateY(10px) scale(.98); transition: transform .2s cubic-bezier(.22,.61,.36,1); }
body.chat2-ui .chat2-rename-overlay.is-open .chat2-rename-modal{ transform: translateY(0) scale(1); }
body.chat2-ui .chat2-rename-title{ margin: 0 0 5px; font-size: 1.2rem; font-weight: 900; letter-spacing: -.2px; color: var(--c2-ink, #0c1c33); }
body.chat2-ui .chat2-rename-sub{ margin: 0 0 14px; font-size: .88rem; color: var(--c2-muted, #5b6b76); line-height: 1.4; }
body.chat2-ui .chat2-rename-input{ box-sizing: border-box; width: 100%; font: inherit; font-size: 1rem; padding: 11px 13px; border: 1.5px solid var(--c2-line, rgba(15,60,52,.16)); border-radius: 12px; color: var(--c2-ink, #0c1c33); background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
body.chat2-ui .chat2-rename-input:focus{ border-color: var(--c2-green, #128C7E); box-shadow: 0 0 0 3px rgba(18,140,126,.12); }
body.chat2-ui .chat2-rename-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
body.chat2-ui .chat2-rename-btn{ appearance: none; font: inherit; font-weight: 700; font-size: .92rem; padding: 10px 18px; border-radius: 11px; cursor: pointer; border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease; }
body.chat2-ui .chat2-rename-cancel{ background: transparent; color: var(--c2-muted, #5b6b76); border-color: var(--c2-line, rgba(15,60,52,.16)); }
body.chat2-ui .chat2-rename-cancel:hover{ background: rgba(15,23,42,.04); }
body.chat2-ui .chat2-rename-save{ background: var(--c2-green, #128C7E); color: #fff; }
body.chat2-ui .chat2-rename-save:hover{ background: var(--c2-green-dark, #075E54); }
body.chat2-ui .chat2-rename-save:disabled{ opacity: .6; cursor: default; }
/* =============================================================================
DESKTOP DOTJERIVANJA (v800): mode popover iznad gumba, uži composer radius,
ikona uz mod, "Detaljno" status ispod inputa, diskretnije pilule u headeru,
uže "Brze radnje". Mobitel zadržava postojeće (donji drawer, pilula composer).
============================================================================= */
/* (1) Composer-row — manji border-radius na desktopu (mobitel ostaje pilula).
app.css nadjačava preko .composer:not(.composer-multiline) .composer-row
(specifičnost 0,3,0), pa forsiramo !important za oba stanja composera. */
@media (min-width: 768px){
body.chat2-ui .composer-row{ border-radius: 20px !important; }
}
/* (2) Ikona uz odabrani mod — SAMO desktop */
body.chat2-ui .chat2-mode-btn-ico{ display: none; }
body.chat2-ui .chat2-mode-btn-ico svg{ display: block; }
@media (min-width: 768px){
body.chat2-ui .chat2-mode-btn-ico{ display: inline-flex; align-items: center; }
}
/* (3) "Detaljno" status ispod inputa — DENSE, uz "Enter za slanje", odvojen "|" */
@media (min-width: 992px){
body.chat2-ui .chat2-compose-hint{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
}
body.chat2-ui .chat2-compose-hint-kbd{ margin-left: 0; }
body.chat2-ui .chat2-mode-status:not([hidden]) + .chat2-compose-hint-kbd::before{ content: "|"; margin-right: 8px; color: var(--c2-line, rgba(15,60,52,.34)); font-weight: 400; }
body.chat2-ui .chat2-mode-status{ display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: var(--c2-fw-bold); color: var(--c2-green-dark, #075E54); }
body.chat2-ui .chat2-mode-status[hidden]{ display: none; }
body.chat2-ui .chat2-mode-status-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--c2-green, #128C7E); box-shadow: 0 0 0 2px rgba(18,140,126,.22); animation: c2ModePulse 1.9s ease-in-out infinite; }
@keyframes c2ModePulse{ 0%,100%{ box-shadow: 0 0 0 2px rgba(18,140,126,.24); opacity: 1; } 50%{ box-shadow: 0 0 0 5px rgba(18,140,126,.04); opacity: .8; } }
@media (prefers-reduced-motion: reduce){ body.chat2-ui .chat2-mode-status-dot{ animation: none; } }
/* (4) Header pilule — diskretnije (obrub da, jako sjenčanje ne), chevron samo desktop */
body.chat2-ui .chat2-tools-pill,
body.chat2-ui .chat2-userpill{ box-shadow: none; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.26); }
body.chat2-ui .chat2-tools-pill:hover,
body.chat2-ui .chat2-userpill:hover{ background: rgba(255,255,255,.15); }
@media (max-width: 767px){
body.chat2-ui .chat2-tools-pill .chat2-caret{ display: none; }
}
/* (5) Izbornik računa — email + separator na vrhu */
body.chat2-ui .chat2-pop-email{ padding: 8px 12px 6px; font-size: .78rem; color: var(--c2-muted, #5b6b76); font-weight: var(--c2-fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
body.chat2-ui .chat2-pop-sep{ height: 1px; margin: 2px 8px 6px; background: var(--c2-line, rgba(15,60,52,.13)); }
/* (6) "Brze radnje" bubble — uži na desktopu (~40% širine reda) */
@media (min-width: 992px){
body.chat2-ui .chat2-qa-row .msg-stack{ max-width: 50%; min-width: 360px; }
}
/* (7) DESKTOP mode popover — isti sadržaj, ali floatajući IZNAD gumba */
@media (min-width: 768px){
body.chat2-ui .chat2-mode-drawer-overlay.is-desktop-pop{ background: transparent; display: block; }
body.chat2-ui .chat2-mode-drawer-overlay.is-desktop-pop .chat2-mode-drawer{
position: fixed; width: auto; min-width: 340px; max-width: 380px;
border-radius: 20px; padding: 16px 18px 16px; max-height: min(78vh, 640px);
border: 1px solid var(--c2-line, rgba(15,60,52,.13));
box-shadow: 0 18px 50px rgba(7,40,36,.26), 0 2px 8px rgba(7,40,36,.12);
overflow: visible;
transform: translateY(8px) scale(.98); transform-origin: bottom right; opacity: 0;
transition: transform .18s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
body.chat2-ui .chat2-mode-drawer-overlay.is-desktop-pop.is-open .chat2-mode-drawer{ transform: translateY(0) scale(1); opacity: 1; }
body.chat2-ui .is-desktop-pop .chat2-mode-drawer-handle{ display: none; }
body.chat2-ui .is-desktop-pop .chat2-mode-drawer-title{ font-size: 1.12rem; margin-top: 2px; }
body.chat2-ui .is-desktop-pop .chat2-mode-drawer-sub{ font-size: .85rem; margin-bottom: 13px; }
body.chat2-ui .is-desktop-pop .chat2-mode-opt{ padding: 12px 12px; margin-bottom: 10px; border-radius: 15px; }
body.chat2-ui .is-desktop-pop .chat2-mode-opt-ico{ width: 40px; height: 40px; }
body.chat2-ui .is-desktop-pop .chat2-mode-opt-ico svg{ width: 22px; height: 22px; }
body.chat2-ui .is-desktop-pop .chat2-mode-opt-title{ font-size: .98rem; }
body.chat2-ui .is-desktop-pop .chat2-mode-opt-desc{ font-size: .8rem; }
body.chat2-ui .is-desktop-pop .chat2-mode-drawer-foot{ padding: 10px 12px; }
body.chat2-ui .is-desktop-pop .chat2-mode-drawer-close{ top: 13px; right: 13px; width: 30px; height: 30px; font-size: 18px; }
/* caret prema dolje (na gumb) */
body.chat2-ui .is-desktop-pop .chat2-mode-drawer::after{
content: ""; position: absolute; bottom: -8px; right: var(--c2-pop-caret-right, 40px);
width: 15px; height: 15px; background: var(--c2-surface, #fff);
border-right: 1px solid var(--c2-line, rgba(15,60,52,.13));
border-bottom: 1px solid var(--c2-line, rgba(15,60,52,.13));
transform: rotate(45deg); border-radius: 0 0 3px 0;
}
}
/* =============================================================================
KOREKCIJE v801 (desktop): uži composer, niži scroll-down, niži convo-head,
sakriven sidebar logo/email, datumski separatori, custom delete modal.
============================================================================= */
/* (6) chatForm input 20% uži na desktopu (centriran); attach-strip + hint u ravnini */
@media (min-width: 992px){
body.chat2-ui .composer-row,
body.chat2-ui #attachStrip,
body.chat2-ui .chat2-compose-hint{ max-width: calc(var(--c2-content-w, 1080px) * 0.8); }
}
/* (7) scroll-down gumb malo niže na desktopu (bio previsok) */
@media (min-width: 768px){
body.chat2-ui .scroll-down{ bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 92px); }
}
/* (11) .chat2-convo-head niži na desktopu (~20% manje, manje praznog prostora) */
@media (min-width: 768px){
body.chat2-ui .chat2-convo-head{ padding: 10px clamp(12px, 1.7vw, 24px) 9px; }
}
/* (3) Desktop: sakrij logo + email u sidebaru (logo je već u headeru) →
"Nedavni razgovori" dobiva više prostora. Mobitel (off-canvas) zadržava. */
@media (min-width: 992px){
body.chat2-ui .chat2-side-brand,
body.chat2-ui .chat2-side-user-email{ display: none; }
}
/* (9) Datumski separator u chat-logu (diskretan, s user-friendly datumom u sredini) */
body.chat2-ui .chat2-date-divider{ display: flex; align-items: center; gap: 12px; max-width: var(--c2-content-w, 1080px); margin: 16px auto 10px; padding: 0 clamp(12px, 1.7vw, 24px); }
body.chat2-ui .chat2-date-divider::before,
body.chat2-ui .chat2-date-divider::after{ content: ""; flex: 1 1 auto; height: 1px; background: var(--c2-line-soft, rgba(15,60,52,.1)); }
body.chat2-ui .chat2-date-divider-label{ flex: 0 0 auto; font-size: .74rem; font-weight: var(--c2-fw-bold); color: var(--c2-muted-soft); background: var(--c2-tint, rgba(18,140,126,.06)); padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
/* Custom delete-confirm modal — koristi .chat2-rename-* okvir + danger gumb */
body.chat2-ui .chat2-rename-btn.chat2-confirm-danger{ background: #dc2626; color: #fff; border-color: #dc2626; }
body.chat2-ui .chat2-rename-btn.chat2-confirm-danger:hover{ background: #b91c1c; border-color: #b91c1c; }
body.chat2-ui .chat2-rename-btn.chat2-confirm-danger:disabled{ opacity: .6; cursor: default; }
/* ============================================================================
DV2 — redizajn modala za liječničku verifikaciju (#doctorVerifyModal.dv2) — v2 KOMPAKTNO.
Sva zaglavlja horizontalna (ikona lijevo), manji radius, gušći razmaci —
cilj: sve stane u jedan telefonski ekran bez scrolla. app.js/chat.php netaknuti.
============================================================================ */
.dv2{
--dv-green: var(--c2-green, #0e8a7a);
--dv-green-dark: #0b6b5f;
--dv-tint: rgba(16,140,126,.06);
--dv-tint-strong: rgba(16,140,126,.11);
--dv-ink: var(--c2-ink, #0f1f1c);
--dv-muted: var(--c2-muted, #5b6b76);
--dv-line: rgba(15,60,52,.13);
--dv-radius: 13px;
border-radius: 16px;
}
.dv2 .doctor-verify-body{ padding-left: clamp(15px, 4.4vw, 22px); padding-right: clamp(15px, 4.4vw, 22px); padding-top: 9px; gap: 7px; }
.dv2 > .modal-head{ position: static; padding: 0; border: 0; min-height: 0; display: block; }
.dv2 > .modal-head > div:first-child{ display: none; }
.dv2 .doctor-verify-step-head{ display: none !important; }
.dv2 #doctorVerifyClose{ position: absolute; top: 11px; right: 11px; z-index: 6; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; color: var(--dv-muted); background: rgba(15,40,36,.05); border: 0; }
.dv2 #doctorVerifyClose:hover{ background: rgba(15,40,36,.1); color: var(--dv-ink); }
/* ---- PER-VIEW HERO — UVIJEK horizontalno (ikona lijevo od naslova) ---- */
.dv2 .dv2-hero{ margin-top: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--dv-line); }
.dv2 .dv2-hero-view{ display: none; flex-direction: row; align-items: flex-start; text-align: left; gap: 11px; }
.dv2 .doctor-verify-body:not(.is-card-options-view):not(.is-scan-view):not(.is-manual-view):not(.is-review-view) .dv2-hero-method{ display: flex; }
.dv2 .doctor-verify-body.is-card-options-view .dv2-hero-card{ display: flex; }
.dv2 .doctor-verify-body.is-scan-view .dv2-hero-scan{ display: flex; }
.dv2 .doctor-verify-body.is-review-view .dv2-hero-review{ display: flex; }
.dv2 .doctor-verify-body.is-manual-view .dv2-hero-manual{ display: flex; }
.dv2 .dv2-hero-ico{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--dv-tint-strong); color: var(--dv-green-dark); }
.dv2 .dv2-hero-ico svg{ width: 24px; height: 24px; }
.dv2 .dv2-hero-ico-round{ border-radius: 12px !important; }
.dv2 .dv2-hero-title{ font-size: 1.05rem; font-weight: 800; color: var(--dv-ink); letter-spacing: -.15px; line-height: 1.26; }
.dv2 .dv2-hero-sub{ margin-top: 3px; font-size: .83rem; line-height: 1.4; color: var(--dv-muted); }
/* ---- HOME ROW ---- */
.dv2 .doctor-verify-home-row{ display: none; justify-content: center; margin: 9px 0 0; }
.dv2 .doctor-verify-body:not(.is-card-options-view):not(.is-scan-view):not(.is-manual-view):not(.is-review-view) .doctor-verify-home-row{ display: flex; }
.dv2 .doctor-verify-home-btn{ background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-muted) !important; font-weight: 700; min-height: 38px; border-radius: 11px; }
.dv2 .doctor-verify-home-btn:hover{ background: var(--dv-tint) !important; color: var(--dv-green-dark) !important; border-color: rgba(16,140,126,.3) !important; }
.dv2 .doctor-verify-body.is-login-required-view .doctor-verify-home-row{ display: flex; margin-top: 4px; }
.dv2 .doctor-verify-body.is-login-required-view .doctor-verify-home-btn{ width: 100%; justify-content: center; min-height: 44px; }
/* ---- AUTH INTRO CARD ---- */
.dv2 .doctor-verify-auth-intro{ border: 1px solid var(--dv-line); background: linear-gradient(180deg, var(--dv-tint), rgba(255,255,255,0)); border-radius: var(--dv-radius); padding: 10px 13px; margin-top: 2px; }
.dv2 .doctor-verify-auth-title{ font-size: 1.02rem; font-weight: 800; color: var(--dv-ink); line-height: 1.3; }
.dv2 .doctor-verify-auth-text{ margin-top: 3px; font-size: .86rem; line-height: 1.36; color: var(--dv-muted); }
.dv2 .doctor-verify-auth-actions{ margin-top: 8px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.dv2 #doctorVerifyLoginBtn{ order: 2; width: 100%; min-height: 46px; border-radius: 12px; font-size: 1rem; font-weight: 800; color: #fff; border: 1px solid rgba(6,70,60,.55) !important; background: linear-gradient(180deg, #0e7d6f 0%, #0a5f54 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(9,70,60,.28); }
.dv2 #doctorVerifyLoginBtn:hover{ background: linear-gradient(180deg, #0b6b5f 0%, #084b43 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(9,70,60,.34); }
.dv2 .doctor-verify-google-btn{ order: 1; width: 100%; min-height: 46px; border-radius: 12px; font-size: 1rem; font-weight: 700; background: #fff !important; border: 1.5px solid rgba(15,60,52,.2) !important; color: var(--dv-ink); display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 3px 10px rgba(15,60,52,.1); }
.dv2 .doctor-verify-google-btn:hover{ border-color: rgba(15,60,52,.34) !important; background: #fbfdfc !important; box-shadow: 0 5px 14px rgba(15,60,52,.14); }
.dv2 .doctor-verify-body.is-login-required-view .doctor-verify-auth-intro{ margin-top: 4px; }
.dv2 .doctor-verify-body.is-login-required-view .doctor-verify-auth-divider{ display: none !important; }
/* ---- DIVIDERS ---- */
.dv2 .doctor-verify-auth-divider{ display: flex; align-items: center; justify-content: center; gap: 12px; margin: 3px 2px 1px; color: var(--dv-muted); text-align: center; }
.dv2 .doctor-verify-auth-divider::before, .dv2 .doctor-verify-auth-divider::after{ content: ""; position: static; flex: 1 1 auto; width: auto; height: 1px; border: 0; background: var(--dv-line); transform: none; }
.dv2 .doctor-verify-auth-divider span{ flex: 0 0 auto; position: static; font-size: .82rem; padding: 0 2px; background: transparent; }
.dv2 .doctor-verify-auth-divider[hidden]{ display: none; }
.dv2 .dv2-divider-badge{ display: flex; align-items: center; gap: 11px; margin: 7px 2px 1px; }
.dv2 .dv2-divider-badge::before, .dv2 .dv2-divider-badge::after{ content: ""; flex: 1 1 auto; height: 1px; background: var(--dv-line); }
.dv2 .dv2-divider-badge-ico{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dv-tint); color: var(--dv-green-dark); border: 1px solid var(--dv-line); }
.dv2 .dv2-divider-badge-ico svg{ width: 16px; height: 16px; }
/* ---- METHOD TITLE + GRID ---- */
.dv2 .doctor-verify-method-title{ font-size: 1.02rem; font-weight: 800; color: var(--dv-ink); margin: 1px 0 4px; }
.dv2 .doctor-verify-method-sub{ font-size: .87rem; color: var(--dv-muted); margin: -6px 0 10px; line-height: 1.4; }
.dv2 .doctor-verify-method-grid{ display: grid; grid-template-columns: 1fr !important; gap: 8px; }
/* ---- CARDS (method + card-options) ---- */
.dv2 .doctor-verify-method-card{ position: relative; width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; padding: 9px 36px 9px 11px; border-radius: var(--dv-radius); background: #fff; border: 1px solid var(--dv-line); transition: border-color .15s ease, box-shadow .15s ease; }
.dv2 .doctor-verify-method-card:hover{ border-color: rgba(16,140,126,.4); box-shadow: 0 5px 14px rgba(11,60,52,.07); }
.dv2 .doctor-verify-method-card::after{ content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--dv-green-dark); border-top: 2px solid var(--dv-green-dark); transform: translateY(-50%) rotate(45deg); opacity: .85; }
.dv2 .doctor-verify-method-badge{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(74,104,232,.1); color: #3b52c4; }
.dv2 .doctor-verify-method-badge svg{ width: 23px; height: 23px; }
.dv2 .doctor-verify-method-badge-secondary{ background: var(--dv-tint-strong); color: var(--dv-green-dark); }
.dv2 .doctor-verify-method-card-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv2 .doctor-verify-method-card-title{ font-size: .96rem; font-weight: 800; color: var(--dv-ink); display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dv2 .doctor-verify-method-card-text{ font-size: .83rem; line-height: 1.34; color: var(--dv-muted); }
.dv2 #doctorVerifyMethodCard .doctor-verify-method-card-title::after{ content: "Preporučeno"; font-size: .62rem; font-weight: 800; letter-spacing: .2px; color: var(--dv-green-dark); background: var(--dv-tint-strong); padding: 2px 7px; border-radius: 999px; }
/* ---- NOTES ---- */
.dv2 .dv2-note, .dv2 .doctor-verify-note, .dv2 .doctor-verify-scan-hint{ display: flex; align-items: flex-start; gap: 9px; background: var(--dv-tint); border: 1px solid var(--dv-line); border-radius: 12px; padding: 8px 11px; font-size: .82rem; line-height: 1.38; color: var(--dv-muted); }
.dv2 .dv2-note-ico{ flex: 0 0 auto; display: inline-flex; width: 18px; height: 18px; color: var(--dv-green-dark); margin-top: 1px; }
.dv2 .dv2-note-ico svg{ width: 18px; height: 18px; }
.dv2 .doctor-verify-note::before{ content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.2' stroke='%230b6b5f' stroke-width='1.6'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' stroke='%230b6b5f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/18px; }
.dv2 .dv2-note-method{ display: none; }
.dv2 .doctor-verify-body:not(.is-card-options-view):not(.is-scan-view):not(.is-manual-view):not(.is-review-view) .dv2-note-method{ display: flex; margin-top: 10px; }
/* ---- MANUAL FIELDS ---- */
.dv2 .doctor-verify-fields{ border: 1px solid var(--dv-line); border-radius: var(--dv-radius); padding: 14px; gap: 11px; margin-top: 4px; }
.dv2 .doctor-verify-field{ display: grid; gap: 6px; }
.dv2 .doctor-verify-field > span{ font-size: .9rem; font-weight: 800; color: var(--dv-ink); }
.dv2 .doctor-verify-field .form-control{ min-height: 46px; border-radius: 11px; border: 1px solid var(--dv-line); font-size: .98rem; padding: 0 13px; }
.dv2 .doctor-verify-field .form-control:focus{ border-color: var(--dv-green); box-shadow: 0 0 0 3px rgba(16,140,126,.14); }
.dv2 .doctor-verify-field-hint{ font-size: .8rem; color: var(--dv-muted); }
.dv2 .doctor-verify-id-input{ display: flex; align-items: stretch; border: 1px solid var(--dv-line); border-radius: 11px; overflow: hidden; }
.dv2 .doctor-verify-id-prefix{ display: inline-flex; align-items: center; padding: 0 13px; font-weight: 800; color: var(--dv-green-dark); background: var(--dv-tint-strong); border-right: 1px solid var(--dv-line); }
.dv2 .doctor-verify-id-input .form-control{ border: 0 !important; border-radius: 0; box-shadow: none !important; flex: 1 1 auto; }
.dv2 .doctor-verify-fields .doctor-verify-note{ margin-top: 1px; }
/* ---- ACTIONS ---- */
.dv2 .doctor-verify-actions{ display: grid; gap: 8px; margin-top: 12px; }
.dv2 #doctorVerifySubmit{ width: 100%; min-height: 50px; border-radius: 12px; font-size: 1.02rem; font-weight: 800; color: #fff; order: 2; border: 1px solid rgba(6,70,60,.55) !important; background: linear-gradient(180deg, #0e7d6f 0%, #0a5f54 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(9,70,60,.28); }
.dv2 #doctorVerifySubmit:hover{ background: linear-gradient(180deg, #0b6b5f 0%, #084b43 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(9,70,60,.34); }
.dv2 #doctorVerifyManualBackBtn{ order: 1; justify-content: center; background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-muted); font-weight: 700; min-height: 40px; border-radius: 11px; }
.dv2 #doctorVerifyManualBackBtn:hover{ background: var(--dv-tint) !important; border-color: rgba(16,140,126,.3) !important; color: var(--dv-green-dark); }
.dv2 .doctor-verify-inline-actions{ display: grid; gap: 8px; margin-top: 12px; }
.dv2 .doctor-verify-inline-actions .btn{ width: 100%; min-height: 44px; border-radius: 12px; font-weight: 800; }
.dv2 .doctor-verify-inline-action{ background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-muted) !important; font-weight: 700 !important; min-height: 40px !important; border-radius: 11px !important; }
.dv2 .doctor-verify-inline-action:hover{ background: var(--dv-tint) !important; border-color: rgba(16,140,126,.3) !important; color: var(--dv-green-dark) !important; }
/* ---- SCAN VIEW ---- */
.dv2 .doctor-verify-scan-frame{ border-radius: var(--dv-radius); overflow: hidden; border: 1px solid var(--dv-line); background: #0d1a18; aspect-ratio: 4/3; position: relative; }
.dv2 .doctor-verify-scan-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #cdece6; }
.dv2 .doctor-verify-scan-placeholder .doctor-verify-method-badge{ background: rgba(255,255,255,.12); color: #eafaf6; }
.dv2 .doctor-verify-scan-placeholder-text{ font-size: .88rem; }
.dv2 .doctor-verify-scan-actions{ grid-template-columns: 1fr 1fr; }
.dv2 #doctorVerifyScanRetryBtn, .dv2 #doctorVerifyScanUploadBtn{ min-height: 42px; border-radius: 11px; font-size: .82rem; font-weight: 700; white-space: nowrap; padding: 0 10px; gap: 6px; }
.dv2 #doctorVerifyScanRetryBtn .doctor-verify-btn-icon, .dv2 #doctorVerifyScanUploadBtn .doctor-verify-btn-icon, .dv2 #doctorVerifyScanRetryBtn .doctor-verify-btn-icon svg, .dv2 #doctorVerifyScanUploadBtn .doctor-verify-btn-icon svg{ width: 16px !important; height: 16px !important; }
.dv2 #doctorVerifyScanUploadBtn{ background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-green-dark); }
.dv2 #doctorVerifyScanUploadBtn:hover{ background: var(--dv-tint) !important; border-color: rgba(16,140,126,.3) !important; }
.dv2 #doctorVerifyScanBackBtn{ grid-column: 1 / -1; }
/* ---- REVIEW ---- */
.dv2 .doctor-verify-parsed-list{ border: 1px solid var(--dv-line); border-radius: var(--dv-radius); overflow: hidden; margin: 3px 0 1px; }
.dv2 .doctor-verify-parsed-row{ display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 11px 13px; }
.dv2 .doctor-verify-parsed-row + .doctor-verify-parsed-row{ border-top: 1px solid var(--dv-line); }
.dv2 .doctor-verify-parsed-row span{ color: var(--dv-muted); font-size: .88rem; }
.dv2 .doctor-verify-parsed-row strong{ color: var(--dv-ink); font-weight: 800; }
/* ---- STATUS / LOADING ---- */
.dv2 .doctor-verify-status{ border-radius: 11px; }
.dv2 .doctor-verify-status.is-error{ background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.2); padding: 10px 12px; color: #b3261e; }
.dv2 .doctor-verify-status.is-error > .doctor-verify-status-message{ display: inline; }
.dv2 .doctor-verify-status.is-error .inline-support-link{ display: inline; margin-left: 5px; padding: 0; vertical-align: baseline; white-space: normal; }
.dv2 .doctor-verify-status.is-success{ background: rgba(16,140,126,.07); border: 1px solid rgba(16,140,126,.22); padding: 10px 12px; color: #0b6b5f; }
.dv2 .doctor-verify-loading-spinner{ border-color: rgba(16,140,126,.25); border-top-color: var(--dv-green); }
/* Deblji obrub Google gumba (nadjačaj bazni 1.5px) */
.dv2 .doctor-verify-auth-actions .doctor-verify-google-btn{ border-width: 2px !important; border-color: rgba(15,60,52,.22) !important; }
/* ============================================================================
DV2 — DESKTOP dorada (>640px): kartice metoda stackane (već 1fr gore) + na
desktopu je PREPORUČEN "Ručni unos HLK podataka" (prvi + badge), a iskaznica
druga (bez badgea). Mobitel (<=640px) ostaje: iskaznica prva + badge.
============================================================================ */
@media (min-width: 641px){
.dv2 #doctorVerifyMethodManual{ order: 1; }
.dv2 #doctorVerifyMethodCard{ order: 2; }
.dv2 #doctorVerifyMethodCard .doctor-verify-method-card-title::after{ content: none; }
.dv2 #doctorVerifyMethodManual .doctor-verify-method-card-title::after{ content: "Preporučeno"; font-size: .62rem; font-weight: 800; letter-spacing: .2px; color: var(--dv-green-dark); background: var(--dv-tint-strong); padding: 2px 7px; border-radius: 999px; margin-left: 2px; }
}
/* ============================================================================
DV2 — SESTRINSKA verifikacija (#nurseVerifyModal.dv2)
Sestrinski modal koristi isti dv2 vizualni sustav kao liječnički (klasa .dv2
na modalu → naslijeđuje sva klasna dv2 pravila). Ovdje su samo ID-specifična
pravila preslikana s doctorVerify* → nurseVerify* (dv2 ih veže po ID-u pa ne
pokrivaju sestrinske elemente). Barkod-specifičnosti skenera + auth-only view
ostaju u app.css. Sestrinski tok NEMA korak pregleda očitanih podataka
(barkod nosi samo evidencijski broj + prezime; provjeru radi server).
============================================================================ */
/* Zatvori (×) — dv2 pozicionira apsolutno (kao kod liječnika) */
.dv2 #nurseVerifyClose{ position: absolute; top: 11px; right: 11px; z-index: 6; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; line-height: 1; color: var(--dv-muted); background: rgba(15,40,36,.05); border: 0; margin: 0; }
.dv2 #nurseVerifyClose:hover{ background: rgba(15,40,36,.1); color: var(--dv-ink); }
/* Prijava (staklasti gradijent, iznad Google gumba) */
.dv2 #nurseVerifyLoginBtn{ order: 2; width: 100%; min-height: 46px; border-radius: 12px; font-size: 1rem; font-weight: 800; color: #fff; border: 1px solid rgba(6,70,60,.55) !important; background: linear-gradient(180deg, #0e7d6f 0%, #0a5f54 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(9,70,60,.28); }
.dv2 #nurseVerifyLoginBtn:hover{ background: linear-gradient(180deg, #0b6b5f 0%, #084b43 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(9,70,60,.34); }
/* Provjeri i nastavi (submit) */
.dv2 #nurseVerifySubmit{ width: 100%; min-height: 50px; border-radius: 12px; font-size: 1.02rem; font-weight: 800; color: #fff; order: 2; border: 1px solid rgba(6,70,60,.55) !important; background: linear-gradient(180deg, #0e7d6f 0%, #0a5f54 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(9,70,60,.28); }
.dv2 #nurseVerifySubmit:hover{ background: linear-gradient(180deg, #0b6b5f 0%, #084b43 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(9,70,60,.34); }
/* Natrag (ručni unos) — bijeli obrubljeni */
.dv2 #nurseVerifyManualBackBtn{ order: 1; justify-content: center; background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-muted); font-weight: 700; min-height: 40px; border-radius: 11px; }
.dv2 #nurseVerifyManualBackBtn:hover{ background: var(--dv-tint) !important; border-color: rgba(16,140,126,.3) !important; color: var(--dv-green-dark); }
/* "Preporučeno" badge na kartici iskaznice (mobitel <=640px) */
.dv2 #nurseVerifyMethodCard .doctor-verify-method-card-title::after{ content: "Preporučeno"; font-size: .62rem; font-weight: 800; letter-spacing: .2px; color: var(--dv-green-dark); background: var(--dv-tint-strong); padding: 2px 7px; border-radius: 999px; }
/* Skeniranje: retry/upload u istom redu, mali font; back preko cijele širine */
.dv2 #nurseVerifyScanRetryBtn, .dv2 #nurseVerifyScanUploadBtn{ min-height: 42px; border-radius: 11px; font-size: .82rem; font-weight: 700; white-space: nowrap; padding: 0 10px; gap: 6px; }
.dv2 #nurseVerifyScanRetryBtn .doctor-verify-btn-icon, .dv2 #nurseVerifyScanUploadBtn .doctor-verify-btn-icon, .dv2 #nurseVerifyScanRetryBtn .doctor-verify-btn-icon svg, .dv2 #nurseVerifyScanUploadBtn .doctor-verify-btn-icon svg{ width: 16px !important; height: 16px !important; }
.dv2 #nurseVerifyScanUploadBtn{ background: #fff !important; border: 1px solid var(--dv-line) !important; color: var(--dv-green-dark); }
.dv2 #nurseVerifyScanUploadBtn:hover{ background: var(--dv-tint) !important; border-color: rgba(16,140,126,.3) !important; }
.dv2 #nurseVerifyScanBackBtn{ grid-column: 1 / -1; }
/* DESKTOP (>640px): preporučen "Ručni unos" (prvi + badge), iskaznica druga bez badgea */
@media (min-width: 641px){
.dv2 #nurseVerifyMethodManual{ order: 1; }
.dv2 #nurseVerifyMethodCard{ order: 2; }
.dv2 #nurseVerifyMethodCard .doctor-verify-method-card-title::after{ content: none; }
.dv2 #nurseVerifyMethodManual .doctor-verify-method-card-title::after{ content: "Preporučeno"; font-size: .62rem; font-weight: 800; letter-spacing: .2px; color: var(--dv-green-dark); background: var(--dv-tint-strong); padding: 2px 7px; border-radius: 999px; margin-left: 2px; }
}
/* ============================================================================
Composer poravnat s rasponom chat poruka (desktop ≥992px): isti horizontalni
inset kao .chat-log, da polje za unos koristi punu širinu bubble stupca.
============================================================================ */
@media (min-width: 992px){
body.chat2-ui .composer{ padding-left: clamp(8px, 1vw, 17px); padding-right: clamp(8px, 1vw, 17px); }
}