body{
           display: flex;
           flex-direction: column;
            background: rgb(168, 233, 255);
           align-items: center;
           scroll-behavior: smooth;
        }
        *{
            font-family:arial;
             margin:0;
            padding:0;
            transition: all 0.2s; 
            
        }
#chat input{
color:black !important;
}

#chat textarea{
flex:none;
}
        header{
            background-color: rgb(131, 197, 255);
            padding: 10px ;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
           
        }

        header a{
            color:black;
        }

        footer{
            text-align: center;
            background: #e5e5e5;
            padding:15px;
           
        }

        .button{
            border: solid black 1px;
            background: rgb(62, 88, 255);
            border-radius: 10px;
            padding:5px;
             margin: 10px; 
            color:white;
            transition: all 0.2s;
            cursor:pointer;
        }

        .button:hover{
             background: rgb(50, 71, 208);
        }

        main{
            padding: 20px;
        }

        .container{
          width:65%;
          background: white;
          position:relative;
        
        }

        .container a h4{
            color:black;
            
        }
        
        #aside
            {
                
                width:30%;
                height: 100vh;
                background: rgba(131, 197, 255,0.1);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
                border: solid rgb(131, 197, 255) 2px;
                border-radius: 0 20px 20px 0px ;
                padding: 20px;
                position: fixed;
                transition: all 0.3s;
                left:0;
                top:0;

            }



#chat{
    background:white;
    position: fixed;
    right:0;
    top:0;
    width:35%;
    height:100%;
    border-radius:20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-top:20px;
    padding-left:20px;
    padding-bottom:0px;
    box-sizing: border-box;
    overflow-y:auto;
    word-wrap:break-word;
    border:solid gray 1px;
    display:flex;
    flex-direction:column;
    
   
}






        @media (max-width:1500px)
        {
            .container{
                width:100%;
            }

            #aside{
                width:40%;
            }
            
             #chat{
                width:40%;
            }
        }

        @media (max-width:600px)
        {
            #aside{
                width:93%;
                padding: 10px;
            }
            
            #chat{
                width:100%;
                height:100%;
                right:0;
                top:0;
                padding:30px;
                margin:0;
                border-radius:0;
                border:none;
            }
        }

       

        .info{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        img{
            max-width: 50%;
            max-height:600px;
            min-width: 300px;
        }

        #preview{
            max-width: 50%;
            max-height: 300px;
            margin:10px;
        }

        textarea{
                color:black;
                min-width: 200px; min-height: 60px;padding:5px; border:solid black 1px; border-radius: 10px; max-width: 80%; border-bottom-right-radius: 0; max-height: 600px; transition: none; margin:10px; width:40%;
            }

            

            hr{
                border:none;
                border-top:solid black 1px;
            }

            a{
                cursor:pointer;
            }

            .menu_divy{
                padding:20px;
                 background:white;
                  border-radius:20px;
                   text-align:center;
                    border:none;
                     width:80%;
                      margin:20px; 
                      background: rgba(255,255,255,0.9);
            }

           

            .username_a{
                
                text-decoration:none;
                margin:10px;
                 color:black;
                 

            }
            .username_a:hover p{
                background:rgb(131, 197, 255);
                 border-radius: 5px;
                  padding: 5px;
            }
            
           .login{
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            width: 100%;
            height: 100%;
            left:0;
            top:0;
             background: rgba(255, 255, 255,0.1);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);;
           }

           .login form {
            padding:40px;
            border-radius: 20px;
            background: rgba(131, 197, 255,0.5);
           }

           .login form input[type="text"], input[type="password"]{
            padding:5px;
            margin:2px;
            border-radius: 10px;
            border:solid black 1px;
           }

           

           .hamburger:hover{
            transform: scale(1.5);
            
            
           }

input[type="text"]{
            padding:5px;
            margin:2px;
            border-radius: 10px;
            border:solid black 1px;
           }





#chatbox{
 display: flex;
  flex-direction: column;
}

#chat * iframe{
    resize: both;      
  overflow: auto; 
  transition: none;
  max-width: 99%;
	border:solid gray 1px;
}

.botMessage, .userMessage{
    padding:7px; border-radius:14px; border:solid grey 1px;  margin:10px;   word-wrap:break-word;   

}

.botMessage{
    background: whitesmoke; align-self: flex-start;
     border-top-left-radius: 2px;
     max-width: 90%;
     
}
          
.userMessage{
  background: rgb(131, 197, 255);  align-self: flex-end;  
border-bottom-right-radius: 2px;


}



.chats{
    display:flex;
    align-items: center;
    justify-content: space-between;
    border:solid grey 1px;
    border-radius: 10px;
    background:whitesmoke;
    padding:5px;
    margin:5px;
}

.chats:hover{
    padding:10px;
    padding-right: 5px;
}

