:root {
    /* Osnovne barve */
    --color-primary: #c5c5c5;
    --color-primary-hover: #BC8A17;
    
    /* Barve ozadij */
    --color-bg-body: #000000;
    --color-bg-white: #ffffff;
    --color-bg-bot: #232323;
    
    /* Barve besedil */
    --color-text-main: #000000;
    --color-text-white: #ffffff;
    --color-text-loader: #4a5568;
    
    /* Obrobe in sence */
    --color-border-light: #f2f2f2;
    
    /* Sistemska sporočila in napake */
    --color-error-bg: #fdecea;
    --color-error-border: #f5c2c0;
    --color-error-text: #b71c1c;
}

* {
    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: var(--color-bg-body) url('../images/bg-ave.jpg') no-repeat center;
	background-size: cover;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
}

.left-header {
	display: flex;
	align-items: center;
    gap: 30px;
}

.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 - 120px);
    display: flex;
    flex-direction: column;
	margin-top: 40px;
	border: 1px #BC8D1647 solid;
}

@media (max-width: 768px) {
    .main {
		margin-top: 0;
        height: calc(100dvh - 95px); 
    }
}

.chat-header {
    display: flex;
    align-items: center;
	justify-content: space-between;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(270deg, #BC8A17 0%, #FFFDF0 46.15%, #BC8A17 100%);
    padding: 16px 32px 16px 0;
    box-shadow: 0px 4px 21.2px -1px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .chat-header {
        padding: 10px 10px 10px 0;
    }
	
	.left-header {
		gap: 10px;
		margin-left: 10px;
	}
	
	.left-header img {
		width: 26px;
	}
}

h1 {
    margin: 0;
    padding: 0 0 0 153px;
    font-size: 36px;
    line-height: 100%;
    font-weight: 700;
	font-family: "Arvo", serif;
	display: flex;
    align-items: center;
	position: relative;
	color: #FFF;
}

h1 span {
	color: rgba(10, 64, 40, 1);
	margin-left: 10px;
}

@media (max-width: 768px) {
    h1 {
        font-size: 24px;
		padding: 0 0 0 84px;
    }
}

h1 img {
    position: absolute;
	left: 0;
	bottom: -28px;
}

@media (max-width: 768px) {
    h1 img {
        width: 80px;
		bottom: -19px;
    }
}

p {
    text-align: left;
}

.chat-remove {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.chat-remove span {
    display: flex;
    position: relative;
    overflow: hidden;
    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='M20.0663 32.9616C16.503 32.9616 13.4512 31.697 10.9109 29.1679C8.3706 26.6384 7.10046 23.5975 7.10046 20.045V17.9658L4.39337 20.6837C4.20393 20.8732 3.97393 20.9687 3.70337 20.9704C3.4331 20.9723 3.19796 20.8768 2.99796 20.6837C2.8049 20.4834 2.70837 20.2462 2.70837 19.972C2.70837 19.6979 2.8049 19.4643 2.99796 19.2712L7.23421 15.0075C7.50115 14.7475 7.8074 14.6175 8.15296 14.6175C8.49824 14.6175 8.80087 14.7475 9.06087 15.0075L13.3246 19.2712C13.5141 19.4607 13.6098 19.6905 13.6117 19.9608C13.6134 20.2311 13.5177 20.4627 13.3246 20.6558C13.1246 20.8561 12.8875 20.9562 12.6134 20.9562C12.3392 20.9562 12.1056 20.8561 11.9125 20.6558L9.19462 17.9658V20.045C9.19462 23.0341 10.2552 25.5852 12.3763 27.6983C14.4971 29.8111 17.0605 30.8675 20.0663 30.8675C20.6063 30.8675 21.1417 30.8297 21.6725 30.7541C22.2037 30.6789 22.7192 30.5611 23.2192 30.4008C23.5025 30.3239 23.7784 30.3397 24.0467 30.4483C24.3148 30.5569 24.5071 30.7397 24.6238 30.9966C24.7407 31.2594 24.7406 31.52 24.6234 31.7783C24.5062 32.0364 24.3059 32.2132 24.0225 32.3087C23.3759 32.5309 22.7217 32.6952 22.06 32.8016C21.3984 32.9083 20.7338 32.9616 20.0663 32.9616ZM19.9617 9.22205C19.4217 9.22205 18.8845 9.25802 18.35 9.32996C17.8153 9.40191 17.3016 9.51802 16.8088 9.6783C16.5182 9.76246 16.2364 9.75024 15.9634 9.64163C15.69 9.53302 15.4914 9.34649 15.3675 9.08204C15.2509 8.8251 15.2484 8.56288 15.36 8.29538C15.472 8.02788 15.6646 7.84649 15.938 7.75121C16.5946 7.53594 17.2566 7.37829 17.9238 7.27829C18.5907 7.17829 19.27 7.1283 19.9617 7.1283C23.525 7.1283 26.575 8.39107 29.1117 10.9166C31.6484 13.4422 32.9167 16.485 32.9167 20.045V22.0683L35.6346 19.3612C35.8171 19.1718 36.0435 19.0743 36.3138 19.0687C36.5841 19.0634 36.8192 19.1609 37.0192 19.3612C37.2195 19.5612 37.3196 19.7966 37.3196 20.0675C37.3196 20.338 37.2195 20.5733 37.0192 20.7733L32.783 25.0266C32.5232 25.2866 32.2188 25.4166 31.8696 25.4166C31.5207 25.4166 31.2163 25.2866 30.9563 25.0266L26.72 20.7904C26.5306 20.6009 26.4332 20.3654 26.428 20.0837C26.4227 19.802 26.52 19.5612 26.72 19.3612C26.9203 19.1609 27.1587 19.0608 27.435 19.0608C27.7112 19.0608 27.9493 19.1609 28.1496 19.3612L30.8225 22.0341V20.045C30.8225 17.0555 29.7621 14.5044 27.6413 12.3916C25.5202 10.2786 22.9603 9.22205 19.9617 9.22205Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -9999px;
    border: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform .4s ease;
}

.chat-remove span:hover {
    transform: rotate(360deg);
}

/* CHAT OKNO */
#chat-box {
    flex: 1;
    width: 100%;
    max-height: calc(100dvh - 186px);
    padding: 15px;
    overflow-y: auto;
	background: #000 url('../images/bg.png') repeat center;
    position: relative;
}

#chat-box a {
    color: #BC8A17;
    text-decoration: underline;
}

