@import url(layout.css);
@import url(canvas.css);
@import url(element/button.css);


* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    font-size: 1rem;
    color: #efefef;
    padding-bottom: 5px;
}



main {
    display: flex;
    flex-direction: column;
}

.card {
    background: #121212;
    border: 1px dashed #414143;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 6px 24px rgba(31, 36, 48, 0.06);
    max-width: 100%;
    overflow: hidden;

    &:has(:focus) {
        border-color: orange;
    }
}

.btn {
    display: inline-block;
    background: #1677ff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
}

.btn:hover {
    background: #0d5bd3;
}

footer {
    text-align: center;
    color: #6b7280;

}

textarea {
    background-color: #3b3b3b;
    width: 100%;
    margin: 5px;
    border: none;
    background-color: transparent;
    outline: none;
    caret-color: orange;
    color: #efefef;
}

.result-view {
    margin-top: 10px;
    color: green;
}

stack-panel {
    display: flex;
    flex-direction: column;

    &.horizontal {
        flex-direction: row;
    }
}

canvas-layout {
    display: grid;
    position: relative;

    button {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
}


/* CHAT */

chat-layout {
    display: flex;
    background-color: #121212;
    border-radius: 10px;
    flex-direction: column;
    max-width: 360px;
    margin: 5px;
    height: calc(95svh - 10px);
    border: 1px solid #363636;

    chat-container {
        flex-grow: 1;
    }
}

/* CHAT CONTAINER */
message-history {
    display: flex;
    flex-direction: column;
}

message-element {
    display: flex;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    border: 1px dashed #07244c;
    background-color: #0b3570;
    min-width: 120px;
    align-self: flex-start;

    &.type-admin {
        border: 1px dashed #4c4707;
        background-color: #83730d;
    }

    &.type-self {
        align-self: flex-end;
        border: 1px dashed #43074c;
        background-color: #3f0b70;
    }
}

.state-indicator {


    &:before {
        width: 24px;
        height: 24px;
        background-color: red;
        background-image: conic-gradient(#212121, #555554, #8e8e8e);
        content: " ";
        animation: rotate-animation 3s infinite linear;

        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3.9786393642425537 6.482002258300781 40.042722940444946 37.53936004638672"><path  d="M14.753906 6.4824219 A 1.50015 1.50015 0 0 0 13.490234 8.7304688L15.890625 13.03125 A 1.50015 1.50015 0 1 0 18.509766 11.568359L16.109375 7.2695312 A 1.50015 1.50015 0 0 0 14.753906 6.4824219 z M8.015625 13.289062 A 1.50015 1.50015 0 0 0 7.2695312 16.109375L11.568359 18.509766 A 1.50015 1.50015 0 1 0 13.03125 15.890625L8.7304688 13.490234 A 1.50015 1.50015 0 0 0 8.015625 13.289062 z M5.5 22.5 A 1.50015 1.50015 0 1 0 5.5 25.5L10.5 25.5 A 1.50015 1.50015 0 1 0 10.5 22.5L5.5 22.5 z M37.5 22.5 A 1.50015 1.50015 0 1 0 37.5 25.5L42.5 25.5 A 1.50015 1.50015 0 1 0 42.5 22.5L37.5 22.5 z M35.716797 29.289062 A 1.50015 1.50015 0 0 0 34.96875 32.109375L39.269531 34.509766 A 1.50015 1.50015 0 1 0 40.730469 31.890625L36.431641 29.490234 A 1.50015 1.50015 0 0 0 35.716797 29.289062 z M12.238281 29.291016 A 1.50015 1.50015 0 0 0 11.568359 29.490234L7.2695312 31.890625 A 1.50015 1.50015 0 1 0 8.7304688 34.509766L13.03125 32.109375 A 1.50015 1.50015 0 0 0 12.238281 29.291016 z M17.201172 34.181641 A 1.50015 1.50015 0 0 0 15.890625 34.96875L13.490234 39.269531 A 1.50015 1.50015 0 1 0 16.109375 40.730469L18.509766 36.431641 A 1.50015 1.50015 0 0 0 17.201172 34.181641 z M30.753906 34.181641 A 1.50015 1.50015 0 0 0 29.490234 36.431641L31.890625 40.730469 A 1.50015 1.50015 0 1 0 34.509766 39.269531L32.109375 34.96875 A 1.50015 1.50015 0 0 0 30.753906 34.181641 z M23.976562 35.978516 A 1.50015 1.50015 0 0 0 22.5 37.5L22.5 42.5 A 1.50015 1.50015 0 1 0 25.5 42.5L25.5 37.5 A 1.50015 1.50015 0 0 0 23.976562 35.978516 z"></path></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: 24px 24px;
        margin-inline-end: 10px;
    }
}

.state-success {


    &:before {
        width: 24px;
        height: 24px;
        background-image: conic-gradient(#086016, #509c52, #8edd8f);
        content: " ";

        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="4.0655012130737305 4.02734375 39.40659427642822 38.95246505737305"><path  d="M23.769531 4.0273438C22.346926 4.0273436 20.924198 4.6679969 20.029297 5.9472656L18.804688 7.6972656C18.42446 8.2405928 17.75762 8.4823576 17.117188 8.3105469L15.054688 7.7578125C12.039164 6.9478032 9.0513372 9.4541914 9.3242188 12.564453L9.5117188 14.693359C9.5698268 15.353629 9.2143512 15.968336 8.6132812 16.248047L6.6757812 17.150391C3.8460808 18.469157 3.1695447 22.31017 5.3769531 24.517578L6.8886719 26.027344C7.3575105 26.495668 7.4815039 27.194137 7.2011719 27.794922L6.296875 29.730469 A 1.50015 1.50015 0 0 0 6.296875 29.732422C4.9762912 32.561406 6.926866 35.937572 10.037109 36.208984L12.164062 36.394531C12.82431 36.452121 13.367828 36.908629 13.539062 37.548828L14.091797 39.613281C14.898655 42.629463 18.564065 43.963115 21.121094 42.171875L22.869141 40.945312C23.415679 40.563046 24.124412 40.564411 24.667969 40.945312L26.417969 42.171875C28.974997 43.963115 32.638455 42.629463 33.445312 39.613281L33.998047 37.548828C34.169281 36.908629 34.712799 36.452123 35.373047 36.394531L37.5 36.208984 A 1.50015 1.50015 0 0 0 37.501953 36.208984C40.612197 35.937572 42.560818 32.561406 41.240234 29.732422 A 1.50015 1.50015 0 0 0 41.240234 29.730469L40.337891 27.794922C40.057559 27.194137 40.179598 26.495668 40.648438 26.027344L42.160156 24.517578C44.36843 22.310771 43.691415 18.469337 40.861328 17.150391L38.925781 16.248047C38.324711 15.968336 37.969236 15.353629 38.027344 14.693359L38.214844 12.564453C38.487678 9.4542384 35.499899 6.9478032 32.484375 7.7578125L30.421875 8.3105469C29.781443 8.4823576 29.114601 8.2405929 28.734375 7.6972656L27.509766 5.9472656C26.614864 4.6679969 25.192137 4.0273437 23.769531 4.0273438 z M23.769531 6.96875C24.247926 6.96875 24.725683 7.2012844 25.050781 7.6660156 A 1.50015 1.50015 0 0 0 25.050781 7.6679688L26.275391 9.4179688C27.373164 10.986642 29.349651 11.705174 31.199219 11.208984L33.261719 10.654297C34.356195 10.360306 35.325682 11.172996 35.226562 12.302734L35.039062 14.429688L35.039062 14.431641C34.872076 16.338649 35.921876 18.160741 37.658203 18.96875L37.658203 18.966797L39.59375 19.869141C40.621664 20.348194 40.840789 21.593338 40.039062 22.394531L38.529297 23.904297C37.174135 25.257972 36.809473 27.329238 37.619141 29.064453L38.523438 31C39.002854 32.027016 38.369991 33.122116 37.240234 33.220703L35.113281 33.40625C33.205529 33.572658 31.594375 34.923637 31.099609 36.773438L30.548828 38.837891C30.255686 39.933709 29.067644 40.365604 28.138672 39.714844L26.390625 38.488281C24.822181 37.389183 22.7179 37.390548 21.148438 38.488281L19.398438 39.714844C18.469465 40.365604 17.283376 39.933709 16.990234 38.837891L16.4375 36.773438C15.942734 34.923637 14.333534 33.572658 12.425781 33.40625L10.296875 33.220703C9.1671188 33.122116 8.5362088 32.027016 9.015625 31L9.9199219 29.064453C10.72959 27.329238 10.364927 25.257972 9.0097656 23.904297L7.4980469 22.394531C6.6954553 21.59194 6.9150598 20.348374 7.9433594 19.869141L9.8789062 18.966797L9.8789062 18.96875C11.615234 18.160694 12.666988 16.338649 12.5 14.431641L12.5 14.429688L12.3125 12.302734C12.21338 11.172996 13.180915 10.360306 14.275391 10.654297L16.339844 11.208984C18.189412 11.705174 20.163945 10.986642 21.261719 9.4179688L22.486328 7.6679688 A 1.50015 1.50015 0 0 0 22.486328 7.6660156C22.811427 7.2013282 23.291137 6.96875 23.769531 6.96875 z M30.970703 17.986328 A 1.50015 1.50015 0 0 0 29.939453 18.439453L21 27.378906L17.060547 23.439453 A 1.50015 1.50015 0 1 0 14.939453 25.560547L19.939453 30.560547 A 1.50015 1.50015 0 0 0 22.060547 30.560547L32.060547 20.560547 A 1.50015 1.50015 0 0 0 30.970703 17.986328 z"></path></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: 24px 24px;
        margin-inline-end: 10px;
    }
}

.state-error {
    background-color: #212121 !important;

    * {
        text-decoration: line-through;
        text-decoration-color: red;
        text-decoration-style: wavy;
    }

}

.hiding-status {
    &:before {
        transition: 0.5s;
        width: 0 !important;
        opacity: 0 !important;
        margin-inline-end: 0 !important;
    }
}

@keyframes rotate-animation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* @keyframes rotateGradient {
     0% {
         background: conic-gradient(from 0deg, red, yellow, green, blue, red);
     }

     100% {
         background: conic-gradient(from 360deg, red, yellow, green, blue, red);
     }
 } */

footer pre {
    text-align: start;
}

chat-card {
    position: fixed;
    bottom: 0;
}

chat-container {
    padding-bottom: 150px;
    overflow-y: auto;
}


body {
   
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1125 2436"><defs><style>.cls-1{fill:none;stroke:%230037a5;stroke-width:3px;opacity:0.5;}.cls-1,.cls-3{stroke-miterlimit:10;opacity:0.5;}.cls-2{fill:%230037a5;opacity:0.5;}.cls-3{stroke:%23000;opacity:0.5;}.cls-4{font-size:60px;font-family:MyriadPro-Regular, Myriad Pro;letter-spacing:-0.03em;}.cls-5{letter-spacing:-0.01em;}.cls-6{letter-spacing:0em;}</style></defs><polyline class="cls-1" points="70.5 57.5 70.5 1171.41 162.04 1262.96 162.04 2319.69"/><line class="cls-1" x1="101.93" y1="0.5" x2="101.93" y2="716.24"/><polygon class="cls-2" points="145 2409 125 2409 125 1693.26 145 1708.26 145 2409"/></svg>');

  

}


.abstract-theme{
    border: 1px solid #1677ff; margin: 20px; border-radius: 10px;
    min-height: 50vh;
    background-image: linear-gradient(#1677ff00,#1677ff33);
}

.pd-20px{
    padding: 20px;
}

.action-box {
    margin: 10px;
    display: flex;
    gap: 10px;
    justify-items: flex-end;
    justify-content: flex-end;
}