/* ===== 1. ZMIENNE ===== */
:root{
--zs1-granat:#1e3a5f;
--zs1-stal:#7f8c8d;
--zs1-tlo:#f4f7fa;
}

/* ===== 2. OKNO CHATA ===== */
#chat-window{
width:100%;
height:650px;
background:#ffffff;
border-radius:12px;
display:flex;
flex-direction:column;
border: 1px solid rgba(0,0,0,0.3);;
box-shadow: 2px 2px 3px rgba(0,0,0,0.8);
overflow:hidden;
position:relative;
font-size:.95em;
transition:all .4s cubic-bezier(.165,.84,.44,1);
}

#chat-window:popover-open{
position:fixed;
inset:0;
margin:auto;
width:90vw;
height:90vh;
z-index:2147483647;
border:0px solid #003366;
animation:zoomIn .3s ease-out;
}

#chat-window::backdrop{
background-color:rgba(0,0,0,.7);
backdrop-filter:blur(3px);
}

@keyframes zoomIn{
from{opacity:0;transform:scale(.95);}
to{opacity:1;transform:scale(1);}
}

/* ===== 3. NAGŁÓWEK CHATA ===== */
.chat-header{
background:#003366;
color:#ffffff;
padding:15px 20px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:3px solid #00509d;
}

.header-title-container{
display:flex;
flex-direction:column;
}

.chat-header h2{
color:#ffffff;
font-size:1.1em;
margin:0;
font-weight:700;
letter-spacing:.5px;
}

.status-online{
color:#32CD32;
font-size:.75em;
display:flex;
align-items:center;
gap:5px;
}

.status-online::before{
content:'';
width:8px;
height:8px;
background:#32CD32;
border-radius:50%;
box-shadow:0 0 5px #32CD32;
}

/* ===== 4. PRZYCISKI W NAGŁÓWKU ===== */
.header-actions{
display:flex;
gap:12px;
}

.btn-header{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.2);
color:#ffffff;
padding:8px 16px;
border-radius:8px;
font-size:.85em;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:all .3s cubic-bezier(.175,.885,.32,1.275);
will-change:transform,box-shadow;
}

.btn-header:hover{
transform:scale(1.1);
background:rgba(255,255,255,.3);
border-color:rgba(255,255,255,.5);
box-shadow:0 4px 15px rgba(255,255,255,.2);
}

.btn-header:active{
transform:scale(.95);
box-shadow:0 1px 3px rgba(0,0,0,.1);
}

.btn-reset{
color:#ffcccc;
}

.btn-reset:hover{
color:#ff9999;
box-shadow:0 4px 15px rgba(255,100,100,.2);
}

/* ===== 5. KAFELKI POD NAGŁÓWKIEM ===== */
#chat-header-tiles{
display:flex;
flex-wrap:wrap;
gap:8px;
width:100%;
padding:5px 2px 10px 2px;
}

.header-tile-btn{
flex:1 0 auto;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.3);
color:white;
padding:8px 15px;
border-radius:20px;
font-size:11px;
cursor:pointer;
font-weight:600;
transition:all .3s ease;
}

.header-tile-btn:hover{
background:rgba(255,255,255,.25);
transform:translateY(-2px);
box-shadow:0 4px 8px rgba(0,0,0,.2);
}

/* ===== 6. OBSZAR WIADOMOŚCI ===== */
#chat-messages{
flex:1;
padding:15px;
overflow-y:auto;
background:#f4f7f9;
display:flex;
flex-direction:column;
gap:12px;
}

#chat-messages::-webkit-scrollbar{
display:none;
}

/* ===== 7. STOPKA ===== */
.chat-footer{
padding:12px;
display:flex;
gap:8px;
border-top:1px solid #ddd;
background:#ffffff;
}

.chat-footer input{
flex:1;
border:1px solid #ccc;
padding:10px;
border-radius:8px;
outline:none;
}

.chat-footer button{
background:#003366;
color:#ffffff;
border:none;
width:42px;
height:42px;
border-radius:8px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .3s ease;
}

.chat-footer button:hover{
background:#00509d;
}

/* ===== IKONA WYSYŁKI ===== */
.icon-wyslij::before{
font-family:"Font Awesome 5 Free";
content:"\f1d8";
font-weight:900;
}

/* ===== 8. TREŚĆ AI ===== */
.tresc-ai{
color:#1a1a1a;
font-family:'Segoe UI',Roboto,sans-serif;
}

.tresc-ai h3{
display:flex;
align-items:center;
/* background:#1e3a5f;
color:#ffffff!important; */
padding:10px 15px;
margin:20px 0 10px 0;
font-size:1.1em;
text-transform:uppercase;
border-radius:4px;
}

.tresc-ai h3 i{
margin-right:10px;
color:#ffffff;
}

div.p-block{
display:block;
margin:12px 0;
line-height:1.6;
text-align:justify;
text-indent:30px;
}

div.p-block i:first-child{
text-indent:0;
display:inline-block;
}

.p-block a{
color:#1e3a5f;
text-decoration:underline;
font-weight:bold;
}