#chat-box a:hover {
    text-decoration: none;
}

@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: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: 6px;
    color: var(--color-error-text);
    font-size: 18px;
}

/* MESSAGE WRAPPER */
.message {
    margin: 8px 0;
    display: flex;
	font-size: 15px;
    line-height: 20px;
}

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

@media (max-width: 768px) {
	.message p {
		font-size: 15px;
		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;
	line-height: 21px;
    color: #dfdfdf;
    max-width: 70%;
    text-align: center;
    background: #595959;
    box-shadow: 0px 0.16px 7.1px rgba(0, 0, 0, 0.11);
    border-radius: 12px 12px 0px 12px;
    margin-left: auto;
    width: max-content;
	word-break: break-word;
    text-align: left;
}

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

/* BOT MESSAGE (brez bubble) */
.message.assistant {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px;
    margin-left: 48px;
    position: relative;
    padding: 22px 20px;
    color: #c5c5c5;
    max-width: 65%;
    background: var(--color-bg-bot);
    box-shadow: 0px 0.16px 7.1px rgba(0, 0, 0, 0.11);
    border-radius: 18px 20px 18px 0px;
	word-break: break-word;
    text-align: left;
	font-size: 16px;
	line-height: 21px;
}

@media (max-width: 768px) {
    .message.assistant {
        font-size: 15px;
        margin-left: 0;
        padding: 18px 20px;
		max-width: 100%;
    }
}

.message.assistant::before {
    position: absolute;
    left: -43px;
    bottom: 0;
    width: 36px;
    height: 54px;
    background: url('../images/ave.png') no-repeat left bottom;
	background-size: 28px;
    content: "";
}

@media (max-width: 768px) {
    .message.assistant::before {
        width: 34px;
        height: 34px;
        left: 0;
		bottom: -37px;
        background-size: 28px;
    }
}

/* INPUT AREA */
#input-area {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #000;
    border-radius: 0px 0px 16px 16px;
}

.input-area-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 19px 22px 18px;
    background-color: #000;
    border-radius: 0 0 16px 16px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 20px;
    border: 0;
    background-color: #000;
	color: rgba(255,255,255,0.9);
}

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

/* MAIN BUTTON */
#input-area button {
    padding: 10px 30px;
    font-size: 20px;
    background: linear-gradient(270deg, #BC8A17 0%, #F1E9B7 46.15%, #BC8A17 100%);
    color: var(--color-text-main);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 20px;
    font-family: "Red Hat Text", sans-serif;
    font-weight: bold;
}

@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: var(--color-primary-hover);
}

/* 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 var(--color-primary);
    border-top-color: var(--color-bg-white);
    animation: spin 1s linear infinite;
}

.loader-text {
    font-size: 16px;
    color: var(--color-text-loader);
    margin-top: 10px;
}

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

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

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

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

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

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

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

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

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

.copy {
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: var(--color-primary);
}

.copy a {
    color: var(--color-primary);
    text-decoration: underline;
}

.chat-history {
    padding: 24px 0;
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
}

#chat-box {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
}

#chat-box::-webkit-scrollbar {
    width: 8px;
}

#chat-box::-webkit-scrollbar-track {
    background: transparent;
}

#chat-box::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

#chat-box::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
    background-clip: padding-box;
}

#chat-box::-webkit-scrollbar-corner {
    background: transparent;
}

@media screen and (max-width: 932px) and (orientation: landscape) {
	body {
		padding: 10px;
	}
	.main {
		margin: 0;
        min-height: 380px;
    }
	#chat-box {
        max-height: calc(100dvh);
	}
	.message p,
	.message.user {
		font-size: 15px;
		line-height: 20px;
	}
}

.message.assistant {
    position: relative;
}

.copy-message-btn {
    position: absolute;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 2.0028C9.82495 2.01194 9.4197 2.05103 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8.05103 3.4197 8.01194 3.82495 8.0028 4.5M19.5 2.0028C20.1751 2.01194 20.5803 2.05103 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C21.949 3.4197 21.9881 3.82494 21.9972 4.49999M21.9972 13.5C21.9881 14.175 21.949 14.5803 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.5803 15.949 20.1751 15.9881 19.5 15.9972M22 7.99999V9.99999M14.0001 2H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z' stroke='%23BC8A17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");	background-repeat: no-repeat;
	background-color: transparent;
	border: 0;
	right: 10px;
    bottom: 10px;
    text-indent: -9999px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 768px) {
	.copy-message-btn {
		width: 20px;
		height: 20px;
		background-size: 20px;
	}
}

.linear-loader {
	display: none !important;
}

.typing-indicator {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
}

.typing-indicator span {
	width: 7px;
	height: 7px;
	background-color: #888;
	border-radius: 50%;
	display: block;
	opacity: 0.4;
	animation: typing-fade 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-fade {
	0%, 80%, 100% { opacity: 0.4; transform: scale(0.8); }
	40% { opacity: 1; transform: scale(1); }
}

#dynamic-loader {
	display: none;
	margin-bottom: 10px;
}

#dynamic-loader.active {
	display: flex;
}