@lastbrain/ai-ui-react 1.0.68 → 1.0.70

package/src/styles.css

@@ -1,563 +1,1462 @@
-/**
- * @lastbrain/ai-ui-react - Styles CSS
- * Framework-agnostic styles for AI UI components
- */
-
-/* ========== Variables ========== */
 :root {
-  --ai-primary: #3b82f6;
-  --ai-primary-hover: #2563eb;
-  --ai-success: #10b981;
-  --ai-warning: #f59e0b;
-  --ai-danger: #ef4444;
-  --ai-border: #e5e7eb;
-  --ai-text: #1f2937;
-  --ai-text-secondary: #6b7280;
+  --ai-radius-sm: 12px;
+  --ai-radius-md: 16px;
+  --ai-radius-lg: 20px;
+  --ai-radius-full: 999px;
+  --ai-radius-current: var(--ai-radius-full);
+
+  --ai-size-sm-h: 40px;
+  --ai-size-md-h: 46px;
+  --ai-size-lg-h: 54px;
+  --ai-size-sm-font: 13px;
+  --ai-size-md-font: 14px;
+  --ai-size-lg-font: 16px;
+
   --ai-bg: #ffffff;
-  --ai-bg-hover: #f9fafb;
-  --ai-radius: 8px;
-  --ai-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-  --ai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --ai-bg2: #ffffff;
+  --ai-bg3: #f8fafc;
+  --ai-glass: #ffffff;
+  --ai-glass-strong: #ffffff;
+  --ai-overlay: rgba(2, 6, 23, 0.48);
+  --ai-foreground: #0f172a;
+  --ai-muted: #64748b;
+  --ai-secondary: #475569;
+  --ai-tertiary: #94a3b8;
+
+  --ai-border: rgba(15, 23, 42, 0.14);
+  --ai-border-primary: rgba(37, 99, 235, 0.35);
+
+  --ai-primary: #2563eb;
+  --ai-primary-2: #7c3aed;
+  --ai-danger: #ef4444;
+
+  --ai-glow-rgb: 37, 99, 235;
+  --ai-red-rgb: 255, 80, 80;
+  --ai-blue-rgb: 90, 130, 255;
+  --ai-ring: rgba(37, 99, 235, 0.24);
+
+  --ai-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07);
+  --ai-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
+  --ai-shadow-lg: 0 12px 26px rgba(15, 23, 42, 0.15);
+  --ai-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  --ai-bg-secondary: var(--ai-bg2);
+  --ai-bg-tertiary: var(--ai-bg3);
+  --ai-text-secondary: var(--ai-secondary);
+  --ai-text-tertiary: var(--ai-tertiary);
 }
 
