/* ═══════════════════════════════════════════════════════════════════════
   Glass UI — glass.css (standalone)
   All component classes usable in plain HTML — no Tailwind required.
   Requires: colors_and_type.css loaded first.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Surfaces ─────────────────────────────────────────────── */

.glass-surface {
  background: var(--glass-light);
  backdrop-filter: blur(var(--blur-md)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

.glass-surface-sm {
  background: var(--glass-light);
  backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.glass-surface-elevated {
  background: var(--glass-light-hover);
  backdrop-filter: blur(var(--blur-lg)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(200%);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-elevated);
  border-radius: var(--radius-lg);
}

.glass-surface-static {
  background: var(--glass-light);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.glass-lens { filter: brightness(1.04) contrast(1.02); }

/* ── Gradient page background ─────────────────────────────── */

.glass-bg {
  background-color: rgb(var(--brand-bg));
  background-image:
    radial-gradient(ellipse 80% 80% at 20% 20%, rgb(var(--brand-rgb) / 0.38) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 10%, rgb(var(--brand2-rgb) / 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 50% 80%, rgba(20,184,166,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 70%, rgba(2,132,199,0.18) 0%, transparent 50%);
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

/* ── Buttons ──────────────────────────────────────────────── */

.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 150ms ease-out;
  outline: none;
  border: 1px solid transparent;
}
.glass-btn:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.9); }
.glass-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.glass-btn:focus-visible { box-shadow: 0 0 0 2px rgba(34,211,238,0.60); }

.glass-btn-primary {
  background: linear-gradient(to bottom right, rgba(6,182,212,0.90), rgba(2,132,199,0.90));
  border-color: rgba(34,211,238,0.40);
  color: white;
  box-shadow: 0 4px 16px rgb(var(--brand-rgb) / 0.35);
}
.glass-btn-primary:not(:disabled):hover {
  background: linear-gradient(to bottom right, rgba(34,211,238,0.90), rgba(14,165,233,0.90));
  box-shadow: 0 4px 20px rgb(var(--brand-rgb) / 0.50);
}

.glass-btn-secondary {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.90);
}
.glass-btn-secondary:not(:disabled):hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.30);
}

.glass-btn-ghost { background: transparent; color: rgba(255,255,255,0.80); }
.glass-btn-ghost:not(:disabled):hover { background: rgba(255,255,255,0.08); color: white; }

.glass-btn-danger {
  background: rgba(239,68,68,0.80);
  border-color: rgba(239,68,68,0.40);
  color: white;
  box-shadow: 0 4px 16px rgba(239,68,68,0.25);
}
.glass-btn-danger:not(:disabled):hover { background: rgba(239,68,68,0.90); }

.glass-btn-icon {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.80);
}
.glass-btn-icon:not(:disabled):hover { background: rgba(255,255,255,0.14); color: white; }

.glass-btn-sm { height: 2rem;   padding: 0 0.75rem; font-size: 0.875rem; }
.glass-btn-md { height: 2.5rem; padding: 0 1rem;    font-size: 0.875rem; }
.glass-btn-lg { height: 3rem;   padding: 0 1.5rem;  font-size: 1rem;    }

.glass-btn-icon.glass-btn-sm { width: 2rem;   padding: 0; }
.glass-btn-icon.glass-btn-md { width: 2.5rem; padding: 0; }
.glass-btn-icon.glass-btn-lg { width: 3rem;   padding: 0; }

/* ── Badges ───────────────────────────────────────────────── */

.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid transparent;
}
.glass-badge-default { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); border-color: rgba(255,255,255,0.15); }
.glass-badge-primary { background: rgba(6,182,212,0.20);   color: var(--brand-300); border-color: rgba(34,211,238,0.30); }
.glass-badge-success { background: rgba(16,185,129,0.20);  color: #6ee7b7;          border-color: rgba(52,211,153,0.30); }
.glass-badge-warning { background: rgba(245,158,11,0.20);  color: #fcd34d;          border-color: rgba(251,191,36,0.30); }
.glass-badge-danger  { background: rgba(239,68,68,0.20);   color: #fca5a5;          border-color: rgba(248,113,113,0.30); }
.glass-badge-info    { background: rgba(6,182,212,0.20);   color: var(--brand-300); border-color: rgba(34,211,238,0.30); }

/* ── Input ────────────────────────────────────────────────── */

.glass-input {
  font-family: inherit;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
}
.glass-input::placeholder { color: rgba(255,255,255,0.30); }
.glass-input:focus {
  background: rgba(255,255,255,0.09);
  border-color: rgb(var(--brand-rgb) / 0.60);
  box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.15);
}

/* ── Alert / Toast / Progress / Spinner / Skeleton ────────── */

.glass-alert {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.875rem;
}
.glass-alert-info    { background: rgba(6,182,212,0.10);  border-color: rgba(34,211,238,0.25); color: var(--brand-300); }
.glass-alert-success { background: rgba(16,185,129,0.10); border-color: rgba(52,211,153,0.25); color: #a7f3d0; }
.glass-alert-warning { background: rgba(245,158,11,0.10); border-color: rgba(251,191,36,0.25); color: #fde68a; }
.glass-alert-error   { background: rgba(239,68,68,0.10);  border-color: rgba(248,113,113,0.25); color: #fecaca; }

.glass-progress-track { width: 100%; height: 0.5rem; border-radius: 9999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.glass-progress-fill  { height: 100%; border-radius: 9999px; background: linear-gradient(to right, var(--brand-500), var(--brand2-600)); transition: width 500ms ease-out; }

.glass-spinner {
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.20);
  border-top-color: rgba(255,255,255,0.80);
  animation: glass-spin 1s linear infinite;
  width: 1.5rem; height: 1.5rem;
}
@keyframes glass-spin { to { transform: rotate(360deg); } }

.glass-skeleton { background: rgba(255,255,255,0.08); border-radius: 0.5rem; animation: glass-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes glass-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Nav / Sidebar / Tabs ─────────────────────────────────── */

.glass-nav-link {
  display: inline-flex; align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none;
  color: rgba(255,255,255,0.70);
  transition: all 150ms;
}
.glass-nav-link:hover,
.glass-nav-link-active { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.90); }

.glass-sidebar-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.65);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 150ms;
}
.glass-sidebar-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.90); }
.glass-sidebar-item-active { background: rgba(6,182,212,0.20); color: var(--brand-300); border-color: rgba(34,211,238,0.25); }

/* ── Chat bubbles / Thinking / Workflow ───────────────────── */

.glass-chat-bubble-user {
  background: linear-gradient(135deg, rgb(var(--brand-rgb)/0.28), rgb(var(--brand2-rgb)/0.18));
  border: 1px solid rgb(var(--brand-rgb)/0.35);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
  padding: 0.625rem 0.875rem;
  color: var(--fg-1);
  max-width: 70%;
  backdrop-filter: blur(var(--blur-sm));
}

.glass-thinking {
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.60);
}

.glass-typing-dot {
  display: inline-block;
  width: 0.4375rem; height: 0.4375rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.45);
  margin: 0 2px;
}

/* ── Navbar ───────────────────────────────────────────────── */
.glass-navbar {
  background: rgb(var(--brand-bg) / 0.60);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── Utility ──────────────────────────────────────────────── */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }