.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.arrow-right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin-left: 5px;
}
.lds-ellipsis div {
    position: absolute;
    top: 20px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}



body {
    height:100%;
}
table {
    height:100%;
    width:100%;
}
table th {
    padding: 0px;
}
.left-panel{
    background-color: rgba(32,33,35,1);
}
.right-panel{
    background-color: rgba(68,70,84,1);
    max-width: 10vw;
}
.bloc-input-question{
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 7px!important;
}
.bloc-input-question input,
.bloc-input-question input:hover,
.bloc-input-question input:focus{
    background-color: rgba(64,65,79,1);
    border-color: rgba(32,33,35,.5);
    color:white;
}


#input-question{
    background-color: rgba(64,65,79,1);
    border-color: rgba(32,33,35,.5);
    color:white;
    height: 41px;
    resize: none;
}

#input-question::placeholder {
    color: #ffffffb3;
    font-weight: bold;
    opacity: 1; /* Firefox */
}



.bloc-mentions {
    color: #ede9e9;
    font-size: 60%;
    text-align:center;
}
.bloc-mentions span {
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: underline;
    cursor: pointer;
}

#button-input-question {
    border-color: rgba(32,33,35,.5);
    color:white;
    background-color: #ffffff29;
}

#button-voice-auto {
    border-color: rgba(32,33,35,.5);
    color:white;
}
#button-voice-auto > a {
    width: 26px;
    height: 21px;
    background-size: cover;
    background-image: url("../img/voice_off.png");
    opacity:50%;
}

#button-microphone {
    border-color: rgba(32,33,35,.5);
    color:white;    
}
#button-microphone > a {
    width: 26px;
    height: 21px;
    background-size: cover;
    background-image: url("../img/microphone.png");
    opacity:50%;
}

#button-add-attachment {
    border-color: rgba(32,33,35,.5);
    color:white;
}
.file-attached {
    background-color: rgb(98, 98, 100)!important;
    border-color: rgba(32,33,35,.5)!important;
}
.file-attached > a {
    color:white!important;
    opacity:100%!important;
}
#button-add-attachment > a {
    width: 16px;
    height: 16px;
    background-size: cover;
    background-image: url("../img/attachment.png");
    opacity:50%;
}


#selected-api {
    border-color: rgba(32,33,35,.5);
    color:white;
}

#chat{
    padding: 15px;
    padding-bottom: 0px;
    color:white;
    text-align: top;
    height:100%;
    overflow-y: scroll;
}



.chat-msg{
    border: solid 1px grey;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow-x:hidden!important;
}

.but-remove{
    position: absolute;
    top: 5px;
    right: 6px;
    width: 26px;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-size: cover;
    background-image: url("../img/remove.png");
}

.but-voice{
    position: absolute;
    top: 5px;
    right: 6px;
    width: 26px;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-size: cover;
    background-image: url("../img/voice.png");
}

.but-remove:hover{
    background-color: rgb(200,200,200,0.2);
}
.but-voice:hover{
    background-color: rgb(200,200,200,0.2);
}
.but-download:hover{
    background-color: rgb(200,200,200,0.2);
}

.but-download{
    position: absolute;
    top: 5px;
    right: 6px;
    width: 26px;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background-size: cover;
    background-image: url("../img/download.png");
}
.chat-msg-content {
    font-weight: normal;
}
.chat-msg-title {
    margin-bottom:5px;
    font-weight: bold;
    align-items: center;
}
.chat-logo {
    height:28px;
    width:28px;
    margin-right: 10px;
}
#bloc-logo {
    position:fixed;
    top:0;
    height:110px;
    width:250px;
    color:white;
    font-size:160%;
    padding-top:10px;
}
.iframeannonce {
    margin:auto;
    display:block;
}
.qc-cmp2-persistent-link {
    background-color:transparent!important;
    font-size:50%;
    left:260px;
    bottom:3px;
}
#right-token-limit {
    color:white;
    text-align:center;
    padding-bottom: 10px;
}

#clear-chat {
    background-color: #5c636a12;
}
#clear-chat-bloc {
    height:38px;
    margin-top: 5px;
    margin-bottom: 5px;
}