-/* ========== Status Button ========== */
-.ai-status-button-wrapper {
-  position: relative;
-  display: inline-block;
+[data-theme="dark"],
+.dark,
+:root[data-theme="dark"] {
+  --ai-bg: #101317;
+  --ai-bg2: #151a20;
+  --ai-bg3: #1c222b;
+  --ai-glass: #151a20;
+  --ai-glass-strong: #151a20;
+  --ai-overlay: rgba(0, 0, 0, 0.58);
+  --ai-foreground: #e2e8f0;
+  --ai-muted: #9aa7bd;
+  --ai-secondary: #c1ccdc;
+  --ai-tertiary: #7f8ea6;
+
+  --ai-border: rgba(148, 163, 184, 0.22);
+  --ai-border-primary: rgba(96, 165, 250, 0.45);
+
+  --ai-primary: #60a5fa;
+  --ai-primary-2: #a78bfa;
+  --ai-danger: #f87171;
+
+  --ai-glow-rgb: 99, 122, 255;
+  --ai-red-rgb: 255, 82, 82;
+  --ai-blue-rgb: 104, 126, 255;
+  --ai-ring: rgba(96, 165, 250, 0.32);
+
+  --ai-shadow-sm: 0 8px 20px rgba(2, 6, 23, 0.42);
+  --ai-shadow: 0 14px 34px rgba(2, 6, 23, 0.52);
+  --ai-shadow-lg: 0 22px 54px rgba(2, 6, 23, 0.62);
 }
 
-.ai-status-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  background: var(--ai-bg);
-  color: var(--ai-text);
-  cursor: pointer;
-  transition: all 0.2s;
+/* Radius + size props */
+.ai-radius-sm {
+  --ai-radius-current: var(--ai-radius-sm);
 }
 
-.ai-status-button:hover {
-  background: var(--ai-bg-hover);
-  box-shadow: var(--ai-shadow);
+.ai-radius-none {
+  --ai-radius-current: 0px;
 }
 
-.ai-status-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.ai-radius-md {
+  --ai-radius-current: var(--ai-radius-md);
 }
 
-.ai-status-button--loading {
-  cursor: wait;
+.ai-radius-lg {
+  --ai-radius-current: var(--ai-radius-lg);
 }
 
-.ai-status-button--success {
-  color: var(--ai-success);
+.ai-radius-full {
+  --ai-radius-current: var(--ai-radius-full);
 }
 
-.ai-status-button--error {
-  color: var(--ai-danger);
+.ai-size-sm {
+  --ai-control-h: var(--ai-size-sm-h);
+  --ai-control-font: var(--ai-size-sm-font);
+  --ai-control-pad-x: 12px;
+  --ai-action-size: 28px;
 }
 
-.ai-spinner {
-  animation: spin 1s linear infinite;
+.ai-size-md {
+  --ai-control-h: var(--ai-size-md-h);
+  --ai-control-font: var(--ai-size-md-font);
+  --ai-control-pad-x: 14px;
+  --ai-action-size: 32px;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.ai-size-lg {
+  --ai-control-h: var(--ai-size-lg-h);
+  --ai-control-font: var(--ai-size-lg-font);
+  --ai-control-pad-x: 16px;
+  --ai-action-size: 36px;
+}
+
+/* Base surface */
+.ai-surface {
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-current, var(--ai-radius-md));
+  color: var(--ai-foreground);
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      100% 130% at 0% 0%,
+      rgba(var(--ai-glow-rgb), 0.05),
+      transparent 70%
+    );
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: var(--ai-shadow-sm);
+  transition:
+    border-color var(--ai-transition),
+    box-shadow var(--ai-transition),
+    transform var(--ai-transition),
+    background var(--ai-transition);
+}
+
+/* Glow wrapper */
+.ai-glow {
+  position: relative;
+  isolation: isolate;
+  overflow: visible;
+  border-radius: inherit;
 }
 
-/* ========== Tooltip ========== */
-.ai-tooltip {
+.ai-glow::before,
+.ai-glow::after {
+  content: "";
   position: absolute;
-  top: calc(100% + 8px);
+  top: -8px;
+  bottom: -8px;
+  width: 52%;
+  opacity: 0.18;
+  filter: blur(20px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.ai-glow::before {
+  left: 0;
+  background: radial-gradient(
+    ellipse at 0% 50%,
+    rgba(var(--ai-red-rgb), 0.34) 0%,
+    rgba(var(--ai-red-rgb), 0.12) 38%,
+    rgba(var(--ai-red-rgb), 0) 74%
+  );
+}
+
+.ai-glow::after {
   right: 0;
-  z-index: 1000;
-  min-width: 200px;
-  padding: 16px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: var(--ai-radius);
-  box-shadow:
-    0 20px 25px -5px rgb(0 0 0 / 0.1),
-    0 8px 10px -6px rgb(0 0 0 / 0.1);
-  font-size: 12px;
-  animation: fadeIn 0.2s;
-  color: #1f2937;
+  background: radial-gradient(
+    ellipse at 100% 50%,
+    rgba(var(--ai-blue-rgb), 0.34) 0%,
+    rgba(var(--ai-blue-rgb), 0.12) 38%,
+    rgba(var(--ai-blue-rgb), 0) 74%
+  );
 }
 
-.ai-tooltip--status {
-  min-width: 320px;
-  max-width: 400px;
+/* Control shell */
+.ai-control-group {
+  position: relative;
+  width: 100%;
 }
 
-.ai-tooltip__header {
-  font-weight: 600;
-  font-size: 16px;
-  padding-bottom: 12px;
-  margin-bottom: 12px;
-  border-bottom: 1px solid #e5e7eb;
-  color: #111827;
+.ai-shell {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: var(--ai-control-h, var(--ai-size-md-h));
+  padding: 0 12px;
+  border-radius: var(--ai-radius-current, var(--ai-radius-full));
+  border: 1px solid var(--ai-border);
+  background:
+    linear-gradient(180deg, var(--ai-glass-strong), var(--ai-glass-strong)),
+    radial-gradient(
+      100% 160% at 0% 0%,
+      rgba(var(--ai-glow-rgb), 0.06),
+      transparent 70%
+    );
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow:
+    var(--ai-shadow-sm),
+    inset 0 1px 0 color-mix(in srgb, var(--ai-foreground) 4%, transparent);
+  transition:
+    border-color var(--ai-transition),
+    box-shadow var(--ai-transition),
+    transform var(--ai-transition);
 }
 
-.ai-tooltip__section {
-  padding: 12px 0;
-  border-top: 1px solid #f3f4f6;
+.ai-shell::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    90deg,
+    rgba(var(--ai-red-rgb), 0.24),
+    color-mix(in srgb, var(--ai-foreground) 10%, transparent),
+    rgba(var(--ai-blue-rgb), 0.24)
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0.84;
+}
+
+.ai-shell:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 42%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 0 1px rgba(var(--ai-glow-rgb), 0.16),
+    0 0 12px rgba(var(--ai-glow-rgb), 0.14);
 }
 
-.ai-tooltip__section:first-child {
-  border-top: none;
-  padding-top: 0;
+.ai-shell:focus-within {
+  border-color: color-mix(in srgb, var(--ai-primary) 70%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 0 3px var(--ai-ring),
+    0 0 14px rgba(var(--ai-glow-rgb), 0.16);
 }
 
-.ai-tooltip__subtitle {
-  font-weight: 600;
-  margin-bottom: 8px;
-  font-size: 12px;
-  color: #111827;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.ai-shell--textarea {
+  align-items: stretch;
+  padding: 10px 12px;
+  min-height: 126px;
 }
 
-.ai-tooltip__row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 6px;
-  align-items: center;
+.ai-control {
+  width: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--ai-foreground);
+  font-size: var(--ai-control-font, var(--ai-size-md-font));
+  line-height: 1.45;
+  font-family: inherit;
 }
 
-.ai-tooltip__label {
-  color: #6b7280;
-  font-size: 12px;
+.ai-control::placeholder,
+.ai-field::placeholder {
+  color: color-mix(in srgb, var(--ai-muted) 86%, transparent);
 }
 
-.ai-tooltip__value {
-  font-family:
-    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  font-size: 12px;
-  color: #111827;
-  font-weight: 500;
+.ai-control-input,
+.ai-field {
+  flex: 1 1 auto;
+  height: calc(var(--ai-control-h, var(--ai-size-md-h)) - 6px);
+  min-height: 34px;
+  padding: 0 var(--ai-control-pad-x, 14px) 0 2px;
+  margin: 0;
+  line-height: 1;
 }
 
-.ai-tooltip__value--bold {
-  font-weight: 700;
-  color: #111827;
+.ai-control-input--with-action {
+  padding-right: 2px;
 }
 
-.ai-tooltip__value--capitalize {
-  text-transform: capitalize;
+.ai-control-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  padding-right: calc(var(--ai-action-size, 32px) + 34px);
 }
 
-.ai-tooltip__value--success {
-  color: #10b981;
-  font-weight: 600;
+.ai-control-select-chevron {
+  position: absolute;
+  right: calc(var(--ai-action-size, 32px) + 14px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: color-mix(in srgb, var(--ai-muted) 86%, transparent);
+  pointer-events: none;
 }
 
-.ai-tooltip__value--warning {
-  color: #f59e0b;
-  font-weight: 600;
+.ai-control-textarea {
+  min-height: 96px;
+  resize: none;
+  overflow: hidden;
+  padding: 6px 2px 8px;
 }
 
-.ai-tooltip__actions {
-  display: flex;
-  gap: 8px;
-  justify-content: space-between;
-  padding-top: 12px;
-  margin-top: 8px;
-  border-top: 1px solid #f3f4f6;
+.ai-control[aria-invalid="true"],
+.ai-control.ai-control--error {
+  color: var(--ai-danger);
 }
 
-.ai-tooltip__link {
-  flex: 1;
-  text-align: center;
-  padding: 6px 12px;
-  color: #3b82f6;
-  text-decoration: none;
-  border-radius: 6px;
-  transition: all 0.2s;
-  font-size: 11px;
-  font-weight: 500;
-  background: #eff6ff;
-  border: 1px solid #dbeafe;
+.ai-control:disabled,
+.ai-control.ai-control--disabled,
+.ai-shell.ai-control--disabled {
+  opacity: 0.58;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.ai-control-action,
+.ai-spark {
+  flex: 0 0 auto;
+  width: var(--ai-action-size, 32px);
+  height: var(--ai-action-size, 32px);
+  border-radius: var(--ai-radius-full);
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 30%, var(--ai-border));
+  background: var(--ai-bg);
+  color: var(--ai-primary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--ai-transition);
 }
 
-.ai-tooltip__link:hover {
-  background: #dbeafe;
-  border-color: #3b82f6;
+.ai-control-action:hover,
+.ai-spark:hover {
   transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ai-primary) 70%, var(--ai-border));
+  box-shadow:
+    0 0 14px rgba(var(--ai-red-rgb), 0.14),
+    0 0 20px rgba(var(--ai-blue-rgb), 0.22);
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.ai-control-action:disabled,
+.ai-spark:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
-/* ========== Input ========== */
-.ai-input {
-  width: 100%;
-  padding: 10px 12px;
+.ai-shell--textarea .ai-control-action,
+.ai-shell--textarea .ai-spark {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+}
+
+/* Generic buttons */
+.ai-btn {
+  --ai-control-h: var(--ai-size-md-h);
+  --ai-control-font: var(--ai-size-md-font);
+  --ai-radius-current: var(--ai-radius-full);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--ai-control-h);
+  padding: 0 16px;
+  border-radius: var(--ai-radius-current);
   border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  font-size: 14px;
-  color: var(--ai-text);
-  background: var(--ai-bg);
-  transition: all 0.2s;
+  background:
+    linear-gradient(180deg, var(--ai-glass-strong), var(--ai-glass-strong)),
+    radial-gradient(
+      75% 140% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.05),
+      transparent 72%
+    );
+  color: var(--ai-foreground);
+  font-size: var(--ai-control-font);
+  font-weight: 700;
+  box-shadow: var(--ai-shadow-sm);
+  transition:
+    transform var(--ai-transition),
+    border-color var(--ai-transition),
+    box-shadow var(--ai-transition),
+    background var(--ai-transition);
+  cursor: pointer;
 }
 
-.ai-input:hover {
-  border-color: var(--ai-primary);
+.ai-btn:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ai-primary) 45%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 12px rgba(var(--ai-glow-rgb), 0.14);
 }
 
-.ai-input:focus {
-  outline: none;
-  border-color: var(--ai-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.ai-btn:active {
+  transform: translateY(0);
 }
 
-.ai-input:disabled {
-  opacity: 0.5;
+.ai-btn:disabled {
+  opacity: 0.56;
   cursor: not-allowed;
-  background: var(--ai-bg-hover);
+  transform: none;
+  box-shadow: none;
 }
 
-.ai-input--error {
-  border-color: var(--ai-danger);
+.ai-btn--primary,
+.ai-btn--auth {
+  color: var(--ai-primary);
+  border-color: color-mix(in srgb, var(--ai-primary) 44%, var(--ai-border));
+  background:
+    linear-gradient(180deg, var(--ai-glass-strong), var(--ai-glass-strong)),
+    radial-gradient(
+      100% 130% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.1),
+      transparent 72%
+    );
+}
+
+.ai-btn--primary:hover,
+.ai-btn--auth:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 70%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 12px rgba(var(--ai-glow-rgb), 0.2);
 }
 
-.ai-input--error:focus {
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+.ai-btn--ghost {
+  background: var(--ai-glass-strong);
 }
 
-/* ========== Textarea ========== */
-.ai-textarea {
-  width: 100%;
-  min-height: 100px;
-  padding: 10px 12px;
-  border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
-  font-size: 14px;
-  font-family: inherit;
-  color: var(--ai-text);
-  background: var(--ai-bg);
-  resize: vertical;
-  transition: all 0.2s;
+.ai-btn--light {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ai-primary);
+  min-height: 32px;
+  padding: 0 8px;
 }
 
-.ai-textarea:hover {
-  border-color: var(--ai-primary);
+.ai-btn--light:hover {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--ai-primary) 10%, transparent);
+  box-shadow: none;
+  transform: none;
 }
 
-.ai-textarea:focus {
-  outline: none;
-  border-color: var(--ai-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.ai-btn--danger {
+  color: #fee2e2;
+  border-color: rgba(239, 68, 68, 0.35);
+  background: linear-gradient(
+    180deg,
+    rgba(127, 29, 29, 0.3),
+    rgba(69, 10, 10, 0.45)
+  );
 }
 
-.ai-textarea:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--ai-bg-hover);
+.ai-btn--compact {
+  min-height: 34px;
+  padding: 0 12px;
+  border-radius: 12px;
+  font-size: 12px;
 }
 
-/* ========== Button ========== */
-.ai-button {
+.ai-icon-btn,
+[data-ai-close-button],
+[data-ai-action-button] {
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 34%, var(--ai-border));
+  border-radius: 12px;
+  min-width: 34px;
+  height: 34px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border: none;
-  border-radius: var(--ai-radius);
-  font-size: 14px;
-  font-weight: 500;
-  color: white;
-  background: var(--ai-primary);
+  background: color-mix(in srgb, var(--ai-bg2) 86%, transparent);
+  color: var(--ai-primary);
+  transition: all var(--ai-transition);
   cursor: pointer;
-  transition: all 0.2s;
+  box-shadow: var(--ai-shadow-sm);
 }
 
-.ai-button:hover {
-  background: var(--ai-primary-hover);
+.ai-icon-btn:hover,
+[data-ai-close-button]:hover,
+[data-ai-action-button]:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 72%, var(--ai-border));
+  box-shadow: 0 0 18px rgba(var(--ai-glow-rgb), 0.2);
   transform: translateY(-1px);
-  box-shadow: var(--ai-shadow);
 }
 
-.ai-button:active {
-  transform: translateY(0);
+.ai-icon-btn--danger,
+.ai-status-action-btn--danger {
+  color: var(--ai-danger);
+  border-color: rgba(239, 68, 68, 0.35);
 }
 
-.ai-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
+.ai-icon-btn--danger:hover,
+.ai-status-action-btn--danger:hover {
+  border-color: rgba(239, 68, 68, 0.62);
+  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
 }
 
-.ai-button--secondary {
-  background: var(--ai-bg);
-  color: var(--ai-text);
+/* Chips */
+.ai-chip-input {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ai-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--ai-radius-current, var(--ai-radius-full));
   border: 1px solid var(--ai-border);
+  color: var(--ai-foreground);
+  background: color-mix(in srgb, var(--ai-bg2) 80%, transparent);
+  font-size: 12px;
+  font-weight: 600;
+  transition: all var(--ai-transition);
 }
 
-.ai-button--secondary:hover {
-  background: var(--ai-bg-hover);
+.ai-chip:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 40%, var(--ai-border));
+  box-shadow: 0 0 12px rgba(var(--ai-glow-rgb), 0.14);
 }
 
-.ai-button--danger {
-  background: var(--ai-danger);
+.ai-chip--with-close {
+  padding-right: 6px;
 }
 
-.ai-button--success {
-  background: var(--ai-success);
+.ai-chip--selected {
+  color: white;
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--ai-primary), var(--ai-primary-2));
 }
 
-.ai-button--sm {
-  padding: 6px 12px;
-  font-size: 12px;
+.ai-chip--success {
+  color: #10b981;
+  border-color: rgba(16, 185, 129, 0.35);
+  background: rgba(16, 185, 129, 0.12);
 }
 
-.ai-button--lg {
-  padding: 14px 20px;
-  font-size: 16px;
+.ai-chip--danger {
+  color: var(--ai-danger);
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.12);
 }
 
-/* ========== Select ========== */
-.ai-select {
-  width: 100%;
-  padding: 10px 12px;
+.ai-chip-remover {
+  width: 18px;
+  height: 18px;
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ai-bg) 82%, transparent);
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.ai-chip-remover:hover {
+  background: color-mix(in srgb, var(--ai-bg) 68%, var(--ai-border));
+}
+
+/* Popover / tooltip */
+.ai-popover,
+.ai-tooltip,
+[data-ai-settings-content] {
   border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius);
+  border-radius: var(--ai-radius-lg);
+  color: var(--ai-foreground);
+  background: var(--ai-bg2);
+  box-shadow: var(--ai-shadow-lg);
+}
+
+.ai-popover-body {
+  padding: 14px;
+}
+
+.ai-popover-header {
   font-size: 14px;
-  color: var(--ai-text);
-  background: var(--ai-bg);
+  font-weight: 700;
+  color: var(--ai-foreground);
+  margin-bottom: 10px;
+}
+
+.ai-popover-section {
+  padding: 12px 0;
+  border-top: 1px solid color-mix(in srgb, var(--ai-border) 72%, transparent);
+}
+
+.ai-popover-section:first-child,
+.ai-popover-section--first {
+  border-top: none;
+  padding-top: 0;
+}
+
+.ai-popover-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 7px;
+}
+
+.ai-popover-label {
+  color: var(--ai-muted);
+  font-size: 12px;
+}
+
+.ai-popover-value {
+  color: var(--ai-foreground);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ai-status-tooltip {
+  width: min(370px, calc(100vw - 16px));
+  z-index: 2147483647;
+}
+
+.ai-status-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  padding-top: 12px;
+  border-top: 1px solid color-mix(in srgb, var(--ai-border) 72%, transparent);
+}
+
+.ai-status-action-btn {
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 34%, var(--ai-border));
+  border-radius: 12px;
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--ai-bg2) 88%, transparent);
+  color: var(--ai-primary);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--ai-transition);
 }
 
-.ai-select:hover {
-  border-color: var(--ai-primary);
+.ai-status-action-btn:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 72%, var(--ai-border));
+  box-shadow: 0 0 14px rgba(var(--ai-glow-rgb), 0.18);
+  transform: translateY(-1px);
 }
 
-.ai-select:focus {
-  outline: none;
-  border-color: var(--ai-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.ai-status-trigger {
+  position: relative;
+  border: 1px solid var(--ai-border);
+  border-radius: var(--ai-radius-current, var(--ai-radius-full));
+  background: var(--ai-glass-strong);
+  color: var(--ai-primary);
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--ai-shadow-sm);
+  transition: all var(--ai-transition);
 }
 
-.ai-select:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--ai-bg-hover);
+.ai-status-trigger.ai-size-sm {
+  width: 32px;
+  height: 32px;
 }
 
-/* ========== Modal ========== */
-.ai-modal-overlay {
+.ai-status-trigger.ai-size-lg {
+  width: 42px;
+  height: 42px;
+}
+
+.ai-status-trigger:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 68%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 18px rgba(var(--ai-glow-rgb), 0.2);
+}
+
+.ai-status-trigger--warning {
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.42);
+}
+
+.ai-status-trigger--danger {
+  color: var(--ai-danger);
+  border-color: rgba(239, 68, 68, 0.42);
+}
+
+.ai-status-trigger--success {
+  color: #10b981;
+  border-color: rgba(16, 185, 129, 0.42);
+}
+
+.ai-status-loading-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 60%, var(--ai-border));
+  background: var(--ai-glass-strong);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Signin */
+.ai-signin-overlay,
+[data-ai-settings-panel] {
   position: fixed;
   inset: 0;
-  z-index: 9998;
-  background: rgba(0, 0, 0, 0.5);
+  z-index: 2147483645;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
-  animation: fadeIn 0.2s;
+  background: var(--ai-overlay);
+  backdrop-filter: blur(10px);
 }
 
-.ai-modal {
+.ai-signin-panel,
+.ai-result-modal,
+[data-ai-settings-content] {
   position: relative;
-  z-index: 9999;
   width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  background: var(--ai-bg);
-  border-radius: var(--ai-radius);
+  max-width: 460px;
+  border-radius: var(--ai-radius-lg);
+  border: 1px solid var(--ai-border);
+  overflow: hidden;
+  color: var(--ai-foreground);
+}
+
+.ai-signin-panel {
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      100% 100% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.07),
+      transparent 78%
+    );
   box-shadow: var(--ai-shadow-lg);
-  animation: slideUp 0.3s;
 }
 
-.ai-modal__header {
+.ai-signin-header {
+  padding: 26px 26px 16px;
+  text-align: center;
+}
+
+.ai-signin-title {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.ai-signin-subtitle {
+  margin-top: 6px;
+  color: var(--ai-muted);
+  font-size: 14px;
+}
+
+.ai-signin-content {
+  padding: 12px 26px 24px;
+}
+
+.ai-signin-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+
+.ai-signin-actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.ai-signin-error {
+  margin-top: 10px;
+  margin-bottom: 2px;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 10px;
+  border-radius: 12px;
+  border: 1px solid rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--ai-danger);
+  font-size: 12px;
+}
+
+.ai-input-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.ai-input-label {
+  font-size: 12px;
+  color: var(--ai-muted);
+  font-weight: 600;
+}
+
+.ai-icon-badge {
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  border: 1px solid var(--ai-border-primary);
+  color: var(--ai-primary);
+  background: color-mix(in srgb, var(--ai-bg2) 85%, transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Result modal */
+.ai-overlay-panel {
+  z-index: 10000;
+}
+
+.ai-result-modal {
+  max-width: min(760px, calc(100vw - 24px));
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      120% 120% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.07),
+      transparent 78%
+    );
+  box-shadow: var(--ai-shadow-lg);
+}
+
+.ai-result-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--ai-border);
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--ai-border) 74%, transparent);
+}
+
+.ai-result-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.ai-result-body {
+  padding: 14px;
+  max-height: min(72vh, 680px);
+  overflow: auto;
+}
+
+.ai-result-block {
+  margin-bottom: 14px;
+}
+
+.ai-result-subtitle {
+  margin: 0 0 8px;
+  font-size: 13px;
+  color: var(--ai-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.ai-result-code,
+.ai-result-content {
+  margin: 0;
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid var(--ai-border);
+  background: color-mix(in srgb, var(--ai-bg2) 86%, transparent);
+  white-space: pre-wrap;
+  line-height: 1.5;
+  color: var(--ai-foreground);
+}
+
+.ai-result-meta {
+  font-size: 12px;
+  color: var(--ai-muted);
+  padding-top: 10px;
+  border-top: 1px solid color-mix(in srgb, var(--ai-border) 72%, transparent);
+}
+
+/* Image card */
+.ai-image-card {
+  width: min(380px, calc(100vw - 28px));
+  padding: 14px;
+}
+
+[data-ai-image-button].ai-image-btn {
+  position: relative;
+  overflow: hidden;
+  gap: 10px;
+  border-color: color-mix(in srgb, var(--ai-primary) 38%, var(--ai-border));
+  background:
+    linear-gradient(180deg, var(--ai-glass-strong), var(--ai-glass)),
+    radial-gradient(
+      120% 130% at 0% 0%,
+      rgba(var(--ai-glow-rgb), 0.18),
+      transparent 62%
+    );
+}
+
+.ai-context-btn {
+  position: relative;
+  overflow: hidden;
+  min-width: 132px;
+  border-color: color-mix(in srgb, var(--ai-primary) 40%, var(--ai-border));
+  background:
+    linear-gradient(180deg, var(--ai-glass-strong), var(--ai-glass)),
+    radial-gradient(
+      100% 130% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.18),
+      transparent 66%
+    );
+}
+
+.ai-context-btn::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    110deg,
+    rgba(var(--ai-red-rgb), 0.28),
+    color-mix(in srgb, var(--ai-foreground) 12%, transparent),
+    rgba(var(--ai-blue-rgb), 0.34)
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.ai-context-btn:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 78%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow),
+    0 0 18px rgba(var(--ai-glow-rgb), 0.2);
+}
+
+.ai-usage-circle-track {
+  stroke: color-mix(in srgb, var(--ai-muted) 42%, transparent);
+}
+
+.ai-usage-circle-value--low {
+  stroke: #60a5fa;
+  fill: transparent;
+  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.35));
+}
+
+.ai-usage-circle-value--warn {
+  stroke: #f59e0b;
+  fill: transparent;
+  filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.35));
 }
 
-.ai-modal__title {
-  font-size: 18px;
+.ai-usage-circle-value--high {
+  stroke: rgba(239, 68, 68, 0.88);
+  fill: transparent;
+  filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.35));
+}
+
+.ai-usage-circle-text--low {
+  fill: #60a5fa;
+}
+
+.ai-usage-circle-text--warn {
+  fill: #f59e0b;
+}
+
+.ai-usage-circle-text--high {
+  fill: rgba(239, 68, 68, 0.88);
+}
+
+.ai-model-mgmt-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 24px;
+}
+
+.ai-inline-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 10px;
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 30%, var(--ai-border));
+  background: var(--ai-bg);
+  color: var(--ai-primary);
+  font-size: 12px;
   font-weight: 600;
