*, *::before, *::after {
  font-family: 'Roboto', "Segoe UI", system-ui, Arial;
}

body{
 font-family: 'Roboto', "Segoe UI", system-ui, Arial;
 margin:0;
 min-height:100vh;
 background:linear-gradient(180deg,#f6f8fc,#eef2f9);
 color:#1f2937;
 overflow-y:auto;
}

:root{

--primary:#0F4C5C;
--primary-hover:#0B3A46;
--drawer-width: 500px;
--accent:#1976d2;

--bg:#F4F6F8;
--panel:#FFFFFF;

--border:#E2E8F0;

--text:#1F2933;
--text-secondary:#6B7280;

--success:#2E7D32;
--warning:#F59E0B;
--neutral:#9CA3AF;
--danger:#C62828;
--conf-low:#3f6fff;      
--conf-medium:#ffb74d;   /* ZMIĘKCZONY pomarańcz */
--conf-high:#4caf50;
}
#left{
width:340px;
min-width:420px;
background:#ffffff;
border-right:1px solid #e7ebf3;
box-shadow:2px 0 6px rgba(0,0,0,0.05);
padding:10px;
overflow-y:auto;
overflow-x:hidden;
position:sticky;
top:55px;
height:calc(100vh - 55px);
align-self:flex-start;
}



#left button{

width:100%;
box-sizing:border-box;

}
#left h3{
margin-top:0;
}

/* -------- AUTOCOMPLETE STYLE -------- */

#suggestions{

position:absolute;
top:100%;
left:0;
right:0;

list-style:none;
padding:0;
margin:6px 0 0 0;

border:1px solid rgba(220,225,235,0.7);
border-radius:12px;

background:white;   /* ← zmień na pełne */

box-shadow:
0 18px 40px rgba(0,0,0,0.25),
0 6px 14px rgba(0,0,0,0.12);

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

max-height:260px;
overflow:auto;

z-index:500;

}

#suggestions li{
padding:9px 12px;
cursor:pointer;
transition:background 0.15s;
}

#suggestions li:hover{
background:var(--accent);
color:white;
transform:translateX(2px);
}

#symptom-box{

position:relative;

padding:18px;
background:rgba(255,255,255,0.45);

border-radius:14px;

border:1px solid rgba(220,225,235,0.9);
border-top:1px solid rgba(255,255,255,0.7);

box-shadow:
0 18px 40px rgba(0,0,0,0.0),
0 6px 14px rgba(0,0,0,0.04);

backdrop-filter:blur(40px);
-webkit-backdrop-filter:blur(40px);

max-width:920px;
margin-right:auto;

}

#symptoms{
width:100%;
padding:6px 10px;
font-size:14px;
border:1px solid #ccc;
border-radius:6px;
outline:none;
height:34px;
box-sizing:border-box;
}

#symptoms:focus{
border-color:#0078d7;
outline:none;
}
#tags{
display:flex;
flex-wrap:wrap;
gap:6px;

margin-top:10px;
margin-bottom:0;
}
.tag{
background:#0078d7;
color:white;
padding:5px 8px;
border-radius:4px;
display:flex;
align-items:center;
gap:5px;
font-size:14px;
}

.tag span{
cursor:pointer;
font-weight:bold;
}

#results{

max-width:920px;   /* taka sama szerokość jak symptom-box */
width:100%;

margin-right:auto; /* wyrównanie do lewej */

background:rgba(255,255,255,0.75);

border-radius:14px;

padding:20px;

border:1px solid rgba(220,225,235,0.8);

box-sizing:border-box;

backdrop-filter:blur(10px);

}

.results-placeholder{

opacity:0.65;
font-size:14px;
width:100%;
box-sizing:border-box;
padding:10px;

background:#f5f5f5;
border-radius:6px;

}

/* element wyniku */

.result-item{

position:relative;

margin-bottom:12px;
padding:12px 16px;
border-radius:12px;
background:white;
border:1px solid #e7ebf3;
box-shadow:0 2px 6px rgba(0,0,0,0.04);

cursor:pointer;
width:100%;
box-sizing:border-box;
transition:
background 0.15s ease,
box-shadow 0.15s ease,
transform 0.12s ease;

}


/* hover */

.result-item:hover{

background:#f3f4f7;

box-shadow:0 2px 6px rgba(0,0,0,0.12);

transform:scale(1.02);

}

.result-label{

font-size:14px;
margin-bottom:4px;

}

/* pasek dopasowania */

.result-bar{

height:28px;

background:#e5e7eb;

border-radius:8px;

overflow:hidden;

margin-top:8px;

width:100%;

}
.result-fill{

height:100%;

border-radius:8px;

transition:width 0.35s ease;

}

#drawer{

position:fixed;
right:0;
 top:72px;
  height:calc(100% - 72px);

width:var(--drawer-width);
height:calc(100% - 55px);

background:white;

border-left:2px solid var(--accent);

box-shadow:-4px 0 20px rgba(0,0,0,0.08);

transition:
right 0.3s ease,
background 0.35s ease,
border-color 0.35s ease;

padding:25px;

box-sizing:border-box;

z-index:998;

overflow:auto;
overflow-x:hidden;
}

/* drawer schowany */

#drawer.closed{
  right:calc(-1 * var(--drawer-width));
}































.criteria-info{

    margin-top:18px;

    padding:12px 14px;

    border-radius:10px;

    background:rgba(0,0,0,0.03);

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:13px;

}



#patient-status{
cursor:pointer;
}

#patient-panel{
display:none;
overflow:hidden;
position:fixed;

top:90px;
left:50%;

transform:translateX(-50%) scale(1);

width:700px;
height:80vh;

padding:22px;

background:#f6f7fb;

border-radius:14px;
border:1px solid #dcdcdc;

box-shadow:0 18px 50px rgba(0,0,0,0.25);

z-index:10000;

display:flex;
flex-direction:column;
/* TO MUSI BYĆ */


animation:patientPanelIn 0.18s cubic-bezier(.2,.8,.2,1);

}

@keyframes patientPanelIn{

0%{
opacity:0;
transform:translateX(-50%) scale(0.94) translateY(6px);
}

60%{
opacity:1;
transform:translateX(-50%) scale(1.02);
}

100%{
transform:translateX(-50%) scale(1);
}

}
#patient-panel:not(.closed) ~ #drawer-handle{
display:none;
}
.patient-section{

margin-bottom:12px;

}
#patient-name-input{

width:100%;
box-sizing:border-box;

padding:10px 16px;

border-radius:8px;
border:1px solid #ccc;

font-size:14px;

margin-bottom:6px;
}
#patient-name-input:focus{

outline:none;

border-color:#1976d2;

box-shadow:0 0 0 2px rgba(25,118,210,0.15);

}


.patient-form-row{
display:flex;
gap:10px;
}

#edit-age{
flex:0 0 120px;
}

#edit-address{
flex:1;
}
#patient-list-menu{

flex:1;
max-height:300px;
background:#fafbff;

border-radius:12px;

border:1px solid #e7ebf3;

box-shadow:0 1px 3px rgba(0,0,0,0.04);

padding:15px 15px;
padding-top:4px;

overflow-y:auto;
overflow-x:hidden;

min-height:0;

margin-top:6px;

padding-right:12px;
scrollbar-gutter:stable;