#clear-chat:hover {
    background-color: rgb(200,200,200,0.2);
}

/* PC */
@media only screen and (min-width: 600px) {
    #selected-api {
        width: 105px;
        max-width:105px;
    }
    #button-voice-auto {
        width: 48px;
        max-width:48px;
    }
    #button-microphone {
        width: 48px;
        max-width:48px;
    }
    #app-description {
        padding-left:10px; 
        padding-right: 10px;
        padding-top:20px; 
        padding-bottom: 30px;
        color:white;
        text-align: justify;
    }
    #logo {
        margin-left: 5px;
        padding: 10px;
        width:80px;
        height:80px;
    }
    #logo-title > h1 {
        font-size: 27px;
        display: inline;
    }
    #logo-title > h1 > span {
        font-size: 27px;
    }
    .left-panel {
        width:250px;
        min-width:250px;
    }
    #annonce-left {
        position:fixed;
        bottom:0;
        width:250px;
    }
    #left-token-limit {
        color:white;
        width:250px;
        text-align:center;
    }
    #left-contact {
        color:white;
        width:250px;
        text-align:center;
        font-size:75%;
    }
    #modal-popup-informations-content {
        width:75vw;
        max-height:90vh;
    }
    #modal-popup-informations-body {
        font-size:90%;
        text-align: justify;
    }
}

/*#button-microphone {
    display: none;
}*/

/* Mobile */
@media only screen and (max-width: 600px) {
    #input-question{
        width:auto;
        min-width:70%;
        border-radius:0px 5px 0px 0px;
    }

    #chat{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    #button-voice-auto{
        width:50%;
    }
    /* #button-microphone: règles spécifiques mobiles à réactiver si besoin */
    #selected-api{
        width:50%;
        border-radius:0px;
        margin-left: 0px;
    }
    #button-input-question{
        border-radius:0px 0px 5px 5px;
        margin-left: 0px;
        width:100%;
    }
    #button-add-attachment{
        border-radius:5px 0px 0px 0px;
    }
    #app-description {
        display:none;
    }
    #logo {
        padding: 10px;
        width:80px;
        height:80px;
        margin-left: 10px;
        font-size: 50%;
        line-break: loose;
    }
    #logo-title {
        position:fixed;
        width:100px;
        text-align:center;
        font-size: 60%;
        display: block;
    }
    #logo-title > h1 {
        font-size: 15px;
    }
    .left-panel {
        width:100px;
        min-width:100px;
    }
    #annonce-left {
        position:fixed;
        bottom:0;
        width:100px;
    }
    #left-token-limit {
        color:white;
        width:100px;
        text-align:center;
        padding: 5px;
        font-size:75%;
    }
    #left-contact {
        color:white;
        width:100px;
        text-align:center;
        padding: 5px;
        font-size:50%;
    }
    #modal-popup-informations-content {
        width:95vw;
        max-height:90vh;
    }
    #modal-popup-informations-body {
        font-size:70%;
        text-align: justify;
    }
    
    #clear-chat {
        padding-top: 2px;
        padding-bottom: 2px;
        height: 25px;
        font-size: 80%;
    }
    #clear-chat-bloc {
        height:28px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    
}

