* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: none;
}

body {
    font-family: "Red Hat Text", sans-serif;
    font-weight: 400;
    background: #f4f6f9 url('../media/bg.jpg') no-repeat center center;
    background-size: cover;
    padding: 40px;
}

@media (max-width: 768px) {
    body{
        padding: 15px;
        background: #f4f6f9 url('../media/bg-mobile.jpg') no-repeat center center;
    }
}

.main {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0px -5px 21px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .main {
        height: calc(100dvh - 30px); 
    }
}

.chat-header {
   display: flex;
   align-items: center;
   border-radius: 16px 16px 0 0;
   background: #FFFFFF;
   padding: 16px 32px;
   box-shadow: 0px 4px 21.2px -1px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .chat-header {
        padding: 16px;
    }
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 36px;
    line-height: 100%;
    font-weight: 400;
}

@media (max-width: 768px) {
    h1 {
        font-size: 26px;
    }
}

h1 img {
    margin-left: 10px;
    position: relative;
    top: -5px;
}

@media (max-width: 768px) {
    h1 img {
        width: 70px;
        margin-left: 5px;
    }
}

p {
    text-align: left;
}

.chat-menu {
    margin-left: auto;
    position: relative;
}

.chat-menu-toggle {
    width: 46px;
    height: 46px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 11px;
    border: 1px solid #d9dde3;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-menu-toggle:hover,
.chat-menu-toggle[aria-expanded="true"] {
    border-color: #D50A11;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.chat-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: #1F1F1F;
}

.chat-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    z-index: 20;
}

.chat-menu-item {
    width: 100%;
    display: block;
    padding: 12px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1F1F1F;
    text-align: left;
    font-family: "Red Hat Text", sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chat-menu-item:hover {
    background: #fff1f1;
    color: #D50A11;
}

/* CHAT OKNO */
#chat-box {
    flex: 1;
    width: 100%;
    max-height: calc(100dvh - 186px);
    padding: 15px;
    overflow-y: auto;
    background-color: #F3F3F3;
    position: relative;
}

@media (max-width: 768px) {
    #chat-box {
       max-height: calc(100dvh - 166px);
    }
}

/* SYSTEM MESSAGE */
.system-message {
    text-align: center;
    margin: 10px 0;
    padding: 8px 12px;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 6px;
    color: #b71c1c;
    font-size: 18px;
}

/* MESSAGE WRAPPER */
.message {
    margin: 8px 0;
    display: flex;
}

.message p {
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 10px;
}

.message p:last-child {
    margin: 0;
}

.message img {
    margin: 10px;
    width: 100%;
    border-radius: 6px;
}

/* USER BUBBLE (kot tvoja slika) */
.message.user {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 20px;
    padding: 18px 20px;
    font-size: 16px;
    color: #000000;
    max-width: 70%;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 0.16px 7.1px rgba(0, 0, 0, 0.11);
    border-radius: 12px 12px 0px 12px;
    border-right: 4px #000000 solid;
    margin-left: auto;
    width: max-content;
}

@media (max-width: 768px) {
    .message.user {
        font-size: 14px;
        padding: 14px 20px;
    }
}

/* BOT MESSAGE (brez bubble) */
.message.bot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px;
    margin-left: 48px;
    position: relative;
    padding: 22px 20px;
    font-size: 14px;
    color: #000000;
    max-width: 85%;
    background: #FFFFFF;
    box-shadow: 0px 0.16px 7.1px rgba(0, 0, 0, 0.11);
    border-radius: 16px 16px 16px 0px;
    border-left: 4px #D5070F solid;
}

@media (max-width: 768px) {
    .message.bot {
        font-size: 14px;
        margin-left: 40px;
        padding: 18px 20px;
    }
}

.message.bot::before {
    position: absolute;
    left: -48px;
    bottom: 0;
    width: 34px;
    height: 34px;
    background: url('../media/avatar.svg') no-repeat center;
    content: "";
}

@media (max-width: 768px) {
    .message.bot::before {
        width: 34px;
        height: 34px;
        left: -48px;
        background-size: 28px;
    }
}

/* INPUT AREA */
#input-area {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #F3F3F3;
    border-radius: 0px 0px 16px 16px;
    padding: 24px 27px;
    box-shadow: 0px -5px 21px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    #input-area {
        padding: 16px;
    }
}

.input-area-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 2px solid #D60911;
    box-shadow: 0px 0.15px 0.47px rgba(0, 0, 0, 0.11), 0px 0.84px 1.9px rgba(0, 0, 0, 0.13);
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 20px;
    border: 0;
}

