/**
 * Skin: C – Bento / card-based
 * Use with shared chat markup; load this OR theme-d.css.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --skin-bg: #f0f1f4;
  --skin-bg-subtle: linear-gradient(160deg, #f5f6f9 0%, #ebeef4 100%);
  --skin-surface: #ffffff;
  --skin-border: #e2e5eb;
  --skin-primary: #4c4f7a;
  --skin-primary-dark: #3d4062;
  --skin-accent: #6366f1;
  --skin-text: #1a1a1a;
  --skin-text-muted: #6b7280;
  --skin-link: #1d4ed8;
  --skin-link-hover: #1e40af;
  --skin-link-visited: #6d28d9;
  --skin-font: 'Inter', system-ui, sans-serif;
  --skin-radius: 16px;
  --skin-radius-tail: 4px;
  --skin-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --skin-header-bg: linear-gradient(135deg, #fafbff 0%, #f4f5fb 100%);
  --skin-messages-bg: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
  --skin-composer-bg: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  --skin-input-bg: #fafbfd;
  --skin-focus-ring: rgba(99,102,241,0.15);
  --public-home-surface: rgba(255, 255, 255, 0.88);
  --public-home-border: rgba(226, 229, 235, 0.95);
  --public-home-text: #1f2937;
  --public-home-text-muted: #4b5563;
  --public-home-icon-surface: rgba(99, 102, 241, 0.12);
  --public-home-hero-title: rgba(219, 225, 236, 0.76);
  --public-home-hero-note: rgba(198, 206, 222, 0.8);
  --public-home-cta-wash: rgba(99, 102, 241, 0.1);
  --public-home-cta-border: rgba(99, 102, 241, 0.24);
}
@media (prefers-color-scheme: dark) {
  :root {
    --skin-bg: #16161a;
    --skin-bg-subtle: linear-gradient(160deg, #1c1c21 0%, #16161a 100%);
    --skin-surface: #25252b;
    --skin-border: #3f3f46;
    --skin-primary: #818cf8;
    --skin-primary-dark: #6366f1;
    --skin-accent: #818cf8;
    --skin-text: #e4e4e7;
    --skin-text-muted: #a1a1aa;
    --skin-link: #93c5fd;
    --skin-link-hover: #bfdbfe;
    --skin-link-visited: #c4b5fd;
    --skin-shadow: 0 2px 12px rgba(0,0,0,0.4);
    --skin-header-bg: linear-gradient(135deg, #2d2d35 0%, #25252b 100%);
    --skin-messages-bg: linear-gradient(180deg, #25252b 0%, #1e1e24 100%);
    --skin-composer-bg: linear-gradient(180deg, #25252b 0%, #1c1c21 100%);
    --skin-input-bg: #1c1c21;
    --skin-focus-ring: rgba(129,140,248,0.25);
    --public-home-surface: rgba(37, 37, 43, 0.92);
    --public-home-border: rgba(82, 82, 91, 0.92);
    --public-home-text: #f5f5f7;
    --public-home-text-muted: #d4d4d8;
    --public-home-icon-surface: rgba(129, 140, 248, 0.18);
    --public-home-hero-title: rgba(219, 225, 236, 0.76);
    --public-home-hero-note: rgba(198, 206, 222, 0.8);
    --public-home-cta-wash: rgba(129, 140, 248, 0.16);
    --public-home-cta-border: rgba(129, 140, 248, 0.3);
  }
}

/* Override base site.css !important so theme wins */
html.skin-theme-c {
  background: var(--skin-bg-subtle) !important;
  background-color: var(--skin-bg) !important;
}
.skin-theme-c,
.skin-theme-c body {
  font-family: var(--skin-font);
  background: var(--skin-bg-subtle) !important;
  background-color: var(--skin-bg) !important;
  color: var(--skin-text);
}
.skin-theme-c body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.skin-theme-c .chat-container {
  flex: 1;
  min-height: 0;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 920px;
  width: 100% !important;
  margin: 0 auto;
  padding: 24px;
}
.skin-theme-c .chat-header {
  padding: 20px 24px !important;
  margin: 0 0 16px 0 !important;
  width: auto !important;
  background: var(--skin-header-bg) !important;
  color: var(--skin-text) !important;
  border-bottom: 3px solid var(--skin-accent);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
  flex-shrink: 0;
}
.skin-theme-c .chat-header .brand-wordmark,
.skin-theme-c .chat-header .chat-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--skin-accent) 0%, var(--skin-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.skin-theme-c .chat-header .chat-cursor {
  display: none;
}
.skin-theme-c .chat-header .chat-meta {
  font-size: 0.8125rem;
  color: var(--skin-text-muted);
  margin-top: 4px;
}
.skin-theme-c .chat-header .tagline,
.skin-theme-c .chat-header small {
  font-size: 0.8125rem;
  color: var(--skin-text-muted) !important;
}
.skin-theme-c .chat-area-wrapper {
  flex: 1;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skin-theme-c .chat-messages,
.skin-theme-c .chat-messages-container {
  flex: 1;
  min-height: 200px;
  overflow: hidden;
  margin: 0 !important;
  background: var(--skin-messages-bg);
  border-radius: var(--skin-radius);
  border: 1px solid var(--skin-border);
  box-shadow: var(--skin-shadow);
}
.skin-theme-c .chat-messages-container { min-height: 0; display: flex; flex-direction: column; }
.skin-theme-c #chatMessages {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: transparent;
}
.skin-theme-c .message-wrapper { margin-bottom: 1rem; display: flex; }
.skin-theme-c .message-user { justify-content: flex-end; }
.skin-theme-c .message-ai { justify-content: flex-start; }
.skin-theme-c .message-bubble {
  max-width: 70%;
  padding: 14px 18px;
  border-radius: var(--skin-radius) var(--skin-radius) var(--skin-radius-tail) var(--skin-radius);
  font-size: 15px;
  line-height: 1.5;
}
.skin-theme-c .message-user .message-bubble {
  background: linear-gradient(135deg, var(--skin-primary) 0%, var(--skin-primary-dark) 100%);
  color: #fff;
  border-radius: var(--skin-radius) var(--skin-radius) var(--skin-radius-tail) var(--skin-radius);
  box-shadow: var(--skin-shadow);
}
.skin-theme-c .message-ai .message-bubble {
  background: var(--skin-surface) !important;
  border: 1px solid var(--skin-border) !important;
  border-radius: var(--skin-radius) var(--skin-radius) var(--skin-radius) var(--skin-radius-tail);
  box-shadow: var(--skin-shadow);
  color: var(--skin-text) !important;
}
.skin-theme-c .message-content.rendered-html a {
  color: var(--skin-link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.skin-theme-c .message-content.rendered-html a:hover,
.skin-theme-c .message-content.rendered-html a:focus {
  color: var(--skin-link-hover);
}
.skin-theme-c .message-content.rendered-html a:visited {
  color: var(--skin-link-visited);
}
.skin-theme-c .message-meta { font-size: 0.75rem; color: var(--skin-text-muted); margin-top: 8px; }
.skin-theme-c .message-user .message-meta { color: rgba(255,255,255,0.9); }
/* Typing indicator */
.skin-theme-c .typing-indicator-bubble {
  background: var(--skin-surface) !important;
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius) var(--skin-radius) var(--skin-radius) var(--skin-radius-tail);
}
.skin-theme-c .typing-indicator-dots span {
  background-color: var(--skin-text-muted);
}
/* Context info bar */
.skin-theme-c .context-info {
  background: var(--skin-surface) !important;
  border-top: 1px solid var(--skin-border) !important;
  border-radius: 0;
  color: var(--skin-text-muted) !important;
}
.skin-theme-c .context-info .text-muted,
.skin-theme-c .context-info small,
.skin-theme-c .context-info i {
  color: var(--skin-text-muted) !important;
}
/* Loading overlay */
.skin-theme-c .loading-content {
  background: var(--skin-surface) !important;
  color: var(--skin-text) !important;
  border: 1px solid var(--skin-border);
  box-shadow: var(--skin-shadow);
}
.skin-theme-c .loading-content .text-primary {
  color: var(--skin-accent) !important;
}
.skin-theme-c .loading-content .spinner-border {
  border-color: var(--skin-accent);
  border-right-color: transparent;
}
.skin-theme-c .chat-input-container {
  padding: 12px 24px !important;
  margin: 0 !important;
  background: var(--skin-composer-bg) !important;
  border-radius: var(--skin-radius);
  border: 1px solid var(--skin-border);
  box-shadow: var(--skin-shadow);
  flex-shrink: 0;
}
/* Hide terminal-only elements in Bento */
.skin-theme-c .session-prompt,
.skin-theme-c .session-cursor {
  display: none !important;
}
.skin-theme-c .session-input {
  display: block;
}
.skin-theme-c .session-hint {
  font-size: 0.75rem;
  color: var(--skin-text-muted);
  margin-top: 6px;
}
.skin-theme-c .chat-input-container textarea {
  width: 100%;
  border: 1px solid var(--skin-border) !important;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-family: var(--skin-font);
  background: var(--skin-input-bg) !important;
  color: var(--skin-text);
}
.skin-theme-c .chat-input-container textarea:focus {
  outline: none;
  border-color: var(--skin-accent);
  box-shadow: 0 0 0 3px var(--skin-focus-ring);
}
.skin-theme-c .btn-primary {
  background: linear-gradient(135deg, var(--skin-primary) 0%, var(--skin-primary-dark) 100%);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-family: var(--skin-font);
}
.skin-theme-c .skin-hint {
  color: var(--skin-text-muted);
  font-size: 0.75rem;
}
.skin-theme-c .layout-topbar {
  background: var(--skin-header-bg) !important;
  border-color: var(--skin-border) !important;
}
.skin-theme-c .layout-topbar a { color: var(--skin-text) !important; }
.skin-theme-c .layout-topbar .altu-pancake-trigger {
  border-color: var(--skin-border);
  background: var(--skin-surface);
  color: var(--skin-text);
  font-family: var(--skin-font);
  font-size: 0.9375rem;
}
.skin-theme-c .layout-topbar .altu-pancake-trigger:hover {
  background: var(--skin-input-bg);
  border-color: var(--skin-accent);
  color: var(--skin-accent);
}
.skin-theme-c .layout-topbar .dropdown-menu {
  background: var(--skin-surface);
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
  font-family: var(--skin-font);
  padding: 6px 0;
}
.skin-theme-c .layout-topbar .dropdown-item {
  color: var(--skin-text);
  padding: 8px 16px;
}
.skin-theme-c .layout-topbar .dropdown-item:hover { background: var(--skin-input-bg); color: var(--skin-text); }
.skin-theme-c .layout-topbar .dropdown-item.active { background: var(--skin-input-bg); color: var(--skin-accent); }
.skin-theme-c .layout-topbar .dropdown-item .fa-check { color: var(--skin-accent) !important; }
.skin-theme-c .layout-topbar .dropdown-header,
.skin-theme-c .layout-topbar .altu-pancake-section-title {
  color: var(--skin-text-muted);
  font-size: 0.875rem !important;
  font-weight: 600;
  padding: 8px 16px 4px;
}
.skin-theme-c .layout-topbar .dropdown-divider { border-color: var(--skin-border); }
/* Pancake menu in header */
.skin-theme-c .chat-header .altu-pancake-trigger {
  border: 1px solid var(--skin-border) !important;
  background: var(--skin-input-bg) !important;
  color: var(--skin-text) !important;
  font-family: var(--skin-font);
  min-height: 36px;
  padding: 6px 12px;
}
.skin-theme-c .chat-header .altu-pancake-trigger:hover {
  background: var(--skin-surface) !important;
  border-color: var(--skin-accent) !important;
  color: var(--skin-accent) !important;
}
.skin-theme-c .chat-header .connection-status .badge { background: var(--skin-surface) !important; color: var(--skin-text) !important; border: 1px solid var(--skin-border); }
.skin-theme-c .chat-header .altu-pancake-dropdown,
.skin-theme-c .chat-header .dropdown-menu {
  background: var(--skin-surface);
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
  font-family: var(--skin-font);
}
.skin-theme-c .chat-header .dropdown-item {
  color: var(--skin-text);
  padding: 8px 16px;
}
.skin-theme-c .chat-header .dropdown-item:hover { background: var(--skin-input-bg); color: var(--skin-text); }
.skin-theme-c .chat-header .dropdown-item.active { background: var(--skin-input-bg); color: var(--skin-accent); }
.skin-theme-c .chat-header .dropdown-item .fa-check { color: var(--skin-accent) !important; }
.skin-theme-c .chat-header button.dropdown-item {
  color: var(--skin-text);
  background: transparent;
}
.skin-theme-c .chat-header button.dropdown-item:hover { background: var(--skin-input-bg); color: var(--skin-text); }
.skin-theme-c .chat-header .altu-pancake-section-title,
.skin-theme-c .chat-header .dropdown-header {
  color: var(--skin-text-muted);
  font-size: 0.875rem !important;
  font-weight: 600;
  padding: 8px 16px 4px;
}
.skin-theme-c .chat-header .dropdown-divider { border-color: var(--skin-border); }

/* Login / user selection page (Bento) */
.skin-theme-c .user-selection-container {
  min-height: 80vh;
  padding: 24px 5% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.skin-theme-c .user-selection-header {
  text-align: center;
  margin-bottom: 32px;
  width: auto !important;
  background: none !important;
}
.skin-theme-c .user-selection-header .altu-title {
  font-family: var(--skin-font);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--skin-accent) 0%, var(--skin-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 8px 0;
}
.skin-theme-c .user-selection-header .welcome-subtitle {
  font-family: var(--skin-font);
  font-size: 1.25rem;
  color: var(--skin-text-muted);
  margin: 0;
}
.skin-theme-c .user-selection-card {
  width: 100%;
  max-width: 480px;
  background: var(--skin-surface) !important;
  border: 1px solid var(--skin-border);
  border-radius: var(--skin-radius);
  box-shadow: var(--skin-shadow);
  overflow: hidden;
}
.skin-theme-c .user-selection-container .card-header-section {
  background: var(--skin-header-bg) !important;
  border-bottom: 1px solid var(--skin-border) !important;
  border-top: none;
  padding: 20px 24px;
}
.skin-theme-c .user-selection-container .card-header-section .card-title {
  color: var(--skin-text) !important;
  font-family: var(--skin-font);
  font-weight: 600;
}
.skin-theme-c .user-selection-container .card-body-section {
  padding: 24px;
}
.skin-theme-c .user-selection-container .description-text {
  font-family: var(--skin-font);
  color: var(--skin-text-muted);
  margin-bottom: 20px;
}
.skin-theme-c .user-selection-container .btn-oauth {
  background: linear-gradient(135deg, var(--skin-primary) 0%, var(--skin-primary-dark) 100%) !important;
  border: none;
  color: white;
  font-family: var(--skin-font);
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 24px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.skin-theme-c .user-selection-container .btn-oauth:hover {
  filter: brightness(1.08);
  color: white;
}
.skin-theme-c .user-selection-container .footer-text,
.skin-theme-c .user-selection-container .text-muted {
  color: var(--skin-text-muted) !important;
}
.skin-theme-c .user-selection-container hr {
  border-color: var(--skin-border);
}

/* Fixed anonymous public homepage */
.skin-theme-c.public-home-page {
  background:
    radial-gradient(circle at top left, rgba(99, 102, 241, 0.14), transparent 32%),
    radial-gradient(circle at top right, rgba(76, 79, 122, 0.14), transparent 30%),
    var(--skin-bg-subtle) !important;
}

.skin-theme-c body.public-home-page {
  display: block;
  min-height: 100vh;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  color: var(--skin-text);
}

.skin-theme-c .public-home__hero,
.skin-theme-c .public-home__cue,
.skin-theme-c .public-home__trust {
  background: var(--public-home-surface);
  border: 1px solid var(--public-home-border);
  box-shadow: var(--skin-shadow);
  backdrop-filter: blur(12px);
}

.skin-theme-c .public-home__hero {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(8, 10, 22, 0.04) 0%, rgba(8, 10, 22, 0.14) 38%, rgba(8, 10, 22, 0.78) 76%, rgba(8, 10, 22, 0.94) 100%),
    linear-gradient(90deg, rgba(8, 10, 22, 0.24) 0%, rgba(8, 10, 22, 0.12) 36%, rgba(8, 10, 22, 0.2) 64%, rgba(8, 10, 22, 0.54) 100%),
    url('/images/public-home/hero-theme-c-contour-field.png');
  background-color: #0c1120;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.skin-theme-c .public-home__title {
  font-family: var(--skin-font);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--public-home-hero-title);
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.skin-theme-c .public-home__hero-note {
  color: var(--public-home-hero-note);
}

.skin-theme-c .public-home__cue-copy,
.skin-theme-c .public-home__trust-copy {
  color: var(--public-home-text-muted);
}

.skin-theme-c .public-home__cue--cta {
  background:
    linear-gradient(180deg, var(--public-home-cta-wash) 0%, transparent 44%),
    var(--public-home-surface);
  border-color: var(--public-home-cta-border);
}

.skin-theme-c .public-home__cta {
  background: linear-gradient(135deg, var(--skin-primary) 0%, var(--skin-primary-dark) 100%) !important;
  border: none;
  border-radius: 16px;
  color: white;
  box-shadow: 0 14px 32px rgba(76, 79, 122, 0.22);
}

.skin-theme-c .public-home__cta i {
  width: 1rem;
  text-align: center;
}

.skin-theme-c .public-home__cta:hover,
.skin-theme-c .public-home__cta:focus {
  color: white;
  filter: brightness(1.06);
}

.skin-theme-c .public-home__cue {
  border-radius: 22px;
}

.skin-theme-c .public-home__cue-title,
.skin-theme-c .public-home__trust-title {
  color: var(--public-home-text);
  font-family: var(--skin-font);
  font-weight: 700;
}

.skin-theme-c .public-home__trust {
  border-radius: 24px;
}

.skin-theme-c .public-home__trust-icon {
  background: var(--public-home-icon-surface);
  color: var(--skin-primary);
}

@media (max-width: 767.98px) {
  .skin-theme-c .public-home__hero {
    background-position: 22% center;
  }
}