-  color: var(--ai-text);
+  cursor: pointer;
+  transition: all var(--ai-transition);
+}
+
+.ai-inline-btn:hover {
+  border-color: color-mix(in srgb, var(--ai-primary) 72%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow-sm),
+    0 0 14px rgba(var(--ai-blue-rgb), 0.18);
+  transform: translateY(-1px);
 }
 
-.ai-modal__close {
+.ai-model-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--ai-text-secondary);
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 1px solid var(--ai-border);
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      120% 120% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.05),
+      transparent 76%
+    );
+  transition: all var(--ai-transition);
   cursor: pointer;
-  transition: all 0.2s;
 }
 
-.ai-modal__close:hover {
-  background: var(--ai-bg-hover);
-  color: var(--ai-text);
+.ai-model-item:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ai-primary) 45%, var(--ai-border));
+  box-shadow:
+    var(--ai-shadow-sm),
+    -10px 0 14px rgba(var(--ai-red-rgb), 0.12),
+    10px 0 12px rgba(var(--ai-blue-rgb), 0.14);
 }
 
-.ai-modal__body {
-  padding: 20px;
+.ai-model-item--disabled {
+  opacity: 0.56;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
 }
 
-.ai-modal__footer {
+.ai-key-modal-panel {
+  max-width: 520px;
+}
+
+.ai-key-radio {
+  accent-color: var(--ai-primary);
+}
+
+.ai-model-item--active {
+  border-color: color-mix(in srgb, #10b981 55%, var(--ai-border));
+  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.15);
+}
+
+.ai-model-item-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.ai-model-item-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--ai-tertiary);
+  flex-shrink: 0;
+}
+
+.ai-model-item-dot--active {
+  background: #10b981;
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.55);
+}
+
+.ai-model-item-title {
   display: flex;
+  align-items: center;
   gap: 8px;
-  justify-content: flex-end;
-  padding: 16px 20px;
-  border-top: 1px solid var(--ai-border);
+  margin-bottom: 4px;
+  color: var(--ai-foreground);
+  font-size: 14px;
+  font-weight: 700;
 }
 
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.ai-model-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ai-muted);
+  font-size: 12px;
 }
 