position:relative;
}
.patient-form{

background:#fafbff;
flex-shrink:0;
border-radius:12px;

padding:14px;

border:1px solid #e7ebf3;

box-shadow:0 1px 3px rgba(0,0,0,0.04);

margin-bottom:14px;

}
#patient-list-menu div{

display:flex;
align-items:center;

padding:4px 0;

}

#global-search{

flex:1;
max-width:500px;

padding:8px;

border:1px solid #ccc;
border-radius:6px;

}


#app{
display:flex;
align-items:flex-start;
min-height:calc(100vh - 55px);
}

#tree-search{

width:100%;
padding:7px;

margin-bottom:10px;

border:1px solid #ccc;
border-radius:5px;

box-sizing:border-box;

}
.highlight{
background:#ffe08a;
border-radius:3px;
}










/* PRZYCSKI CHECKBOXY MOJE PIERDOLONE */ 

.symptom::before{
display:none !important;
}
.symptom{
display:flex;
align-items:center;
gap:8px;
position:relative;
overflow:hidden;
padding:8px 12px;
border-radius:10px;

/* 🔥 TO JEST KLUCZ */
transition:
background 0.15s ease,
transform 0.18s cubic-bezier(.2,.8,.2,1);
}




/* 🔥 ripple */
.symptom-ripple{
position:absolute;

width:20px;
height:20px;
z-index: 10;  /* 🔥 KLUCZ */
border-radius:50%;
background:rgba(0,0,0,0.15);

transform:translate(-50%, -50%) scale(0);
pointer-events:none;

animation:rippleAnim 500ms cubic-bezier(.2,.8,.2,1);
}

/* 🔥 animacja */
@keyframes rippleAnim{
0%{
transform:translate(-50%, -50%) scale(0);
opacity:0.35;
}
60%{
transform:translate(-50%, -50%) scale(6);
opacity:0.18;
}
100%{
transform:translate(-50%, -50%) scale(8);
opacity:0;
}
}


.symptom.pressed{
transform:scale(0.96);
}

/* 🟦 iOS hover – bardzo subtelny */
.symptom:hover{
background:rgba(0,0,0,0.035);
}

/* 🟪 klik (jak iOS tap) */
.symptom:active{
transform:scale(0.97);
background:rgba(0,0,0,0.06);
}

/* 🟩 zaznaczenie – miękki systemowy highlight */
.symptom-selected{
background:color-mix(in srgb, var(--accent) 12%, white);
color:#111;
font-weight:500;
}

/* 🟩 zaznaczony + hover */
.symptom-selected:hover{
background:color-mix(in srgb, var(--accent) 18%, white);
}

/* hint – delikatniejszy */
.symptom-hint{
font-size:12px;
margin-left:26px;
margin-top:2px;

color:#6b7280;

display:flex;
align-items:center;
gap:5px;

padding:2px 6px;
border-radius:6px;

transition:background 0.15s ease;
}

.symptom-hint:hover{
background:rgba(0,0,0,0.04);
}

.symptom + .symptom{
border-top:1px solid rgba(0,0,0,0.05);
}













#live-ranking{
margin-bottom:10px;
font-size:13px;
}

.live-item{
padding:4px 6px;
border-radius:4px;
cursor:pointer;
}

.live-item:hover{
background:#f0f0f0;
}

.live-score{
float:right;
font-weight:bold;
}

.highlight-disorder{
border:2px solid #2e7d32 !important;
background:#e8f5e9 !important;
}



/* PREVIEW – tryb diagnozy (fiolet) */

.mode-diagnosis #drawer.preview-mode{

background:#f3edff;

}

/* PREVIEW – tryb różnicowania (pomarańcz) */

.mode-differential #drawer.preview-mode{
background:#f3edff;
}
#patient-menu{

position:fixed;
top:55px;
right:20px;

width:260px;

background:white;
border:1px solid #ccc;
border-radius:8px;

box-shadow:0 6px 20px rgba(0,0,0,0.2);

padding:12px;

display:none;

z-index:9999;

}

.patient-item{

padding:6px;
cursor:pointer;


}

.patient-item:hover{

background:#f3f3f3;

}
#patient-panel.closed{
display:none;
}
/* ========================= */
/* TRYBY APLIKACJI */
/* ========================= */

.mode-diagnosis{
--accent:#1976d2;
--tint:#f5f8ff;
}

.mode-differential{
--tint:#f5f8ff;
}
body{

background:var(--tint);

transition:
background 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;

}

/* ========================= */
/* AUTOCOMPLETE HOVER */
/* ========================= */

#suggestions li:hover{
background:var(--accent);
color:white;
}

/* ========================= */
/* TAGI OBJAWÓW */
/* ========================= */

.tag{
background:var(--accent);
}

/* ========================= */
/* TRYB BADGE */
/* ========================= */

#mode-badge{

padding:3px 8px;
border-radius:12px;

background:var(--accent);
color:white;

font-size:11px;
font-weight:600;

margin-left:6px;

}

/* ========================= */
/* TRYB TOAST */
/* ========================= */

#mode-toast{

position:fixed;

bottom:25px;
left:50%;

transform:translateX(-50%);

background:var(--accent);
color:white;

padding:8px 16px;
border-radius:8px;

font-size:13px;
font-weight:500;

box-shadow:0 3px 10px rgba(0,0,0,0.2);

opacity:0;
pointer-events:none;

transition:opacity 0.25s;

z-index:5000;

}

#mode-toast.show{
opacity:1;
}


















/* ========================= */
/* RÓŻNICOWANIE DRAWER STYLE */
/* ========================= */

.mode-differential #drawer{
border-left:5px solid var(--accent);
background:white;
}


/* ========================= */
/* LIVE RANKING */
/* ========================= */

.highlight-disorder{
border:2px solid var(--accent) !important;
background:rgba(0,0,0,0.03) !important;
}


/* ========================= */
/* AUTOCOMPLETE HOVER */
/* ========================= */

.mode-diagnosis #suggestions li:hover{
background:#7e57c2;
color:white;
}

.mode-differential #suggestions li:hover{
background:var(--accent);
color:white;
}

/* ===== DRZEWO ===== */


#differential-buttons{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:18px;
}

.diff-btn{

padding:8px 12px;

border-radius:8px;
border:1px solid #d0d0d0;

background:#f4f4f4;

font-size:14px;
cursor:pointer;

transition:all 0.15s;

}

.diff-btn:hover{
background:#e9f1ff;
border-color:var(--accent);
}

.diff-btn.active{

background:var(--accent);
color:white;

border-color:var(--accent);

box-shadow:0 2px 6px rgba(0,0,0,0.15);

}
#differential-description{

background:white;

padding:20px;

border-radius:10px;

box-shadow:0 2px 10px rgba(0,0,0,0.08);

max-width:750px;

line-height:1.5;

}

.differential-warning{

background:color-mix(in srgb, var(--accent) 10%, white);
border-left:4px solid var(--accent);

padding:10px 14px;
margin-bottom:18px;

font-size:14px;
line-height:1.45;

border-radius:6px;

}
.diff-score{

margin-top:12px;
padding:8px 10px;

background:#f5f5f5;
border-radius:6px;

font-size:14px;

}
.diff-match{

border-left:4px solid #4caf50;
background:#e8f5e9;
padding-left:10px;
}

/* najbardziej prawdopodobna diagnoza */