/* Mobile tres petit */
@media only screen and (max-width: 420px) {
    .right-panel {
        font-size:85%;
    }
    .modal {
        font-size:85%;
    }
    .modal-body {
        padding-left: 8px;
        padding-right: 8px;
    }
    .bloc-input-question {
        padding-left:10px!important;
        padding-right:10px!important;
    }
    .bloc-input-question > button {
        font-size:85%;
        padding-top:0px;
        padding-bottom:0px;
    }
    #button-input-question {
        padding-top:5px;
        padding-bottom:5px;
        font-weight:bold;
    }
    .bloc-input-question > select {
        font-size:85%;
    }
    .left-panel {
        display:none;
    }
    #logo {
        padding:0px;
        width:60px;
        height:60px;
    }
}
/* Visualisation micro */
.mic-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 55px;
    padding: 10px 0;
}
.mic-bar {
    width: 9px;
    height: 40px;
    background: #00d3ff;
    border-radius: 3px;
    transform-origin: bottom center;
    transition: transform 60ms linear, opacity 80ms linear;
    opacity: 0.6;
}
.mic-panel { padding: 6px 4px; }
.mic-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.mic-label { min-width: 36px; font-size: 90%; opacity: .8; }
.mic-status-text { margin-top: 8px; text-align:center; font-size: 90%; }
.mic-status-badge { padding: 4px 8px; border-radius: 12px; background: #333; color: #fff; }
.mic-status-badge.mic-loading { background:#555; }
.mic-status-badge.mic-listening { background:#0d6efd; }
.mic-status-badge.mic-speaking { background:#198754; }
.mic-status-badge.mic-idle { background:#6c757d; }

@media only screen and (min-width: 421px) {
    #right-token-limit {
        display:none;
    }
}

@media only screen and (max-height: 620px) {
    #app-description {
        display:none;
    }
    #left-your-id {
        display:none;
    }
}

@media only screen and (min-height: 620px) {
    #app-description {
        font-size: 55%;
    }
}

@media only screen and (min-height: 690px) {
    #app-description {
        font-size: 60%;
    }
}

@media only screen and (min-height: 790px) {
    #app-description {
        font-size: 70%;
    }
}

.chat-msg-content-quote {
    border: 1px solid grey;
    border-radius: 5px;
    background: rgba(0,0,0,.2);
    padding:10px;
}

.chat-msg-content-bold {
    font-weight: bold;
    text-decoration: underline;
}

.modal-dialog {
    margin-top: 5px;
    margin-bottom: 5px;
}
.modal.show .modal-dialog {
    transform: translate(0, 0);
}

/* Assure une visibilité confortable pour la modal micro */
#modal-popup-microphone .modal-content {
    max-width: 520px;
}
#modal-popup-microphone .modal-body {
    min-height: 140px;
}

/* Forcer un contraste de fond si thème sombre */
#modal-popup-microphone .modal-content {
    background-color: rgba(32,33,35,0.98);
    color: white;
}

/* Centrage vertical de la modal */
#modal-popup-microphone .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

/* Container central pour la visualisation */
.mic-container {
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    padding: 12px 8px;
}
.mic-status-text { margin-top: 10px; text-align:center; }

.chat-msg h1, .chat-msg h2, .chat-msg h3, .chat-msg h4, .chat-msg h5, .chat-msg h6 {
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 120%;
}

.chat-msg p {
    margin: 0.5em 0;
}

.chat-msg blockquote {
    border-left: 4px solid #dfe2e5;
    color: #6a737d;
    padding: 0.5em 1em;
    margin: 0.5em 0;
    background-color: rgba(246,248,250,0.4);
}

.chat-msg code {
    background-color: rgba(27,31,35,0.4);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
}

.chat-msg pre {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 1em;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid #80808087;
}


.chat-msg pre code {
    background-color: transparent;
    padding: 0;
    font-size: 100%;
    color: #00faffc9;
}

.chat-msg ul, .chat-msg ol {
    padding-left: 2em;
    margin: 0.5em 0;
}

.chat-msg table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
}

.chat-msg table th, .chat-msg table td {
    border: 1px solid #dfe2e5;
    padding: 0.5em 1em;
}

.chat-msg table th {
    background-color: rgba(0, 0, 0, 0.4);
}

.chat-msg del {
    text-decoration: line-through;
}

.chat-msg strong {
    font-weight: bold;
}

.chat-msg em {
    font-style: italic;
}



/* Scrollbar  */
* {
    scrollbar-width: thin!important;
    scrollbar-color: #f7f7f79c rgba(32,33,35,1)!important;
     
}



@media print {
    #logo{
        width: 100px;
        height: 100px;
    }
    .left-panel {
        display:none;
    }
    .right-input{
        display:none;
    }
    .modal{
        display:none;
    }
    
    #chat{
        overflow-y: visible;
        margin-bottom: 10mm;
    }

    .but-remove{
        display:none;
    }

    .but-download{
        display:none;
    }

    .but-voice{
        display:none;
    }

    @page {
        size: A4 portrait;
        margin: 10mm;
    }
    
}