.chats a
{
    color: black;
   text-decoration:none;
}

.kosz{
    border:solid gray 1px;
    padding:2px;
    border-radius: 6px;
}

.kosz:hover{
    padding:5px;
    background: rgb(131, 197, 255);
}

.forchat{
    display:none;
}

.currentchat{
    background: #cccccc;
}



.chatheader a{
color:black;
}




.copybutton
{
     align-self:flex-start;
      color:black;
      background: none;
      border:solid gray 1px;
      border-radius: 5px;
      cursor:pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:5px;
      line-height: 1;
      font-size: 12px;
     

}

.copybutton:hover{
    background: #888;
    font-size: 15px;
    
    
}



 @media(prefers-color-scheme: dark)
        {
.chats a{
color:white;
}
              body{
                background: #777;
            }

            .container{
                background: #444;
                color:white;
            }

            .container *{
                color: white;
            }

            #aside *{
                color:black;
            }

            .container textarea{
                color:black;
                opacity:0.8;
            }

            .container a h4{
            color:white;
            
        }

            header{
                background: #333;
            }
            footer{
                background: #888;
            }
            .button{
                 background: #888;
            }
            .button:hover{
                 background: #555;
            }

            
        header *{
            color:white;
        }

         #aside
            {
                background: rgba(255, 255, 255, 0.1);
                border:solid gray 1px;
            }

        
            input{
                color:black;
            }


            #chat{
                background: #333;
            }

            .botMessage{
                background: #444;
            }


            .chats{
                background:#555;
color:white;
            }

            .currentchat{
                background: #434343;
            }

            .userMessage{
                background: rgb(50, 71, 208);
            }


            .chatheader a{
color:white;
}
            
        }


.userMessage{
                text-wrap: break-word;
                max-width:70%;
            }


input{
color:black;
}


.userMessage, .botMessage {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 90%;
    box-sizing: border-box;
}   






article pre{
    max-height: 700px;
    overflow-y: auto;
}











/* 

  :root{
  --sidebar-w:240px;

  --color-border-tertiary:#e5e5e5;
  --color-border-secondary:#ccc;
  --color-border-primary:#999;

  --color-background-primary:#fff;
  --color-background-secondary:#f7f7f8;

  --color-text-primary:#111;
  --color-text-secondary:#666;
  --color-text-tertiary:#999;
  --color-text-danger:#e00;

  --border-radius-lg:12px;
  --border-radius-md:8px;

  --font-sans: system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
:root{--sidebar-w:240px}
#shell{display:flex;height:580px;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;background:var(--color-background-primary);font-family:var(--font-sans)}
#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);border-right:0.5px solid var(--color-border-tertiary);display:flex;flex-direction:column;background:var(--color-background-secondary);transition:transform .25s ease}
#sidebar-header{padding:14px 14px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:0.5px solid var(--color-border-tertiary)}
#sidebar-header span{font-size:13px;font-weight:500;color:var(--color-text-secondary)}
#new-btn{font-size:19px;line-height:1;color:var(--color-text-secondary);cursor:pointer;background:none;border:none;padding:2px 6px;border-radius:var(--border-radius-md)}
#new-btn:hover{background:var(--color-background-primary);color:var(--color-text-primary)}
#chat-list{flex:1;overflow-y:auto;padding:8px}
.chat-item{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:var(--border-radius-md);cursor:pointer;font-size:13px;color:var(--color-text-secondary)}
.chat-item:hover{background:var(--color-background-primary)}
.chat-item.active{background:var(--color-background-primary);color:var(--color-text-primary);font-weight:500}
.chat-item .ci-title{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-item .ci-del{opacity:0;font-size:14px;cursor:pointer;line-height:1;color:var(--color-text-tertiary);border:none;background:none;padding:2px}
.chat-item:hover .ci-del{opacity:1}
.ci-dot{width:6px;height:6px;border-radius:50%;background:var(--color-border-secondary);flex-shrink:0}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{padding:0 16px;height:52px;display:flex;align-items:center;gap:10px;border-bottom:0.5px solid var(--color-border-tertiary)}
#menu-toggle{background:none;border:none;font-size:18px;cursor:pointer;color:var(--color-text-secondary);line-height:1;padding:4px}
#menu-toggle:hover{color:var(--color-text-primary)}
#topbar-title{flex:1;font-size:14px;font-weight:500;color:var(--color-text-primary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#pro-wrap{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-secondary);cursor:pointer}
#pro-toggle{width:32px;height:18px;border-radius:9px;background:var(--color-border-tertiary);border:none;cursor:pointer;position:relative;transition:background .2s}
#pro-toggle.on{background:#7F77DD}
#pro-toggle::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
#pro-toggle.on::after{transform:translateX(14px)}
#messages{flex:1;overflow-y:auto;padding:20px 16px;display:flex;flex-direction:column;gap:12px}
.msg-user{align-self:flex-end;max-width:72%;background:var(--color-background-secondary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:10px 14px;font-size:14px;line-height:1.6;color:var(--color-text-primary)}
.msg-bot{align-self:flex-start;max-width:80%;display:flex;flex-direction:column;gap:4px}
.msg-bot-bubble{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);padding:10px 14px;font-size:14px;line-height:1.6;color:var(--color-text-primary)}
.msg-bot-actions{display:flex;gap:6px;padding-left:4px}
.msg-action-btn{background:none;border:none;font-size:12px;color:var(--color-text-tertiary);cursor:pointer;padding:2px 4px;border-radius:var(--border-radius-md)}
.msg-action-btn:hover{color:var(--color-text-secondary);background:var(--color-background-secondary)}
.avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7F77DD,#5DCAA5);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:#fff;flex-shrink:0;align-self:flex-start;margin-top:2px}
.msg-bot-row{display:flex;gap:8px;align-items:flex-start}
.typing-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-text-tertiary);animation:blink 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
#inputbar{padding:12px 16px;border-top:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;gap:8px}
#inputbox{flex:1;font-size:14px;padding:9px 13px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-lg);background:var(--color-background-secondary);color:var(--color-text-primary);resize:none;height:40px;outline:none;font-family:var(--font-sans)}
#inputbox:focus{border-color:var(--color-border-primary);background:var(--color-background-primary)}
#send-btn{width:36px;height:36px;border-radius:50%;background:#7F77DD;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
#send-btn:hover{background:#534AB7}
#send-btn:disabled{background:var(--color-border-tertiary);cursor:default}
#send-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--color-text-tertiary)}
.empty-state .icon{width:40px;height:40px;border-radius:50%;background:var(--color-background-secondary);display:flex;align-items:center;justify-content:center}
.empty-state p{font-size:13px}
@media(max-width:500px){
#sidebar{position:absolute;z-index:10;height:100%;top:0;left:0;transform:translateX(-100%);width:200px}
#sidebar.open{transform:translateX(0)}
#shell{position:relative}
} */