@media (max-width: 768px) {
    input[type="text"] {
        width: 100%;
        font-size: 16px;
        padding-right: 10px;
    }
}

/* FILE UPLOAD BUTTON */
.custom-file-upload {
    display: inline-block;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9913 28.3845C21.8683 28.3845 23.4483 27.743 24.7313 26.4599C26.0144 25.1769 26.6559 23.5969 26.6559 21.7199C26.6559 19.8433 26.0144 18.2662 24.7313 16.9887C23.4483 15.7112 21.8683 15.0724 19.9913 15.0724C18.1147 15.0724 16.5376 15.7112 15.2601 16.9887C13.9829 18.2662 13.3442 19.8433 13.3442 21.7199C13.3442 23.5969 13.9829 25.1769 15.2601 26.4599C16.5376 27.743 18.1147 28.3845 19.9913 28.3845ZM19.9913 26.2903C18.6908 26.2903 17.6067 25.8538 16.7392 24.9808C15.8717 24.1074 15.438 23.0205 15.438 21.7199C15.438 20.4194 15.8717 19.3353 16.7392 18.4678C17.6067 17.6003 18.6908 17.1666 19.9913 17.1666C21.2922 17.1666 22.3791 17.6003 23.2522 18.4678C24.1255 19.3353 24.5622 20.4194 24.5622 21.7199C24.5622 23.0205 24.1255 24.1074 23.2522 24.9808C22.3791 25.8538 21.2922 26.2903 19.9913 26.2903ZM6.77383 34.1666C6.05744 34.1666 5.44383 33.9112 4.933 33.4003C4.42216 32.8895 4.16675 32.2759 4.16675 31.5595V11.9145C4.16675 11.2078 4.42216 10.5967 4.933 10.0812C5.44383 9.56561 6.05744 9.30784 6.77383 9.30784H12.2863L14.5726 6.69742C14.8048 6.41492 15.0905 6.2002 15.4297 6.05325C15.7688 5.90659 16.1342 5.83325 16.5259 5.83325H23.4742C23.8659 5.83325 24.2313 5.90659 24.5705 6.05325C24.9097 6.2002 25.1954 6.41492 25.4276 6.69742L27.7138 9.30784H33.2263C33.933 9.30784 34.5441 9.56561 35.0597 10.0812C35.5755 10.5967 35.8334 11.2078 35.8334 11.9145V31.5595C35.8334 32.2759 35.5755 32.8895 35.0597 33.4003C34.5441 33.9112 33.933 34.1666 33.2263 34.1666H6.77383ZM6.77383 32.0724H33.2263C33.3761 32.0724 33.499 32.0244 33.5951 31.9283C33.6912 31.8321 33.7392 31.7092 33.7392 31.5595V11.9145C33.7392 11.772 33.6912 11.6509 33.5951 11.5512C33.499 11.4514 33.3761 11.4016 33.2263 11.4016H26.7563L23.6988 7.92742H16.3013L13.2438 11.4016H6.77383C6.62411 11.4016 6.50119 11.4514 6.40508 11.5512C6.30897 11.6509 6.26091 11.772 6.26091 11.9145V31.5595C6.26091 31.7092 6.30897 31.8321 6.40508 31.9283C6.50119 32.0244 6.62411 32.0724 6.77383 32.0724Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A");
    background-color: #FFFFFF;
    width: 40px;
    height: 40px;
    transition: background 0.3s ease;
    text-indent: -9999px;
}