.top-diagnosis{

background:#f7f9fc;

box-shadow:0 1px 3px rgba(0,0,0,0.08);

}
.confidence-badge{

display:inline-block;

margin-left:8px;
padding:2px 6px;

font-size:11px;
font-weight:600;

border-radius:4px;

background:#eee;
color:#444;

}

/* poziomy */

.conf-low{
background:#e8f1ff;
color:#2a4ea3;
}
.conf-medium{
background:#fff3cd;
color:#8a6d3b;
}

.conf-high{
background:#e8f5e9;
color:#2e7d32;
}


/* niska pewność – prawie niewidoczna */

.tree-match-low{
background:#e8f1ff;
border-left:3px solid #3f6fff;
}
/* średnia pewność */

.tree-match-medium{
background:#fff3e0;
border-left:3px solid #ff9800;
}

/* wysoka pewność */

.tree-match-high{
background:#e8f5e9;
border-left:3px solid #4caf50;
}


/* poziomy pewności paska */

.fill-low{
background: var(--conf-low);
}

.fill-medium{
background: var(--conf-medium);
}

.fill-high{
background: var(--conf-high);
}

/* bardzo wysoka pewność */

.very-high{

border:1px solid #4caf50;

transition:
transform 0.15s ease,
box-shadow 0.15s ease;

}

.very-high:hover{

transform:scale(1.03);

box-shadow:0 4px 10px rgba(0,0,0,0.18);

}

/* poziom pewności w trybie różnicowania */

body.mode-differential.conf-low{
background:#f5f8ff;
}

body.mode-differential.conf-medium{
background:#fff8f0;
}

body.mode-differential.conf-high{
background:#f1f8f3;
}
/* tekst aplikacji zawsze neutralny */

body,


#differential-view,
#drawer-content{
color:#222;
}
h2,h3{
color:#222;
}


























/* srodkowE OKNOOOOOOOOOOOOOOO TAM GDZIE OBJAWY SIE WPISUJE  */
#diagnosis-view{

display:grid;
grid-template-columns:1fr;

gap:24px;

width:100%;
max-width:1000px;

padding:30px;


border-radius:18px;

border:1px solid rgba(220,225,235,0.8);
border-top:1px solid rgba(255,255,255,0.65);

box-shadow:
0 25px 60px rgba(0,0,0,0.05),
0 8px 20px rgba(0,0,0,0.00);

backdrop-filter:blur(32px);           /* blur całego panelu */
-webkit-backdrop-filter:blur(32px);
}

#right{
flex:1;
padding:24px;
min-height:calc(100vh - 55px);
display:flex;
justify-content:center;
align-items:flex-start;
}


.subcategory.tree-match-high{
background:#eef7ee;
border-left:3px solid #4caf50;
}

.subcategory.tree-match-medium{
background:#fff8ef;
border-left:3px solid #ff9800;
}
.patient-header button{

position:absolute;

top:-8px;
right:0;

width:28px;
height:28px;

padding:0;

display:flex;
align-items:center;
justify-content:center;

background:none;
border:none;

font-size:18px;
cursor:pointer;

}
.patient-header{

position:relative;

font-weight:600;

margin-bottom:12px;
}
.patient-row.patient-selected{
box-shadow:inset 0 0 0 1px #c9d8ff;

}

#patient-list-menu span{
opacity:0.7;
transition:opacity 0.15s;
}

#patient-list-menu span:hover{
opacity:1;
position:relative;
}

.patient-name{

flex:1;
min-width:0;

display:flex;
align-items:center;
gap:6px;

padding:10px 12px 10px 14px;

border-radius:10px;
cursor:pointer;

transition:background 0.15s;

margin-right:6px;

overflow:hidden;

}
.patient-diagnoses{

display:flex;
gap:4px;

flex-wrap:nowrap;
overflow:hidden;

}
.patient-name.active{

background:#dbe6ff;
border:1px solid #1976d2;

font-weight:600;

}


.patient-actions{

display:flex;
align-items:center;
gap:14px;
width:auto;
justify-content:flex-end;
padding-right:6px;
}
.patient-actions span{

font-size:19px;

cursor:pointer;

padding:6px;
margin:-6px;
border-radius:8px;

opacity:0.75;

transition:opacity 0.15s, transform 0.1s;

}

.patient-actions span:hover{

opacity:1;

transform:scale(1.15);

}

body.patient-open #drawer-handle{
display:none;
}
.patient-badge{

background:#1976d2;
color:white;
padding:3px 8px;
border-radius:10px;
font-size:12px;
font-weight:600;
margin-left:6px;

}
#patient-status.active{

border:1px solid #1976d2;
background:#eef3ff;
padding:4px 10px;
border-radius:6px;
font-weight:500;
}
.patient-name.active{


border-radius:8px;
padding:4px 8px;
font-weight:600;
color:#1a4ed8;

}



.patient-list-header{
position:sticky;
top:0;
z-index:10;
background:#f6f7fb;
padding:6px 0;
border-bottom:1px solid #eee;
margin-bottom:12px;

}
.patient-selected .patient-name{
font-weight:600;
color:#1a4ed8;
}

#new-patient-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
align-items:center;
justify-content:center;
z-index:5000;
}


/* sekcja nowy pacjent */

#patient-panel h3{
margin-top:16px;
margin-bottom:8px;
font-size:15px;
font-weight:600;
}

/* pola formularza */

#patient-panel input,
#patient-panel textarea{

width:100%;
padding:10px 12px;

font-size:14px;

font-family:'Roboto', Arial, sans-serif;

border-radius:8px;
border:1px solid #d0d0d0;

background:white;

box-sizing:border-box;   /* 🔴 TO JEST KLUCZ */

transition:border 0.15s, box-shadow 0.15s;

}


#patient-panel textarea{
min-height:60px;
resize:none;
}

/* focus */

#patient-panel input:focus,
#patient-panel textarea:focus{

outline:none;
border-color:#6a6cff;
box-shadow:0 0 0 2px rgba(106,108,255,0.15);

}

/* przycisk dodawania */

#patient-panel button{

margin-top:4px;
margin-bottom:10px;

font-weight:500;

}

/* pole wyszukiwania */

#patient-name-input{

margin-top:10px;
padding:10px 12px;
font-size:14px;

border-radius:10px;

}
/* formularz pacjenta */

.patient-form{
display:flex;
flex-direction:column;
gap:10px;
}


#new-age{
flex:0 0 140px;
}

#new-address{
flex:1;
}
.patient-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:none;
align-items:center;
justify-content:center;
z-index:11000;
}

.patient-modal-box{
background:white;
padding:22px;
border-radius:12px;
width:420px;
max-height:80vh;
box-shadow:0 10px 30px rgba(0,0,0,0.25);
overflow:visible;
display:flex;
flex-direction:column;
gap:10px;
animation:modalIn 0.18s ease;
}

@keyframes modalIn{
from{
opacity:0;
transform:scale(0.95);
}
to{
opacity:1;
transform:scale(1);
}
}
.patient-modal-box h4{
margin-top:12px;
margin-bottom:6px;
}
.patient-modal-box h3{
margin-top:0;
font-size:18px;
}

.patient-modal-box input,
.patient-modal-box textarea{
width:94%;
padding:10px 12px;
font-size:14px;
border-radius:8px;
border:1px solid #d0d0d0;
background:white;
font-family: 'Roboto', Arial, sans-serif;
}

.modal-buttons{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:10px;
}
.modal-buttons button{
padding:8px 16px;
border-radius:8px;
border:none;
font-size:14px;
cursor:pointer;
transition:0.15s;
}

.modal-buttons button:first-child{
background:#6b4ce6;
color:white;
}

.modal-buttons button:first-child:hover{
background:#5938d6;
}

.modal-buttons button:last-child{
background:#e5e5e5;
}

.modal-buttons button:last-child:hover{
background:#d8d8d8;
}

/* Ulepszone przyciski modalu edycji */
.modal-btn-save{
background:#6b4ce6;
color:white;
padding:10px 20px;
border-radius:10px;
border:none;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:background 0.15s, transform 0.1s;
}
.modal-btn-save:hover{ background:#5938d6; transform:translateY(-1px); }

.modal-btn-cancel{
background:#f1f1f5;
color:#555;
padding:10px 20px;
border-radius:10px;
border:none;
font-size:14px;
font-weight:500;
cursor:pointer;
transition:background 0.15s;
}
.modal-btn-cancel:hover{ background:#e2e2ea; }

/* Bottom sheet — usuń pacjenta */
.patient-sheet-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.35);
z-index:12000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity 0.22s ease;
}
.patient-sheet-overlay.active{
opacity:1;
pointer-events:all;
}
.patient-sheet{
background:white;
width:90%;
max-width:380px;
border-radius:22px;
padding:20px 24px 28px;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
transform:translateY(40px) scale(0.95);
transition:transform 0.28s cubic-bezier(0.34,1.1,0.64,1);
box-shadow:0 8px 40px rgba(0,0,0,0.16);
}
.patient-sheet-overlay.active .patient-sheet{
transform:translateY(0) scale(1);
}
.patient-sheet-handle{
width:40px;
height:4px;
border-radius:4px;
background:#e2e8f0;
margin-bottom:6px;
}
.patient-sheet-icon-wrap{
width:56px;
height:56px;
border-radius:16px;
background:#fff0f0;
display:flex;
align-items:center;
justify-content:center;
}
.patient-sheet-icon{
width:30px;
height:30px;
object-fit:contain;
}
.patient-sheet-title{
font-size:17px;
font-weight:700;
color:#1a1a2e;
margin:0;
text-align:center;
}
.patient-sheet-sub{
font-size:13px;
color:#9ca3af;
margin:0 0 18px;
text-align:center;
}
.patient-sheet-btn{
width:100%;
padding:13px;
border:none;
border-radius:12px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:background 0.15s, transform 0.1s;
}
.patient-sheet-btn.danger{
background:#ef4444;
color:white;
}
.patient-sheet-btn.danger:hover{ background:#dc2626; }
.patient-sheet-btn.danger:active{ background:#b91c1c; transform:scale(0.96); box-shadow:0 0 0 4px rgba(239,68,68,0.18); }
.patient-sheet-btn.cancel{
background:#f1f5f9;
color:#475569;
}
.patient-sheet-btn.cancel:hover{ background:#e2e8f0; }
.patient-sheet-btn.cancel:active{ background:#cbd5e1; transform:scale(0.96); }
#patient-toast{

position:fixed;

bottom:30px;
left:50%;

transform:translateX(-50%);

background:#323232;
color:white;

padding:10px 18px;

border-radius:8px;

font-size:13px;
font-weight:500;

box-shadow:0 3px 12px rgba(0,0,0,0.25);

opacity:0;
pointer-events:none;

transition:opacity 0.25s, transform 0.25s;

z-index:12000;

}

#patient-toast.show{
opacity:1;
transform:translateX(-50%) translateY(-6px);
}
.patient-info{

padding:8px 26px;

font-size:13px;
color:#555;

line-height:1.5;


}
.patient-info.open{

max-height:120px;
opacity:1;
transform:translateY(0);

padding:8px 26px;

}
.patient-arrow{

display:inline-flex;
align-items:center;
justify-content:center;

width:26px;
height:26px;

flex-shrink:0;

cursor:pointer;

margin-right:6px;

}

/* właściwa strzałka */

.patient-arrow::before{

content:"";

width:7px;
height:7px;

border-right:2px solid #666;
border-bottom:2px solid #666;

transform:rotate(-45deg);

transition:transform .25s ease;

}

.patient-arrow.open{
transform:rotate(90deg);
}
.new-patient-highlight{
animation:newPatientIn 0.45s ease;
}

@keyframes newPatientIn{

0%{
opacity:0;
transform:translateY(-6px) scale(0.98);
}

60%{
opacity:1;
transform:scale(1.02);
}

100%{
transform:scale(1);
}

}

/* RIPPLE NA WIERSZU PACJENTA */

.patient-row{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
padding:10px 10px 10px 18px;
border-radius:10px;
cursor:pointer;
position:relative;
overflow:visible;
transition:
background 0.15s,
box-shadow 0.15s,
transform .12s ease;
z-index:1;
}
.patient-row::before{

content:"";
position:absolute;

left:-15px;
right:-15px;
top:0;
bottom:0;

background:#e8f0ff;

border:1px solid #c9d8ff;
border-radius:10px;

opacity:0;
transition:opacity .15s;

z-index:-1;

}

.patient-row:hover::before{
opacity:1;
border:1px solid #c9d8ff;
}

.patient-row.patient-selected::before{
opacity:1;
background:#e6efff;
border:1px solid #c9d8ff;
}
.patient-row.patient-selected{
box-shadow:inset 3px 0 0 #4f7cff;
}
.patient-row:active{
transform:scale(0.985);
}


#new-name,
#new-notes{
width:100%;
box-sizing:border-box;
}
.patient-row::after{

content:"";
position:absolute;
left:18px;
right:18px;
bottom:0;
height:1px;
background:linear-gradient(
to right,
transparent,
#e6e9f0,
transparent
);

}

.patient-ripple{

position:absolute;

width:20px;
height:20px;

border-radius:50%;

background:rgba(120,150,255,0.35);

transform:translate(-50%, -50%) scale(0);

animation:iosRipple 420ms cubic-bezier(.2,.8,.2,1);

pointer-events:none;

}

@keyframes iosRipple{

0%{
transform:scale(0);
opacity:0.45;
}

60%{
transform:scale(6);
opacity:0.18;
}

100%{
transform:scale(8);
opacity:0;
}

}
@keyframes patientIOSSelect{

0%{
transform:scale(1);
}

40%{
transform:scale(1.025);
}

100%{
transform:scale(1);
}

}
.patient-row.flash{
animation:patientIOSSelect 220ms cubic-bezier(.2,.8,.2,1);
}
.patient-row.patient-selected.flash::before{
animation:patientSelectFlash 0.5s ease;
}


/* ========================= */
/* SUBTELNA ANIMACJA PANELI */
/* ========================= */

.patient-form{
animation:panelFade .18s ease;
flex:0 0 auto;
position:sticky;
top:0;
z-index:5;
}

#patient-list-menu{
animation:panelFade .18s ease;
flex:1;
overflow-y:auto;
min-height:0;
}
@keyframes panelFade{

from{
opacity:0;
transform:translateY(4px);
}

to{
opacity:1;
transform:translateY(0);
}
}

.close-patient-panel{
position:absolute;
top:12px;
right:14px;
background:none;
border:none;
font-size:18px;
cursor:pointer;
}
.patient-info{
padding:6px 14px 10px 28px;
font-size:13px;
color:#555;
background:rgba(0,0,0,0.02);
border-bottom:1px solid #eee;
}

.patient-detail{
margin:3px 0;
display:flex;
gap:6px;
}

.patient-detail span{
font-weight:600;
color:#444;
}
.patient-card{

display:flex;
flex-direction:column;

gap:10px;

padding:10px 20px 14px 20px;

font-size:13px;

color:#444;

background:white;

border-bottom:1px solid #eee;

}
.patient-field{

display:flex;
flex-direction:column;

align-items:flex-start;

width:100%;

}
.patient-label{
text-align:left !important;
width:100%;
display:block;
}


.patient-value{
display:block;
text-align:left;
width:100%;
}
.patient-notes{

margin-top:6px;
padding-top:6px;
border-top:1px solid #eee;
}
.patient-notes-text{
max-height:38px;
overflow:hidden;
position:relative;
}

.patient-notes-text.expanded{
max-height:none;
}

.patient-expand{
font-size:12px;
color:#1976d2;
cursor:pointer;
margin-top:3px;
user-select:none;
}

.patient-expand:hover{
text-decoration:underline;
}
/* ========================= */
/* PYTANIA KLINICZNE OBJAWÓW */
/* ========================= */

.symptom-question{

font-size:12px;
line-height:1.35;

margin-left:18px;
margin-top:3px;

color:#666;

opacity:0.9;

}
.symptom-question{
display:none;
}

.symptom:hover .symptom-question{
display:block;
}
#diagnostic-filters{

margin-top:10px;

padding-top:8px;

border-top:1px solid #e2e2e2;

display:flex;
flex-wrap:wrap;

gap:10px 14px;

font-size:13px;

}

#diagnostic-filters label{

display:flex;
align-items:center;

gap:6px;

cursor:pointer;

white-space:nowrap;

}
#substance-filter{
margin-top:10px;
position:relative;
}

#substance-toggle{

width:100%;
background:#f2f2f2;
border:1px solid #ccc;
padding:6px;
cursor:pointer;
text-align:left;
border-radius:4px;

}

#substance-toggle.active{
background:#dfefff;
border-color:#6aa6ff;
}

#substance-dropdown{

display:none;

position:absolute;
top:36px;
left:0;
background:white;
border:1px solid #ccc;
border-radius:6px;
padding:8px;
box-shadow:0 4px 10px rgba(0,0,0,0.15);
z-index:100;

}

#substance-dropdown label{

display:block;
margin:4px 0;

}
#app-toast{

position:fixed;

bottom:30px;
left:50%;

transform:translateX(-50%);

background:#323232;
color:white;

padding:10px 18px;

border-radius:8px;

font-size:13px;
font-weight:500;

box-shadow:0 3px 12px rgba(0,0,0,0.25);

opacity:0;
pointer-events:none;

transition:
opacity 0.25s,
transform 0.25s;

z-index:20000;

}

#app-toast.show{

opacity:1;
transform:translateX(-50%) translateY(-6px);

}

#clinical-upsell-banner[hidden]{
display:none !important;
}

.clinical-upsell-banner{
display:none;
align-items:center;
justify-content:space-between;
gap:16px;
margin:14px 0 0;
padding:16px 18px;
border-radius:18px;
background:linear-gradient(135deg, rgba(255,248,241,0.98), rgba(255,241,242,0.96));
border:1px solid rgba(251,146,60,0.26);
box-shadow:0 16px 28px rgba(15,23,42,0.06);
}

.clinical-upsell-banner.show{
display:flex;
}

.clinical-upsell-copy{
display:flex;
flex-direction:column;
gap:4px;
}

.clinical-upsell-title{
font-size:15px;
font-weight:700;
color:#111827;
line-height:1.4;
}

.clinical-upsell-sub{
font-size:13px;
line-height:1.6;
color:#6b7280;
}

.clinical-upsell-btn{
border:none;
border-radius:14px;
padding:13px 18px;
background:linear-gradient(135deg,#dc2626,#ea580c);
color:#fff;
font-size:14px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
box-shadow:0 16px 28px rgba(220,38,38,0.2);
transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.clinical-upsell-btn:hover{
transform:translateY(-1px);
box-shadow:0 20px 34px rgba(220,38,38,0.24);
}

.results-paywall-cta{
width:100%;
margin-top:12px;
padding:14px 16px;
border:none;
border-radius:14px;
background:linear-gradient(135deg,#dc2626,#ea580c);
color:#fff;
font-size:14px;
font-weight:700;
cursor:pointer;
box-shadow:0 16px 28px rgba(220,38,38,0.18);
transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.results-paywall-cta span{
display:inline-block;
margin-left:8px;
font-size:12px;
font-weight:600;
opacity:0.86;
}

.results-paywall-cta:hover{
transform:translateY(-1px);
box-shadow:0 20px 34px rgba(220,38,38,0.22);
}

.clinical-paywall-modal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(15,23,42,0.42);
backdrop-filter:blur(6px);
opacity:0;
pointer-events:none;
transition:opacity 0.18s ease;
z-index:21000;
}

.clinical-paywall-modal.open{
opacity:1;
pointer-events:auto;
}

.clinical-paywall-card{
width:min(100%, 520px);
padding:26px 24px;
border-radius:26px;
background:linear-gradient(180deg,#fff7f1 0%, #fff3f4 100%);
border:1px solid rgba(251,146,60,0.24);
box-shadow:0 28px 70px rgba(15,23,42,0.24);
}

.clinical-paywall-chip{
display:inline-flex;
align-items:center;
padding:7px 11px;
border-radius:999px;
background:linear-gradient(135deg,#ef4444,#ea580c);
color:#fff;
font-size:10px;
font-weight:800;
letter-spacing:0.08em;
text-transform:uppercase;
}

.clinical-paywall-card h3{
margin:14px 0 10px;
font-size:28px;
line-height:1.08;
letter-spacing:-0.03em;
color:#111827;
}

#clinical-paywall-copy{
margin:0;
font-size:15px;
line-height:1.7;
color:#6b7280;
}

.clinical-paywall-price{
display:flex;
align-items:baseline;
gap:10px;
margin:18px 0 16px;
}

.clinical-paywall-current{
font-size:42px;
font-weight:800;
letter-spacing:-0.05em;
color:#111827;
line-height:1;
}

.clinical-paywall-old{
font-size:17px;
font-weight:700;
color:#94a3b8;
text-decoration:line-through;
text-decoration-thickness:2px;
}

.clinical-paywall-period{
font-size:14px;
font-weight:700;
color:#6b7280;
}

.clinical-paywall-points{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:20px;
}

.clinical-paywall-point{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.6;
color:#1f2937;
}

.clinical-paywall-point::before{
content:"";
width:9px;
height:9px;
margin-top:7px;
border-radius:999px;
flex:none;
background:#ea580c;
box-shadow:0 0 0 5px rgba(234,88,12,0.12);
}

.clinical-paywall-actions{
display:flex;
flex-direction:column;
gap:10px;
}

.clinical-paywall-btn{
width:100%;
border:none;
border-radius:16px;
padding:15px 18px;
background:linear-gradient(135deg,#dc2626,#ea580c);
color:#fff;
font-size:15px;
font-weight:800;
cursor:pointer;
box-shadow:0 18px 30px rgba(220,38,38,0.2);
transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.clinical-paywall-btn:hover{
transform:translateY(-1px);
box-shadow:0 22px 36px rgba(220,38,38,0.24);
}

.clinical-paywall-ghost{
width:100%;
border:none;
border-radius:14px;
padding:13px 16px;
background:rgba(255,255,255,0.7);
color:#6b7280;
font-size:14px;
font-weight:700;
cursor:pointer;
}

@media (max-width: 760px){
.clinical-upsell-banner{
flex-direction:column;
align-items:stretch;
}

.clinical-paywall-card{
padding:22px 18px;
border-radius:22px;
}

.clinical-paywall-card h3{
font-size:24px;
}

.clinical-paywall-current{
font-size:36px;
}
}


.patient-form button{

width:100%;
padding:12px 16px;

border-radius:12px;
border:none;

background:linear-gradient(
180deg,
color-mix(in srgb, var(--accent) 92%, white),
var(--accent)
);

color:white;

font-size:14px;
font-weight:600;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;
gap:8px;

box-shadow:
0 3px 10px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.25);

transition:
transform .12s ease,
box-shadow .12s ease,
filter .15s;

}

/* hover */

.patient-form button:hover{

filter:brightness(1.05);

transform:translateY(-1px);

box-shadow:
0 6px 16px rgba(0,0,0,0.22),
inset 0 1px 0 rgba(255,255,255,0.25);

}

/* klik */

.patient-form button:active{

transform:translateY(1px);

box-shadow:
0 2px 6px rgba(0,0,0,0.2),
inset 0 2px 4px rgba(0,0,0,0.2);

}






#patient-panel .secondary-btn:hover{

background:#eef3ff;
border-color:#1976d2;

}



.field-error{

display:none;

font-size:12px;
color:#d32f2f;

margin-top:-4px;
margin-bottom:6px;

}

.input-error{

border-color:#d32f2f !important;

box-shadow:0 0 0 2px rgba(211,47,47,0.15);

}
.patient-badge{

background:#1976d2;
color:white;

padding:2px 7px;

border-radius:10px;

font-size:11px;
font-weight:600;

margin-left:6px;

}
.patient-info{

padding:8px 26px;

font-size:13px;
color:#555;

line-height:1.5;

background:rgba(0,0,0,0.02);

border-bottom:1px solid #eee;

}
.patient-detail{
margin:3px 0;
display:flex;
gap:6px;
}

.patient-detail span{
font-weight:600;
color:#444;
}
.patient-card{

display:flex;
flex-direction:column;

gap:6px;

padding:10px 20px 14px 34px;

font-size:13px;

color:#444;

background:white;

border-bottom:1px solid #eee;

}

.patient-label{

font-size:11px;
letter-spacing:.5px;
text-transform:uppercase;
opacity:.65;

}
.patient-value{

text-align:left;
width:100%;

}
.patient-label{
font-weight:600;
opacity:.65;
font-size:12px;
text-transform:uppercase;
letter-spacing:.4px;
}

.patient-value{
line-height:1.4;
word-break:break-word;
}

.patient-notes{
display:flex;
flex-direction:column;
align-items:flex-start;

margin-top:6px;
padding-top:6px;

width:100%;
}

.patient-value:empty,
.patient-value:contains("Brak informacji"){
opacity:.55;
font-style:italic;
}

.icd-badge{

background:#6b4ce6;
color:white;

font-size:11px;
font-weight:600;

padding:2px 7px;

border-radius:6px;

display:inline-block;

max-width:180px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

flex-shrink:0;

}

.input-error-text{
color:#ff4d4d;
font-size:12px;
margin-top:4px;
margin-bottom:6px;
}

.diagnosis-save-bar{
margin-top:20px;
text-align:center;

width:100%;
}

.save-diagnosis-btn{

background:var(--accent);
color:white;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
font-size:14px;

}

.save-diagnosis-btn:hover{
opacity:0.9;
}

.diagnosis-search-box{
position:relative;
margin-top:6px;
}

#diagnosis-search{
width:100%;
padding:6px;
border-radius:4px;
border:1px solid #ccc;
box-sizing:border-box;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

#diagnosis-suggestions{
list-style:none;
padding:0;
margin:4px 0 0 0;
max-height:160px;
overflow:auto;
border:1px solid #ddd;
border-radius:4px;
background:white;
}

#diagnosis-suggestions li{
padding:6px;
cursor:pointer;
}

#diagnosis-suggestions li:hover{
background:#f0f0f0;
}

#diagnosis-subtype label{
display:grid;
grid-template-columns: 22px 1fr;
align-items:start;
gap:10px;
margin:6px 0;
cursor:pointer;
}

#diagnosis-subtype input[type="radio"]{
margin-top:3px;
}

#diagnosis-subtype{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:10px;
margin-top:10px;
}

.subtype-card{
border:1px solid #ddd;
border-radius:8px;
padding:10px;
cursor:pointer;
background:white;
transition:all .15s;
font-size:14px;
line-height:1.3;
}

.subtype-card:hover{
border-color:#6b5cff;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.subtype-card.active{
border-color:#6b5cff;
background:#f5f3ff;
}

#diagnosis-subtype label:hover{
background:#f3f3f3;
border-radius:6px;
}


/* kontener diagnoz */

/* ===== kontener chipów ===== */

#edit-diagnoses{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:12px 0 10px 0;
}

/* ===== chip diagnozy ===== */

.edit-diagnosis-chip{

display:inline-flex;
align-items:center;
gap:8px;

padding:8px 14px;

background:linear-gradient(135deg,#7a5af8,#5c6cf2);

color:white;

border-radius:18px;

font-size:13px;
font-weight:500;

cursor:grab;

transition:
transform .12s ease,
box-shadow .12s ease,
background .12s ease;

}
.edit-diagnosis-chip{
cursor:grab;
padding:8px 16px;
max-width:100%;
transition:
transform .12s ease,
box-shadow .12s ease;
}
.edit-diagnosis-chip.dragging{
opacity:.6;
transform:scale(1.05);
box-shadow:0 6px 16px rgba(0,0,0,.25);
}

.edit-diagnosis-chip:active{
cursor:grabbing;
}
/* hover chip */

.edit-diagnosis-chip:hover{

transform:translateY(-1px);

box-shadow:
0 2px 6px rgba(0,0,0,.15);

}

/* ===== akcje chip ===== */

.chip-actions{

display:flex;
gap:4px;

opacity:0;

transition:opacity .15s ease;

}

/* pokaż akcje na hover */

.edit-diagnosis-chip:hover .chip-actions{
opacity:1;
}

/* ===== przyciski ===== */

.chip-actions button{

display:flex;
align-items:center;
justify-content:center;

width:20px;
height:20px;

border:none;
border-radius:6px;

background:rgba(255,255,255,.25);

color:white;

font-size:12px;

cursor:pointer;

transition:
background .12s ease,
transform .08s ease;

}

/* hover ikon */

.chip-actions button:hover{

background:rgba(255,255,255,.4);

transform:scale(1.05);

}
/* input dodawania */

.edit-diagnosis-add{

display:flex;
gap:8px;
align-items:center;
}

.edit-diagnosis-add input{
flex:1;
width:auto;
min-width:0;
padding:10px 12px;
border-radius:12px;
border:1px solid #e2e2e2;
font-size:14px;
}

.edit-diagnosis-add input:focus{

outline:none;

border-color:#6f52ed;

box-shadow:0 0 0 3px rgba(111,82,237,.15);

}

/* przycisk + */

.chip-add{

background:#6f52ed;
color:white;

border:none;

border-radius:10px;

width:36px;
height:36px;

font-size:18px;

cursor:pointer;

}


#edit-patient-modal h4{
font-size:14px;
font-weight:600;

margin-top:6px;
margin-bottom:2px;

color:#555;
letter-spacing:.2px;
}

#edit-diagnosis-suggestions{
position:absolute;
top:100%;
left:0;
right:0;

background:white;
border:1px solid #ccc;
border-radius:6px;

max-height:220px;
overflow-y:auto;

z-index:9999;

list-style:none;
padding:0;
margin-top:4px;

box-shadow:0 8px 18px rgba(0,0,0,0.15);
}

#edit-diagnosis-suggestions li{
padding:8px 10px;
cursor:pointer;
}

#edit-diagnosis-suggestions li:hover{
background:#f1f4ff;
}

#edit-patient-modal h4{

margin-top:12px;
margin-bottom:8px;

font-size:14px;
font-weight:600;

color:#555;
letter-spacing:.2px;

}
/* ========================= */
/* ANIMACJA KARTY PACJENTA */
/* ========================= */

.patient-card{

animation:patientCardOpen .18s cubic-bezier(.2,.8,.2,1);

}

@keyframes patientCardOpen{

0%{
opacity:0;
transform:translateY(-6px) scale(0.98);
}

60%{
opacity:1;
transform:scale(1.01);
}

100%{
transform:scale(1);
}

}

.patient-diagnosis-list{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:4px;
}

.icd-badge-full{

background:#6b4ce6;
color:white;

font-size:12px;
font-weight:500;

padding:4px 8px;

border-radius:8px;

}

.patient-top-diagnoses{
margin-left:6px;
display:inline-flex;
gap:4px;
flex-wrap:wrap;
vertical-align:middle;
}

.patient-top-diagnoses{
display:inline-flex;
gap:4px;
margin-left:6px;
max-width:45vw;
overflow:hidden;
}

.icd-badge[title]{
cursor:help;
}

.chip-handle{
font-size:14px;
opacity:.6;
margin-right:4px;
cursor:grab;
}

.chip-handle:hover{
opacity:1;
}

.edit-diagnosis-chip:active .chip-handle{
cursor:grabbing;
}

/* ========================= */
/* FILTRY ICD (chips style) */
/* ========================= */

#icd-filters{

margin-top:12px;
display:flex;
flex-direction:column;
gap:10px;
font-size:13px;
}



#icd-filters b{
width:100%;
margin-bottom:2px;
}

#icd-filters label{

display:flex;
align-items:center;

padding:4px 10px;

border-radius:20px;

background:#f2f4f8;
border:1px solid #d9dbe2;

cursor:pointer;

transition:
background .15s,
border-color .15s,
color .15s;

}

#icd-filters input{
display:none;
}

/* checkbox active */

#icd-filters label:has(input:checked){

background:var(--accent);
border-color:var(--accent);
color:white;

}

/* hover */

#icd-filters label:hover{

border-color:var(--accent);

}
.filter-group{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:18px;
}

.filter-group b{
margin-top:4px;
}
#filters-include,
#filters-exclude{

display:flex;
flex-wrap:wrap;
gap:8px;

}
/* UWZGLĘDNIONE */

#filters-include .filter-chip{

background:#e8f1ff;
border:1px solid #8fb5ff;
color:#1b4fa3;

}

/* WYKLUCZONE */

#filters-exclude .filter-chip{

background:#ffecec;
border:1px solid #ff9b9b;
color:#a61d1d;

}

.filter-chip{
padding:6px 12px;
border-radius:18px;
cursor:pointer;
font-size:13px;
transition:all .15s ease;
position:relative;
padding-right:22px;
transition:
transform .12s ease,
box-shadow .12s ease,
background .15s ease;
}

.filter-chip:active{
transform:scale(0.95);
}

.filter-chip:hover{
border-color:var(--accent);

transform:scale(1.05);
}

.filter-chip.excluded{

background:#ffecec;
border-color:#ffb3b3;
color:#b00020;

}

.filter-hint{

font-size:11px;
color:#777;
margin-top:-2px;
margin-bottom:4px;
display:block;

}

/* ========================= */
/* ANIMACJA PRZENOSZENIA CHIPÓW */
/* ========================= */


/* strzałka przy hover */

.filter-chip::after{

content:"↔";

position:absolute;
right:6px;
top:50%;

transform:translateY(-50%);

font-size:11px;
opacity:0;

transition:opacity .15s ease;

}

/* pokaż przy hover */

.filter-chip:hover::after{
opacity:0.7;
}

/* lekki padding żeby było miejsce na strzałkę */

#diagnosis-layout{

display:grid;

grid-template-columns: 1fr 600px;

gap:30px;

align-items:start;

max-width:1100px;

}
#symptom-area{
width:100%;
max-width:none;
}


button{

border-radius:8px;
border:1px solid transparent;
font-size:14px;
cursor:pointer;

transition:
background .12s,
border-color .12s,
box-shadow .12s;
}

.primary-btn{
 background:linear-gradient(180deg,#4f7cff,#3f6fff);
 color:white;
 border:none;
 padding:8px 16px;
 box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.primary-btn:hover{
 filter:brightness(1.05);
}
.icon{
 width:18px;
 height:18px;
 opacity:.85;
}

#duration-options{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}

.duration-chip{

padding:6px 12px;
border-radius:18px;

background:#f2f4f8;
border:1px solid #d9dbe2;

font-size:13px;
cursor:pointer;

transition:
transform .12s ease,
box-shadow .12s ease,
background .15s ease;

}

/* hover */

.duration-chip:hover{

border-color:var(--accent);
transform:scale(1.05);

}

/* active */

.duration-chip.active{

background:var(--accent);
border-color:var(--accent);
color:white;

box-shadow:0 2px 6px rgba(0,0,0,0.15);

}

/* klik */

.duration-chip:active{
transform:scale(0.95);
}

#toggle-filters{

margin-top:10px;
margin-bottom:8px;

background:none;
border:none;

color:var(--accent);

font-size:13px;
cursor:pointer;

padding:4px 0;

}

#toggle-filters:hover{
text-decoration:underline;
}

#extra-filters{

max-height:0;
overflow:hidden;

transition:max-height 0.25s ease;

}

#extra-filters.open{
max-height:600px;
}

.symptom-search{
position:relative;
}






/* ===== ICD DIAGNOSIS FLASH ===== */

.tree-diagnosis-flash{

animation: diagnosisFlash 4s ease-out forwards;

}

@keyframes diagnosisFlash{

0%{
background:rgba(170,120,255,0.35);
box-shadow:0 0 10px rgba(170,120,255,0.45);
}

40%{
background:rgba(150,140,255,0.30);
box-shadow:0 0 14px rgba(150,140,255,0.35);
}

70%{
background:rgba(120,180,255,0.25);
box-shadow:0 0 10px rgba(120,180,255,0.30);
}

100%{
background:transparent;
box-shadow:none;
}

}