/* ===== 9. WIADOMOŚĆ UŻYTKOWNIKA ===== */
.user-msg{
float:right;
clear:both;
background:#f8f9fa;
border:1px solid #1e3a5f;
border-left:5px solid #1e3a5f;
color:#1e3a5f;
padding:10px 15px;
margin:10px 0;
border-radius:0 10px 10px 0;
font-weight:600;
max-width:85%;
}

/* ===== 10. BLOKI START/STOP ===== */
.start-call{
display:block;
background:#f1f4f9;
border-left:4px solid #1e3a5f;
padding:10px 15px;
margin:20px 0 15px 0;
font-weight:bold;
color:#1e3a5f;
}

.stop-call{
display:block;
text-align:right;
font-weight:bold;
color:#1e3a5f;
margin:20px 0 40px 0;
padding-right:10px;
font-size:.95em;
font-style:italic;
opacity:0;
animation:slideInRight .6s ease-out forwards;
animation-delay:.3s;
}

.stop-call::after{
content:'';
display:block;
width:100%;
height:1px;
background:linear-gradient(to right,transparent,#1e3a5f);
margin-top:10px;
opacity:.2;
}
.dane-brak{
    display: block;
    border: 2px solid rgba(255,0,0,0.4);
    background-color: rgba(255,0,0,0.1);
    border-left:5px solid rgba(255,0,0,0.4);
    color:#1e3a5f;
    padding:10px 0;
    text-align: center;
    margin:10px 0;
    border-radius:0 10px 10px 0;
    font-weight:600;
    max-width:85%;
    text-indent: 0;
}
@keyframes slideInRight{
from{opacity:0;transform:translateX(30px);}
to{opacity:1;transform:translateX(0);}
}

/* ===== 11. IKONY ===== */
i.fa-solid{
  /*   margin-right: 20px !important */
}
.tresc-ai i.fa-solid,
.tresc-ai i.fa-brands,
.p-block i{
display:inline-block!important;
visibility:visible!important;
font-family:"Font Awesome 6 Free"!important;
font-weight:900;
color:#1e3a5f;
width:25px;
text-align:center;
margin-right:10px;
}

/* ===== 12. BADGE NOWOŚĆ ===== */
.badge-nowosc{
vertical-align:middle;
margin-left:12px;
padding:2px 10px;
background:#32CD32;
color:#ffffff;
font-size:.6em;
font-weight:900;
text-transform:uppercase;
letter-spacing:1.5px;
border-radius:20px;
box-shadow:0 0 10px rgba(50,205,50,.5);
line-height:1.4;
animation:neon-pulse 1.5s infinite ease-in-out;
text-indent: 0;
}
/* kropki loadera */
.dots-loader {
    font-style: italic;
    color: #666;
}

.dots-loader::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

@keyframes neon-pulse{
0%{transform:scale(1);box-shadow:0 0 5px rgba(50,205,50,.6);}
50%{transform:scale(1.1);box-shadow:0 0 20px rgba(50,205,50,.9),0 0 30px rgba(50,205,50,.4);background:#39FF14;}
100%{transform:scale(1);box-shadow:0 0 5px rgba(50,205,50,.6);}
}

/* Reset wcięcia dla bloków z ikonami informacyjnymi */
.info-meta {
    text-indent: 0 !important; /* Usuwa wcięcie pierwszej linii */
    margin: 5px 0;
    line-height: 1.6;
}

/* Opcjonalnie: upewnienie się, że ikony mają stałą szerokość, by tekst obok był w pionowej linii */
.info-meta i {
    width: 25px; 
    text-align: center;
    margin-right: 10px;
    color: #1e3a5f;
}

/* ===== 13. RESPONSYWNOŚĆ ===== */
@media(max-width:1200px){
#chat-window{height:600px;}
}

@media(max-width:900px){
#chat-window{height:85vh;}
.btn-header span{display:none;}
}

@media(max-width:600px){
#chat-window{width:100%;height:100vh;border-radius:0;}
.chat-footer input{font-size:16px;}
.user-msg{max-width:95%;}
}



/*  */
/* Nagłówek sekcji listy */

.tresc-ai h4 {
font-size: 0.95rem;
font-weight: 700;
color: #374151; /* Ciemnoszary, nienachalny */
margin: 12px 0 6px 0;
display: flex;
align-items: center;
}

/* Elementy listy - styl li-style */
.line-list {
display: block;
position: relative;
padding-left: 18px;
margin-bottom: 4px;
font-size: 0.9rem;
color: #4b5563;
line-height: 1.4;
}

.line-list::before {
content: "•";
position: absolute;
left: 4px;
color: #9ca3af; / Jasnoszary, by nie odciągał uwagi */
font-weight: normal;
}

/* Opcjonalnie: lekkie wcięcie dla grup pod h4 */
h4 + .line-list {
margin-top: 2px;
}

/* Interlinia dla bloków tekstu, by nie zlewały się z listami */
.p-block {
margin-bottom: 10px;
line-height: 1.5;
}

.p-block {
    animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dots-loader::after {
    content: '';
    display: inline-block;
    width: 0.8em;
    text-align: left;
    animation: dots 1s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

.ai-line {
    opacity: 0;
    transform: translateY(6px);
}

.fade-in {
    animation: fadeInUp 0.25s ease forwards;
}

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

.main-ai-content .line {
    margin: 4px 0;
}

.list-item {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #ddd;
}