.custom-file-upload:hover {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9913 28.3845C21.8683 28.3845 23.4483 27.743 24.7313 26.4599C26.0144 25.1769 26.6559 23.5969 26.6559 21.7199C26.6559 19.8433 26.0144 18.2662 24.7313 16.9887C23.4483 15.7112 21.8683 15.0724 19.9913 15.0724C18.1147 15.0724 16.5376 15.7112 15.2601 16.9887C13.9829 18.2662 13.3442 19.8433 13.3442 21.7199C13.3442 23.5969 13.9829 25.1769 15.2601 26.4599C16.5376 27.743 18.1147 28.3845 19.9913 28.3845ZM19.9913 26.2903C18.6908 26.2903 17.6067 25.8538 16.7392 24.9808C15.8717 24.1074 15.438 23.0205 15.438 21.7199C15.438 20.4194 15.8717 19.3353 16.7392 18.4678C17.6067 17.6003 18.6908 17.1666 19.9913 17.1666C21.2922 17.1666 22.3791 17.6003 23.2522 18.4678C24.1255 19.3353 24.5622 20.4194 24.5622 21.7199C24.5622 23.0205 24.1255 24.1074 23.2522 24.9808C22.3791 25.8538 21.2922 26.2903 19.9913 26.2903ZM6.77383 34.1666C6.05744 34.1666 5.44383 33.9112 4.933 33.4003C4.42216 32.8895 4.16675 32.2759 4.16675 31.5595V11.9145C4.16675 11.2078 4.42216 10.5967 4.933 10.0812C5.44383 9.56561 6.05744 9.30784 6.77383 9.30784H12.2863L14.5726 6.69742C14.8048 6.41492 15.0905 6.2002 15.4297 6.05325C15.7688 5.90659 16.1342 5.83325 16.5259 5.83325H23.4742C23.8659 5.83325 24.2313 5.90659 24.5705 6.05325C24.9097 6.2002 25.1954 6.41492 25.4276 6.69742L27.7138 9.30784H33.2263C33.933 9.30784 34.5441 9.56561 35.0597 10.0812C35.5755 10.5967 35.8334 11.2078 35.8334 11.9145V31.5595C35.8334 32.2759 35.5755 32.8895 35.0597 33.4003C34.5441 33.9112 33.933 34.1666 33.2263 34.1666H6.77383ZM6.77383 32.0724H33.2263C33.3761 32.0724 33.499 32.0244 33.5951 31.9283C33.6912 31.8321 33.7392 31.7092 33.7392 31.5595V11.9145C33.7392 11.772 33.6912 11.6509 33.5951 11.5512C33.499 11.4514 33.3761 11.4016 33.2263 11.4016H26.7563L23.6988 7.92742H16.3013L13.2438 11.4016H6.77383C6.62411 11.4016 6.50119 11.4514 6.40508 11.5512C6.30897 11.6509 6.26091 11.772 6.26091 11.9145V31.5595C6.26091 31.7092 6.30897 31.8321 6.40508 31.9283C6.50119 32.0244 6.62411 32.0724 6.77383 32.0724Z' fill='%23ef000c'/%3E%3C/svg%3E%0A");
}

#image-upload {
    display: none;
}

/* MAIN BUTTON */
#input-area button {
    padding: 10px 30px;
    font-size: 20px;
    background-color: #D50A11;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 20px;
    font-family: "Red Hat Text", sans-serif;
    font-weight: 400;
}

@media (max-width: 768px) {
    #input-area button {
        background-image: url("data:image/svg+xml,%3Csvg fill='%23FFFFFF' height='40px' width='40px' version='1.1' id='Icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M29.3,2.6c-0.3-0.2-0.7-0.3-1-0.2L3,11.7c-0.4,0.1-0.7,0.5-0.7,0.9c0,0.4,0.3,0.8,0.7,0.9l10.2,3.8l10-10 c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-9.8,9.8l6.6,10.6c0.2,0.3,0.5,0.5,0.8,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.7-0.4,0.8-0.7l6.2-25.2 C29.7,3.3,29.6,2.9,29.3,2.6z'/%3E%3C/svg%3E");
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 28px;
        padding: 8px 22px;
        margin-left: 10px;
    }
}

#input-area button:hover {
    background-color: #ef000c;
}

/* DISABLED BUTTON */
#input-area button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* LOADER OVERLAY */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.loader-overlay.show {
    display: flex;
}

/* LOADER ICON */
.loader {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 4px solid #D50A11;
    border-top-color: #FFFFFF;
    animation: spin 1s linear infinite;
}

.loader-text {
    font-size: 16px;
    color: #4a5568;
    margin-top: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* BOT MESSAGE FORMATTING */
.message.bot h3,
.message.bot h4 {
    margin: 10px 0 6px;
    font-weight: 600;
}

.message.bot h3 {
    font-size: 18px;
}

.message.bot h4 {
    font-size: 16px;
}

.message hr {
    border-top: 1px;
    height: 1px;
    padding: 0;
    margin: 20px 0;
    display: block;
}

.message.bot ol,
.message.bot ul {
    margin: 6px 0 10px 18px;
}

@media (max-width: 768px) {
    .message.bot ol,
    .message.bot ul {
        margin: 6px 0 10px 0;
    }
}

.message.bot li {
    margin: 4px 0;
}

.message.bot strong {
    font-weight: 600;
}

.copy {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #FFFFFF;
}

.copy a {
    color: #FFFFFF;
    text-decoration: underline;
}

@media (orientation: landscape) and (max-width: 768px) {
    #chat-box {
        min-height: 240px;
    }
}