-/* ========== Chip Label ========== */
-.ai-chip {
+.ai-pill {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 9999px;
-  font-size: 12px;
-  font-weight: 500;
-  background: var(--ai-bg-hover);
-  color: var(--ai-text);
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--ai-border);
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ai-pill--pro {
+  color: white;
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--ai-primary), var(--ai-primary-2));
+}
+
+.ai-pill--cost {
+  color: var(--ai-secondary);
+  background: color-mix(in srgb, var(--ai-bg2) 82%, transparent);
+}
+
+.ai-toggle {
+  position: relative;
+  display: inline-flex;
+  width: 50px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid var(--ai-border);
+  background: var(--ai-bg);
+  transition: all var(--ai-transition);
 }
 
-.ai-chip--primary {
-  background: rgba(59, 130, 246, 0.1);
+.ai-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ai-bg) 94%, white 6%);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
+  transition: all var(--ai-transition);
+}
+
+.ai-toggle--active {
+  border-color: rgba(16, 185, 129, 0.5);
+  background: rgba(16, 185, 129, 0.28);
+}
+
+.ai-toggle--active::after {
+  left: 24px;
+}
+
+[data-ai-image-button].ai-image-btn::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    120deg,
+    rgba(var(--ai-red-rgb), 0.26),
+    color-mix(in srgb, var(--ai-foreground) 10%, transparent),
+    rgba(var(--ai-blue-rgb), 0.3)
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.ai-image-btn__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 7px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ai-primary) 55%, var(--ai-border));
+  background: color-mix(in srgb, var(--ai-primary) 20%, transparent);
   color: var(--ai-primary);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-.ai-chip--success {
-  background: rgba(16, 185, 129, 0.1);
-  color: var(--ai-success);
+.ai-image-frame {
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid var(--ai-border);
+  background: color-mix(in srgb, var(--ai-bg2) 86%, transparent);
+  margin-bottom: 10px;
 }
 
-.ai-chip--warning {
-  background: rgba(245, 158, 11, 0.1);
-  color: var(--ai-warning);
+.ai-image-preview {
+  width: 100%;
+  display: block;
+  object-fit: cover;
 }
 
-.ai-chip--danger {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--ai-danger);
+.ai-image-meta {
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--ai-muted);
+}
+
+/* Settings legacy selectors */
+[data-ai-settings-wrapper] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-ai-settings-button],
+[data-ai-model-select] {
+  border: 1px solid var(--ai-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--ai-bg2) 85%, transparent);
+  color: var(--ai-foreground);
+  min-height: 38px;
+  padding: 0 12px;
+}
+
+[data-ai-settings-overlay] {
+  position: absolute;
+  inset: 0;
+}
+
+[data-ai-settings-content] {
+  max-width: 460px;
+  width: calc(100vw - 26px);
+  padding: 14px;
+  background: var(--ai-bg2);
+}
+
+[data-ai-settings-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+[data-ai-settings-body] {
+  display: grid;
+  gap: 12px;
+}
+
+[data-ai-status-section],
+.ai-status-section {
+  border: 1px solid var(--ai-border);
+  border-radius: 12px;
+  padding: 10px;
+  background: color-mix(in srgb, var(--ai-bg2) 82%, transparent);
+}
+
+[data-ai-status-item],
+.ai-status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+[data-ai-status-item]:last-child,
+.ai-status-item:last-child {
+  margin-bottom: 0;
+}
+
+[data-ai-actions-section],
+.ai-actions-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+[data-ai-no-key-section],
+.ai-no-key-section {
+  border: 1px dashed var(--ai-border);
+  border-radius: 12px;
+  padding: 10px;
+  color: var(--ai-muted);
 }
 
-.ai-chip__close {
+/* Utility */
+.ai-center {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: currentColor;
-  cursor: pointer;
-  transition: background 0.2s;
 }
 
-.ai-chip__close:hover {
-  background: rgba(0, 0, 0, 0.1);
+.ai-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-/* ========== Loading States ========== */
-.ai-loading {
-  display: inline-flex;
+.ai-between {
+  display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
-.ai-loading__spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--ai-border);
-  border-top-color: var(--ai-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
+.ai-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.ai-loading__text {
-  font-size: 14px;
-  color: var(--ai-text-secondary);
+.ai-muted,
+.ai-text-secondary {
+  color: var(--ai-muted);
 }
 
-/* ========== Form Group ========== */
-.ai-form-group {
-  margin-bottom: 16px;
+.ai-text-tertiary {
+  color: var(--ai-tertiary);
 }
 
-.ai-form-label {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ai-text);
+.ai-primary {
+  color: var(--ai-primary);
 }
 
-.ai-form-label--required::after {
-  content: " *";
-  color: var(--ai-danger);
+.ai-bg-secondary {
+  background: var(--ai-bg-secondary);
 }
 
-.ai-form-hint {
-  display: block;
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ai-text-secondary);
+.ai-bg-tertiary {
+  background: var(--ai-bg-tertiary);
 }
 
-.ai-form-error {
-  display: block;
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--ai-danger);
+.ai-border-primary {
+  border-color: var(--ai-border-primary);
 }
 
-/* ========== Dark Mode Support ========== */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ai-border: #374151;
-    --ai-text: #f9fafb;
-    --ai-text-secondary: #9ca3af;
-    --ai-bg: #1f2937;
-    --ai-bg-hover: #374151;
+.ai-text-microtracking {
+  letter-spacing: 0.01em;
+}
+
+.ai-inline-icon {
+  color: var(--ai-muted);
+}
+
+.ai-kv-skeleton {
+  height: 14px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--ai-primary) 14%, var(--ai-bg2));
+  animation: ai-pulse 1.4s ease-in-out infinite;
+}
+
+.ai-spinner,
+.ai-spin {
+  animation: ai-spin 1s linear infinite;
+}
+
+.ai-tooltip,
+.ai-popover {
+  animation: ai-fade-in var(--ai-transition);
+}
+
+/* Light mode: no gray haze, softer neutral shadow, stronger colored glow */
+:root:not([data-theme="dark"]):not(.dark) .ai-shell,
+:root:not([data-theme="dark"]):not(.dark) .ai-btn,
+:root:not([data-theme="dark"]):not(.dark) .ai-context-btn,
+:root:not([data-theme="dark"]):not(.dark) .ai-model-item,
+:root:not([data-theme="dark"]):not(.dark) .ai-popover,
+:root:not([data-theme="dark"]):not(.dark) .ai-tooltip,
+:root:not([data-theme="dark"]):not(.dark) [data-ai-settings-content] {
+  background:
+    linear-gradient(180deg, #ffffff, #ffffff),
+    radial-gradient(
+      110% 130% at 100% 0%,
+      rgba(var(--ai-blue-rgb), 0.08),
+      transparent 72%
+    );
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
+}
+
+:root:not([data-theme="dark"]):not(.dark) .ai-shell:hover,
+:root:not([data-theme="dark"]):not(.dark) .ai-btn:hover,
+:root:not([data-theme="dark"]):not(.dark) .ai-context-btn:hover,
+:root:not([data-theme="dark"]):not(.dark) .ai-model-item:hover {
+  box-shadow:
+    0 3px 10px rgba(15, 23, 42, 0.1),
+    0 0 12px rgba(var(--ai-glow-rgb), 0.12);
+}
+
+@keyframes ai-pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes ai-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ai-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .ai-glow::before,
+  .ai-glow::after {
+    width: 140px;
+    height: 90px;
+    opacity: 0.2;
+  }
+
+  .ai-signin-panel,
+  .ai-result-modal,
+  [data-ai-settings-content] {
+    max-width: calc(100vw - 20px);
   }
 }