/* Tailwind base */
/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}

/* Custom Tailwind-like utilities */
.dark { color-scheme: dark; }
.dark .dark\:bg-gray-900 { background-color: rgb(17 24 39); }
.dark .dark\:text-white { color: rgb(255 255 255); }
.dark .dark\:bg-dark-gradient { background: linear-gradient(135deg, #0b1220 0%, #0f172a 100%); }
.dark .dark\:bg-gray-800 { background-color: rgb(31 41 55); }
.dark .dark\:bg-gray-700 { background-color: rgb(55 65 81); }
.dark .dark\:border-gray-700 { border-color: rgb(55 65 81); }
.dark .dark\:text-gray-200 { color: rgb(229 231 235); }
.dark .dark\:text-gray-400 { color: rgb(156 163 175); }
.dark .dark\:hover\:bg-gray-600:hover { background-color: rgb(75 85 99); }
.dark .dark\:from-white { --tw-gradient-from: rgb(255 255 255); --tw-gradient-to: rgba(255, 255, 255, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .dark\:via-pink-400 { --tw-gradient-via: rgb(129 140 248); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.dark .dark\:to-violet-500 { --tw-gradient-to: rgb(99 102 241); }
.dark .dark\:focus\:ring-primary-dark:focus { --tw-ring-color: #D16EBF; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 0 0 2px #D16EBF; }

.w-screen { width: 100vw; }
.h-screen { height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.w-\[80\%\] { width: 80%; }
.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.h-full { height: 100%; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.mr-2 { margin-right: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.object-cover { object-fit: cover; }
.z-10 { z-index: 10; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-black { --tw-gradient-from: rgb(17 24 39); --tw-gradient-to: rgba(17, 24, 39, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-pink-500 { --tw-gradient-via: rgb(99 102 241); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.to-violet-800 { --tw-gradient-to: rgb(67 56 202); }
.inline-block { display: inline-block; }
.text-transparent { color: transparent; }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.font-bold { font-weight: 700; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.gap-2 { gap: 0.5rem; }
.p-2 { padding: 0.5rem; }
.bg-gray-200 { background-color: rgb(241 245 249); }
.hover\:bg-gray-300:hover { background-color: rgb(226 232 240); }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.text-gray-800 { color: rgb(31 41 55); }
.rounded-lg { border-radius: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus\:ring-primary-light:focus { --tw-ring-color: #FF90E8; }
.flex-1 { flex: 1 1 0%; }
.overflow-y-auto { overflow-y: auto; }
.space-y-4 > * + * { margin-top: 1rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.bg-white { background-color: rgb(255 255 255); }
.p-3 { padding: 0.75rem; }
.shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.max-w-\[80\%\] { max-width: 80%; }
.rounded-2xl { border-radius: 1rem; }
.shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.border { border-width: 1px; }
.border-neutral-200 { border-color: rgb(229 229 229); }
.relative { position: relative; }
.grow { flex-grow: 1; }
.m-4 { margin: 1rem; }
.outline { outline-style: solid; }
.outline-0 { outline-width: 0px; }
.focus\:outline-0:focus { outline-width: 0px; }
.active\:border-transparent:active { border-color: transparent; }
.min-h-16 { min-height: 4rem; }
.bg-transparent { background-color: transparent; }
.resize-none { resize: none; }
.absolute { position: absolute; }
.right-2 { right: 0.5rem; }
.bottom-2 { bottom: 0.5rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-gray-500 { color: rgb(107 114 128); }
.from-pink-500 { --tw-gradient-from: rgb(99 102 241); --tw-gradient-to: rgba(99, 102, 241, 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-violet-600 { --tw-gradient-to: rgb(79 70 229); }
.text-white { color: rgb(255 255 255); }
.hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.disabled\:opacity-50:disabled { opacity: 0.5; }

/* Mobile-first additions */
.container-mobile { width: 100%; max-width: 100%; margin: 0 auto; padding-left: 0.75rem; padding-right: 0.75rem; }
.sticky-input { position: static; bottom: auto; z-index: auto; padding-bottom: 0; }
.chat-list { overflow-y: auto; padding-bottom: 0; -webkit-overflow-scrolling: touch; }
.tap { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.mobile-select { font-size: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; }

/* Single-viewport enforcement */
html, body { height: 100%; overflow: hidden; }
.w-full { width: 100%; }
.h-svh { height: 100svh; }
.no-scroll { overflow: hidden !important; }
.min-h-0 { min-height: 0; }

/* Chat alignment & bubbles */
.message-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.message-row.user { justify-content: flex-end; }
.message-row.bot { justify-content: flex-start; }
.avatar { width: 2rem; height: 2rem; border-radius: 9999px; margin-top: 0.25rem; }
.bubble { padding: 0.75rem; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); max-width: 80%; }
.bubble-user { background-image: linear-gradient(to right, rgb(99 102 241), rgb(79 70 229)); color: #fff; }
.bubble-bot { background-color: rgb(255 255 255); color: rgb(31 41 55); }
.dark .bubble-bot { background-color: rgb(31 41 55); color: rgb(229 231 235); }

/* Message container */
.message-container {
  display: flex;
  margin-bottom: 16px;
  padding: 0 8px;
}

/* User message alignment */
.user-message {
  justify-content: flex-end;
}

/* Typing indicator */
.typing { display: inline-flex; align-items: center; gap: 4px; color: rgb(156 163 175); }
.dark .typing { color: rgb(156 163 175); }
.typing .dot { width: 6px; height: 6px; border-radius: 9999px; background-color: currentColor; animation: typing 1s infinite ease-in-out; }
.typing .dot:nth-child(2) { animation-delay: 0.2s; }
.typing .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0.3; transform: translateY(0); } }

/* Input placeholder styling */
#message-input::placeholder { text-align: center; font-size: 0.85rem; color: rgb(156 163 175); }

/* Polished chat input bar */
.input-bar { padding: 0.5rem 0.75rem; border-radius: 1rem; }
.input-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.5rem; }
.input-field { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; resize: none; }
.dark .input-field { color: rgb(229 231 235); border-color: rgba(255,255,255,0.12); }
.input-field:focus { outline: none; border-color: rgba(209, 110, 191, 0.45); box-shadow: 0 0 0 2px rgba(209, 110, 191, 0.25); }
.input-actions { display: flex; align-items: center; gap: 0.5rem; }
.counter { font-size: 0.75rem; }
.send-btn { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; }
.send-btn svg { width: 18px; height: 18px; }

/* Model selection sheet */
.hidden { display: none !important; }
.model-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; z-index: 100; }
.model-sheet { width: 100%; background: rgb(31 41 55); color: rgb(229 231 235); border-top-left-radius: 1rem; border-top-right-radius: 1rem; padding: 0.75rem; max-height: 60vh; overflow-y: auto; }
.sheet-title { font-weight: 700; margin-bottom: 0.5rem; }
.sheet-list { display: grid; gap: 0.5rem; }
.sheet-item { width: 100%; text-align: left; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: rgb(55 65 81); color: rgb(229 231 235); position: relative; }
.sheet-item:active { background: rgb(75 85 99); }
.sheet-section { margin-top: 0.75rem; }

/* Selected state for config items */
.sheet-item.selected,
.sheet-item[aria-selected="true"] { background: rgb(75 85 99); outline: 2px solid #D16EBF; }
.sheet-item.selected::after,
.sheet-item[aria-selected="true"]::after { content: "✓"; position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: #FF90E8; }

/* Emoji sizing for config button */
#model-button { width: 44px; height: 44px; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; overflow: hidden; }

/* Typing animation container */
.typing-text {
  display: inline-block;
  overflow: hidden;
  white-space: normal;
  max-width: 100%;
  word-wrap: break-word;
}

/* Thinking animation */
.thinking-dots {
  display: inline-flex;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  margin: 0 2px;
  background-color: #888;
  border-radius: 50%;
  display: inline-block;
  animation: thinking 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes thinking {
  0%, 80%, 100% { 
    transform: scale(0);
  }
  40% { 
    transform: scale(1);
  }
}