#chat-container { width:500px; border:1px solid #ccc; background-color:white; display:flex; flex-direction:column; position:fixed; bottom:120px; right:20px; box-shadow:0 4px 8px rgba(0,0,0,0.1); border-radius:10px; display:none; transition:all 0.3s ease; height:600px; z-index:99999 !important; max-height:90%; } #chat-container.large { width:50%; height:600px; } #chat-header { display:flex; align-items:center; justify-content:space-between; padding:15px; background-color:#006699; color:white; border-top-left-radius:10px; border-top-right-radius:10px; position:relative; flex-shrink:0; } #chat-header img { width:60px; height:60px; border-radius:50%; } #chat-header .chat-title { flex-grow:1; margin-left:15px; } #chat-header .chat-title h4 { margin:0; font-size:16px; } #chat-header .chat-title p { margin:0; font-size:12px; } #chat-header .controls { display:flex; gap:10px; } a.document-link { background-color:#e7f5ff; color:#006699; padding:3px 6px; border-radius:4px; text-decoration:none; font-weight:bold; } a.document-link:hover { background-color:#b3d7ff; color:#003366; } .control-button { cursor:pointer; background:none; border:none; color:white; font-size:22px; } .control-button:hover { color:white; background-color:rgba(255, 255, 255, 0.2); } #loading-container { position:relative; width:100%; height:5px; background-color:#e0e0e0; margin-top:10px; } #loading-bar { width:100%; height:100%; } #loading-progress { width:0; height:100%; background-color:#007bff; transition:width 15s linear; } #chat-header .control-button.minimize-chat { cursor:pointer; color:white; padding:5px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; } #message-list { flex-grow:1; padding:8px; overflow-y:auto; max-height:calc(100% - 160px); min-height:calc(100% - 160px); background-color:#f9f9f9; font-size:15px; line-height:1.4; } #message-list .message-wrapper { display:flex; align-items:flex-start; margin-bottom:10px; } #message-list .ai-avatar { margin-right:10px; width:25px; height:25px; border-radius:50%; flex-shrink:0; } #message-list .message { padding:12px 18px; border-radius:15px; background-color:#e0e0e0; display:inline-block; max-width:82%; } #message-list .user { font-size:15px; text-align:left; background-color:#d1e7dd; margin-left:auto; margin-right:10px; border-radius:15px; } #message-list .virtual-seller { text-align:left; background-color:#e7f5ff; margin-left:0px; margin-right:auto; max-width:calc(100% - 50px); } .message.warning { background-color:#ffdddd; color:#d8000c; border-left:6px solid #d8000c; padding:10px; margin-bottom:10px; } .message.warning a { color:#0055aa; font-weight:bold; text-decoration:underline; transition:color 0.3s ease; } .message.warning a:hover { color:#ef561e; } #send-form { display:flex; padding:10px; border-top:1px solid #ccc; background-color:#fff; flex-shrink:0; box-sizing:border-box; position:relative; max-height:60px; } #send-form textarea { flex-grow:1; padding:10px; border:1px solid #ddd; border-radius:20px; resize:none; overflow:hidden; max-height:50px; box-sizing:border-box; margin-right:10px; font-size:14px; } #send-button { width:40px; height:40px; background-color:#006699; background-image:url("send.png"); background-size:30px; background-repeat:no-repeat; background-position:center; border:none; border-radius:50%; cursor:pointer; flex-shrink:0; transition:background-color 0.3s; } #send-button:hover { background-color:rgba(0, 102, 153, 0.8); } #send-button.disabled, #send-button:disabled { background-color:#999999; pointer-events:none; } .disabled { pointer-events:none; background-color:#f0f0f0; } .chat-widget-button { position:fixed; bottom:80px; right:20px; width:70px; height:70px; cursor:pointer;   background-image:url("ikona-chat-tr-mini.png"); background-size:contain; background-repeat:no-repeat; background-position:center; z-index:99999; border-radius:50%; box-shadow:0 4px 8px rgba(0, 0, 0, 0.3); background-color:#006699; border:10px solid #006699; transition:transform 0.3s ease, box-shadow 0.3s ease; } .chat-widget-button:hover { transform:scale(1.1); box-shadow:0 4px 8px rgba(0, 0, 0, 0.3); } .ui-widget-overlay { background:rgba(0, 0, 0, 0.5); z-index:99999; } .chat-footer { padding:10px; text-align:center; font-size:12px; color:gray; background-color:#f1f1f1; border-bottom-left-radius:10px; border-bottom-right-radius:10px; border:1px solid #ccc; } .quick-questions { display:flex; flex-wrap:wrap; gap:10px; justify-content:right; list-style-type:none; padding:0; margin:5px 0; } .quick-questions li { display:inline-block; background-color:white; border:2px solid #006400; padding:8px 15px; border-radius:20px; margin-bottom:5px; cursor:pointer; transition:background-color 0.3s, border-color 0.3s; font-size:13px; max-width:100%; word-wrap:break-word; } .quick-questions li:hover { background-color:#f0fff0; border-color:#004d00; } #welcome-screen { max-width:400px; border:1px solid #ccc; background-color:#006699; display:flex; flex-direction:column; position:fixed; bottom:120px; right:20px; transform:none; box-shadow:0 4px 8px rgba(0,0,0,0.1); border-radius:10px; display:none; transition:all 0.3s ease; z-index:99999; max-height:90%; height:auto; min-height:500px; color:white; text-align:center; padding:20px; } #welcome-screen img { width:100px; height:100px; border-radius:50%; margin:0 auto 20px; background-color:transparent; } #welcome-screen p { font-size:14px; margin-bottom:20px; } #welcome-screen input[type="checkbox"] { margin-right:10px; margin-bottom:10px; } #start-chat { padding:12px 30px;  border-radius:5px;  cursor:pointer; background-color:#ff6600;  color:#ffffff;  font-size:16px;  font-weight:bold;  border:2px solid transparent;  text-align:center; transition:all 0.3s ease;  } #start-chat:hover:not(:disabled) { background-color:#ffffff;  color:#ff6600;  border:2px solid #ff6600;  } #start-chat:disabled { background-color:#cccccc;  color:#666666;  cursor:not-allowed;  border:2px solid transparent;  } #agree-terms { transform:scale(1.5); margin-right:10px; vertical-align:middle; } #welcome-header { display:flex; align-items:center; justify-content:center; background-color:#006699; color:white; position:relative; flex-shrink:0; width:100%; padding:10px 0; } #welcome-header .controls { position:absolute; right:10px; top:50%; transform:translateY(-50%); } .control-button.minimize-chat { cursor:pointer; color:white; padding:5px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; } @media (max-width:768px) { #chat-container { top:0; bottom:auto; width:100%; right:0; height:100vh; border-radius:0; } #message-list { max-height:80%; min-height:50%; } #chat-container.large { width:100%; height:100vh; } #chat-header { border-top-left-radius:0; border-top-right-radius:0; } .chat-widget-button { top:auto; bottom:20px; right:10px; width:60px; height:60px; } .control-button.toggle-size { display:none; } .control-button.minimize-chat { font-size:24px; padding:8px; width:36px; height:36px; border:2px solid white; border-radius:0px; margin-left:20px; display:flex; align-items:center; justify-content:center; } #welcome-screen { width:90%; right:0; height:80vh; bottom:auto; border-radius:0; top:0; left:50%; transform:translateX(-50%); margin:0; } } #regulations { color:white; text-decoration:underline; } #regulations:hover{ color:#ef561e; }