@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');



body{
    width: 100vw;
    height: 100vh;
    background-color: #F4F7FB;
    font-family: 'IBM Plex Sans', sans-serif;
    overflow-x: hidden;
    color: #2C3E50;

}
.InfoDiv {
    padding: 25px;
    background-color: #cbced311;
    box-shadow: #2c3e5031 3px 3px 3px 3px;
}

h4{
    color: #243B53;
}
h3{
    color: #243B53;
}
h5{
    color: #243B53;
}
button{
    border: none;
    color: #FFB238;
    /* border-bottom: 2px dotted #FFB238 ; */
    background-color: transparent;
    font-size: 20px;
    transition:  background-color 0.3s ease;
}
button:hover{
    background-color: #4caf4f38;
}


.BtnAkcji {

  color: #3A5A98;
  /* font-size: 24px; */
  padding: 10px 10px;
  background-color: transparent;
  border: 2px solid transparent;       
  box-shadow: 0 0 0 2px #ffb33875;    
  transition: box-shadow 0.3s ease,    
              background-color 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

.BtnAkcji:hover {
  background-color: #4caf4f38;
  box-shadow: 0 0 0 4px #ffb33875;      
}

.disabledBTN{
    background-color: #7d7d7e42;
    cursor:default;
  
}
.disabledBTN:hover{
    background-color: #7d7d7e42;
    box-shadow: 0 0 0 2px #ffb33875;    
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.thumbnail {
    width: 600px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: 8px;
}
.thumbnail:hover {
    transform: scale(1.05);
}
.overlay {
    position: fixed;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
}
.overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(255,255,255,0.3);
}

#chat {
  background-color: #EDF2F9;    /* delikatny błękit o ~10% ciemniejszy niż #F4F7FB */
  border: 1px solid #DCE4EE;    /* subtelna ramka w tonacji */
  border-radius: 8px;
  padding: 1rem;
  height: auto;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow-x: hidden;
}
#UserIdea{
  background-color: #EDF2F9;    /* delikatny błękit o ~10% ciemniejszy niż #F4F7FB */
  border: 1px solid #DCE4EE;    /* subtelna ramka w tonacji */
  border-radius: 8px;
  padding: 1rem;
  height: auto;
  max-height: 15vh;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  
}
textarea {
  resize: none;      /* wyłącza zarówno poziome, jak i pionowe skalowanie */
  overflow: auto;    /* ew. pokaże pasek przewijania, jeśli tekst wyjdzie poza obszar */
}
.Chatmessage{
    margin-top: 15px;
    padding: 5px;
    border-bottom: #243B53 solid 1.5px;
    

    
}
pre{
    text-wrap: balance;
    padding: 10px;
    width: 100%;
}
.w-85{
    width: 85% !important
}

/* Kontener wysuwanego panelu */
#sidebar {
    position: fixed;
    top: 5%;             /* 50% wysokości strony minus połowa wysokości panelu*/
    right: -570px;         /* ukryj panel poza ekranem oprócz strzałki */
    width: 600px;
    height: 65%;
    background-color: #dbdee086;
    color: #cbced311;
    box-shadow: -2px 0 5px rgba(119, 118, 118, 0.5);
    transition: right 0.3s ease;
    overflow: hidden;
}

/* Stan otwarty */
#sidebar.open {
    right: 0;
}

/* Strzałka do otwierania/zamykania */
#sidebar .arrow {
    position: absolute;
    /* left: 3%; */
    /* top: 3%; */
    transform: translate(-20%, -20%);
    width: 40px;
    height: 40px;
    background-color: #555;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
}

/* Zawartość panelu */
#sidebar .content {
    padding: 20px;
    color: #3A5A98;

}

.table{
    --bs-table-bg: transparent;
    
}
@media (min-width: 768px) {
  
    .w-md-25 { width: 25% !important; }
    .w-md-40 { width: 40% !important; }
    .w-md-50 { width: 50% !important; }
  
    .h-md-25 { height: 25% !important; }
    .h-md-50 { height: 50% !important; }
    /* etc… */
  }

@media (max-width: 768px){
    .thumbnail{
        width: 200px;
    }
    /* Kontener wysuwanego panelu */
#sidebar {
    position: fixed;
    top: 0;             /* 50% wysokości strony minus połowa wysokości panelu*/
    right: -90%;         /* ukryj panel poza ekranem oprócz strzałki */
    width: 99%;
    height: 100%;
    background-color: #dbdee0f1;
    color: #cbced311;
    box-shadow: -2px 0 5px rgba(119, 118, 118, 0.5);
    transition: right 0.3s ease;
    overflow: hidden;
}

/* Stan otwarty */
#sidebar.open {
    right: 0;
}

/* Strzałka do otwierania/zamykania */
#sidebar .arrow {
    position: absolute;
    left: 0;
    top:0;
    transform: translate(-20%, -20%);
    width: 50px;
    height: 50px;
    background-color: #555;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
}

/* Zawartość panelu */
#sidebar .content {
    padding: 20px;
    color: #3A5A98;

}
    
}