/* 🔥 KOLOR POZIOMU PEWNOŚCI */

body.mode-differential.conf-low{
--accent: var(--conf-low);
}

body.mode-differential.conf-medium{
--accent: var(--conf-medium);
}

body.mode-differential.conf-high{
--accent: var(--conf-high);
}



/*  WYSZUKIWARKA ICD TREE */

#tree-search-results{
margin-top:8px;
padding:10px;

display:flex;
flex-direction:column;
gap:6px;

max-height:420px;
overflow-y:auto;

/* 🔥 wygląd panelu */
background:rgba(255,255,255,0.75);
backdrop-filter: blur(14px);

border-radius:14px;
border:1px solid rgba(0,0,0,0.08);

box-shadow: 
0 6px 20px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);

/* 🔥 animacja */
animation: fadeInSearch 0.18s ease;
}

/* iOS list */
.search-result{
display:flex;
align-items:center;
justify-content:space-between;

padding:10px 12px;

border-radius:10px;
cursor:pointer;

background:rgba(255,255,255,0.6);
backdrop-filter: blur(10px);

border:1px solid rgba(0,0,0,0.05);

transition: all 0.15s ease;
}

/* hover */
.search-result:hover{
background:rgba(0,122,255,0.12);
border:1px solid rgba(0,122,255,0.25);
}

/* active click */
.search-result:active{
transform:scale(0.97);
}

/* nazwa */
.search-main{
font-size:14px;
font-weight:500;
color:#111;
}

/* kod ICD */
.search-code{
font-size:12px;
color:#888;
margin-left:6px;
}

/* strzałka */
.search-arrow{
color:#bbb;
font-size:14px;
}

/* separator */
.search-result + .search-result{
border-top:1px solid rgba(0,0,0,0.04);
}

/* animacja */
@keyframes fadeInSearch{
from{
opacity:0;
transform:translateY(-4px);
}
to{
opacity:1;
transform:translateY(0);
}
}

#tree-search{
width:100%;
padding:10px 12px;

border-radius:12px;
border:1px solid rgba(0,0,0,0.1);

background:rgba(255,255,255,0.85);
backdrop-filter: blur(10px);

font-size:14px;

outline:none;
transition: all 0.2s ease;
}

#tree-search:focus{
border:1px solid rgba(0,122,255,0.5);
box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

.search-main b{
color:var(--accent);
font-weight:600;
}













.ios-btn {
  padding: 10px 16px;
  border-radius: 12px;
  border: none;

  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

  transition: all 0.2s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 🔥 secondary = Zamknij */
.ios-btn.secondary {
  background: #f2f2f7;
  color: #111;
}

/* hover */
.ios-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* klik */
.ios-btn:active {
  transform: scale(0.97);
}

#drawer-content {
  display: flex;
  flex-direction: column;
}

/* przycisk na dole po prawej */
#drawer-content .ios-btn {
  align-self: flex-end;
  margin-top: 16px;
}








/* 🔥 kontener ikony */
.drawer-toggle-container {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* ikonka */
#drawer-toggle {
  position: absolute;
  right: 320px;   /* 🔥 DOPASUJ do szerokości drawera */
  top: 18px;

  width: 20px;
  height: 20px;

  cursor: pointer;

  opacity: 0.75;
  transition: all 0.2s ease;
  z-index: 1000;
}

#drawer-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
}

#drawer-toggle:active {
  transform: scale(0.95);
}
.drawer-toggle-container {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 1px solid rgba(0,0,0,0.1);
}

/* ========================================
   ACCESS CONTROL — BLUR & LOCK SYSTEM
   ======================================== */

/* --- SYMPTOM TOOLTIP dla niezalogowanych --- */
body.guest-mode .symptom {
  position: relative;
}

body.guest-mode .symptom::after {
  content: "Podgląd wymaga zalogowania";
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

body.guest-mode .symptom::before {
  content: "" !important;
  display: none !important;
}

/* strzałka tooltipa */
body.guest-mode .symptom:hover::after {
  opacity: 1;
}

/* --- ZABLOKOWANY wynik diagnozy --- */
.result-item.result-locked {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

/* blur zawartości */
.result-item.result-locked .result-label,
.result-item.result-locked .result-bar {
  filter: blur(9px);
  user-select: none;
  pointer-events: none;
  transition: filter 0.2s ease;
}

/* overlay z komunikatem */
.result-item.result-locked .result-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(1.5px);
  border-radius: 12px;
  z-index: 2;
  transition: background 0.2s ease;
}

.result-lock-overlay-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.07);
}

.result-lock-overlay-inner .lock-icon {
  font-size: 14px;
  opacity: 0.75;
}

/* hover efekt */
.result-item.result-locked:hover .result-lock-overlay {
  background: rgba(255,255,255,0.55);
}

.result-item.result-locked:hover .result-lock-overlay-inner {
  color: #1d4ed8;
  border-color: rgba(29,78,216,0.2);
  background: rgba(239,246,255,0.9);
}

/* mocniejszy blur dla gości (wszystko zamazane) */
body.guest-mode .result-item.result-locked .result-label,
body.guest-mode .result-item.result-locked .result-bar {
  filter: blur(12px);
}

/* --- gradient fade na dole listy dla core --- */
body.core-mode #results::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.7));
  border-radius: 0 0 14px 14px;
  pointer-events: none;
  z-index: 1;
}

body.core-mode #results {
  position: relative;
}

/* ======================================== */

.drawer-text {
  background: #f2f2f7;
  border-radius: 14px;

  padding: 16px 18px;
  margin: 10px 0 16px;

  line-height: 1.5;

  box-shadow: 
    0 1px 2px rgba(0,0,0,0.05),
    0 6px 20px rgba(0,0,0,0.04);

  display: inline-block;
  max-width: 100%;
}








/* ===== DIFFERENTIAL 2.0 ROZNICOWANIEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE ===== */

#differential-container{
  padding: 10px;
}

.diff-section-title{
  font-size: 13px;
  font-weight: 600;
  margin: 16px 4px 8px;
  color: #6b7280;
}

.diff-placeholder{
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 16px 12px;
  border: 1.5px dashed #e2e8f0;
  border-radius: 12px;
  margin: 8px 0;
  line-height: 1.5;
}

/* CARD */

.diff-card{
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: 0.2s;
}

.diff-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.diff-card.medium{
  opacity: 0.7;
}

.diff-card.low{
  opacity: 0.4;
}

/* PROGRESS */

.diff-bar{
  height: 6px;
  border-radius: 6px;
  background: #e5e7eb;
  margin: 8px 0;
  overflow: hidden;
}

.diff-fill{
  height: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 85%, white),
    var(--accent)
  );
}

/* TEXT */

.diff-name{
  font-weight: 600;
}

.diff-meta{
  font-size: 13px;
  color: #6b7280;
}

.diff-note{
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

.parent-preview{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.parent-preview .diff-name{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

.parent-preview .diff-meta{
  font-size: 13px;
  opacity: 0.85;
}

.parent-preview .diff-note{
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

.diag-badge{
  font-size: 10px;
  background: #3b82f6;
  color: white;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 6px;
  box-shadow: none;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: background 0.3s;
}
.diag-badge.low    { background: #94a3b8; }
.diag-badge.medium { background: #f59e0b; }
.diag-badge.high   { background: #22c55e; }