/* ── AI Chat overlay ── */
    #ai-chat-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0,0,0,.45);
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 16px;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s, visibility .2s;
    }
    #ai-chat-overlay.open {
        opacity: 1;
        visibility: visible;
    }
    #ai-chat-box {
        width: 100%;
        max-width: 920px;
        height: 80vh;
        max-height: 750px;
        display: flex;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 8px 40px rgba(0,0,0,.18);
        font-family: system-ui, sans-serif;
    }
    @media(prefers-color-scheme:dark){
        #ai-chat-box { background: #1e1e1e; color: #e8e8e8; }
    }

    /* sidebar */
    #aic-sidebar {
        width: 220px;
        flex: 0 0 220px;
        border-right: 1px solid rgba(128,128,128,.18);
        display: flex;
        flex-direction: column;
        background: rgba(0,0,0,.03);
        transition: transform .25s;
    }
    @media(prefers-color-scheme:dark){ #aic-sidebar { background: rgba(255,255,255,.04); } }
    #aic-sidebar-head {
        padding: 12px 12px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(128,128,128,.13);
    }
    #aic-sidebar-head span { font-size: 12px; font-weight: 600; opacity: .5; letter-spacing: .04em; text-transform: uppercase; }
    #aic-new-btn {
        background: none; border: none; cursor: pointer;
        font-size: 20px; line-height: 1; padding: 2px 6px;
        border-radius: 7px; color: inherit; opacity: .6;
    }
    #aic-new-btn:hover { opacity: 1; background: rgba(128,128,128,.12); }
    #aic-chat-list { flex: 1; overflow-y: auto; padding: 6px; }
    .aic-item {
        display: flex; align-items: center; gap: 6px;
        padding: 7px 9px; border-radius: 8px; cursor: pointer;
        font-size: 13px; color: inherit; opacity: .65;
        position: relative;
    }
    .aic-item:hover { opacity: 1; background: rgba(128,128,128,.1); }
    .aic-item.active { opacity: 1; background: rgba(128,128,128,.15); font-weight: 500; }
    .aic-item-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .aic-del {
        opacity: 0; background: none; border: none; cursor: pointer;
        font-size: 13px; color: inherit; padding: 1px 4px; border-radius: 4px;
    }
    .aic-item:hover .aic-del { opacity: .5; }
    .aic-del:hover { opacity: 1 !important; }
    .aic-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; flex-shrink: 0; }

    /* main panel */
    #aic-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    #aic-topbar {
        height: 50px; padding: 0 14px;
        display: flex; align-items: center; gap: 10px;
        border-bottom: 1px solid rgba(128,128,128,.13);
        flex-shrink: 0;
    }
    #aic-menu-toggle {
        background: none; border: none; font-size: 17px; cursor: pointer;
        color: inherit; opacity: .5; padding: 4px; border-radius: 6px; line-height: 1;
    }
    #aic-menu-toggle:hover { opacity: 1; background: rgba(128,128,128,.1); }
    #aic-title { flex: 1; font-size: 14px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .8; }
    #aic-pro-wrap { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .6; }
    #aic-pro-toggle {
        width: 30px; height: 17px; border-radius: 9px;
        background: rgba(128,128,128,.25); border: none; cursor: pointer;
        position: relative; transition: background .2s;
    }
    #aic-pro-toggle.on { background: #7F77DD; }
    #aic-pro-toggle::after {
        content: ''; position: absolute; top: 2.5px; left: 2.5px;
        width: 12px; height: 12px; border-radius: 50%;
        background: #fff; transition: transform .2s;
    }
    #aic-pro-toggle.on::after { transform: translateX(13px); }
    #aic-close {
        background: none; border: none; font-size: 17px; cursor: pointer;
        opacity: .4; padding: 4px; border-radius: 6px; line-height: 1; color: inherit;
    }
    #aic-close:hover { opacity: 1; background: rgba(128,128,128,.1); }

    /* messages */
    #aic-messages {
        flex: 1; overflow-y: auto; padding: 18px 14px;
        display: flex; flex-direction: column; gap: 10px;
    }
    .aic-msg-user {
        align-self: flex-end; max-width: 74%;
        background: rgba(127,119,221,.12);
        border: 1px solid rgba(127,119,221,.2);
        border-radius: 14px 14px 4px 14px;
        padding: 9px 13px; font-size: 14px; line-height: 1.55;
    }
    .aic-msg-bot-row { display: flex; gap: 8px; align-items: flex-start; max-width: 84%; align-self: flex-start; }
    .aic-avatar {
        width: 26px; height: 26px; border-radius: 50%;
        background: linear-gradient(135deg,#7F77DD,#5DCAA5);
        display: flex; align-items: center; justify-content: center;
        font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 2px;
    }
    .aic-msg-bot-inner { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .aic-msg-bot-bubble {
        background: rgba(128,128,128,.07);
        border: 1px solid rgba(128,128,128,.13);
        border-radius: 4px 14px 14px 14px;
        padding: 9px 13px; font-size: 14px; line-height: 1.55;
    }
    .aic-copy-btn {
        align-self: flex-start; background: none; border: none; cursor: pointer;
        font-size: 11px; opacity: .4; padding: 2px 6px; border-radius: 5px; color: inherit;
    }
    .aic-copy-btn:hover { opacity: .8; background: rgba(128,128,128,.1); }
    .aic-typing span {
        display: inline-block; width: 5px; height: 5px; border-radius: 50%;
        background: currentColor; opacity: .3; margin: 0 1.5px;
        animation: aicBlink 1.2s infinite;
    }
    .aic-typing span:nth-child(2) { animation-delay: .2s; }
    .aic-typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes aicBlink { 0%,80%,100%{opacity:.2} 40%{opacity:.9} }
    .aic-empty {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 10px; opacity: .35;
    }
    .aic-empty svg { width: 36px; height: 36px; }
    .aic-empty p { font-size: 13px; }

    /* input bar */
    #aic-inputbar {
        padding: 10px 14px; border-top: 1px solid rgba(128,128,128,.13);
        display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    #aic-input {
        flex: 1; font-size: 16px; padding: 9px 13px;
        border: 1px solid rgba(128,128,128,.22);
        border-radius: 10px;
        background: rgba(128,128,128,.06);
        color: inherit; outline: none; font-family: inherit;
    }
    #aic-input:focus { border-color: #7F77DD; background: transparent; }
    #aic-send {
        width: 36px; height: 36px; border-radius: 50%;
        background: #7F77DD; border: none; cursor: pointer;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        transition: background .15s;
    }
    #aic-send:hover { background: #534AB7; }
    #aic-send:disabled { background: rgba(128,128,128,.2); cursor: default; }
    #aic-send svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* mobile sidebar drawer */
    @media(max-width: 580px) {
    #ai-chat-overlay { padding: 0; align-items: stretch; justify-content: stretch; }
    #ai-chat-box { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    #aic-sidebar {
        position: absolute; z-index: 5; height: 100%; top: 0; left: 0;
        transform: translateX(-100%);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        background: rgba(255,255,255,.55);
        border-right: 1px solid rgba(255,255,255,.3);
    }
    @media(prefers-color-scheme:dark) {
        #aic-sidebar { background: rgba(20,20,20,.6); border-right: 1px solid rgba(255,255,255,.08); }
    }
    #aic-sidebar.open { transform: translateX(0); }
}