@geenius/ai 0.1.0

package/packages/solidjs-css/src/ai.css

@@ -0,0 +1,857 @@
+/* ============================================================================
+   GEENIUS AI - COMPREHENSIVE CSS
+   Component: Chat Interfaces, AI Response Cards, Model Selectors
+   Colors: OKLCH, Dark Mode Support, Animations, Streaming Effects
+   ============================================================================ */
+
+:root {
+  /* Base Colors - OKLCH */
+  --ai-bg: oklch(0.10 0.01 250);
+  --ai-surface: oklch(0.13 0.01 250);
+  --ai-surface-2: oklch(0.16 0.01 250);
+  --ai-surface-3: oklch(0.19 0.01 250);
+  --ai-border: oklch(0.22 0.01 250);
+  --ai-border-light: oklch(0.26 0.01 250);
+  --ai-border-focus: oklch(0.65 0.22 265);
+  --ai-text: oklch(0.95 0.01 250);
+  --ai-text-secondary: oklch(0.75 0.01 250);
+  --ai-text-muted: oklch(0.65 0.01 250);
+  --ai-text-disabled: oklch(0.45 0.01 250);
+
+  /* Semantic Colors - OKLCH */
+  --ai-accent: oklch(0.65 0.22 265);
+  --ai-accent-light: oklch(0.75 0.18 265);
+  --ai-accent-dark: oklch(0.55 0.24 265);
+  --ai-success: oklch(0.72 0.20 145);
+  --ai-success-light: oklch(0.82 0.15 145);
+  --ai-warning: oklch(0.78 0.18 75);
+  --ai-warning-light: oklch(0.88 0.13 75);
+  --ai-error: oklch(0.60 0.25 25);
+  --ai-error-light: oklch(0.70 0.20 25);
+  --ai-info: oklch(0.65 0.20 265);
+  --ai-streaming: oklch(0.65 0.22 265);
+  --ai-user-msg: oklch(0.65 0.22 265);
+  --ai-ai-msg: oklch(0.72 0.20 145);
+
+  /* Spacing & Layout */
+  --ai-radius: 0.75rem;
+  --ai-radius-sm: 0.375rem;
+  --ai-radius-lg: 1.25rem;
+  --ai-spacing-xs: 0.375rem;
+  --ai-spacing-sm: 0.5rem;
+  --ai-spacing-md: 0.75rem;
+  --ai-spacing-lg: 1rem;
+  --ai-spacing-xl: 1.5rem;
+  --ai-spacing-2xl: 2rem;
+
+  /* Effects */
+  --ai-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
+  --ai-shadow-sm: 0 2px 8px oklch(0 0 0 / 0.2);
+  --ai-shadow-lg: 0 12px 48px oklch(0 0 0 / 0.5);
+  --ai-shadow-focus: 0 0 0 3px oklch(0.65 0.22 265 / 0.15);
+  --ai-transition: 200ms ease;
+  --ai-transition-slow: 300ms ease;
+  --ai-backdrop: oklch(0 0 0 / 0.7);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --ai-bg: oklch(0.98 0.01 250);
+    --ai-surface: oklch(0.96 0.01 250);
+    --ai-surface-2: oklch(0.92 0.01 250);
+    --ai-text: oklch(0.15 0.01 250);
+    --ai-text-muted: oklch(0.50 0.01 250);
+  }
+}
+
+/* ============================================================================
+   CHAT CONTAINER & LAYOUT
+   ============================================================================ */
+
+.ai__container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: var(--ai-bg);
+}
+
+.ai__chat-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ai__header {
+  background: var(--ai-surface);
+  border-bottom: 1px solid var(--ai-border);
+  padding: var(--ai-spacing-lg) var(--ai-spacing-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--ai-spacing-md);
+  z-index: 20;
+}
+
+.ai__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--ai-spacing-md);
+}
+
+.ai__header-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ai-text);
+  margin: 0;
+}
+
+.ai__header-subtitle {
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+  margin: 0;
+}
+
+.ai__header-actions {
+  display: flex;
+  gap: var(--ai-spacing-sm);
+}
+
+.ai__chat-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ai-spacing-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-spacing-lg);
+}
+
+.ai__input-area {
+  padding: var(--ai-spacing-xl);
+  background: var(--ai-surface);
+  border-top: 1px solid var(--ai-border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-spacing-md);
+}
+
+/* ============================================================================
+   MESSAGE BUBBLES
+   ============================================================================ */
+
+.ai__message {
+  display: flex;
+  gap: var(--ai-spacing-md);
+  margin-bottom: var(--ai-spacing-lg);
+  animation: ai-fade-in var(--ai-transition);
+}
+
+.ai__message--user {
+  justify-content: flex-end;
+}
+
+.ai__message--assistant {
+  justify-content: flex-start;
+}
+
+.ai__message-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.ai__message--user .ai__message-avatar {
+  background: var(--ai-user-msg);
+  color: oklch(1 0 0);
+}
+
+.ai__message--assistant .ai__message-avatar {
+  background: var(--ai-ai-msg);
+  color: oklch(1 0 0);
+}
+
+.ai__message-content {
+  max-width: 70%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-spacing-sm);
+}
+
+.ai__message--user .ai__message-content {
+  align-items: flex-end;
+}
+
+.ai__message--assistant .ai__message-content {
+  align-items: flex-start;
+}
+
+.ai__message-bubble {
+  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
+  border-radius: var(--ai-radius);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+  animation: ai-bubble-pop var(--ai-transition);
+}
+
+.ai__message--user .ai__message-bubble {
+  background: var(--ai-user-msg);
+  color: oklch(1 0 0);
+  border: 1px solid var(--ai-user-msg);
+  border-radius: var(--ai-radius) 0 var(--ai-radius) var(--ai-radius);
+}
+
+.ai__message--assistant .ai__message-bubble {
+  background: var(--ai-surface);
+  color: var(--ai-text);
+  border: 1px solid var(--ai-border);
+  border-radius: 0 var(--ai-radius) var(--ai-radius) var(--ai-radius);
+}
+
+.ai__message-time {
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+  margin-top: var(--ai-spacing-xs);
+}
+
+.ai__message-actions {
+  display: flex;
+  gap: var(--ai-spacing-xs);
+  margin-top: var(--ai-spacing-xs);
+  opacity: 0;
+  transition: opacity var(--ai-transition);
+}
+
+.ai__message:hover .ai__message-actions {
+  opacity: 1;
+}
+
+.ai__message-action-btn {
+  background: none;
+  border: none;
+  color: var(--ai-text-muted);
+  cursor: pointer;
+  padding: var(--ai-spacing-xs);
+  border-radius: var(--ai-radius-sm);
+  font-size: 0.875rem;
+  transition: all var(--ai-transition);
+}
+
+.ai__message-action-btn:hover {
+  color: var(--ai-text);
+  background: var(--ai-surface-2);
+}
+
+/* ============================================================================
+   STREAMING INDICATORS
+   ============================================================================ */
+
+.ai__typing-indicator {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
+  background: var(--ai-surface);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  width: fit-content;
+}
+
+.ai__typing-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--ai-streaming);
+  animation: ai-typing 1.4s infinite;
+}
+
+.ai__typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.ai__typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.ai__streaming-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: var(--ai-spacing-xs) var(--ai-spacing-md);
+  background: var(--ai-streaming);
+  background-opacity: 0.1;
+  border: 1px solid var(--ai-streaming);
+  border-opacity: 0.3;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  color: var(--ai-streaming);
+  font-weight: 500;
+}
+
+.ai__streaming-dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--ai-streaming);
+  animation: ai-pulse 1.5s ease-in-out infinite;
+}
+
+.ai__streaming-text {
+  opacity: 0.8;
+  animation: ai-fade-blink 1.5s ease-in-out infinite;
+}
+
+/* ============================================================================
+   INPUT FORM & CONTROLS
+   ============================================================================ */
+
+.ai__input-form {
+  display: flex;
+  gap: var(--ai-spacing-md);
+  align-items: flex-end;
+}
+
+.ai__input-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-spacing-xs);
+}
+
+.ai__input-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ai-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ai__input-textarea {
+  background: var(--ai-surface-2);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-sm);
+  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
+  color: var(--ai-text);
+  font-size: 0.875rem;
+  font-family: inherit;
+  transition: all var(--ai-transition);
+  outline: none;
+  width: 100%;
+  min-height: 2.5rem;
+  max-height: 8rem;
+  resize: vertical;
+}
+
+.ai__input-textarea:focus {
+  border-color: var(--ai-border-focus);
+  box-shadow: var(--ai-shadow-focus);
+}
+
+.ai__input-textarea::placeholder {
+  color: var(--ai-text-disabled);
+}
+
+.ai__input-actions {
+  display: flex;
+  gap: var(--ai-spacing-sm);
+  flex-wrap: wrap;
+}
+
+.ai__input-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ai-spacing-sm) var(--ai-spacing-lg);
+  border-radius: var(--ai-radius-sm);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all var(--ai-transition);
+  white-space: nowrap;
+}
+
+.ai__input-btn--primary {
+  background: var(--ai-accent);
+  color: oklch(1 0 0);
+}
+
+.ai__input-btn--primary:hover:not(:disabled) {
+  background: var(--ai-accent-light);
+  transform: translateY(-1px);
+}
+
+.ai__input-btn--secondary {
+  background: var(--ai-surface);
+  color: var(--ai-text);
+  border: 1px solid var(--ai-border);
+}
+
+.ai__input-btn--secondary:hover:not(:disabled) {
+  border-color: var(--ai-accent);
+  color: var(--ai-accent);
+}
+
+.ai__input-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ============================================================================
+   MODEL SELECTOR & TOKEN COUNTER
+   ============================================================================ */
+
+.ai__model-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--ai-spacing-md);
+  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
+  background: var(--ai-surface-2);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-sm);
+  margin-bottom: var(--ai-spacing-md);
+}
+
+.ai__model-label {
+  font-size: 0.8125rem;
+  color: var(--ai-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+}
+
+.ai__model-select {
+  background: none;
+  border: none;
+  color: var(--ai-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0;
+  flex: 1;
+  font-family: inherit;
+}
+
+.ai__model-select:focus {
+  outline: 1px solid var(--ai-accent);
+  outline-offset: 2px;
+}
+
+.ai__token-counter {
+  display: flex;
+  align-items: center;
+  gap: var(--ai-spacing-sm);
+  padding: var(--ai-spacing-xs) var(--ai-spacing-md);
+  background: var(--ai-surface);
+  border: 1px solid var(--ai-border);
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.ai__token-value {
+  font-weight: 600;
+  color: var(--ai-accent);
+}
+
+.ai__token-max {
+  opacity: 0.6;
+}
+
+/* ============================================================================
+   RESPONSE CARDS & FEATURES
+   ============================================================================ */
+
+.ai__response-card {
+  background: var(--ai-surface);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  padding: var(--ai-spacing-lg);
+  margin-bottom: var(--ai-spacing-lg);
+}
+
+.ai__response-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--ai-spacing-md);
+}
+
+.ai__response-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ai-text);
+  margin: 0;
+}
+
+.ai__response-meta {
+  display: flex;
+  gap: var(--ai-spacing-sm);
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+}
+
+.ai__response-content {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ai-text);
+  margin-bottom: var(--ai-spacing-md);
+}
+
+.ai__response-footer {
+  display: flex;
+  gap: var(--ai-spacing-sm);
+  flex-wrap: wrap;
+  padding-top: var(--ai-spacing-md);
+  border-top: 1px solid var(--ai-border);
+}
+
+/* ============================================================================
+   PROMPT TEMPLATES
+   ============================================================================ */
+
+.ai__templates {
+  background: var(--ai-surface);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius);
+  padding: var(--ai-spacing-lg);
+  margin-bottom: var(--ai-spacing-lg);
+}
+
+.ai__templates-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ai-text);
+  margin: 0 0 var(--ai-spacing-md);
+}
+
+.ai__templates-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: var(--ai-spacing-sm);
+}
+
+.ai__template-btn {
+  padding: var(--ai-spacing-sm) var(--ai-spacing-md);
+  background: var(--ai-surface-2);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-sm);
+  color: var(--ai-text);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--ai-transition);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ai__template-btn:hover {
+  background: var(--ai-surface-3);
+  border-color: var(--ai-accent);
+  color: var(--ai-accent);
+}
+
+/* ============================================================================
+   FEATURE TOGGLES & SETTINGS
+   ============================================================================ */
+
+.ai__feature-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ai-spacing-md);
+  background: var(--ai-surface-2);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-sm);
+  margin-bottom: var(--ai-spacing-sm);
+}
+
+.ai__feature-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ai-text);
+}
+
+.ai__feature-description {
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+  margin-top: var(--ai-spacing-xs);
+}
+
+.ai__toggle-switch {
+  position: relative;
+  width: 2.5rem;
+  height: 1.5rem;
+  background: var(--ai-inactive);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color var(--ai-transition);
+}
+
+.ai__toggle-switch--active {
+  background: var(--ai-accent);
+}
+
+.ai__toggle-switch-thumb {
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: oklch(1 0 0);
+  border-radius: 50%;
+  transition: transform var(--ai-transition);
+}
+
+.ai__toggle-switch--active .ai__toggle-switch-thumb {
+  transform: translateX(1rem);
+}
+
+/* ============================================================================
+   CODE BLOCKS & SYNTAX
+   ============================================================================ */
+
+.ai__code-block {
+  background: oklch(0.08 0.01 250);
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-sm);
+  padding: var(--ai-spacing-lg);
+  margin: var(--ai-spacing-md) 0;
+  overflow-x: auto;
+}
+
+.ai__code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--ai-spacing-md);
+  padding-bottom: var(--ai-spacing-md);
+  border-bottom: 1px solid var(--ai-border);
+}
+
+.ai__code-lang {
+  font-size: 0.75rem;
+  color: var(--ai-text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ai__code-copy {
+  background: none;
+  border: none;
+  color: var(--ai-text-muted);
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: 500;
+  transition: color var(--ai-transition);
+}
+
+.ai__code-copy:hover {
+  color: var(--ai-accent);
+}
+
+.ai__code-text {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.8125rem;
+  color: var(--ai-text);
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+/* ============================================================================
+   SIDEBAR & HISTORY
+   ============================================================================ */
+
+.ai__sidebar {
+  width: 16rem;
+  background: var(--ai-surface);
+  border-right: 1px solid var(--ai-border);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.ai__sidebar-header {
+  padding: var(--ai-spacing-lg);
+  border-bottom: 1px solid var(--ai-border);
+}
+
+.ai__sidebar-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--ai-text);
+  margin: 0;
+}
+
+.ai__chat-history {
+  flex: 1;
+  padding: var(--ai-spacing-lg) 0;
+  overflow-y: auto;
+}
+
+.ai__history-item {
+  padding: var(--ai-spacing-md) var(--ai-spacing-lg);
+  border-bottom: 1px solid var(--ai-border);
+  font-size: 0.875rem;
+  color: var(--ai-text-muted);
+  cursor: pointer;
+  transition: all var(--ai-transition);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ai__history-item:hover {
+  background: var(--ai-surface-2);
+  color: var(--ai-text);
+}
+
+.ai__history-item--active {
+  background: var(--ai-accent);
+  color: oklch(1 0 0);
+}
+
+/* ============================================================================
+   ANIMATIONS
+   ============================================================================ */
+
+@keyframes ai-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ai-bubble-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes ai-typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.7;
+  }
+  30% {
+    transform: translateY(-0.5rem);
+    opacity: 1;
+  }
+}
+
+@keyframes ai-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ai-fade-blink {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
+/* ============================================================================
+   RESPONSIVE DESIGN
+   ============================================================================ */
+
+@media (max-width: 1024px) {
+  .ai__message-content {
+    max-width: 80%;
+  }
+}
+
+@media (max-width: 768px) {
+  .ai__container {
+    flex-direction: column-reverse;
+  }
+
+  .ai__sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 25vh;
+    border-right: none;
+    border-top: 1px solid var(--ai-border);
+  }
+
+  .ai__message-content {
+    max-width: 90%;
+  }
+
+  .ai__chat-area {
+    padding: var(--ai-spacing-lg);
+  }
+
+  .ai__input-area {
+    padding: var(--ai-spacing-lg);
+  }
+
+  .ai__templates-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  }
+
+  .ai__modal {
+    min-width: unset;
+    width: calc(100vw - 2rem);
+    max-height: calc(100vh - 2rem);
+  }
+}
+
+@media (max-width: 480px) {
+  .ai__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .ai__message-content {
+    max-width: 100%;
+  }
+
+  .ai__input-form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ai__input-btn {
+    width: 100%;
+  }
+
+  .ai__model-selector {
+    flex-wrap: wrap;
+  }
+
+  .ai__code-block {
+    padding: var(--ai-spacing-md);
+  }
+
+  .ai__response-card {
+    padding: var(--ai-spacing-md);
+  }
+}
+
+/* End of ai.css */