mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-09 10:49:38 +00:00
0181883c8a
Add new project creation wizard component with improved user experience and better input field interactions. Integrate projects API routes on the backend to support CRUD operations for project management. Changes include: - Add ProjectCreationWizard component with step-by-step project setup - Improve input hint visibility to hide when user starts typing - Refactor project creation state management in Sidebar component - Add ReactDOM import for portal-based wizard rendering The wizard provides a more intuitive onboarding experience for users creating new projects, while the enhanced input hints reduce visual clutter during active typing.
841 lines
22 KiB
CSS
841 lines
22 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Global spinner animation - defined early to ensure it loads */
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 221.2 83.2% 53.3%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 221.2 83.2% 53.3%;
|
|
--radius: 0.5rem;
|
|
|
|
/* Safe area CSS variables */
|
|
--safe-area-inset-top: env(safe-area-inset-top);
|
|
--safe-area-inset-right: env(safe-area-inset-right);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom);
|
|
--safe-area-inset-left: env(safe-area-inset-left);
|
|
}
|
|
|
|
/* Fallback for older iOS versions */
|
|
@supports (padding-top: constant(safe-area-inset-top)) {
|
|
:root {
|
|
--safe-area-inset-top: constant(safe-area-inset-top);
|
|
--safe-area-inset-right: constant(safe-area-inset-right);
|
|
--safe-area-inset-bottom: constant(safe-area-inset-bottom);
|
|
--safe-area-inset-left: constant(safe-area-inset-left);
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 217.2 91.2% 8%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 217.2 91.2% 8%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 220 13% 46%;
|
|
--ring: 217.2 91.2% 59.8%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
box-sizing: border-box;
|
|
transition: none;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Root element with safe area padding for PWA */
|
|
#root {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Apply safe area padding in standalone mode */
|
|
@supports (padding-top: env(safe-area-inset-top)) {
|
|
@media (display-mode: standalone) {
|
|
#root {
|
|
padding-top: var(--safe-area-inset-top);
|
|
padding-left: var(--safe-area-inset-left);
|
|
padding-right: var(--safe-area-inset-right);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* PWA mode detected by JavaScript - more reliable */
|
|
html.pwa-mode,
|
|
body.pwa-mode {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: rgb(255 255 255); /* white - same as bg-white for safe area */
|
|
}
|
|
|
|
body.pwa-mode #root {
|
|
padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Adjust fixed inset positioning in PWA mode */
|
|
body.pwa-mode .fixed.inset-0 {
|
|
top: calc(env(safe-area-inset-top, 0px) + 8px);
|
|
left: env(safe-area-inset-left);
|
|
right: env(safe-area-inset-right);
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Dark mode safe area background */
|
|
html.dark body.pwa-mode {
|
|
background-color: rgb(31 41 55); /* gray-800 - matches header color */
|
|
}
|
|
|
|
/* Global transition defaults */
|
|
button,
|
|
a,
|
|
input,
|
|
textarea,
|
|
select,
|
|
[role="button"],
|
|
.transition-all {
|
|
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Color transitions for theme switching - exclude interactive elements */
|
|
body, div, section, article, aside, header, footer, nav, main,
|
|
h1, h2, h3, h4, h5, h6, p, span, blockquote,
|
|
ul, ol, li, dl, dt, dd,
|
|
table, thead, tbody, tfoot, tr, td, th,
|
|
form, fieldset, legend, label {
|
|
transition: background-color 200ms ease-in-out,
|
|
border-color 200ms ease-in-out,
|
|
color 200ms ease-in-out;
|
|
}
|
|
|
|
/* Transform transitions */
|
|
.transition-transform {
|
|
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Opacity transitions */
|
|
.transition-opacity {
|
|
transition: opacity 200ms ease-in-out;
|
|
}
|
|
|
|
/* Scale transitions for interactions */
|
|
.transition-scale {
|
|
transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Shadow transitions */
|
|
.transition-shadow {
|
|
transition: box-shadow 200ms ease-in-out;
|
|
}
|
|
|
|
/* Respect reduced motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
::before,
|
|
::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Smooth hover transitions for interactive elements */
|
|
button:hover,
|
|
a:hover,
|
|
[role="button"]:hover {
|
|
transition-duration: 100ms;
|
|
}
|
|
|
|
/* Active state transitions */
|
|
button:active,
|
|
a:active,
|
|
[role="button"]:active {
|
|
transition-duration: 50ms;
|
|
}
|
|
|
|
/* Focus transitions */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
transition: outline-offset 150ms ease-out, box-shadow 150ms ease-out;
|
|
}
|
|
|
|
/* Sidebar transitions */
|
|
.sidebar-transition {
|
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 300ms ease-in-out;
|
|
}
|
|
|
|
/* Modal and dropdown transitions */
|
|
.modal-transition {
|
|
transition: opacity 200ms ease-in-out,
|
|
transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Chat message transitions */
|
|
.message-transition {
|
|
transition: opacity 300ms ease-in-out,
|
|
transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Height transitions for expanding elements */
|
|
.height-transition {
|
|
transition: height 200ms ease-in-out,
|
|
max-height 200ms ease-in-out;
|
|
}
|
|
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--muted-foreground)) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--muted-foreground));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--muted-foreground) / 0.8);
|
|
}
|
|
|
|
/* Dark mode scrollbar styles */
|
|
.dark .scrollbar-thin {
|
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
|
|
}
|
|
|
|
.dark .scrollbar-thin::-webkit-scrollbar-track {
|
|
background: rgba(31, 41, 55, 0.3);
|
|
}
|
|
|
|
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(156, 163, 175, 0.7);
|
|
}
|
|
|
|
/* Global scrollbar styles for main content areas */
|
|
.dark::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.dark::-webkit-scrollbar-track {
|
|
background: rgba(31, 41, 55, 0.5);
|
|
}
|
|
|
|
.dark::-webkit-scrollbar-thumb {
|
|
background-color: rgba(107, 114, 128, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(107, 114, 128, 0.7);
|
|
}
|
|
|
|
/* Firefox scrollbar styles */
|
|
.dark {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(107, 114, 128, 0.5) rgba(31, 41, 55, 0.5);
|
|
}
|
|
|
|
/* Ensure checkbox styling is preserved */
|
|
input[type="checkbox"] {
|
|
@apply accent-blue-600;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type="checkbox"]:focus {
|
|
opacity: 1;
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Fix checkbox appearance in dark mode */
|
|
.dark input[type="checkbox"] {
|
|
background-color: rgb(31 41 55); /* gray-800 */
|
|
border-color: rgb(75 85 99); /* gray-600 */
|
|
color: rgb(37 99 235); /* blue-600 */
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.dark input[type="checkbox"]:checked {
|
|
background-color: rgb(37 99 235); /* blue-600 */
|
|
border-color: rgb(37 99 235); /* blue-600 */
|
|
}
|
|
|
|
.dark input[type="checkbox"]:focus {
|
|
--tw-ring-color: rgb(59 130 246); /* blue-500 */
|
|
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
|
}
|
|
|
|
/* Fix radio button appearance in dark mode */
|
|
.dark input[type="radio"] {
|
|
background-color: rgb(31 41 55); /* gray-800 */
|
|
border-color: rgb(75 85 99); /* gray-600 */
|
|
color: rgb(37 99 235); /* blue-600 */
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.dark input[type="radio"]:checked {
|
|
background-color: rgb(37 99 235); /* blue-600 */
|
|
border-color: rgb(37 99 235); /* blue-600 */
|
|
}
|
|
|
|
.dark input[type="radio"]:focus {
|
|
--tw-ring-color: rgb(59 130 246); /* blue-500 */
|
|
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
|
}
|
|
|
|
/* Ensure textarea text is always visible in dark mode */
|
|
textarea {
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
.dark textarea {
|
|
color: rgb(243 244 246) !important; /* gray-100 */
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
caret-color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
/* Fix for focus state in dark mode */
|
|
.dark textarea:focus {
|
|
color: rgb(243 244 246) !important;
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
/* Fix for iOS/Safari dark mode textarea issues */
|
|
@supports (-webkit-touch-callout: none) {
|
|
.dark textarea {
|
|
background-color: transparent !important;
|
|
color: rgb(243 244 246) !important;
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
.dark textarea:focus {
|
|
background-color: transparent !important;
|
|
color: rgb(243 244 246) !important;
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
}
|
|
}
|
|
|
|
/* Ensure parent container doesn't override textarea styles */
|
|
.dark .bg-gray-800 textarea {
|
|
color: rgb(243 244 246) !important;
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
/* Fix focus-within container issues in dark mode */
|
|
.dark .focus-within\:ring-2:focus-within {
|
|
background-color: rgb(31 41 55) !important; /* gray-800 */
|
|
}
|
|
|
|
/* Ensure textarea remains transparent with visible text */
|
|
.dark textarea.bg-transparent {
|
|
background-color: transparent !important;
|
|
color: rgb(243 244 246) !important;
|
|
-webkit-text-fill-color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
/* Fix placeholder text color to be properly gray */
|
|
textarea::placeholder {
|
|
color: rgb(156 163 175) !important; /* gray-400 */
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark textarea::placeholder {
|
|
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* More specific selector for chat input textarea */
|
|
.dark .bg-gray-800 textarea::placeholder,
|
|
.dark textarea.bg-transparent::placeholder {
|
|
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
|
opacity: 1 !important;
|
|
-webkit-text-fill-color: rgb(75 85 99) !important;
|
|
}
|
|
|
|
/* Custom class for chat input placeholder */
|
|
.chat-input-placeholder::placeholder {
|
|
color: rgb(156 163 175) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark .chat-input-placeholder::placeholder {
|
|
color: rgb(75 85 99) !important;
|
|
opacity: 1 !important;
|
|
-webkit-text-fill-color: rgb(75 85 99) !important;
|
|
}
|
|
|
|
.chat-input-placeholder::-webkit-input-placeholder {
|
|
color: rgb(156 163 175) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark .chat-input-placeholder::-webkit-input-placeholder {
|
|
color: rgb(75 85 99) !important;
|
|
opacity: 1 !important;
|
|
-webkit-text-fill-color: rgb(75 85 99) !important;
|
|
}
|
|
|
|
/* WebKit specific placeholder styles */
|
|
textarea::-webkit-input-placeholder {
|
|
color: rgb(156 163 175) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark textarea::-webkit-input-placeholder {
|
|
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Mozilla specific placeholder styles */
|
|
textarea::-moz-placeholder {
|
|
color: rgb(156 163 175) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark textarea::-moz-placeholder {
|
|
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* IE/Edge specific placeholder styles */
|
|
textarea:-ms-input-placeholder {
|
|
color: rgb(156 163 175) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dark textarea:-ms-input-placeholder {
|
|
color: rgb(75 85 99) !important; /* gray-600 - darker gray */
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/* Mobile optimizations and components */
|
|
@layer components {
|
|
/* Mobile touch optimization and safe areas */
|
|
@media (max-width: 768px) {
|
|
* {
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Allow vertical scrolling in scroll containers */
|
|
.overflow-y-auto, [data-scroll-container] {
|
|
touch-action: pan-y;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Preserve checkbox visibility */
|
|
input[type="checkbox"] {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
button,
|
|
[role="button"],
|
|
.clickable,
|
|
a,
|
|
.cursor-pointer {
|
|
-webkit-tap-highlight-color: transparent;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Better mobile touch targets */
|
|
.mobile-touch-target {
|
|
@apply min-h-[44px] min-w-[44px];
|
|
}
|
|
|
|
/* Chat message improvements */
|
|
.chat-message.user {
|
|
@apply justify-end;
|
|
}
|
|
|
|
.chat-message.user > div {
|
|
@apply max-w-[85%];
|
|
}
|
|
|
|
.chat-message.assistant > div,
|
|
.chat-message.error > div {
|
|
@apply w-full sm:max-w-[95%];
|
|
}
|
|
|
|
/* Session name truncation on mobile */
|
|
.session-name-mobile {
|
|
@apply truncate;
|
|
max-width: calc(100vw - 120px); /* Account for sidebar padding and buttons */
|
|
}
|
|
|
|
/* Enable text selection on mobile for terminal */
|
|
.xterm,
|
|
.xterm .xterm-viewport {
|
|
-webkit-user-select: text !important;
|
|
user-select: text !important;
|
|
-webkit-touch-callout: default !important;
|
|
}
|
|
|
|
/* Fix mobile scrolling */
|
|
.overflow-y-auto {
|
|
touch-action: pan-y;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.chat-message {
|
|
touch-action: pan-y;
|
|
}
|
|
|
|
/* Fix hover states on mobile */
|
|
.group:active .group-hover\:opacity-100,
|
|
.group .group-hover\:opacity-100 {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.group-hover\:opacity-100 {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.hover\:bg-gray-50:hover,
|
|
.hover\:bg-gray-100:hover,
|
|
.hover\:bg-red-200:hover,
|
|
.dark\:hover\:bg-gray-700:hover,
|
|
.dark\:hover\:bg-red-900\/50:hover {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Touch device optimizations for all screen sizes */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.touch\:opacity-100 {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Completely disable hover states on touch devices */
|
|
* {
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
}
|
|
|
|
/* Preserve checkbox visibility on touch devices */
|
|
input[type="checkbox"] {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Only disable hover states for interactive elements, not containers */
|
|
button:hover,
|
|
[role="button"]:hover,
|
|
.cursor-pointer:hover,
|
|
a:hover,
|
|
.hover\:bg-gray-50:hover,
|
|
.hover\:bg-gray-100:hover,
|
|
.hover\:text-gray-900:hover,
|
|
.hover\:opacity-100:hover {
|
|
background-color: inherit !important;
|
|
color: inherit !important;
|
|
opacity: inherit !important;
|
|
transform: inherit !important;
|
|
}
|
|
|
|
/* Force buttons to be immediately clickable */
|
|
button, [role="button"], .cursor-pointer {
|
|
cursor: pointer !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Keep active states for immediate feedback */
|
|
.active\:scale-\[0\.98\]:active,
|
|
.active\:scale-95:active {
|
|
transform: scale(0.98) !important;
|
|
}
|
|
}
|
|
|
|
/* Safe area support for iOS devices */
|
|
.ios-bottom-safe {
|
|
padding-bottom: max(env(safe-area-inset-bottom), 12px);
|
|
}
|
|
|
|
/* PWA specific header adjustments for iOS */
|
|
.pwa-header-safe {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
/* When PWA mode is detected by JavaScript */
|
|
body.pwa-mode .pwa-header-safe {
|
|
/* Reset padding since #root already handles safe area */
|
|
padding-top: 0px !important;
|
|
}
|
|
|
|
/* For mobile PWA, ensure proper header spacing */
|
|
@media screen and (max-width: 768px) {
|
|
body.pwa-mode .pwa-header-safe {
|
|
padding-top: 4px !important;
|
|
padding-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.chat-input-mobile {
|
|
padding-bottom: calc(60px + max(env(safe-area-inset-bottom), 12px));
|
|
}
|
|
}
|
|
|
|
/* Text wrapping improvements */
|
|
.chat-message {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
}
|
|
|
|
/* Force wrap long URLs and code */
|
|
.chat-message pre,
|
|
.chat-message code {
|
|
white-space: pre-wrap !important;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Prevent horizontal scroll in chat area */
|
|
.chat-message * {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
/* Hide markdown backticks in prose content */
|
|
.prose code::before,
|
|
.prose code::after {
|
|
content: "" !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Custom spinner animation for mobile compatibility */
|
|
@layer utilities {
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Force hardware acceleration for smoother animation on mobile */
|
|
.loading-spinner {
|
|
animation: spin 1s linear infinite;
|
|
will-change: transform;
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
|
|
/* Improved textarea styling */
|
|
.chat-input-placeholder {
|
|
display: block !important;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
|
|
}
|
|
|
|
/* Ensure container fits textarea tightly */
|
|
.chat-input-placeholder:not(:focus) {
|
|
height: auto;
|
|
}
|
|
|
|
.chat-input-placeholder::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.chat-input-placeholder::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.chat-input-placeholder::-webkit-scrollbar-thumb {
|
|
background-color: rgba(156, 163, 175, 0.3);
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.chat-input-placeholder::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(156, 163, 175, 0.5);
|
|
}
|
|
|
|
.dark .chat-input-placeholder {
|
|
scrollbar-color: rgba(107, 114, 128, 0.3) transparent;
|
|
}
|
|
|
|
.dark .chat-input-placeholder::-webkit-scrollbar-thumb {
|
|
background-color: rgba(107, 114, 128, 0.3);
|
|
}
|
|
|
|
.dark .chat-input-placeholder::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(107, 114, 128, 0.5);
|
|
}
|
|
|
|
/* Enhanced box shadow when textarea expands */
|
|
.chat-input-expanded {
|
|
box-shadow: 0 -5px 15px -3px rgba(0, 0, 0, 0.1), 0 -4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .chat-input-expanded {
|
|
box-shadow: 0 -5px 15px -3px rgba(0, 0, 0, 0.3), 0 -4px 6px -2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Fix focus ring offset color in dark mode */
|
|
.dark [class*="ring-offset"] {
|
|
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
|
}
|
|
|
|
/* Ensure buttons don't show white backgrounds in dark mode */
|
|
.dark button:focus {
|
|
--tw-ring-offset-color: rgb(31 41 55); /* gray-800 */
|
|
}
|
|
|
|
/* Fix mobile select dropdown styling */
|
|
@supports (-webkit-touch-callout: none) {
|
|
select {
|
|
font-size: 16px !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
}
|
|
|
|
/* Improve select appearance in dark mode */
|
|
.dark select {
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.5rem center;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
select {
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.5rem center;
|
|
background-size: 1.5em 1.5em;
|
|
padding-right: 2.5rem;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
/* Fix select option text in mobile */
|
|
select option {
|
|
font-size: 16px !important;
|
|
padding: 8px !important;
|
|
background-color: var(--background) !important;
|
|
color: var(--foreground) !important;
|
|
}
|
|
|
|
.dark select option {
|
|
background-color: rgb(31 41 55) !important;
|
|
color: rgb(243 244 246) !important;
|
|
}
|
|
|
|
/* Tool details chevron animation */
|
|
details[open] .details-chevron,
|
|
details[open] summary svg[class*="group-open"] {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Smooth chevron transition */
|
|
.details-chevron,
|
|
summary svg[class*="transition-transform"] {
|
|
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|