@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

 * {
     border: 0;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --hue: 223;
     --primary: hsl(var(--hue), 90%, 50%);
     --trans-dur: 0.6s;
     --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
     /* font-size: calc(60px + (120 - 60) * (100vw - 320px) / (2560 - 320)); */
 }


 input {
     font: 1em/1.5 sans-serif;
 }


 #spotlight-container1:has(.switch__input:checked) {
     background: hsl(var(--hue), 10%, 20%) !important;
     color: hsl(var(--hue), 10%, 90%);
 }
 .modal-body:has(.switch__input:checked) {
     background: hsl(var(--hue), 10%, 20%) !important;
     color: hsl(var(--hue), 10%, 90%);
 }
 body:has(.switch__input:checked) {
     background: hsl(var(--hue), 10%, 20%) !important;
     color: white !important;
 }

 .switch,
 .switch__input {
     display: block;
     -webkit-tap-highlight-color: transparent;
 }


 /* Mobile fullscreen */
 @media (max-width: 768px) {
     .modal-dialog {
         margin: 0;
         max-width: 100%;
         height: 100%;
     }

     .modal-content {
         height: 100%;
         border-radius: 0;
     }

     .modal-body {
         overflow-y: auto;
     }
 }

 .show-mobile {
     display: none;
 }

 .swal2-container {
     z-index: 2000 !important;
 }

 @media (max-width: 600px) {
     /* #captcha-image {
         position: absolute;
         top: 136% !important;
         left: 10px;
         transform: translateY(-50%);
         height: 34px;
         cursor: pointer;
     } */

     .hide-mobile {
         display: none;
     }

     .show-mobile {
         display: block;
     }

     .switch-container {
         font-size: 12px;
     }

     #search-input {
         width: 100% !important;
         font-size: 14px;
     }
 }

 /* Default modal size for desktop */
 @media (min-width: 769px) {
     .modal-dialog {
         max-width: 80vw !important;
     }
 }

 /* Flex container for search and captcha */
 .search-captcha-container {
     /* display: flex; */
     align-items: center;
     gap: 10px;
     margin-top: 10px;
     position: relative;
 }

 .search-input-container {
     flex: 1;
     position: relative;
 }

 .search-input-container i {
     position: absolute;
     top: 50%;
     left: 10px;
     transform: translateY(-50%);
     color: #aaa;
 }

 #search-input {
     width: 100%;
     padding-left: 30px;
     box-sizing: border-box;
     border: 1px solid #80808085;

 }

 #captcha-input {
     letter-spacing: 1px;
     text-align: center;
     width: 180px;
 }

 .switch {
     margin: auto;
     position: relative;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
 }

 .switch__icon {
     color: hsla(var(--hue), 10%, 80%);
     pointer-events: none;
     position: absolute;
     top: 0.375em;
     left: 0.375em;
     width: 0.75em;
     height: 0.75em;
     transition:
         color var(--trans-dur),
         transform var(--trans-dur) var(--trans-timing);
 }

 .switch__icon:nth-of-type(2) {
     right: 0.375em;
     left: auto;
 }

 .switch__inner,
 .switch__inner-icons {
     border-radius: 3px;
     ;
     /* border-radius: 0.5em; */
     display: block;
     overflow: hidden;
     position: absolute;
     top: 0.25em;
     left: 0.25em;
     width: 2.25em;
     height: 1em;
 }

 .switch__inner:before,
 .switch__inner-icons {
     transition: transform var(--trans-dur) var(--trans-timing);
     transform: translateX(-1.25em);
 }

 .switch__inner:before {
     background-color: var(--primary);
     border-radius: 3px;
     ;
     /* border-radius: inherit; */
     content: "";
     display: block;
     width: 100%;
     height: 100%;
 }

 .switch__inner-icons {
     pointer-events: none;
 }

 .switch__inner-icons .switch__icon {
     color: hsl(0, 0%, 100%);
     top: 0.125em;
     left: 0.125em;
     transform: translateX(1.25em);
 }

 .switch__inner-icons .switch__icon:nth-child(2) {
     right: 0.125em;
     left: auto;
 }

 .switch__input {
     background-color: rgba(230, 230, 230, 0.8);
     border-radius: 3px;
     ;
     /* border-radius: 0.75em; */
     box-shadow:
         0 0 0 0.0625em hsla(var(--hue), 90%, 50%, 0),
         0 0.125em 0.5em hsla(var(--hue), 10%, 10%, 0.1);
     outline: transparent;
     width: 2.75em;
     height: 1.5em;
     -webkit-appearance: none;
     appearance: none;
     transition:
         background-color var(--trans-dur),
         box-shadow var(--trans-dur);
 }

 .switch__input:checked {
     background-color: hsl(var(--hue), 10%, 10%);
 }

 .switch__input:checked~.switch__icon {
     color: hsla(var(--hue), 10%, 40%);
 }

 .switch__input:checked~.switch__inner:before,
 .switch__input:checked~.switch__inner-icons {
     transform: translateX(1.25em);
 }

 .switch__input:not(:checked)~.switch__icon:first-of-type,
 .switch__input:checked~.switch__icon:nth-of-type(2) {
     transform: rotate(360deg);
 }

 .switch__input:checked~.switch__inner-icons .switch__icon:first-of-type {
     transform: translateX(-1.25em) rotate(-360deg);
 }

 .switch__input:checked~.switch__inner-icons .switch__icon:nth-of-type(2) {
     transform: translateX(-1.25em) rotate(360deg);
 }

 .switch__input:focus-visible {
     box-shadow:
         0 0 0 0.0625em hsla(var(--hue), 90%, 50%, 1),
         0 0.125em 0.5em hsla(var(--hue), 10%, 10%, 0.1);
 }

 .switch__sr {
     overflow: hidden;
     position: absolute;
     width: 1px;
     height: 1px;
 }

 body {
     margin: 0;
     height: 100vh;
     /* display: flex; */
     justify-content: center;
     align-items: center;
     font-family: 'Poppins', sans-serif;
     color: #333;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 #spotlight-container1 {
     width: 60vw;
     max-width: 90%;
     backdrop-filter: blur(20px);
     background: rgba(255, 255, 255, 0.8);
     border-radius: 3px;
     ;
     /* border-radius: 16px; */
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     padding: 30px 30px 20px 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .rounded {
     border-radius: 3px !important;
 }

 .search-input-container {
     position: relative;
     width: 100%;
     /* margin-left: -50px;; */
     margin-bottom: 0;
 }


 #search-input {
     width: 100%;
     padding: 14px 20px 14px 44px;
     font-size: 1.25rem;
     border-radius: 3px;
     border: 1px solid #80808085;

     /* border-radius: 12px; */
     /* background: rgba(230, 230, 230, 0.8); */
     color: #333;
     outline: none;
     box-shadow: 10px 0 10px rgba(200, 200, 200, 0.6);
     transition: background 0.3s ease;
     padding-left: 44px !important;
 }

 .search-input-container .fa-search {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #999;
     font-size: 1.2em;
     pointer-events: none;
 }

 .search-input-container .fa-search-go {
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #999;
     font-size: 1.2em;
     pointer-events: none;
 }

 #search-input::placeholder {
     color: #999;
     font-weight: 500;
 }

 #search-input:focus {
     background: white;
     /* box-shadow: inset 0 0 12px rgba(180, 180, 180, 0.8); */
 }

 #chat-output {
     margin-top: 20px;
     /* width: 100%; */
     max-height: 58vh;
     overflow-y: auto;
     background: rgb(122 138 163);
     border-radius: 3px;
     ;
     /* border-radius: 12px; */
     box-shadow: inset 0 0 15px rgba(200, 200, 200, 0.3);
     backdrop-filter: blur(10px);
     padding: 15px 20px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     font-size: 1rem;
     color: #333;
 }

 .chat-bubble {
     max-width: 80%;
     padding: 3px 16px !important;
     border-radius: 3px;
     /* border-radius: 16px; */
     line-height: 1.4;
     white-space: pre-wrap;
     word-wrap: break-word;
 }

 .user-bubble {
     background: #a8d0ff;
     color: black;
     align-self: flex-end;
     border-bottom-right-radius: 4px;
 }

 .bot-bubble {
     background: #e1e5ea;
     color: #333;
     align-self: flex-start;
     border-bottom-left-radius: 4px;
     /* min-height: 20px; */
     position: relative;
     padding-bottom: 36px;
 }

 .copy-icon {
     position: absolute;
     bottom: 14px;
     right: 48px;
     font-size: 0.9em;
     color: #666;
     cursor: pointer;
     user-select: none;
     transition: color 0.2s ease;
 }

 .copy-icon:hover {
     color: #333;
 }

 .like-icon,
 .dislike-icon {
     position: absolute;
     bottom: 8px;
     font-size: 0.9em;
     color: #666;
     cursor: pointer;
     user-select: none;
     transition: color 0.2s ease;
 }

 .like-icon {
     right: 36px;
 }

 .dislike-icon {
     right: 60px;
 }

 .like-icon:hover,
 .dislike-icon:hover {
     color: #333;
 }

 /* Scrollbar styling */
 #chat-output::-webkit-scrollbar {
     width: 6px;
 }

 #chat-output::-webkit-scrollbar-thumb {
     background-color: rgba(180, 180, 180, 0.5);
     border-radius: 3px;
     ;
     /* border-radius: 3px; */
 }

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

 #spotlight-container1 {
     display: none;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 1001;
     /* background: linear-gradient(358deg, rgba(36, 201, 61, 0) 0%, rgb(255 255 255 / 76%) 53%); */
     padding: 20px;
     border-radius: 3px;
     ;
     /* border-radius: 8px; */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }



 #toggle-button {
     position: fixed;
     bottom: 79px;
     right: 10px;
     background-color: transparent;
     color: white;
     border: none;
     border-radius: 3px;
     ;
     /* border-radius: 50%; */
     width: 150px;
     height: 150px;
     font-size: 24px;
     cursor: pointer;
     /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     z-index: 1002;
 }

 #toggle-button:focus {
     outline: none;
 }

 .like-icon {
     color: grey;
 }

 .dislike-icon {
     color: grey;
 }

 #overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     /* backdrop-filter: blur(15px); */
     background-color: rgba(66, 60, 60, 0.86);
     z-index: 1000;
 }

 #spotlight-container1 {
     max-height: 90vh;
     /* maksimal 90% dari tinggi viewport */
     /* position: absolute; */
     cursor: default;
 }

 #language-select {
     border: .1px solid grey;
     margin-top: 10px;
     border-radius: 3px;
     padding-right: 10px;
 }

 /* Align mode selector with image */
 #spotlight-container1>img,
 #spotlight-container1>.mode-selector {
     vertical-align: middle;
     display: inline-block;
 }

 #spotlight-container1>.mode-selector {
     margin-left: 16px;
 }

 .switch-container {
     display: flex;
     /* align-items: center; */
     gap: 10px;
     background: transparent;
     border-radius: 3px;
     border: .1px solid grey;
     height: 35px;
 }

 .switch-label {
     cursor: pointer;
     font-weight: bold;
     padding: 5px 10px;
     border-radius: 3px;
     transition: background-color 0.3s, color 0.3s;
 }

 input[type="radio"] {
     display: none;
 }

 .custom-radio {
     width: 20px;
     height: 20px;
     border: 2px solid #333;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     margin-right: 5px;
     margin-bottom: -5px;

 }

 input[type="radio"]:checked+.custom-radio::after {
     content: '';
     width: 10px;
     height: 10px;
     background-color: #333;
     border-radius: 50%;
     position: absolute;
     top: 3px;
     left: 3px;
 }