:root {
   --color-primary: #4f46e5;
   --color-primary-light: #818cf8;
   --color-accent: #38bdf8;
   --color-gray-50: #f9fafb;
   --color-gray-100: #f3f4f6;
   --color-gray-200: #e5e7eb;
   --color-gray-700: #374151;
   --color-gray-800: #1f2937;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
   background-color: var(--color-gray-50);
   color: var(--color-gray-800);
   line-height: 1;
   font-size: 0.875rem;
}

/* general image properties */
img {
   max-width: 100%;
   height: auto;
}

/* make sure icons have set sizes */
.icon-container {
   display: flex;
   align-items: center;
   justify-content: center;
}

#loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   color: white;
   font-size: 1.2rem;
}

#loading-overlay.hidden {
   display: none;
}

.chat-container {
   height: 400px;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
}

.checkbox-group {
   display: flex;
   flex-wrap: wrap;
   gap: 0.6rem;
}

h1,
h2,
h3,
p {
   font-size: inherit;
}

/* text sizing */
.text-base {
   font-size: 1rem;
}

.text-lg {
   font-size: 1.125rem;
}

.text-xl {
   font-size: 1.25rem;
}
.switch {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 24px;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   transition: 0.4s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 20px;
   width: 20px;
   left: 2px;
   bottom: 2px;
   background-color: white;
   transition: 0.4s;
   border-radius: 50%;
}

input:checked + .slider {
   background-color: #48bb78;
}

input:checked + .slider:before {
   transform: translateX(26px);
}

.markdown-body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   line-height: 1.6;
}

.markdown-body pre {
   background-color: #f6f8fa;
   border-radius: 6px;
   padding: 16px;
   overflow: auto;
}

.markdown-body code {
   background-color: rgba(175, 184, 193, 0.2);
   border-radius: 6px;
   padding: 0.2em 0.4em;
   font-size: 85%;
}

.markdown-body pre code {
   background-color: transparent;
   padding: 0;
}

.markdown-body blockquote {
   border-left: 0.25em solid #d0d7de;
   padding: 0 1em;
   color: #656d76;
}

.markdown-body table {
   border-collapse: collapse;
   width: 100%;
   margin: 1em 0;
}

.markdown-body table th,
.markdown-body table td {
   border: 1px solid #d0d7de;
   padding: 6px 13px;
}

.markdown-body table tr:nth-child(2n) {
   background-color: #f6f8fa;
}

.markdown-body img {
   max-width: 100%;
   height: auto;
}

/* tag group styles */
.tag-selection-container {
   position: relative;
   width: 100%;
}

.tag-selection-container::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2rem;
   background: linear-gradient(to bottom, transparent, white);
   pointer-events: none;
   opacity: 1;
   transition: opacity 0.3s ease-in-out;
   border-bottom-left-radius: 0.5rem;
   border-bottom-right-radius: 0.5rem;
}

.tag-selection-container:hover::after {
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
}

.overflow-x-auto {
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
   position: relative;
}

.overflow-x-auto::-webkit-scrollbar {
   height: 4px;
   width: 4px;
}

.overflow-x-auto::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 2px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 2px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
   background: #555;
}

.tag-group {
   margin-bottom: 0.5rem;
}

.tag-group:last-child {
   margin-bottom: 0;
}

.tag-group .flex.gap-1 {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
}

.tag-groups {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   padding: 0.25rem 0;
   transition: max-height 0.3s ease-in-out;
}

.tag-groups::-webkit-scrollbar {
   height: 3px;
}

.tag-groups::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.tag-groups::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 2px;
}

.tag-groups::-webkit-scrollbar-thumb:hover {
   background: #555;
}

.tag-group-title {
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--color-gray-500);
   margin-bottom: 0.25rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.tag-btn {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.5rem;
   background-color: white;
   border: 1px solid var(--color-gray-200);
   border-radius: 0.25rem;
   font-size: 0.75rem;
   color: var(--color-gray-700);
   cursor: pointer;
   transition: all 0.2s;
   white-space: nowrap;
   flex-shrink: 0;
}

.tag-btn:hover {
   background-color: var(--color-gray-50);
   border-color: var(--color-gray-300);
   transform: translateY(-1px);
}

.tag-btn.selected {
   background-color: #ebf5ff;
   color: #2563eb;
   border-color: #bfdbfe;
}

.selected-tags {
   border-top: 1px solid var(--color-gray-200);
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.selected-tag {
   display: inline-flex;
   align-items: center;
   background-color: #ebf5ff;
   color: #2563eb;
   font-size: 0.75rem;
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   border: 1px solid #bfdbfe;
   gap: 0.25rem;
}

.selected-tag button {
   color: var(--color-blue-600);
   cursor: pointer;
   padding: 0 0.125rem;
   font-size: 0.75rem;
   transition: var(--transition-base);
}

.selected-tag button:hover {
   color: var(--color-blue-800);
}

.selected-tag.virtual-tag {
   background-color: #fffde8;
   color: #854d0e;
   border-color: #fde68a;
}

.selected-tag.virtual-tag .remove-tag {
   color: #854d0e;
}

.selected-tag.virtual-tag .remove-tag:hover {
   color: #713f12;
}