/*******COMMON ELEMENTS *********************************************/
html, body {
    color: rgb(110,110,110);
    font-family: Verdana,sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0px;
    text-decoration: none;
}

div {vertical-align: top;}
p {
    padding: 0;
    margin: 0;       
} 

a, a:visited {
    color: rgb(31, 44, 101);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
}
a:hover {
    color: rgb(30, 40, 100);
    background-color: rgb(105, 143, 156);
}
a:active {color: rgb(30, 40, 100);}

.selected {
    color: rgb(110,110,110);
    font-weight: bold; 
    background-color: rgba(210,225,230,0.9);
    border-radius: 5px; 
    padding: 0.2vh 0.6vw;
}

h2, h3 {
    margin: 5px;
    text-align: center;
    font-size: 110%;
    font-weight: bold;
    color: rgb(80,80,80);
    text-decoration: none;
}

h4 {
    margin: 5px;
    text-align: center;
    font-size: 100%;
    font-weight: bold;
    color: rgb(100,100,100);
    text-decoration: underline;
}

hr {
    border: 1px solid #a7a7cc; 
    margin: 3px auto;
}

/*******SPECIFIC ELEMENTS *********************************************/
:root {
    --border-color: #32a2ce;
    --box-shadow: 0 0 5px rgba(63, 60, 60, 0.5);
    --header-bg-color: #4e7291; /* Azzurro molto chiaro per l'header */
    --menu-bg-color: #E6F3FF;
    --content-bg-color: #FFFAF0;
    /* Colori per i messaggi */
    --user-bg-color:#70e270;
    --user-text-color: black;
    --system-bg-color: #d3d3d3ac;
    --system-text-color: black;
}

#header, #menu, #content {
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--element-border-radius);
    padding: var(--element-padding);
}

#header {
    background-color: var(--header-bg-color);
}

#menu {
    overflow: hidden;
    background-color: var(--menu-bg-color);
}

#content {
    overflow: auto;
    background-color: var(--content-bg-color);
}

#menu > div {
    background-color: #e6f2ff; 
    border-radius: 20px; 
    padding: 10px 20px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: block;  /* Cambiato da inline-block a block */
    text-align: left;
    margin: 10px auto;
    width: calc(100% - 40px);  /* Larghezza piena meno il padding */
}

.popup {
    position: absolute;
    background-color: #e6f2ff; 
    border-radius: 20px; 
    padding: 10px 20px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: block;  /* Cambiato da inline-block a block */
    margin: 10px auto;
    overflow: hidden;
}

.debug_container {
    position: relative;
}

.debug_button {
    position: absolute;
    top: 10px;
    right: 0;
    width: 23px;
    height: 23px;
    background-color: orange;
    background-size: 469px 159px;
    background-image: url('../images/glyphicons-halflings.png');
    background-position: -94px -116px;
    cursor: pointer;
}

.debug {
    background-color: orange;
    border-radius: 5px;
    color: black;
    padding: 5px 10px;
    position: absolute;  /* Cambiato da fixed a absolute */
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    font-weight: bold;
    font-size: 14px;
    max-width: 80%;
    max-height: 20%;
    overflow: auto;
}

.debug-handle {
    cursor: move;
    user-select: none;
    padding: 2px 5px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
    margin-bottom: 5px;
}

nav a, nav * a,
nav a:visited, nav * a:visited {
    color: #400a8a;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    font-size: 120%;
    color: #5858d2; 
    text-shadow: 1px 1px 1px #d8cdcde8;
    text-decoration: none;
    margin: 0 10px;
    padding: 8px 15px;
    transition: color 0.3s ease; 
}

nav a:hover,
nav * a:hover {
    color: #2d2d68;
    background-color: rgba(255, 255, 255, 0.9);
}

/* Adattamenti responsive per i componenti */
@media (max-width: 768px) {
    nav a {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }
}
/********LLM THREAD *********************************************/
.llm_thread, .llm_thread_header {
    background-color: #e6f3ff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.66), 0 10px 20px rgba(4, 3, 3, 0.66);
    border: 1px solid #ccc;
    margin: 5px;
    box-sizing: border-box;
    min-height: 100px;
    height: auto;
    overflow: auto;
}

.llm_thread > *,
.llm_thread_header > * {
    width: 60%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    margin: 10px 0;
    text-indent: 20px;
    box-sizing: border-box;
    clear: both;
    text-align: left; /* Allineamento a sinistra per tutti */
}
/*from:ì determins position..*/
.llm_thread_input,
.llm_thread > .from_user {
    margin-right: 40%;
    float: left;
}

.llm_thread > .from_agent {
    margin-left: 20%;
    margin-right: 20%;
    float: none;
    clear: both;
}

.llm_thread > .from_system {
    margin-left: 40%;
    float: right;
}

.llm_thread > .user {
    background-color: var(--user-bg-color);
    color: var(--user-text-color);
}

.llm_thread > .system {
    background-color: var(--system-bg-color);
    color: var(--system-text-color);
}

.llm_thread_input {
    resize: vertical
}

/* ... altri stili specifici ... */

/*******HR media query *********************************************/
@media 
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 2dppx),
  (min-resolution: 192dpi) { /* Alta risoluzione */
    /* Aggiungi qui stili specifici per schermi ad alta risoluzione se necessario */
}

/*******ICONE *********************************************/
/*ICONS*/
.icon_button:hover{cursor: pointer;display:inline;}
.forms_tr.new_line .icon_button.save{display:none;}
.forms_tr.new_line .icon_button.delete{display:none;}
.forms_tr:not(.new_line) .icon_button.add{display:none;}
.forms_tr.new_line .forms_td{padding-top:10px;}
.icon_button{width:2.2vw;height:2.2vw;background-size: 2vw 2vw;background-position: center;background-repeat: no-repeat; }

.icon_button.save {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/save.png');}
.icon_button.delete {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/delete.png');}
.icon_button.copy {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/copy.png');}
.icon_button.add {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/add.png');}
.icon_button.undo {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/undo.png');}
.icon_button.close {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/delete.png');}
.icon_button.help {width:22px;height:22px;background-size: 16px 16px; background-image: url('../images/question_mark_22.png');}
.icon_button.microphone {width:26px;height:26px;background-size: 20px 20px; background-color:green; background-image: url('../images/microphone.png');}
.icon_button.rightarrow{width:22px;height:22px;background-size: cover;background-image: url('../images/arrow_right_peppermint.png');}
.icon_button.refresh{width:22px;height:22px;background-size: cover;background-image: url('../images/refresh.png');}
.icon_button.chart{width:22px;height:22px;background-size: cover;background-image: url('../images/chart.png');}
.icon_button.graph{width:22px;height:22px;background-size: cover;background-image: url('../images/graph.png');}
.icon_button.table{width:22px;height:22px;background-size: cover;background-image: url('../images/table.png');}
.icon_button.tick{width:22px;height:22px;background-size: cover;background-image: url('../images/tick.png');}
.icon_button.download{width:22px;height:22px;background-size: cover;background-image: url('../images/download.png');}
.icon_button.eye{width:23px;height:23px;background-size: 469px 159px;background-image: url('../images/glyphicons-halflings.png');background-position: -94px -116px;}
.icon_button.microphone.recording {background-color: red; /* o qualsiasi altro stile per indicare che sta registrando */}





.logout-button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.logout-button:hover {
    text-decoration: none;
}