/* ===== style-sidebar.css ===== */
/* ===== LOANSPACE.AI - PROFESSIONAL NAVY + BLUE FINANCE THEME ===== */
/* Modern fintech-inspired design with trust and professionalism */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Primary Brand Colors - Navy + Blue */
    --primary-navy: #1e3a5f;
    --primary-navy-light: #2d4a6f;
    --primary-navy-dark: #152a47;
    --accent-blue: #2b7cc4;
    --accent-blue-light: #4A9FE8;
    --accent-blue-dark: #1e5a8a;
    
    /* Legacy aliases for compatibility */
    --primary-blue: #1e3a5f;
    --secondary-blue: #2d4a6f;
    --brand-orange: #f39c12;
    --brand-orange-dark: #e67e22;
    
    /* Background Colors - Clean & Professional */
    --bg-main: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-light: #ffffff;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    
    /* Sidebar Colors - Light Professional Theme */
    --sidebar-dark: #f8fafc;
    --sidebar-mid: #ffffff;
    --sidebar-light: #ffffff;
    
    /* Text Colors - Slate palette */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    --text-on-dark: #f1f5f9;
    
    /* Soft Accent Colors */
    --soft-blue: #e8f4fc;
    --soft-blue-dark: #d1e9f9;
    --soft-navy: #f0f4f8;
    --soft-navy-dark: #e2e8f0;
    
    /* Neutrals */
    --dark: #0f172a;
    --white: #FFFFFF;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    --gradient-blue: linear-gradient(135deg, #2b7cc4 0%, #1e5a8a 100%);
    --gradient-soft-blue: linear-gradient(135deg, #e8f4fc 0%, #d1e9f9 100%);
    --gradient-soft-navy: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
    --gradient-hero: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 50%, #ffffff 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--sidebar-dark) 0%, var(--sidebar-mid) 50%, var(--sidebar-light) 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03);
    --shadow-glow-blue: 0 4px 20px rgba(43, 124, 196, 0.25);
    --shadow-glow-navy: 0 4px 20px rgba(30, 58, 95, 0.25);
}

/* ===== iOS SAFE AREA SUPPORT ===== */
.mobile-header {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.sidebar {
    padding-top: env(safe-area-inset-top);
}

.input-area {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ===== BRAND COLORS ===== */
.logo-loan {
    color: #2558B2;  /* Blue */
}

.logo-space {
    color: #D66D2B;  /* Orange */
}

/* ===== BASE STYLES ===== */
/* Paint the html element with the app background so the iOS Capacitor
   native shell color (capacitor.config.json ios.backgroundColor = #0f172a)
   never shows through if the page is shorter than the WebView frame
   (e.g. the home-indicator area). */
html {
    background: var(--bg-main);
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-main);
    min-height: 100dvh;
    display: flex;
    color: var(--text-primary);
    position: relative;
    overflow-x: hidden;
}

/* Subtle background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: env(safe-area-inset-top);
    background:
        radial-gradient(ellipse at 20% 20%, rgba(43, 124, 196, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(30, 58, 95, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ===== SIDEBAR - LIGHT PROFESSIONAL THEME ===== */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    width: 250px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Sidebar Header */
.sidebar-header {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    flex-shrink: 0;
}

/* Android edge-to-edge fallback — see static/style-bundle.css for context */
html.capacitor-android .sidebar-header {
    padding-top: 32px;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    /* Invert logo for dark sidebar if needed */
    /* filter: brightness(0) invert(1); */
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    color: var(--white);
}

/* Sidebar Sections */
.sidebar-section {
    padding: 6px 10px 6px 10px;
    flex-shrink: 0;
}

.sidebar-section:last-of-type {
    border-bottom: none;
}

.sidebar-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 10px;
    font-weight: 600;
}

/* Sidebar Items */
.sidebar-item,
.sidebar-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    margin-bottom: 1px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.sidebar-item:hover,
.sidebar-item-link:hover {
    background: var(--soft-blue);
    color: var(--text-primary);
    transform: translateX(4px);
}

.sidebar-item.active {
    background: var(--gradient-blue);
    color: var(--white);
    box-shadow: var(--shadow-glow-blue);
}

.sidebar-item.active .sidebar-icon {
    filter: brightness(0) invert(1);
}

.sidebar-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-badge {
    background: var(--accent-blue);
    color: var(--white);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    display: none;
}

.sidebar-item.active .sidebar-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* Chat History in Sidebar */
.chat-history-container {
    padding: 0 10px;
    max-height: 400px;
    overflow-y: auto;
}

.chat-history-container ul {
    list-style: none;
    padding: 0;
}

.chat-history-container li {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: all 0.2s ease;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
}

.chat-history-container li:hover {
    background: var(--soft-blue);
    border-color: var(--accent-blue);
    transform: translateX(4px);
    color: var(--text-primary);
}

.chat-history-container li.selected {
    background: var(--gradient-blue);
    color: var(--white);
    font-weight: 600;
    box-shadow: var(--shadow-glow-blue);
}

.chat-history-container li.empty-state {
    cursor: default;
    background: transparent;
    border: 2px dashed var(--border-color);
    color: var(--text-muted);
}

.chat-history-container li.empty-state:hover {
    transform: none;
    background: transparent;
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto;
    padding: 8px 10px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    margin-top: 4px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.user-info-sidebar {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-status {
    font-size: 12px;
    color: var(--text-muted);
}

.logout-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ===== MOBILE HEADER (hidden on desktop) ===== */
.mobile-header {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
}

.mobile-menu-btn span {
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile Dark Mode Toggle (moon icon in mobile header) */
.sidebar-mobile-dark-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: color 0.3s ease, background 0.3s ease;
    margin-right: 4px;
    order: -1;
}

.sidebar-mobile-dark-toggle:hover {
    background: var(--bg-hover, #f1f5f9);
}

[data-theme="dark"] .sidebar-mobile-dark-toggle {
    color: #fbbf24;
}

[data-theme="dark"] .sidebar-mobile-dark-toggle:hover {
    background: rgba(251, 191, 36, 0.1);
}

@media (max-width: 768px) {
    .sidebar-mobile-dark-toggle {
        display: flex;
    }
}

.mobile-logo {
    flex: 1;
    display: flex;
    align-items: center;
}

.mobile-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    /* Invert for dark background if needed */
    /* filter: brightness(0) invert(1); */
}

/* Sidebar Overlay (for mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.25);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    margin-left: 250px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    width: calc(100% - 250px);
    transition: margin-left 0.3s ease;
    position: relative;
    z-index: 1;
    background: var(--bg-main);
}

/* ===== CHAT CONTAINER ===== */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    width: 100%;
    margin: 16px auto;
    padding: 0 20px;
    background: transparent;
}

#chatbox {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    background: transparent;
}

/* ===== MESSAGES - CHAT BUBBLE LAYOUT ===== */
.message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    gap: 6px;
    animation: messageSlide 0.4s ease;
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Direct child (>) only — this rule styles the sender-name strong tag at
   the start of each .message bubble (e.g. "LoanSpace.ai" / "brendan"),
   NOT every first-child strong inside the message body. Without the >,
   list items rendered as <li><strong>Title:</strong> desc</li> get the
   uppercase + wide-letter-spacing treatment too, which mangled mobile
   readability (saw "CONVENTIONAL 97: THIS IS A STANDARD LOAN..." on iOS). */
.message > strong:first-child {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 0;
    display: inline-block;
    width: fit-content;
}

/* User Messages - Right Aligned */
.message.human {
    align-self: flex-end;
    align-items: flex-end;
}

.message.human > strong:first-child {
    background: transparent;
    color: var(--primary-navy);
    text-align: right;
}

.message.human .message-content {
    background: var(--gradient-primary);
    color: var(--white) !important;
    border: none;
    border-radius: 20px 20px 6px 20px;
    box-shadow: var(--shadow-glow-navy);
}

.message.human .message-content p,
.message.human .message-content strong,
.message.human .message-content a {
    color: var(--white);
}

.message.human .message-content a {
    text-decoration: underline;
}

.message.human .message-content a::after {
    display: none;
}

/* AI Messages - Left Aligned */
.message.assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.message.assistant > strong:first-child {
    background: transparent !important;
    color: var(--text-secondary) !important;
}

.message.assistant .message-content {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 20px 20px 20px 6px;
}

.message-content {
    padding: 18px 22px;
    line-height: 1.7;
    font-size: 15px;
    word-break: break-word;
}

/* Message Content Typography */
.message-content p {
    margin: 10px 0;
    font-size: 15px;
    color: var(--text-primary);
}

.message.human .message-content p {
    color: var(--white);
}

.message-content p:first-child {
    margin-top: 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

/* Lists */
.message-content ul,
.message-content ol {
    list-style: none;
    margin: 14px 0;
    padding: 0;
}

.message-content ol {
    counter-reset: item;
}

.message-content ul li,
.message-content ol li {
    padding: 14px 18px 14px 48px;
    position: relative;
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 15px;
    background: var(--soft-blue);
    border-radius: 12px;
    border-left: 3px solid var(--accent-blue);
    transition: all 0.25s ease;
}

.message-content ul li:hover,
.message-content ol li:hover {
    background: var(--soft-blue-dark);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.message-content ol li {
    counter-increment: item;
}

.message-content ol li::before {
    content: counter(item);
    position: absolute;
    left: 14px;
    top: 14px;
    background: var(--gradient-blue);
    color: white;
    font-weight: 700;
    font-size: 11px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(43, 124, 196, 0.3);
}

.message-content ul li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 20px;
    width: 10px;
    height: 10px;
    background: var(--gradient-blue);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(43, 124, 196, 0.3);
}

/* Links */
.message-content a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color 0.25s ease;
    padding-bottom: 2px;
}

.message-content a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-blue);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.message-content a:hover {
    color: var(--accent-blue-dark);
}

.message-content a:hover::after {
    width: 100%;
}

/* Strong/Bold */
.message-content strong {
    color: var(--text-primary);
    font-weight: 700;
}

.message-content li strong {
    color: var(--accent-blue-dark);
}

/* Headers */
.message-content h3,
.message-content .section-header {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 12px 0;
    color: var(--primary-navy);
    line-height: 1.4;
}

.message-content h4,
.message-content .sub-header {
    font-size: 16px;
    font-weight: 600;
    margin: 16px 0 10px 0;
    color: var(--text-primary);
}

/* Tables */
.message-content table,
.response-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.message-content table th,
.response-table th {
    background: var(--gradient-primary);
    color: white;
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.message-content table td,
.response-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-card);
    transition: background 0.2s ease;
}

.message-content table tr:hover td {
    background: var(--soft-blue);
}

.message-content table tr:last-child td {
    border-bottom: none;
}

/* Welcome Message */
.message.welcome {
    max-width: 100%;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.message.welcome > strong:first-child {
    display: none !important;
}

.message.welcome .message-content {
    background: var(--primary-navy) !important;
    border: none !important;
    padding: 40px !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    position: relative;
    color: var(--white);
}

.message.welcome .message-content p {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
}

.message.welcome .message-content h2,
.message.welcome .message-content h3 {
    color: var(--white);
    text-align: center;
}

/* Brand Name Styling in Welcome */
.welcome-brand {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.welcome-brand .brand-loan {
    color: #4A9FE8;  /* Bright blue for dark background */
}

.welcome-brand .brand-space {
    color: #F5A623;  /* Bright orange for dark background */
}


/* ============================================
   COMPACT WELCOME BANNER (50% SMALLER)
   ============================================ */

.welcome-banner {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  text-align: center;
}

/* Hero Section - Compact */
.welcome-hero {
  margin-bottom: 1.25rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, #D66D2B15, #2558B215);
  border: 1px solid #D66D2B30;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #D66D2B;
  margin-bottom: 0.75rem;
}

.hero-badge svg {
  color: #D66D2B;
}

.welcome-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.65rem 0;
  color: #1e293b;
}

.welcome-subtitle {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  max-width: 650px;
}

/* Features Grid - 3 columns for balance */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.feature-card-modern {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 0.75rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.feature-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #D66D2B, #2558B2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.feature-card-modern:hover::before {
  transform: scaleX(1);
}

.feature-card-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.feature-icon-wrapper {
  margin-bottom: 0.5rem;
}

.feature-icon {
  font-size: 1.75rem;
  display: inline-block;
}

.feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.35rem 0;
}

.feature-description {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

/* Welcome CTA - Compact */
.welcome-cta {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.cta-text {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
  margin: 0;
}

/* ============================================
   MOBILE RESPONSIVE - COMPACT
   ============================================ */

/* Tablet/Medium screens - 2 column grid */
@media (max-width: 968px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile - Compact spacing */
@media (max-width: 768px) {
  .welcome-banner {
    padding: 0.75rem 1rem 0.5rem 1rem;
  }

  .welcome-hero {
    margin-bottom: 0.5rem;
  }

  .hero-badge {
    padding: 0.25rem 0.6rem;
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
  }

  .welcome-title {
    font-size: 1.1rem;
    line-height: 1.1;
    margin: 0 0 0.05rem 0;
  }

  .welcome-subtitle {
    font-size: 0.75rem;
    line-height: 1.3;
    margin: 0 auto 0.75rem auto;
    padding: 0.4rem 0.75rem;
  }

  .features-grid {
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 0.75rem;
  }

  .feature-card-modern {
    padding: 0.65rem 0.5rem;
  }

  .feature-icon-wrapper {
    margin-bottom: 0.35rem;
  }

  .feature-icon {
    font-size: 1.4rem;
  }

  .feature-title {
    font-size: 0.8rem;
    margin: 0 0 0.25rem 0;
  }

  .feature-description {
    font-size: 0.68rem;
    line-height: 1.3;
  }

  .welcome-cta {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .cta-text {
    font-size: 0.8rem;
  }

  /* Hide sidebar rate widget on mobile */
  .sidebar .rate-widget {
    display: none !important;
  }
}

/* Small Mobile - Extra compact */
@media (max-width: 480px) {
  .welcome-banner {
    padding: 0.5rem 0.85rem 0.35rem 0.85rem;
  }

  .welcome-hero {
    margin-bottom: 0.4rem;
  }

  .hero-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-bottom: 0.25rem;
  }

  .welcome-title {
    font-size: 1rem;
    line-height: 1.1;
    margin: 0 0 0.05rem 0;
  }

  .welcome-subtitle {
    font-size: 0.7rem;
    line-height: 1.25;
    margin: 0 auto 0.6rem auto;
    padding: 0.35rem 0.65rem;
  }

  .features-grid {
    gap: 0.4rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
  }

  .feature-card-modern {
    padding: 0.55rem 0.4rem;
  }

  .feature-icon {
    font-size: 1.25rem;
  }

  .feature-title {
    font-size: 0.75rem;
  }

  .feature-description {
    font-size: 0.65rem;
  }

  .welcome-cta {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
  }

  .cta-text {
    font-size: 0.75rem;
  }
}

/* Starter Buttons */
.starter-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 0 auto !important;
    max-width: 900px;
    width: 100%;
    padding: 30px 20px;
    justify-items: center;
}

.starter-btn {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 240px;
    padding: 24px 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.starter-btn:hover {
    background: var(--soft-blue);
    border-color: var(--accent-blue);
    transform: translateY(-8px);
    box-shadow: var(--shadow-glow-blue);
}

.starter-btn:active {
    transform: translateY(-4px);
}

.starter-icon {
    font-size: 42px;
    line-height: 1;
}

.starter-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.starter-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.starter-desc {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Document Status */
.document-status {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--soft-blue);
    border: 1px solid rgba(43, 124, 196, 0.2);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.document-status .doc-icon {
    font-size: 20px;
}

.document-status #docFilename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent-blue-dark);
    font-weight: 600;
}

.clear-doc-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.clear-doc-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ===== INPUT AREA ===== */
.input-area {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid rgba(79, 70, 229, 0.3);
    border-radius: 16px;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    resize: none;
    outline: none;
    transition: all 0.3s ease;
    min-height: 56px;
    max-height: 180px;
    background: var(--bg-card);
    color: var(--text-primary);
    line-height: 1.5;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

#input::placeholder {
    color: var(--text-muted);
}

#input:focus {
    border-color: #4f46e5;
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 2px 12px rgba(79, 70, 229, 0.1);
}

.button-group {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

#sendButton {
    padding: 14px 28px;
    background: var(--gradient-blue);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-glow-blue);
}

#sendButton span {
    display: none;
}

#sendButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(43, 124, 196, 0.35);
}

#sendButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#speechButton,
.upload-button {
    padding: 14px 18px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#speechButton:hover,
.upload-button:hover {
    background: var(--soft-blue);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

#speechButton img {
    height: 22px;
    width: 22px;
}

.upload-button svg {
    width: 22px;
    height: 22px;
    stroke: var(--text-secondary);
    transition: stroke 0.3s ease;
}

.upload-button:hover svg {
    stroke: var(--accent-blue);
}

.upload-button.has-document {
    background: var(--soft-blue);
    border-color: var(--accent-blue);
}

.upload-button.has-document svg {
    stroke: var(--accent-blue);
}

/* Powered By */
.powered-by {
    padding: 14px 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Loading States */
.thinking {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--soft-blue);
    border: 1px solid rgba(43, 124, 196, 0.2);
    border-radius: 16px;
    color: var(--accent-blue-dark);
    font-weight: 600;
    max-width: 80%;
    align-self: flex-start;
}

.spinner {
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-blue);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 16px;
    padding: 18px 22px;
    font-weight: 500;
    max-width: 80%;
    align-self: flex-start;
}

/* Scrollbar Styling */
#chatbox::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.chat-history-container::-webkit-scrollbar {
    width: 6px;
}

#chatbox::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.chat-history-container::-webkit-scrollbar-track {
    background: transparent;
}

#chatbox::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.chat-history-container::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 8px;
}

#chatbox::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.chat-history-container::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* ===== RATE WIDGET ===== */
.rate-widget {
    background: var(--soft-blue);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 4px 10px 0 10px;
    border: 1px solid rgba(43, 124, 196, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.rate-widget:hover {
    background: var(--soft-blue-dark);
    border-color: var(--accent-blue);
}

.rate-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.rate-expand-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    display: inline-block;
    color: var(--text-muted);
}

.rate-widget.expanded .rate-expand-icon {
    transform: rotate(90deg);
}

.rate-widget-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.rate-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.rate-value {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
    margin-left: auto;
    margin-right: 6px;
}

.rate-arrow {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.rate-arrow.up {
    color: #ef4444;
}

.rate-arrow.down {
    color: #10b981;
}

.rate-arrow.unchanged {
    color: var(--text-muted);
}

.rate-widget-footer {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(43, 124, 196, 0.15);
}

.rate-widget.loading .rate-value {
    opacity: 0.5;
}

.rate-expanded {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(43, 124, 196, 0.15);
}

.rate-chat-btn {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--gradient-blue);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rate-chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-blue);
}

/* ===== RESPONSIVE - MOBILE (768px and below) ===== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-250px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 100px;
    }

    .sidebar.open,
    .sidebar.active {
        transform: translateX(0) !important;
        z-index: 10000 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .sidebar-overlay {
        display: block;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .mobile-header {
        display: flex;
    }

    .sidebar-header {
        display: none;
    }

    .sidebar-footer {
        order: 1;
        margin-top: 0;
        margin-bottom: 4px;
        padding-top: 0;
        padding-bottom: 4px;
        flex-shrink: 0;
    }

    .rate-widget {
        order: 2;
        margin: 2px 10px;
        padding: 8px 12px;
        flex-shrink: 0;
    }

    .sidebar-section {
        order: 3;
        padding: 2px 10px;
        flex-shrink: 0;
    }

    /* Move "Chats / View History" section up on mobile so it's not cut off */
    .sidebar-section:last-of-type {
        order: 2;
        padding-top: 0;
        padding-bottom: 1px;
    }

    .sidebar-section-title {
        margin-bottom: 1px;
        font-size: 10px;
    }

    .sidebar-item,
    .sidebar-item-link {
        padding: 5px 8px;
        margin-bottom: 0;
        font-size: 12.5px;
    }

    .chat-history-container {
        order: 4;
        flex: 0 0 auto;
        max-height: none;
        overflow-y: visible;
        padding-bottom: 12px;
    }

    .chat-container {
        margin: 16px auto;
        padding: 0 16px;
    }

    #chatbox {
        padding: 16px 0;
    }

    .input-area {
        padding: 16px 0;
    }

    .powered-by {
        padding: 10px 0;
        font-size: 11px;
    }

    .message {
        max-width: 90%;
    }

    .message.welcome {
        max-width: 100%;
    }

    .thinking,
    .error {
        max-width: 90%;
    }

    .starter-buttons {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 16px !important;
        max-width: 100%;
        padding: 20px 16px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
    }

    .starter-buttons::-webkit-scrollbar {
        display: none;
    }

    .starter-btn {
        flex: 0 0 240px;
        min-height: 240px;
        padding: 20px 16px;
        scroll-snap-align: center;
    }

    .starter-btn:first-child {
        margin-left: 16px;
    }

    .starter-btn:last-child {
        margin-right: 16px;
    }

    .starter-icon {
        font-size: 36px;
    }

    .starter-title {
        font-size: 15px;
    }

    .starter-desc {
        font-size: 12px;
    }

    .message.welcome .message-content::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 60px;
        background: linear-gradient(to left, rgba(248, 250, 252, 0.95), transparent);
        pointer-events: none;
        z-index: 1;
    }

    .message.welcome .message-content {
        min-height: auto !important;
    }

    #sendButton span {
        display: none;
    }
}

/* ===== RESPONSIVE - TABLET (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    .chat-container {
        padding: 0 20px;
    }

    #sendButton span {
        display: inline;
    }

    .starter-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 600px;
        justify-items: center;
    }
}

/* ===== RESPONSIVE - DESKTOP (769px+) ===== */
@media (min-width: 769px) {
    #sendButton span {
        display: inline;
    }
}

/* ===== RESPONSIVE - TABLET WITH SIDEBAR (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }
    
    .main-content {
        margin-left: 200px;
        width: calc(100% - 200px);
    }
    
    .sidebar-section-title {
        font-size: 10px;
    }
    
    .sidebar-item,
    .sidebar-item-link {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    .sidebar-icon {
        width: 18px;
        height: 18px;
        font-size: 16px;
    }
    
    .sidebar-footer {
        padding-bottom: 60px;
    }
    
    .starter-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 600px;
        justify-items: center;
    }
}

/* ===== RESPONSIVE - LARGE DESKTOP (1025px+) ===== */
@media (min-width: 1025px) {
    .sidebar-logo {
        width: 100%;
        height: auto;
    }
    
    .sidebar-header {
        padding: 0;
    }
}

/* ===== RESPONSIVE - EXTRA LARGE DESKTOP (1400px+) ===== */
@media (min-width: 1400px) {
    .starter-buttons {
        max-width: 800px;
    }
    
    .starter-btn {
        max-width: 250px;
    }
}

/* Enhanced list styling for chat responses */
.chat-message ul.chat-list,
.chat-message ol.chat-list {
    margin: 1em 0;
    padding-left: 1.5em;
    line-height: 1.6;
}

.chat-message ul.chat-list li,
.chat-message ol.chat-list li {
    margin: 0.5em 0;
    padding-left: 0.3em;
}

.chat-message ol.chat-list {
    counter-reset: item;
    list-style: none;
    padding-left: 2em;
}

.chat-message ol.chat-list li {
    counter-increment: item;
    position: relative;
}

.chat-message ol.chat-list li:before {
    content: counter(item) ".";
    position: absolute;
    left: -2em;
    width: 1.5em;
    text-align: right;
    font-weight: 600;
    color: var(--accent-blue);
}

.chat-message ul.chat-list li {
    position: relative;
}

.chat-message ul.chat-list li:before {
    content: "•";
    position: absolute;
    left: -1.2em;
    color: var(--accent-blue);
    font-weight: bold;
}

/* ===== QUESTION LIMIT WARNING STYLES ===== */
.question-warning {
    display: none;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 1rem;
    border-radius: 8px;
    gap: 12px;
    font-size: 14px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.question-warning.warning-medium {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.question-warning.warning-high {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.warning-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.question-warning a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.question-warning a:hover {
    text-decoration: none;
}

/* ===== LIMIT REACHED MODAL ===== */
.limit-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.limit-modal.active {
    display: flex;
}

.limit-modal-content {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    margin: 20px;
    text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.limit-modal-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.limit-modal h2 {
    margin: 0 0 12px 0;
    font-size: 24px;
    color: #1f2937;
}

.limit-modal p {
    color: #6b7280;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.limit-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.limit-modal-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.limit-modal-btn.primary {
    background: var(--accent-blue);
    color: white;
}

.limit-modal-btn.primary:hover {
    background: var(--accent-blue-dark);
}

.limit-modal-btn.secondary {
    background: #f3f4f6;
    color: #374151;
}

.limit-modal-btn.secondary:hover {
    background: #e5e7eb;
}

/* ===== FONT AWESOME ICON COLORS ===== */
/* Starter button icons - colorful */
.starter-icon i {
    font-size: 24px;
}

.starter-btn:nth-child(1) .starter-icon i { color: #ef4444; } /* Red - house */
.starter-btn:nth-child(2) .starter-icon i { color: #22c55e; } /* Green - chart */
.starter-btn:nth-child(3) .starter-icon i { color: #f59e0b; } /* Amber - hand holding dollar */
.starter-btn:nth-child(4) .starter-icon i { color: #eab308; } /* Yellow - key */
.starter-btn:nth-child(5) .starter-icon i { color: #3b82f6; } /* Blue - check */
.starter-btn:nth-child(6) .starter-icon i { color: #ec4899; } /* Pink - piggy bank */

.starter-btn:hover .starter-icon i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Sidebar icons - blue theme */
.sidebar-icon i {
    font-size: 18px;
    color: var(--accent-blue);
}

.sidebar-item:hover .sidebar-icon i,
.sidebar-item-link:hover .sidebar-icon i {
    color: var(--accent-blue-dark);
}

.sidebar-item.active .sidebar-icon i {
    color: #ffffff;
}

/* Login & Register custom icon colors - gradient */
.sidebar-login .sidebar-icon i {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sidebar-login:hover .sidebar-icon i {
    background: linear-gradient(135deg, #059669, #047857);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sidebar-register .sidebar-icon i {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sidebar-register:hover .sidebar-icon i {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== MOBILE RATES DISPLAY ===== */
.mobile-rates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mobile-rate-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.mobile-rate-label {
    font-weight: 500;
    color: var(--text-muted);
}

.mobile-rate-value {
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-rate-arrow {
    font-size: 10px;
}

.mobile-rate-arrow.up {
    color: #ef4444;
}

.mobile-rate-arrow.down {
    color: #10b981;
}

.mobile-rate-divider {
    color: var(--text-light);
    font-weight: 300;
}

/* Hide mobile rates on desktop */
@media (min-width: 769px) {
    .mobile-rates {
        display: none !important;
    }
}

/* ===== style-improvements.css ===== */
/* ===== LOANSPACE.AI PROFESSIONAL IMPROVEMENTS ===== */
/* Add this file as style-improvements.css and load it AFTER your main CSS */
/* Version: 1.0 - Professional Financial Services Design */

/* ============================================
   CORE COLOR SYSTEM - PROFESSIONAL PALETTE
   ============================================ */

:root {
    /* Primary Brand - Professional Blue */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff6ff;
    
    /* Secondary - Navy (your existing) */
    --color-secondary: #1e3a5f;
    --color-secondary-hover: #152a47;
    
    /* Accent - Use Sparingly */
    --color-accent: #f97316;
    --color-accent-hover: #ea580c;
    
    /* Text Hierarchy - High Contrast */
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #9ca3af;
    
    /* Backgrounds - Clean & Minimal */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-hover: #f3f4f6;
    
    /* Borders - Subtle */
    --color-border-primary: #e5e7eb;
    --color-border-secondary: #d1d5db;
    --color-border-hover: var(--color-primary);
    
    /* Shadows - Modern & Subtle */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-primary: 0 1px 3px 0 rgb(37 99 235 / 0.3);
}

/* ============================================
   1. REMOVE PROBLEMATIC ELEMENTS
   ============================================ */

/* Hide the orange star badge - it's distracting */
.ai-badge,
header .badge,
[class*="ai-powered-badge"] {
    display: none !important;
}

/* Disable distracting background animations */
body::before {
    animation: none !important;
    opacity: 0 !important;
}

@keyframes gradientPulse {
    0%, 100% { opacity: 0; }
}

/* ============================================
   2. TEXT CONTRAST & TYPOGRAPHY
   ============================================ */

/* Main heading - stronger contrast */
h1,
.hero-title,
.main-title {
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Subtitle - much darker for readability */
.subtitle,
.hero-subtitle,
.description {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* Body text improvements */
body {
    color: var(--color-text-primary);
    line-height: 1.6;
}

p {
    color: var(--color-text-secondary);
}

/* ============================================
   3. SIDEBAR MODERNIZATION
   ============================================ */

/* Remove blue tint, use neutral gray */
.sidebar {
    background: var(--color-bg-secondary) !important;
    border-right: 1px solid var(--color-border-primary) !important;
}

/* Rate widget - cleaner appearance */
.rate-widget {
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: 12px !important;
}

.rate-widget-header {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.rate-label {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
}

.rate-value {
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

.rate-widget-footer {
    color: var(--color-text-tertiary) !important;
    font-size: 11px !important;
}

/* ============================================
   4. SIDEBAR ITEMS - MODERN STATES
   ============================================ */

.sidebar-item,
.sidebar-item-link {
    color: var(--color-text-secondary) !important;
    transition: all 0.15s ease !important;
}

.sidebar-item:hover:not(.active),
.sidebar-item-link:hover {
    background: var(--color-bg-hover) !important;
    color: var(--color-text-primary) !important;
}

.sidebar-item.active {
    background: var(--color-primary) !important;
    color: white !important;
}

.sidebar-section-title {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================
   5. FEATURE CARDS - PROFESSIONAL STYLE
   ============================================ */

.feature-card,
.starter-card,
.card {
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    box-shadow: var(--shadow-xs) !important;
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.feature-card:hover,
.starter-card:hover,
.card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 6px -1px rgb(37 99 235 / 0.1) !important;
    transform: translateY(-2px) !important;
}

/* Feature card content */
.feature-title,
.starter-title {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.feature-description,
.starter-description {
    color: var(--color-text-tertiary) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ============================================
   6. ICON IMPROVEMENTS
   ============================================ */

/* Add professional background to icons */
.feature-icon,
.starter-icon,
.icon-container {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
}

/* Font Awesome icon styling - matches sidebar */
.feature-icon i,
.starter-icon i {
    font-size: 24px !important;
    color: #2563eb !important;
}

.feature-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

/* ============================================
   7. BUTTONS - MODERN & CONSISTENT
   ============================================ */

/* Primary button (Send, etc) */
#sendButton,
.btn-primary,
button[type="submit"] {
    background: var(--color-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: var(--shadow-primary) !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
}

#sendButton:hover,
.btn-primary:hover,
button[type="submit"]:hover {
    background: var(--color-primary-hover) !important;
    box-shadow: 0 4px 6px -1px rgb(37 99 235 / 0.4) !important;
    transform: translateY(-1px) !important;
}

#sendButton:active,
.btn-primary:active {
    transform: translateY(0) !important;
}

/* Secondary buttons */
.btn-secondary {
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

.btn-secondary:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-secondary) !important;
}

/* ============================================
   8. INPUT FIELDS
   ============================================ */

#userInput,
.input-area input[type="text"],
.input-area input[type="email"],
.input-area input[type="password"],
.input-area textarea {
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
    font-size: 15px !important;
    transition: all 0.15s ease !important;
}

#userInput:focus,
.input-area input:focus,
.input-area textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1) !important;
}

#userInput::placeholder,
.input-area input::placeholder,
.input-area textarea::placeholder {
    color: var(--color-text-muted) !important;
}

/* ============================================
   9. INPUT AREA & CHAT INTERFACE
   ============================================ */

.input-area {
    background: var(--color-bg-primary) !important;
    border-top: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.05) !important;
}

#chatbox,
.chat-container,
.main-chat,
.chat-area {
    background: linear-gradient(to bottom, 
        var(--color-bg-primary) 0%, 
        var(--color-bg-secondary) 100%) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   10. MESSAGES & CONTENT
   ============================================ */

.message-content {
    border-radius: 12px !important;
}

.message.user .message-content {
    background: var(--color-primary) !important;
    color: white !important;
}

.message.assistant .message-content {
    background: var(--color-bg-primary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================
   11. HEADER
   ============================================ */

header {
    background: var(--color-bg-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ============================================
   12. "POWERED BY" SECTION
   ============================================ */

.powered-by {
    font-size: 13px !important;
    color: var(--color-text-tertiary) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    background: transparent !important;
    border-top: none !important;
    padding: 12px !important;
}

/* Or hide it completely if you prefer */
/* .powered-by { display: none !important; } */

/* ============================================
   13. LOADING & STATUS STATES
   ============================================ */

.thinking,
.loading {
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    color: var(--color-primary) !important;
}

.spinner {
    border-color: var(--color-border-primary) !important;
    border-top-color: var(--color-primary) !important;
}

.error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

.success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #16a34a !important;
}

/* ============================================
   14. SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary) !important;
}

/* ============================================
   15. LINKS
   ============================================ */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-primary-hover);
}

/* ============================================
   16. MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure text remains readable */
    body {
        font-size: 14px;
    }
    
    .subtitle, .hero-subtitle {
        font-size: 15px !important;
    }
    
    /* Ensure touch targets are large enough */
    button,
    .btn,
    .sidebar-item {
        min-height: 44px;
    }
}

/* ============================================
   17. PRINT STYLES (BONUS)
   ============================================ */

@media print {
    .sidebar,
    .input-area,
    .powered-by {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}

/* ============================================
   END OF IMPROVEMENTS
   ============================================ */

/* ===== style-professional.css ===== */
/* ===== LOANSPACE.AI - PROFESSIONAL & TRUSTWORTHY ===== */
/* Clean, minimal design focused on clarity and credibility */
/* Load this AFTER style-improvements.css */

:root {
    /* Professional Color Palette - Conservative & Trustworthy */
    --trust-navy: #0f2942;      /* Deep navy - authority */
    --trust-blue: #2563eb;      /* Clean blue - professionalism */
    --trust-gray: #64748b;      /* Neutral gray - balance */
    --trust-light: #f8fafc;     /* Clean white-gray background */
    
    /* Text - High Contrast for Clarity */
    --text-primary: #0f172a;    /* Almost black - maximum readability */
    --text-secondary: #334155;  /* Dark gray - hierarchy */
    --text-muted: #64748b;      /* Medium gray - supporting text */
    
    /* Backgrounds - Clean & Simple */
    --bg-primary: #ffffff;      /* Pure white */
    --bg-secondary: #f8fafc;    /* Barely gray */
    --bg-tertiary: #f1f5f9;     /* Subtle gray */
    
    /* Borders - Subtle Definition */
    --border-main: #e2e8f0;     /* Light gray borders */
    --border-focus: #2563eb;    /* Blue for interactive states */
    
    /* Shadows - Minimal & Professional */
    --shadow-subtle: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.1);
}

/* ============================================
   REMOVE ALL DISTRACTING ELEMENTS
   ============================================ */

/* No background animations - pure white background */
body::before,
body::after {
    display: none !important;
}

body {
    background: var(--bg-primary) !important;
}

/* No floating animations */
@keyframes float {
    0%, 100% { transform: none; }
}

.feature-card-modern,
.feature-card,
.card {
    animation: none !important;
}

/* ============================================
   CLEAN TYPOGRAPHY - MAXIMUM READABILITY
   ============================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headlines - Bold and Clear */
h1,
.welcome-title,
.hero-title {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}

/* Subtitles - Professional Hierarchy */
.welcome-subtitle,
.hero-subtitle {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

/* Body Text - Clear and Readable */
p {
    font-size: 16px !important;
    color: var(--text-secondary) !important;
    line-height: 1.6 !important;
}

/* ============================================
   SIDEBAR - CLEAN & FUNCTIONAL
   ============================================ */

.sidebar {
    background: var(--bg-primary) !important;
    border-right: 1px solid var(--border-main) !important;
    box-shadow: none !important;
}

.sidebar-logo {
    padding: 24px 16px !important;
}

.sidebar-section {
    padding: 16px 12px !important;
}

.sidebar-item,
.sidebar-item-link {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    transition: background-color 0.15s ease !important;
}

.sidebar-item:hover:not(.active),
.sidebar-item-link:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.sidebar-item.active {
    background: var(--trust-blue) !important;
    color: white !important;
}

/* Rate Widget - Simple Card */
.rate-widget {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: none !important;
}

.rate-widget-header {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
    margin-bottom: 12px !important;
}

.rate-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* ============================================
   FEATURE CARDS - MINIMAL & PROFESSIONAL
   ============================================ */

.features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

.feature-card-modern,
.feature-card,
.card {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-subtle) !important;
    transition: all 0.2s ease !important;
}

.feature-card-modern:hover,
.feature-card:hover,
.card:hover {
    border-color: var(--trust-blue) !important;
    box-shadow: var(--shadow-card) !important;
    transform: translateY(-2px) !important;
}

/* Icons - Simple & Clear */
.feature-icon {
    width: 48px !important;
    height: 48px !important;
    background: var(--bg-secondary) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.feature-icon i {
    font-size: 24px !important;
    color: var(--trust-blue) !important;
}

.feature-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 8px !important;
}

.feature-description {
    font-size: 15px !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
}

/* Clickable Question Cards */
.question-card {
    cursor: pointer !important;
    user-select: none !important;
}

.question-card:active {
    transform: translateY(0px) !important;
    box-shadow: var(--shadow-subtle) !important;
}

/* Link-style card (closing costs) */
a.question-card-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

/* ============================================
   WELCOME BANNER - CLEAN HERO
   ============================================ */

.welcome-banner {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 16px !important;
    padding: 48px 32px !important;
    margin-bottom: 32px !important;
    box-shadow: var(--shadow-subtle) !important;
}

.welcome-hero {
    max-width: 720px !important;
    margin: 0 auto 40px !important;
    text-align: center !important;
}

/* ============================================
   CHAT INTERFACE - FOCUSED & CLEAN
   ============================================ */

#chatbox,
.chat-container {
    background: var(--bg-primary) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

/* Message Bubbles - Clear Distinction */
.message.user .message-content {
    background: var(--trust-blue) !important;
    color: white !important;
    border-radius: 18px !important;
    padding: 12px 18px !important;
    box-shadow: var(--shadow-subtle) !important;
}

.message.assistant .message-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 18px !important;
    padding: 12px 18px !important;
}

/* ============================================
   INPUT AREA - CLEAN & PROFESSIONAL
   ============================================ */

.input-area {
    background: var(--bg-primary) !important;
    border-top: 1px solid var(--border-main) !important;
    padding: 20px !important;
    box-shadow: none !important;
}

#userInput {
    background: var(--bg-secondary) !important;
    border: 2px solid var(--border-main) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    color: var(--text-primary) !important;
    transition: all 0.15s ease !important;
}

#userInput:focus {
    outline: none !important;
    border-color: var(--border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
    background: var(--bg-primary) !important;
}

#userInput::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================
   BUTTONS - PROFESSIONAL & CLEAR
   ============================================ */

#sendButton,
.btn-primary {
    background: var(--trust-blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: var(--shadow-subtle) !important;
}

#sendButton:hover,
.btn-primary:hover {
    background: #1d4ed8 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-card) !important;
}

#sendButton:active,
.btn-primary:active {
    transform: translateY(0) !important;
}

/* Secondary Buttons */
.btn-secondary,
#speechButton,
.upload-button {
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-main) !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    color: var(--text-secondary) !important;
    transition: all 0.15s ease !important;
}

.btn-secondary:hover,
#speechButton:hover,
.upload-button:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--text-muted) !important;
}

/* ============================================
   HEADER - MINIMAL & PROFESSIONAL
   ============================================ */

header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-main) !important;
    box-shadow: none !important;
}

header img.logo {
    box-shadow: none !important;
}

/* Login/Register Buttons */
.login-button,
.register-button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.login-button {
    background: var(--trust-blue) !important;
    color: white !important;
}

.register-button {
    background: transparent !important;
    color: var(--trust-blue) !important;
    border: 2px solid var(--trust-blue) !important;
}

/* ============================================
   LOADING STATES - SIMPLE & CLEAR
   ============================================ */

.thinking,
.loading {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: var(--text-secondary) !important;
}

.spinner {
    border: 3px solid var(--bg-tertiary) !important;
    border-top-color: var(--trust-blue) !important;
}

.error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
}

/* ============================================
   SCROLLBAR - MINIMAL
   ============================================ */

::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--border-main) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted) !important;
}

/* ============================================
   SPACING & LAYOUT - GENEROUS WHITE SPACE
   ============================================ */

.main-content,
.chat-area {
    padding: 32px !important;
}

.welcome-banner {
    margin-bottom: 32px !important;
}

.features-grid {
    margin: 32px 0 !important;
}

/* Section Spacing */
section {
    margin-bottom: 48px !important;
}

/* ============================================
   LINKS - PROFESSIONAL
   ============================================ */

/* Style only non-button anchors. The earlier rule used a bare `a {}` with
   !important on color, which silently overrode every <a> element styled
   as a button (.btn-back, .btn-new-chat, .social-btn, .apple-btn, etc.) —
   their explicit white/colored text was getting forced back to trust-blue.
   Every button class in this codebase contains "btn" in the class name.
   `:where()` wraps the carve-out so specificity stays at (0,0,1) — same as
   the bare `a` rule it replaced. Without it, the rule jumps to (0,1,1) and
   starts winning over sidebar/nav rules like `.sidebar a {!important}` that
   used to legitimately override the global trust-blue. */
a:where(:not([class*="btn"])) {
    color: var(--trust-blue) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

a:where(:not([class*="btn"])):hover {
    color: #1d4ed8 !important;
}

/* ============================================
   CHAT BACK LINK
   ============================================ */
/* Sits above the welcome banner inside .chat-container. The row matches
   the welcome banner's max-width (640px, centered), so the link sits flush
   with the banner's left edge instead of being centered on the page.
   Only the link area is clickable, not the empty space to the right. */
.chat-back-row {
    /* .chat-container is `display: flex; flex-direction: column`, so this
       row is a flex item. `align-self: flex-start` pulls it to the cross-axis
       start (left in LTR). Combined with width: 100%; max-width: 640px and
       margin-left: 0, the link sits at the left edge of the same 640px band
       as the welcome banner — without inheriting the page's text-align:center. */
    display: flex;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: 640px;
    margin: 8px auto 0;
    padding-left: 16px;
    box-sizing: border-box;
}
.chat-back-link,
.chat-back-link:link,
.chat-back-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #2b7cc4 !important;
    background: rgba(43, 124, 196, 0.08);
    border: 1px solid rgba(43, 124, 196, 0.2);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s ease;
}
.chat-back-link i {
    font-size: 12px;
}
.chat-back-link:hover,
.chat-back-link:active {
    background: rgba(43, 124, 196, 0.15);
}
[data-theme="dark"] .chat-back-link,
[data-theme="dark"] .chat-back-link:link,
[data-theme="dark"] .chat-back-link:visited {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.25);
}
[data-theme="dark"] .chat-back-link:hover,
[data-theme="dark"] .chat-back-link:active {
    background: rgba(96, 165, 250, 0.18);
}

/* ============================================
   WELCOME BANNER V2 - FUNNEL-STYLE CARDS
   ============================================ */

.welcome-banner-v2 {
    max-width: 640px;
    margin: 0 auto;
    /* Reduced top padding (was 32px) — the back link above already provides
       breathing room, so this kept pushing the headline too far down. */
    padding: 12px 0 20px;
}

.welcome-title-v2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #1e293b) !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.welcome-subtitle-v2 {
    text-align: center;
    font-size: 16px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
    font-weight: 400;
}

.welcome-cards-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-card-v2 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.welcome-card-v2:hover {
    border-color: #818cf8;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.wc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 20px;
    flex-shrink: 0;
}

/* ---- Welcome Card Color Themes (gradient icons) ---- */
.wc-blue .wc-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}
.wc-blue:hover { border-color: #3b82f6; box-shadow: 0 3px 16px rgba(59, 130, 246, 0.12); }

.wc-teal .wc-icon {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    box-shadow: 0 3px 10px rgba(20, 184, 166, 0.3);
}
.wc-teal:hover { border-color: #14b8a6; box-shadow: 0 3px 16px rgba(20, 184, 166, 0.12); }

.wc-amber .wc-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}
.wc-amber:hover { border-color: #f59e0b; box-shadow: 0 3px 16px rgba(245, 158, 11, 0.12); }

.wc-green .wc-icon {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}
.wc-green:hover { border-color: #22c55e; box-shadow: 0 3px 16px rgba(34, 197, 94, 0.12); }

.wc-purple .wc-icon {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 3px 10px rgba(168, 85, 247, 0.3);
}
.wc-purple:hover { border-color: #a855f7; box-shadow: 0 3px 16px rgba(168, 85, 247, 0.12); }

.wc-rose .wc-icon {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    box-shadow: 0 3px 10px rgba(244, 63, 94, 0.3);
}
.wc-rose:hover { border-color: #f43f5e; box-shadow: 0 3px 16px rgba(244, 63, 94, 0.12); }

.wc-text {
    flex: 1;
    min-width: 0;
}

.wc-label {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.wc-desc {
    font-size: 14.5px;
    font-weight: 450;
    color: #475569;
    line-height: 1.4;
}

.wc-arrow {
    color: #cbd5e1;
    font-size: 16px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.welcome-card-v2:hover .wc-arrow {
    color: #4f46e5;
}

.welcome-hint-v2 {
    text-align: center;
    font-size: 14px;
    color: #94a3b8;
    margin-top: 20px;
    padding: 0;
}

@media (max-width: 640px) {
    .welcome-banner-v2 {
        padding: 4px 0 4px;
    }

    .welcome-title-v2 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
        padding: 0 8px;
    }

    .welcome-subtitle-v2 {
        font-size: 13px;
        margin-bottom: 8px;
        padding: 0 12px;
    }

    .welcome-card-v2 {
        padding: 12px 14px;
    }

    .wc-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .wc-label {
        font-size: 14px;
    }

    .wc-desc {
        font-size: 12px;
    }
}

/* ============================================
   FIND A LENDER — INLINE LEAD FORM
   ============================================ */

.lender-form-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12px 16px 40px;
}

.lender-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    text-align: center;
}

.lf-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 16px;
}

.lf-icon-success {
    background: linear-gradient(135deg, #059669, #10b981);
}

.lf-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f2942;
    margin: 0 0 8px;
}

.lf-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}

.lf-form {
    text-align: left;
}

.lf-field {
    margin-bottom: 20px;
}

.lf-field label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.lf-req {
    color: #ef4444;
}

.lf-opt {
    font-weight: 400;
    color: #94a3b8;
    font-size: 14px;
}

.lf-field input {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 18px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.lf-field input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    background: #fff;
}

.lf-field input::placeholder {
    color: #94a3b8;
    font-size: 16px;
}

.lf-select {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 18px;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.lf-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    background-color: #fff;
}

[data-theme="dark"] .lf-select {
    background-color: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

[data-theme="dark"] .lf-select:focus {
    border-color: #3b82f6;
    background-color: #1e293b;
}

.lf-submit {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    transition: transform 0.15s, box-shadow 0.2s;
}

.lf-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}

.lf-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.lf-back-btn {
    margin-top: 20px;
    background: linear-gradient(135deg, #475569, #64748b);
    color: #fff !important;
}

.lf-disclaimer {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin: 16px 0 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.lf-disclaimer i {
    color: #10b981;
    font-size: 14px;
}

.lf-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.lf-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.lf-trust-item i {
    font-size: 13px;
    color: #10b981;
}

.lf-trust-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.lf-trust-links a {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: none;
}

.lf-trust-links a:hover {
    color: #3b82f6;
    text-decoration: underline;
}

[data-theme="dark"] .lf-disclaimer {
    color: #94a3b8;
}

[data-theme="dark"] .lf-trust-strip {
    border-top-color: #334155;
}

[data-theme="dark"] .lf-trust-item { color: #94a3b8; }
[data-theme="dark"] .lf-trust-item i { color: #10b981; }
[data-theme="dark"] .lf-trust-links a { color: #94a3b8; }

.lf-success .lf-subtitle {
    margin-bottom: 0;
}

/* Dark mode */
[data-theme="dark"] .lender-form-card {
    background: #1e293b;
    border: 1px solid #334155;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] .lf-title {
    color: #f1f5f9;
}

[data-theme="dark"] .lf-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .lf-field label {
    color: #e2e8f0;
}

[data-theme="dark"] .lf-field input {
    background: #0f172a;
    border-color: #475569;
    color: #f1f5f9;
}

[data-theme="dark"] .lf-field input:focus {
    border-color: #3b82f6;
    background: #1e293b;
}

[data-theme="dark"] .lf-field input::placeholder {
    color: #475569;
}

@media (max-width: 640px) {
    .lender-form-wrap {
        padding: 12px 8px 30px;
    }

    .lender-form-card {
        padding: 28px 20px;
    }

    .lf-title {
        font-size: 19px;
    }

    .lf-subtitle {
        font-size: 14px;
    }

    .lf-field input {
        padding: 14px 16px;
        font-size: 17px;
    }

    .lf-submit {
        padding: 16px 20px;
        font-size: 17px;
    }
}

/* ============================================
   POWERED BY - SUBTLE
   ============================================ */

.powered-by {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    text-align: center !important;
    padding: 16px !important;
    background: transparent !important;
    border: none !important;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    .welcome-banner {
        padding: 32px 24px !important;
    }
    
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    h1,
    .welcome-title {
        font-size: 28px !important;
    }
    
    .welcome-subtitle {
        font-size: 16px !important;
    }
}

/* ============================================
   FOCUS STATES - ACCESSIBILITY
   ============================================ */

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--trust-blue) !important;
    outline-offset: 2px !important;
}

/* ============================================
   NO ANIMATIONS - FAST & PROFESSIONAL
   ============================================ */

* {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0.15s !important; /* Keep only instant transitions */
}

/* Exception: Allow essential transitions */
button,
a,
input,
.sidebar-item {
    transition-duration: 0.15s !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .sidebar,
    .input-area,
    header,
    .powered-by {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}

/* ============================================
   TRUST FOOTER
   ============================================ */

/* Trust footer — editorial palette. Cream paper-2 surface, ink-soft
   text, brand-blue link hover with orange underline (mirrors the
   funnel site-footer treatment). The whole strip used to be dark
   navy, which clashed with the cream main content above it. */
.trust-footer {
    background: var(--paper-2);
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding: 40px 24px 24px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 40px;
}

.trust-footer-inner {
    max-width: 960px;
    margin: 0 auto;
}

.trust-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 24px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.trust-badge i {
    font-size: 18px;
    color: var(--brand-blue);
}

/* `.badge-green` / `.badge-gold` kept semantic — security/SSL icons
   universally read as green = trusted, gold = premium. The base
   `.trust-badge i` color shifts to brand-blue for unclassified badges
   (e.g. Bank-Level Security, Freddie Mac Rates). */
.trust-badge.badge-green i { color: #10b981; }
.trust-badge.badge-gold i { color: var(--brand-orange); }

.trust-footer-disclaimer {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 20px;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.trust-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.trust-footer-links a {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.trust-footer-links a:hover {
    color: var(--brand-blue-deep);
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.trust-footer-copy {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--ink-soft);
}

.trust-eho {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.trust-eho svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

[data-theme="dark"] .trust-footer {
    background: #11192a;
    color: #b8c4d6;
    border-top-color: rgba(126, 196, 245, 0.18);
}

[data-theme="dark"] .trust-badge { color: #cdd4e0; }
[data-theme="dark"] .trust-badge i { color: #7ec4f5; }

[data-theme="dark"] .trust-badges {
    border-bottom-color: rgba(126, 196, 245, 0.18);
}

[data-theme="dark"] .trust-footer-disclaimer,
[data-theme="dark"] .trust-footer-copy,
[data-theme="dark"] .trust-eho { color: #b8c4d6; }

[data-theme="dark"] .trust-footer-links {
    border-top-color: rgba(126, 196, 245, 0.18);
}

[data-theme="dark"] .trust-footer-links a { color: #7ec4f5; }
[data-theme="dark"] .trust-footer-links a:hover { color: #cfe6fa; }

@media (max-width: 600px) {
    .trust-badges {
        gap: 16px;
    }
    .trust-badge {
        font-size: 12px;
    }
    .trust-footer {
        padding: 28px 16px 16px;
    }
}

/* ============================================
   END - PROFESSIONAL & TRUSTWORTHY DESIGN
   ============================================ */

/* ===== style-polish.css ===== */
/* ===== LOANSPACE.AI - FINAL POLISH TO 9/10 ===== */
/* Chat-first layout + professional refinements */
/* Load this LAST, after all other CSS files */

/* ============================================
   CHAT-FIRST LAYOUT - HERO ELEMENT
   ============================================ */

/* Main container - prioritize chat */
.main-container {
    display: flex !important;
    flex-direction: column !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px !important;
}

/* Welcome banner - more prominent now that chat is hidden */
.welcome-banner {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 48px 32px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.05) !important;
}

/* Hide welcome banner after first message - must use !important to override tablet rules */
.welcome-banner.hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Hero text - more compact */
.welcome-hero {
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
}

/* Headline - stronger, bolder */
.welcome-title,
h1 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
}

/* Subtitle - darker, more readable */
.welcome-subtitle {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    line-height: 1.5 !important;
}

/* Features grid - more compact */
.features-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
}

/* Feature cards - refined and interactive */
.feature-card-modern,
.feature-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.feature-card-modern:hover,
.feature-card:hover {
    border-color: #2563eb !important;
    box-shadow: 0 4px 12px 0 rgb(37 99 235 / 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Icons - larger, more presence */
.feature-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.feature-icon {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px 0 rgb(37 99 235 / 0.1) !important;
}

.feature-icon i {
    font-size: 28px !important;
    color: #2563eb !important;
}

/* Feature text - clear hierarchy */
.feature-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    text-align: center !important;
}

.feature-description {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

/* Remove emoji arrow from CTA */
.welcome-cta,
.cta-text {
    display: none !important;
}

/* ============================================
   CHAT BOX - CLEAN & EFFICIENT
   ============================================ */

/* Chat container - blends into background, no box */
#chatbox,
.chat-container,
.chat-area {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 24px 0 !important;
    box-shadow: none !important;
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Hide empty chatbox completely */
#chatbox:empty {
    display: none !important;
}

/* Main content area - no box, just background */
.main-content,
.chat-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Chat messages - clean and minimal, no boxes */
.message {
    margin-bottom: 24px !important;
    animation: fadeIn 0.3s ease !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Force remove all boxes, backgrounds, borders from messages */
.message-content,
.message .message-content,
.message.user .message-content,
.message.assistant .message-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
}

/* User messages - dark text, visible - ULTRA NUCLEAR OVERRIDE */
.message.user,
.message.human {
    display: flex !important;
    justify-content: flex-start !important;
}

.message.user .message-content,
.message.human .message-content {
    color: #0f172a !important;
    font-weight: 500 !important;
    background: transparent !important;
}

/* Force all nested elements in user messages to be dark - beat base CSS */
.message.user .message-content *,
.message.user .message-content,
.message.user .message-content p,
.message.user .message-content div,
.message.user .message-content span,
.message.user .message-content strong,
.message.user .message-content em,
.message.human .message-content *,
.message.human .message-content,
.message.human .message-content p,
.message.human .message-content div,
.message.human .message-content span,
.message.human .message-content strong,
.message.human .message-content em,
.message.human .message-content a {
    color: #0f172a !important;
    background: transparent !important;
}

/* In case there's an inline style setting it to white */
.message.user[style],
.message.user .message-content[style],
.message.user .message-content *[style],
.message.human[style],
.message.human .message-content[style],
.message.human .message-content *[style] {
    color: #0f172a !important;
}

/* Assistant messages - no label needed, you already have username */
.message.assistant {
    display: flex !important;
    justify-content: flex-start !important;
}

.message.assistant .message-content {
    color: #334155 !important;
    font-weight: 400 !important;
}

.message.assistant .message-content * {
    color: #334155 !important;
}

/* Remove any nested elements that might have boxes */
.message-content p,
.message-content div,
.message-content span {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ============================================
   INPUT AREA - PROMINENT & INVITING
   ============================================ */

.input-area {
    background: #ffffff !important;
    border-top: 2px solid #e2e8f0 !important;
    padding: 24px !important;
    box-shadow: 0 -4px 12px 0 rgb(0 0 0 / 0.05) !important;
}

/* Input wrapper */
.input-wrapper {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Text input - larger and more prominent */
#userInput {
    flex: 1 !important;
    background: #f8fafc !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#userInput:focus {
    outline: none !important;
    border-color: #2563eb !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1) !important;
}

#userInput::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Send button - modern pill with gradient */
#sendButton {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 26px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.2px !important;
}

#sendButton span {
    display: inline !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

#sendButton:hover:not(:disabled) {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
}

#sendButton:active:not(:disabled) {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

#sendButton:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Secondary buttons (upload, voice, dark mode toggle) - modern pill style */
.upload-button,
#speechButton,
#darkModeToggle {
    background: #f0f4ff !important;
    border: 1.5px solid #c7d7fd !important;
    border-radius: 50px !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Override fixed positioning from base styles */
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none !important;
    z-index: auto !important;
    font-size: 16px !important;
    color: #3b82f6 !important;
}

.upload-button:hover,
#speechButton:hover,
#darkModeToggle:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
}

.upload-button.has-document {
    background: #dbeafe !important;
    border-color: #3b82f6 !important;
}

/* Mic button - active/recording state */
#speechButton.recording {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
}

#speechButton.recording:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

/* ============================================
   SIDEBAR - REFINED
   ============================================ */

.sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Rate widget - cleaner */
.rate-widget {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 12px !important;
}

.rate-widget-header {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
}

.rate-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
}

.rate-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.rate-value {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* Sidebar items - refined */
.sidebar-item,
.sidebar-item-link {
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.sidebar-item:hover:not(.active),
.sidebar-item-link:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.sidebar-item.active {
    background: #2563eb !important;
    color: white !important;
    box-shadow: 0 2px 8px 0 rgb(37 99 235 / 0.25) !important;
}

/* ============================================
   HEADER - REFINED
   ============================================ */

header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 24px !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05) !important;
}

header img.logo {
    height: 60px !important;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.05)) !important;
}

/* ============================================
   LOADING STATES - REFINED
   ============================================ */

.thinking,
.loading {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.spinner {
    border: 3px solid #e2e8f0 !important;
    border-top-color: #2563eb !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    animation: spinAnimation 0.8s linear infinite !important;
}

@keyframes spinAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   MOBILE + TABLET OPTIMIZATIONS (No Sidebar)
   ============================================ */

@media (max-width: 1024px) {
    /* Force full width - override everything */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hide sidebar by default on mobile and tablet */
    .sidebar {
        display: flex !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Show sidebar when opened via hamburger */
    .sidebar.open {
        transform: translateX(0) !important;
    }
    
    /* Tighten up sidebar spacing on mobile/tablet */
    .sidebar {
        width: 240px !important;
    }
    
    .sidebar-section {
        padding: 8px 8px 16px 8px !important;
    }
    
    .sidebar-section-title {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
    
    .sidebar-item,
    .sidebar-item-link {
        padding: 8px 10px !important;
        font-size: 13px !important;
        gap: 10px !important;
        margin-bottom: 2px !important;
    }
    
    .sidebar-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 16px !important;
    }
    
    .sidebar-footer {
        padding: 12px 8px !important;
    }
    
    .user-profile {
        padding: 8px 10px !important;
    }
    
    .user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    .user-name {
        font-size: 13px !important;
    }
    
    .user-status {
        font-size: 11px !important;
    }
    
    .rate-widget {
        margin: 8px 8px 0 8px !important;
        padding: 10px 12px !important;
    }
    
    .rate-widget-header {
        font-size: 10px !important;
        margin-bottom: 8px !important;
    }
    
    .rate-row {
        padding: 4px 0 !important;
    }
    
    .rate-label {
        font-size: 12px !important;
    }
    
    .rate-value {
        font-size: 14px !important;
    }
    
    .rate-widget-footer {
        font-size: 9px !important;
        margin-top: 8px !important;
        padding-top: 6px !important;
    }
    
    .chat-history-container {
        padding: 0 8px !important;
    }
    
    .chat-history-container li {
        padding: 10px 12px !important;
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    /* Login/Register links - prevent from sticking to bottom */
    .sidebar-footer {
        margin-top: 20px !important; /* Override margin-top: auto */
        position: relative !important;
        padding: 12px 8px !important;
    }
    
    /* User profile - if exists, add spacing */
    .user-profile {
        margin-bottom: 12px !important;
        padding: 8px 10px !important;
    }
    
    /* Remove flex auto spacing on sidebar to prevent bottom sticking */
    .sidebar {
        justify-content: flex-start !important;
    }
    
    /* Show mobile header with hamburger on mobile and tablet */
    .mobile-header {
        display: flex !important;
    }
    
    /* Show sidebar overlay on mobile and tablet */
    .sidebar-overlay {
        display: block !important;
    }
    
    /* Main container - full width (no sidebar offset) */
    .main-container,
    .main-content {
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .chat-container {
        padding: 0 16px !important;
        margin: 12px auto !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Welcome banner - comfortable padding */
    .welcome-banner {
        padding: 16px !important;
        margin: 0 16px 12px 16px !important;
        border-radius: 12px !important;
        max-width: calc(100% - 32px) !important;
        width: calc(100% - 32px) !important;
        box-sizing: border-box !important;
    }
    
    .welcome-hero {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    .welcome-title,
    h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
    }
    
    .welcome-subtitle {
        font-size: 15px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* FORCE HIDE feature cards - multiple selectors */
    .features-grid,
    .feature-cards,
    .feature-card-modern,
    .feature-card {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Hide the "Ask me anything" CTA text */
    .welcome-cta,
    .cta-text {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Chat area - comfortable padding */
    #chatbox,
    .chat-area {
        padding: 12px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Input area - comfortable side padding */
    .input-area {
        padding: 12px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .input-wrapper {
        gap: 8px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    #userInput {
        font-size: 16px !important;
        padding: 14px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #sendButton {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    /* Secondary buttons */
    .upload-button,
    #speechButton {
        padding: 14px !important;
    }
    
    /* Mobile header - comfortable padding */
    .mobile-header {
        padding: 12px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Rate widget in header */
    .mobile-rates {
        font-size: 10px !important;
    }
    
    /* Messages - comfortable margins */
    .message {
        max-width: 95% !important;
    }
    
    .message-content {
        padding: 14px 16px !important;
    }
}

/* Tablet specific (769px-1024px) - slightly larger text */
@media (min-width: 769px) and (max-width: 1024px) {
    .welcome-title,
    h1 {
        font-size: 28px !important;
    }
    
    .welcome-subtitle {
        font-size: 17px !important;
    }
    
    .chat-container {
        max-width: 700px !important;
        padding: 0 24px !important;
    }
    
    .welcome-banner {
        padding: 20px !important;
        margin: 0 24px 16px 24px !important;
        max-width: calc(100% - 48px) !important;
    }
    
    .input-area {
        padding: 16px 24px !important;
    }
}

/* Small mobile - still comfortable padding */
@media (max-width: 375px) {
    .welcome-title,
    h1 {
        font-size: 22px !important;
    }
    
    .welcome-subtitle {
        font-size: 14px !important;
    }
    
    .chat-container {
        padding: 0 14px !important;
    }
    
    .welcome-banner {
        margin: 0 14px 12px 14px !important;
        padding: 14px !important;
        max-width: calc(100% - 28px) !important;
        width: calc(100% - 28px) !important;
    }
    
    .input-area {
        padding: 12px 14px !important;
    }
    
    .mobile-header {
        padding: 12px 14px !important;
    }
}

/* ============================================
   ACCESSIBILITY - FOCUS STATES
   ============================================ */

button:focus-visible,
input:focus-visible,
a:focus-visible,
.sidebar-item:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* ============================================
   SCROLLBAR - REFINED
   ============================================ */

#chatbox::-webkit-scrollbar {
    width: 8px !important;
}

#chatbox::-webkit-scrollbar-track {
    background: #f8fafc !important;
    border-radius: 10px !important;
}

#chatbox::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

#chatbox::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* ============================================
   POWERED BY - SUBTLE
   ============================================ */

.powered-by {
    display: none !important;
}

/* Or if you want to keep it but make it better: */
/*
.powered-by {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-align: center !important;
    padding: 12px !important;
}
*/

/* ============================================
   FINAL TOUCHES
   ============================================ */

/* Remove any remaining visual clutter */
.hero-badge,
.ai-badge,
[class*="powered-badge"] {
    display: none !important;
}

/* Ensure consistent spacing */
* {
    margin: 0;
    padding: 0;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   END - 9/10 DESIGN
   ============================================ */

/*
 * CHANGES MADE FOR 9/10:
 * 
 * 1. Chat is now the hero - prominent, inviting, front-and-center
 * 2. Stronger typography - bolder headlines, better contrast
 * 3. Larger icons with better styling
 * 4. Improved hover states - clear feedback
 * 5. Removed emoji arrow from CTA
 * 6. Better input area - more prominent, inviting
 * 7. Refined cards - better shadows, smoother interactions
 * 8. Cleaner sidebar - refined spacing and colors
 * 9. Professional throughout - no gimmicks, just clarity
 * 10. Optimized for conversion - chat is the focus
 */

/* ===== chat-scrollable.css ===== */
/* ===== LOANSPACE.AI - CHAT PAGE LAYOUT (viewport-locked) =====
   Single flex-column model used at every breakpoint. The chat page is
   locked to the viewport (100dvh) so only #chatbox scrolls — the
   mobile-header (when fixed) and input-area never move with the page.

   All structural rules are scoped to body.chat-page so other pages
   (calculators, blog, etc.) keep their natural body-scroll behavior. */

/* ============================================
   VIEWPORT-LOCK THE CHAT PAGE
   ============================================ */

/* !important is used throughout this file because legacy rules in
   style-sidebar.css and mobile-fixes.css set the same properties with
   !important. Until those are cleaned up, this is how the new layout wins. */

body.chat-page {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    /* mobile-fixes.css blanket-applies `padding: 70px 0 170px` to body
       on tablet (768-1024px) to clear its fixed header / leave room for
       a fixed bottom bar. The chat page handles those concerns inside
       its own flex stack (.main-content padding-top + .input-area
       position:fixed), so the body padding is pure dead space — that's
       what was pushing the welcome cards / first message far below the
       header. Zero it out here. */
    padding: 0 !important;
}

body.chat-page .main-content {
    height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* ============================================
   CHAT CONTAINER — FLEX COLUMN, FILLS MAIN
   ============================================ */

body.chat-page .chat-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 900px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    overflow: hidden !important;
}

/* ============================================
   #CHATBOX — THE ONLY SCROLL AREA
   ============================================ */

body.chat-page #chatbox {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#chatbox::-webkit-scrollbar {
    width: 8px;
}

#chatbox::-webkit-scrollbar-track {
    background: transparent;
}

#chatbox::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

#chatbox::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Welcome banner lives inside #chatbox in the DOM, so it scrolls with the
   chat surface — no separate overflow region needed. The banner sits at the
   top until first interaction, then is hidden via display:none. */

/* ============================================
   INPUT AREA — STATIC, NEVER SCROLLS
   ============================================ */

body.chat-page .input-area {
    flex-shrink: 0 !important;
    position: static !important;
    background: var(--bg-main, #f8fafc) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
}

body.chat-page .powered-by {
    flex-shrink: 0 !important;
}

/* ============================================
   INPUT AUTO-RESIZE
   ============================================ */

#userInput,
#input {
    min-height: 56px;
    max-height: 180px;
    resize: none;
    overflow-y: auto;
    transition: height 0.2s ease;
}

/* ============================================
   MESSAGE ANIMATIONS
   ============================================ */

.message {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: messageSlide 0.4s ease;
    will-change: transform, opacity;
}

@keyframes messageSlide {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   THINKING INDICATOR
   ============================================ */

.thinking {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    color: #64748b;
    max-width: 200px;
    align-self: flex-start;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.thinking .spinner {
    flex-shrink: 0;
}

/* ============================================
   MOBILE — CLEAR FIXED MOBILE-HEADER
   The mobile-header is position:fixed on small viewports
   (set in style-sidebar.css / mobile-fixes.css for all pages).
   Push the chat content below it.
   ============================================ */

@media (max-width: 767px) {
    /* Match the mobile-header's intrinsic height exactly so the chat surface
       butts up against it with no dead band. After the editorial-sidebar.css
       compaction the header is:
         env(safe-area-inset-top) [top padding, no floor — see below]
         + 32px [logo]
         + 4px  [bottom padding]
         + 1px  [border-bottom]
         = env(safe-area-inset-top) + 37px

       No floor on the safe-area inset because on iOS Safari with the URL
       bar at the top, the inset is already covered by the URL bar and
       any non-zero floor produces a visible cream gap above the logo.
       When the URL bar collapses on scroll, the inset value updates and
       the header naturally expands. */
    body.chat-page .main-content {
        padding-top: calc(env(safe-area-inset-top) + 37px) !important;
    }

    body.chat-page .chat-container {
        padding: 0 12px !important;
    }

    body.chat-page #chatbox {
        gap: 16px !important;
        padding: 0 !important;
    }

    /* Override style-professional.css mobile padding on the welcome banner —
       it's now inside chatbox, so chatbox padding alone is the spacing budget. */
    body.chat-page .welcome-banner-v2 {
        padding: 0 !important;
        margin-top: 0 !important;
    }

    body.chat-page .welcome-banner-v2 > :first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.chat-page .input-area {
        /* Pad bottom by the device safe-area (home indicator) inset
           ONLY — drop the 12px floor so non-home-indicator devices
           get a tight 4px instead. Home-indicator iPhones still get
           the system inset (~34px) which is what they need. */
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================
   TABLET — FIXED INPUT BAR + SCROLLABLE CHATBOX
   On tablets the mobile-header is forced to `position: fixed`
   by mobile-fixes.css. iOS Safari's `100dvh` can also lag when
   the URL bar transitions, and the bottom toolbar overlays
   ~60-80px even though env(safe-area-inset-bottom) often
   reports 0. Robust fix: position the input area fixed and
   floated 70px above the viewport bottom so it sits ABOVE
   Safari's toolbar regardless of inset reporting. The chatbox
   has matching bottom padding so content doesn't hide under it.
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    body.chat-page .chat-container {
        padding: 0 16px !important;
    }

    /* Push main-content content below the fixed mobile-header. Use the
       same formula the header itself uses for its intrinsic height
       (env(safe-area-inset-top) + 32px logo + 4px bottom pad + 1px
       border ≈ env() + 37px) so the chat surface butts right up to the
       header with no dead band. The earlier static 70px assumed the
       max collapsed-URL-bar state, which left a visible cream gap above
       the welcome banner when the URL bar was on screen. */
    body.chat-page .main-content {
        padding-top: calc(env(safe-area-inset-top) + 37px) !important;
        padding-bottom: 0 !important;
    }

    /* mobile-fixes.css forces .input-area { min-height: 150px } on
       tablet, which bloats the editorial iMessage-style composer (the
       absolute-positioned buttons end up centered on a 150px-tall box,
       so they appear BELOW the textarea pill instead of inside it).
       Override back to a tight, content-sized bar; the textarea's own
       min-height (44px) + .input-area padding (6px x2) give ~56px. */
    body.chat-page .input-area {
        min-height: 0 !important;
        /* iPad shelf — 40px clears the screen edge with a comfortable
           gap. env(safe-area-inset-bottom) still wins if a larger
           inset is ever reported (future home-indicator iPads). */
        padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
    }

    /* Android Capacitor extends the webview BEHIND the persistent
       taskbar (the dock-style bar with recent-apps icons on Samsung
       tablets) AND the gesture/nav bar. env(safe-area-inset-bottom)
       reports 0 in that mode, so we need an explicit larger shelf
       — taskbar ≈ 64px, plus ~26px breathing room above it.
       Apply the shelf as bottom padding on .main-content (not on
       .input-area) so the input-area itself stays compact. Otherwise
       the absolute-positioned button-group inside .input-area (which
       centers on top: 50%) ends up BELOW the textarea pill when the
       container grows. */
    html.platform-android body.chat-page .main-content {
        padding-bottom: 90px !important;
    }

    /* No fixed-position input bar anymore — chat-editorial.css's
       `position: relative` wins by source order, so the input sits at
       the natural bottom of the flex column. Reserve only a small
       bottom padding inside #chatbox so the last message doesn't kiss
       the input border. */
    body.chat-page #chatbox {
        padding-bottom: 16px !important;
        justify-content: flex-start !important;
    }

    /* Top-anchor the welcome banner so the eyebrow + headline sit
       just below the fixed header, with cards stacked beneath. */
    body.chat-page .welcome-banner-v2 {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    /* The .powered-by sat below .input-area in flow — with input now
       fixed, hide the footer on tablet to avoid an orphaned strip. */
    body.chat-page .powered-by {
        display: none !important;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

#userInput:disabled,
#input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#sendButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Add padding to message content so text doesn't kiss the scrollbar */
.message-content {
    padding-right: 8px;
}

/* ============================================
   ERROR MESSAGES
   ============================================ */

.message.error {
    max-width: 80%;
    align-self: flex-start;
}

.message.error .message-content {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

#chatbox:focus-visible {
    outline: 2px solid var(--accent-blue, #2563eb);
    outline-offset: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===== dark-mode.css ===== */
/* ===== LOANSPACE.AI - DARK MODE ===== */
/* Add this AFTER all your other CSS files */
/* Toggle with: document.documentElement.setAttribute('data-theme', 'dark') */

/* ============================================
   DARK MODE COLOR PALETTE
   ============================================ */

[data-theme="dark"] {
    /* Primary Brand - Slightly brighter for dark backgrounds */
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-light: #1e293b;
    
    /* Secondary - Lighter navy */
    --color-secondary: #3b5a7f;
    --color-secondary-hover: #4a6a8f;
    
    /* Accent - Brighter orange */
    --color-accent: #fb923c;
    --color-accent-hover: #fdba74;
    
    /* Text Hierarchy - Inverted */
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
    --color-text-muted: #64748b;
    
    /* Backgrounds - Dark grays */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-hover: #334155;
    
    /* Borders - Subtle in dark mode */
    --color-border-primary: #334155;
    --color-border-secondary: #475569;
    --color-border-hover: var(--color-primary);
    
    /* Shadows - Lighter/softer for dark mode */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    --shadow-primary: 0 1px 3px 0 rgb(59 130 246 / 0.5);
}

/* ============================================
   REFINANCE CALCULATOR DARK MODE
   ============================================ */

[data-theme="dark"] {
    /* Refinance calculator variables */
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --accent: #3b82f6;
    --accent-light: #60a5fa;
    --accent-soft: #1e3a5f;
    --orange: #fb923c;
    --success: #10b981;
    --success-light: #064e3b;
    --warning: #f59e0b;
    --warning-light: #78350f;
    --danger: #ef4444;
    --bg-main: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #334155;
    --border-dark: #475569;
}

/* ============================================
   BODY & MAIN CONTAINERS
   ============================================ */

[data-theme="dark"] body {
    background: #000000 !important;
    color: var(--color-text-primary);
}

/* data-theme is applied to <html> itself, so we must target html directly.
   The previous selector `[data-theme="dark"] html` was a no-op — it would
   only match an html descended from a data-themed element, which can't
   exist. This fix prevents iOS rubber-band overscroll from revealing
   browser-default white in dark mode. */
html[data-theme="dark"] {
    background: #000000 !important;
}

[data-theme="dark"] .main-container,
[data-theme="dark"] .page-container,
[data-theme="dark"] .app-container,
[data-theme="dark"] main,
[data-theme="dark"] .content,
[data-theme="dark"] .main-content {
    background: #000000 !important;
}

[data-theme="dark"] #chatbox,
[data-theme="dark"] .chat-container,
[data-theme="dark"] .main-chat,
[data-theme="dark"] .chat-area {
    background: #000000 !important;
    background-image: none !important;
}

/* Hero section if you have one */
[data-theme="dark"] .hero,
[data-theme="dark"] .hero-section {
    background: transparent !important;
}

/* ============================================
   SIDEBAR
   ============================================ */

[data-theme="dark"] .sidebar {
    background: #000000 !important;
    border-right: 1px solid #1e293b !important;
}

[data-theme="dark"] .sidebar-logo {
    content: url("/static/loanspace.ai-logo-dark.png") !important;
    width: 100% !important;
    height: auto !important;
}

[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .sidebar-item-link {
    color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .sidebar-item:hover:not(.active),
[data-theme="dark"] .sidebar-item-link:hover {
    background: #1a1a1a !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .sidebar-section-title {
    color: var(--color-text-muted) !important;
}

[data-theme="dark"] .sidebar-footer {
    border-top: 1px solid #1e293b !important;
}

[data-theme="dark"] .user-profile {
    background: #111111 !important;
}

[data-theme="dark"] .chat-history-container li {
    background: #111111 !important;
    border-color: #222222 !important;
}

/* ============================================
   RATE WIDGET
   ============================================ */

[data-theme="dark"] .rate-widget {
    background: #111111 !important;
    border: 1px solid #222222 !important;
}

[data-theme="dark"] .rate-widget-header,
[data-theme="dark"] .rate-label,
[data-theme="dark"] .rate-value {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .rate-widget-footer {
    color: var(--color-text-tertiary) !important;
}

/* Mobile header rates */
[data-theme="dark"] .mobile-rate-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .mobile-rate-value {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .mobile-rate-divider {
    color: #475569 !important;
}

/* Mobile hamburger menu lines */
[data-theme="dark"] .mobile-menu-btn span {
    background: #f1f5f9 !important;
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

[data-theme="dark"] .feature-card,
[data-theme="dark"] .starter-card,
[data-theme="dark"] .card,
[data-theme="dark"] .calculator-card,
[data-theme="dark"] .slider-section,
[data-theme="dark"] .analysis-section {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .starter-card:hover,
[data-theme="dark"] .card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 6px -1px rgb(59 130 246 / 0.3) !important;
}

/* ============================================
   MESSAGES
   ============================================ */

/* Message container itself */
[data-theme="dark"] .message,
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.bot {
    background: transparent !important;
}

/* Assistant Messages - NO BUBBLE, just white text on black */
[data-theme="dark"] .message.assistant .message-content,
[data-theme="dark"] .message.bot .message-content,
[data-theme="dark"] .assistant-message .message-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Assistant message text - bright white for all elements */
[data-theme="dark"] .message.assistant .message-content *,
[data-theme="dark"] .message.bot .message-content * {
    color: #ffffff !important;
}

/* Specific text elements in assistant messages */
[data-theme="dark"] .message.assistant .message-content p,
[data-theme="dark"] .message.assistant .message-content div,
[data-theme="dark"] .message.assistant .message-content span,
[data-theme="dark"] .message.assistant .message-content li {
    color: #ffffff !important;
}

/* Headers in assistant messages */
[data-theme="dark"] .message.assistant .message-content h1,
[data-theme="dark"] .message.assistant .message-content h2,
[data-theme="dark"] .message.assistant .message-content h3,
[data-theme="dark"] .message.assistant .message-content h4 {
    color: #ffffff !important;
}

/* User Messages - keep the blue bubble with WHITE TEXT */
[data-theme="dark"] .message.user .message-content {
    background: var(--color-primary) !important;
    color: #ffffff !important;
}

/* User message text - ensure ALL text is white */
[data-theme="dark"] .message.user .message-content *,
[data-theme="dark"] .message.user .message-content p,
[data-theme="dark"] .message.user .message-content div,
[data-theme="dark"] .message.user .message-content span {
    color: #ffffff !important;
}

/* Username/Sender Label - WHITE for both user and assistant */
[data-theme="dark"] .message-sender,
[data-theme="dark"] .message-label,
[data-theme="dark"] .message-author,
[data-theme="dark"] .sender-name,
[data-theme="dark"] .message-username,
[data-theme="dark"] .username,
[data-theme="dark"] .message .username,
[data-theme="dark"] .message.user .username,
[data-theme="dark"] .message.assistant .username {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Message timestamp */
[data-theme="dark"] .message-time,
[data-theme="dark"] .timestamp {
    color: #94a3b8 !important;
}

/* Code blocks in messages */
[data-theme="dark"] .message-content pre {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .message-content code {
    background: var(--color-bg-tertiary) !important;
    color: #ffffff !important;
}

/* Inline code */
[data-theme="dark"] .message-content p code,
[data-theme="dark"] .message-content li code {
    background: var(--color-bg-tertiary) !important;
    color: #60a5fa !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Links in messages */
[data-theme="dark"] .message-content a {
    color: #60a5fa !important;
    text-decoration: underline !important;
}

[data-theme="dark"] .message-content a:hover {
    color: #93c5fd !important;
}

/* Strong/bold text */
[data-theme="dark"] .message-content strong,
[data-theme="dark"] .message-content b {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Emphasis/italic */
[data-theme="dark"] .message-content em,
[data-theme="dark"] .message-content i {
    color: #ffffff !important;
}

/* ============================================
   INPUTS & FORMS
   ============================================ */

[data-theme="dark"] #userInput,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] #userInput:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.2) !important;
}

[data-theme="dark"] #userInput::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted) !important;
}

/* ============================================
   INPUT AREA
   ============================================ */

[data-theme="dark"] .input-area {
    background: var(--color-bg-secondary) !important;
    border-top: 1px solid var(--color-border-primary) !important;
    box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.3) !important;
}

/* Dark mode button overrides */
[data-theme="dark"] .upload-button,
[data-theme="dark"] #speechButton,
[data-theme="dark"] #darkModeToggle {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(99, 149, 240, 0.35) !important;
    color: #93c5fd !important;
}

[data-theme="dark"] .upload-button:hover,
[data-theme="dark"] #speechButton:hover,
[data-theme="dark"] #darkModeToggle:hover {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: rgba(99, 149, 240, 0.6) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

[data-theme="dark"] .upload-button.has-document {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: #3b82f6 !important;
}

/* Dark mode recording state */
[data-theme="dark"] #speechButton.recording {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* ============================================
   HEADER
   ============================================ */

[data-theme="dark"] header {
    background: var(--color-bg-secondary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
}

/* ============================================
   ICONS
   ============================================ */

[data-theme="dark"] .feature-icon,
[data-theme="dark"] .starter-icon,
[data-theme="dark"] .icon-container,
[data-theme="dark"] .card-icon {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
}

[data-theme="dark"] .feature-icon i,
[data-theme="dark"] .starter-icon i {
    color: #60a5fa !important;
}

[data-theme="dark"] .card-icon.accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a5f 100%) !important;
    color: white !important;
}

/* ============================================
   THINKING/LOADING STATES
   ============================================ */

[data-theme="dark"] .thinking,
[data-theme="dark"] .loading {
    background: #1e3a5f !important;
    border: 1px solid #2d4a6f !important;
    color: var(--color-primary) !important;
}

/* ============================================
   ERROR/SUCCESS MESSAGES
   ============================================ */

[data-theme="dark"] .error,
[data-theme="dark"] .error-message,
[data-theme="dark"] .message.error .message-content {
    background: #7f1d1d !important;
    border: 1px solid #991b1b !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] .success {
    background: #064e3b !important;
    border: 1px solid #065f46 !important;
    color: #6ee7b7 !important;
}

/* ============================================
   WARNING BANNERS
   ============================================ */

/* Warning banners - support both class name formats (warning-high and high) */
[data-theme="dark"] .question-warning.low,
[data-theme="dark"] .question-warning.warning-low {
    background-color: #1e3a5f;
    border-left: 4px solid #3b82f6;
    color: #93c5fd;
}

[data-theme="dark"] .question-warning.medium,
[data-theme="dark"] .question-warning.warning-medium {
    background-color: #78350f;
    border-left: 4px solid #f59e0b;
    color: #fcd34d;
}

[data-theme="dark"] .question-warning.high,
[data-theme="dark"] .question-warning.warning-high {
    background-color: #7f1d1d;
    border-left: 4px solid #ef4444;
    color: #fca5a5;
}

[data-theme="dark"] .question-warning a {
    color: inherit;
}

/* ============================================
   LIMIT REACHED MODAL - DARK MODE
   ============================================ */

[data-theme="dark"] .limit-modal {
    background: rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .limit-modal-content {
    background: #1e293b;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .limit-modal h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .limit-modal p {
    color: #94a3b8;
}

[data-theme="dark"] .limit-modal-btn.secondary {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .limit-modal-btn.secondary:hover {
    background: #475569;
}

/* ============================================
   SCROLLBAR
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg-primary) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary) !important;
}

/* ============================================
   RESULT BOXES & STATS
   ============================================ */

[data-theme="dark"] .result-box {
    background: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .result-box.accent {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
}

[data-theme="dark"] .stat-card {
    background: var(--color-bg-tertiary) !important;
}

/* ============================================
   VERDICT BOXES
   ============================================ */

[data-theme="dark"] .verdict-box.positive {
    background: #064e3b !important;
    border-color: #065f46 !important;
}

[data-theme="dark"] .verdict-box.positive .verdict-title {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .verdict-box.positive .verdict-text {
    color: #86efac !important;
}

[data-theme="dark"] .verdict-box.negative {
    background: #78350f !important;
    border-color: #92400e !important;
}

[data-theme="dark"] .verdict-box.negative .verdict-title {
    color: #fcd34d !important;
}

[data-theme="dark"] .verdict-box.negative .verdict-text {
    color: #fde68a !important;
}

/* ============================================
   TIPS & INFO BOXES
   ============================================ */

[data-theme="dark"] .tips-box,
[data-theme="dark"] .info-card {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

/* ============================================
   CLOSING COSTS PAGE
   ============================================ */

[data-theme="dark"] .closing-costs-page,
[data-theme="dark"] .refinance-page {
    background: var(--color-bg-primary);
}

[data-theme="dark"] .calculator-container {
    background: transparent;
    /* No outer border — the child .calculator-card cards already have their
       own borders, so framing the whole container creates visible vertical
       lines in the gap between cards. */
    border: none;
}

[data-theme="dark"] .summary-card {
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border-primary);
}

[data-theme="dark"] .summary-card.highlight {
    background: #78350f;
    border-color: #92400e;
}

[data-theme="dark"] .breakdown-category {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
}

/* ============================================
   NOTES SECTION
   ============================================ */

[data-theme="dark"] .notes-section {
    background: #1e3a5f !important;
    border: 1px solid #2d4a6f !important;
}

[data-theme="dark"] .notes-section h4 {
    color: #93c5fd !important;
}

[data-theme="dark"] .notes-section li {
    color: #bfdbfe !important;
}

/* ============================================
   SLIDER (RANGE INPUT)
   ============================================ */

[data-theme="dark"] .stay-slider {
    /* slate-400 — clearly visible against the card bg (#1e293b). Previous
       #475569 was still too subtle, #334155 was nearly invisible. */
    background: #94a3b8 !important;
}

/* The .timeline-track element has a WebKit rendering quirk on iOS where its
   background won't paint (confirmed via getComputedStyle showing the correct
   color but no visible paint). Workaround: draw the visible track line using
   a pseudo-element on the parent .timeline instead. */
[data-theme="dark"] .timeline {
    position: relative !important;
}
[data-theme="dark"] .timeline::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 10px;
    background: #cbd5e1;
    border-radius: 5px;
    z-index: 0;
    pointer-events: none;
}

/* Keep the real .timeline-track transparent and non-interactive since the
   pseudo-element is providing the visual. */
[data-theme="dark"] .timeline-track {
    background: transparent !important;
}

/* Slider thumb ring in dark mode — ensures the accent-colored handle
   stands out clearly against the now-lighter track. */
[data-theme="dark"] .stay-slider::-webkit-slider-thumb {
    background: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .stay-slider::-moz-range-thumb {
    background: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Refinance calculator timeline — break-even marker in dark mode.
   Same WebKit paint bug as .timeline-track — background: won't render on
   .marker-line. Workaround: hide the real .marker-line and draw the vertical
   marker bar using a pseudo-element on the parent .timeline-marker. */
[data-theme="dark"] .marker-line {
    background: transparent !important;
    width: 0 !important;
}
[data-theme="dark"] .timeline-marker::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 56px;
    background: #f97316;
    border-radius: 2px;
    z-index: 2;
    pointer-events: none;
}
[data-theme="dark"] .marker-label {
    color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.12) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    display: inline-block !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

/* ============================================
   CONTACT FORM IN CTA
   ============================================ */

[data-theme="dark"] .contact-form input {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .form-buttons .btn-secondary {
    background: var(--color-bg-tertiary) !important;
}

/* ============================================
   SUCCESS MESSAGE
   ============================================ */

[data-theme="dark"] .success-message {
    background: #064e3b !important;
    border: 1px solid #065f46 !important;
}

[data-theme="dark"] .success-message h3 {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .success-message p {
    color: #86efac !important;
}

/* ============================================
   LINKS
   ============================================ */

[data-theme="dark"] a {
    color: var(--color-primary);
}

[data-theme="dark"] a:hover {
    color: var(--color-primary-hover);
}

[data-theme="dark"] .hero-btn-primary,
[data-theme="dark"] .hero-btn-primary:hover {
    color: #fff;
}

[data-theme="dark"] .hero-btn-secondary,
[data-theme="dark"] .hero-btn-secondary:hover {
    color: #fff;
}

/* ============================================
   HEADINGS
   ============================================ */

[data-theme="dark"] h1,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .main-title,
[data-theme="dark"] .page-header h1 {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] .feature-title,
[data-theme="dark"] .starter-title {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .subtitle,
[data-theme="dark"] .hero-subtitle,
[data-theme="dark"] .description,
[data-theme="dark"] .feature-description,
[data-theme="dark"] .starter-description {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   POWERED BY
   ============================================ */

[data-theme="dark"] .powered-by {
    color: var(--color-text-tertiary) !important;
}

/* ============================================
   EMPTY STATE
   ============================================ */

[data-theme="dark"] #chatbox:empty::before {
    color: var(--color-text-muted);
}

/* ============================================
   WELCOME MESSAGE / INTRO SECTION
   ============================================ */

[data-theme="dark"] .welcome-message,
[data-theme="dark"] .intro-message,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .starter-section,
[data-theme="dark"] .welcome-section {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .welcome-message h1,
[data-theme="dark"] .welcome-message h2,
[data-theme="dark"] .intro-message h1,
[data-theme="dark"] .intro-message h2,
[data-theme="dark"] .welcome-title,
[data-theme="dark"] .intro-title {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .welcome-message p,
[data-theme="dark"] .intro-message p,
[data-theme="dark"] .welcome-subtitle,
[data-theme="dark"] .intro-subtitle {
    color: var(--color-text-secondary) !important;
}

/* Welcome container background */
[data-theme="dark"] .welcome-container,
[data-theme="dark"] .intro-container {
    background: transparent !important;
}

/* Starter prompt cards in welcome */
[data-theme="dark"] .starter-prompts {
    background: transparent !important;
}

[data-theme="dark"] .prompt-card,
[data-theme="dark"] .starter-prompt,
[data-theme="dark"] .example-prompt {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] .prompt-card:hover,
[data-theme="dark"] .starter-prompt:hover,
[data-theme="dark"] .example-prompt:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

body,
.sidebar,
.rate-widget,
.feature-card,
.card,
.message-content,
input,
textarea,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   TEXT SELECTION / HIGHLIGHT COLOR
   ============================================ */

/* Text selection in dark mode - Blue highlight with white text */
[data-theme="dark"] ::selection {
    background: #1e3a5f !important; /* Blue */
    color: #ffffff !important; /* White text */
}

[data-theme="dark"] ::-moz-selection {
    background: #1e3a5f !important; /* Blue */
    color: #ffffff !important; /* White text */
}
/* ============================================
   EXACT FIX FOR LOANSPACE.AI WELCOME SECTION
   Add this to the BOTTOM of dark-mode.css
   ============================================ */

/* Welcome Hero Section - BLACK BACKGROUND */
[data-theme="dark"] .welcome-hero {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Welcome Title - WHITE TEXT */
[data-theme="dark"] .welcome-title {
    color: #ffffff !important;
}

/* Welcome Subtitle - WHITE TEXT */
[data-theme="dark"] .welcome-subtitle {
    color: #ffffff !important;
}

/* Logo spans - these will automatically keep their colors from light mode
   because they have more specific selectors in your other CSS files.
   If they turn white, it means they don't have explicit colors set.
   In that case, uncomment and set the colors below: */

/* [data-theme="dark"] .logo-loan {
    color: #1e3a5f !important;
} */

/* [data-theme="dark"] .logo-space {
    color: #f97316 !important;
} */

/* Features Grid */
[data-theme="dark"] .features-grid {
    background: transparent !important;
}

/* Feature Cards - both div and anchor variants */
[data-theme="dark"] .feature-card-modern,
[data-theme="dark"] a.feature-card-modern,
[data-theme="dark"] a.question-card-link {
    background: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] .feature-card-modern:hover,
[data-theme="dark"] a.feature-card-modern:hover,
[data-theme="dark"] a.question-card-link:hover {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

/* Feature Icons */
[data-theme="dark"] .feature-icon-wrapper {
    background: transparent !important;
}

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%) !important;
    color: #60a5fa !important;
}

[data-theme="dark"] .feature-icon i {
    color: #60a5fa !important;
}

/* Feature Text - WHITE (including inside link cards) */
[data-theme="dark"] .feature-title,
[data-theme="dark"] a.question-card-link .feature-title {
    color: #ffffff !important;
}

[data-theme="dark"] .feature-description,
[data-theme="dark"] a.question-card-link .feature-description {
    color: #ffffff !important;
}

/* Welcome CTA - WHITE TEXT */
[data-theme="dark"] .welcome-cta {
    background: transparent !important;
}

[data-theme="dark"] .cta-text {
    color: #ffffff !important;
}
/* ============================================
   NUCLEAR OPTION - FORCE BLACK WELCOME BACKGROUND
   Copy this and ADD TO THE VERY BOTTOM of dark-mode.css
   ============================================ */

/* Target the welcome hero and ALL its parent containers */
[data-theme="dark"] .welcome-hero,
[data-theme="dark"] .welcome-hero > *,
[data-theme="dark"] div:has(.welcome-hero) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* If there's a wrapper div around welcome section */
[data-theme="dark"] .welcome-wrapper,
[data-theme="dark"] .welcome-container,
[data-theme="dark"] .intro-wrapper,
[data-theme="dark"] .hero-wrapper,
[data-theme="dark"] .main-intro,
[data-theme="dark"] .chat-intro,
[data-theme="dark"] .empty-chat,
[data-theme="dark"] .initial-state {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force features grid background too */
[data-theme="dark"] .features-grid,
[data-theme="dark"] div:has(.features-grid) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Force welcome CTA background */
[data-theme="dark"] .welcome-cta,
[data-theme="dark"] div:has(.welcome-cta) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Nuclear option - force ANY div that contains welcome elements */
[data-theme="dark"] div:has(.welcome-title),
[data-theme="dark"] div:has(.welcome-subtitle),
[data-theme="dark"] div:has(.features-grid) {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* If it's in the main chat area */
[data-theme="dark"] #chatbox > div,
[data-theme="dark"] .chat-messages > div,
[data-theme="dark"] .messages-container > div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Last resort - remove white from EVERYTHING in main content (except mobile header) */
[data-theme="dark"] main div:not(.mobile-header),
[data-theme="dark"] .main-content div:not(.mobile-header),
[data-theme="dark"] .content div:not(.mobile-header) {
    background-color: transparent !important;
}

/* Then specifically set chatbox/main area to black */
[data-theme="dark"] main,
[data-theme="dark"] .main-content,
[data-theme="dark"] .content,
[data-theme="dark"] #chatbox {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* ============================================
   EXTRA USER MESSAGE & USERNAME FIXES
   ============================================ */

/* Ensure user input text is white in ALL scenarios */
[data-theme="dark"] .user-message,
[data-theme="dark"] .user-input,
[data-theme="dark"] .message.user p,
[data-theme="dark"] .message.user div,
[data-theme="dark"] .message.user span,
[data-theme="dark"] .message.user strong,
[data-theme="dark"] .message.user em {
    color: #ffffff !important;
}

/* Username variants - catch all possible class names */
[data-theme="dark"] .user-name,
[data-theme="dark"] .sender,
[data-theme="dark"] .author,
[data-theme="dark"] .message-header,
[data-theme="dark"] .message-from,
[data-theme="dark"] .chat-username,
[data-theme="dark"] .chat-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* If username is in a header/label element */
[data-theme="dark"] .message header,
[data-theme="dark"] .message .header,
[data-theme="dark"] .message label {
    color: #ffffff !important;
}
/* ============================================
   NUCLEAR OPTION - MAXIMUM SPECIFICITY FIX
   Copy this ENTIRE section and paste at the VERY BOTTOM of dark-mode.css
   This will override everything
   ============================================ */

/* USER MESSAGE TEXT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body .message.user .message-content,
[data-theme="dark"] html body .message.user .message-content,
[data-theme="dark"] body .message.user .message-content * {
    color: #ffffff !important;
}

[data-theme="dark"] body .message.user .message-content p,
[data-theme="dark"] body .message.user .message-content div,
[data-theme="dark"] body .message.user .message-content span,
[data-theme="dark"] body .message.user .message-content strong,
[data-theme="dark"] body .message.user .message-content em,
[data-theme="dark"] body .message.user .message-content b,
[data-theme="dark"] body .message.user .message-content i {
    color: #ffffff !important;
}

/* ASSISTANT MESSAGE TEXT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body .message.assistant .message-content,
[data-theme="dark"] html body .message.assistant .message-content,
[data-theme="dark"] body .message.assistant .message-content * {
    color: #ffffff !important;
}

[data-theme="dark"] body .message.assistant .message-content p,
[data-theme="dark"] body .message.assistant .message-content div,
[data-theme="dark"] body .message.assistant .message-content span,
[data-theme="dark"] body .message.assistant .message-content strong,
[data-theme="dark"] body .message.assistant .message-content em,
[data-theme="dark"] body .message.assistant .message-content li,
[data-theme="dark"] body .message.assistant .message-content h1,
[data-theme="dark"] body .message.assistant .message-content h2,
[data-theme="dark"] body .message.assistant .message-content h3,
[data-theme="dark"] body .message.assistant .message-content h4 {
    color: #ffffff !important;
}

/* USERNAME - MAXIMUM SPECIFICITY - ALL POSSIBLE SELECTORS */
[data-theme="dark"] body .message .username,
[data-theme="dark"] html body .message .username,
[data-theme="dark"] body .message-sender,
[data-theme="dark"] body .message-label,
[data-theme="dark"] body .message-author,
[data-theme="dark"] body .sender-name,
[data-theme="dark"] body .message-username,
[data-theme="dark"] body .username,
[data-theme="dark"] body .sender,
[data-theme="dark"] body .author,
[data-theme="dark"] body .user-name,
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message header,
[data-theme="dark"] body .message .header,
[data-theme="dark"] body .message label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* TEXT SELECTION/HIGHLIGHT - MAXIMUM SPECIFICITY */
[data-theme="dark"] body ::selection,
[data-theme="dark"] html body ::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] body ::-moz-selection,
[data-theme="dark"] html body ::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* Message content wrapper - ensure no grey */
[data-theme="dark"] body .message-content,
[data-theme="dark"] body .message .message-content {
    color: #ffffff !important;
}

/* Any text element inside messages */
[data-theme="dark"] body .message *,
[data-theme="dark"] body .message-content * {
    color: #ffffff !important;
}

/* Override ANY grey colors (#6b7280, #64748b, etc.) */
[data-theme="dark"] body .message [style*="color: rgb(107, 114, 128)"],
[data-theme="dark"] body .message [style*="color: rgb(100, 116, 139)"],
[data-theme="dark"] body .message [style*="color: #6b7280"],
[data-theme="dark"] body .message [style*="color: #64748b"] {
    color: #ffffff !important;
}
/* ============================================
   EXACT FIX FOR YOUR SITE
   Add this to the VERY BOTTOM of dark-mode.css
   This overrides the #0f172a dark color
   ============================================ */

/* Override the .message.user and .message.human dark text */
[data-theme="dark"] body .message.user .message-content,
[data-theme="dark"] body .message.user .message-content *,
[data-theme="dark"] body .message.user .message-content p,
[data-theme="dark"] body .message.user .message-content div,
[data-theme="dark"] body .message.user .message-content span,
[data-theme="dark"] body .message.user .message-content strong,
[data-theme="dark"] body .message.user .message-content em,
[data-theme="dark"] body .message.user .message-content a,
[data-theme="dark"] body .message.human .message-content,
[data-theme="dark"] body .message.human .message-content *,
[data-theme="dark"] body .message.human .message-content p,
[data-theme="dark"] body .message.human .message-content div,
[data-theme="dark"] body .message.human .message-content span,
[data-theme="dark"] body .message.human .message-content strong,
[data-theme="dark"] body .message.human .message-content em,
[data-theme="dark"] body .message.human .message-content a {
    color: #ffffff !important;
}

/* Override assistant message text too */
[data-theme="dark"] body .message.assistant .message-content,
[data-theme="dark"] body .message.assistant .message-content *,
[data-theme="dark"] body .message.assistant .message-content p,
[data-theme="dark"] body .message.assistant .message-content div,
[data-theme="dark"] body .message.assistant .message-content span,
[data-theme="dark"] body .message.assistant .message-content strong,
[data-theme="dark"] body .message.assistant .message-content em,
[data-theme="dark"] body .message.assistant .message-content li,
[data-theme="dark"] body .message.assistant .message-content h1,
[data-theme="dark"] body .message.assistant .message-content h2,
[data-theme="dark"] body .message.assistant .message-content h3 {
    color: #ffffff !important;
}

/* Username - all possible variations */
[data-theme="dark"] body .username,
[data-theme="dark"] body .message-sender,
[data-theme="dark"] body .message-author,
[data-theme="dark"] body .sender-name,
[data-theme="dark"] body .message .username,
[data-theme="dark"] body .message-label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Text selection highlight - BLUE */
[data-theme="dark"] body ::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] body ::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}
/* ============================================
   FIX LOANSPACE.AI USERNAME & TEXT HIGHLIGHT
   Add this to the VERY BOTTOM of dark-mode.css
   ============================================ */

/* Keep user's username white, but allow LoanSpace.ai to keep logo colors */
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.human .username,
[data-theme="dark"] body .message.user .message-sender,
[data-theme="dark"] body .message.human .message-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* LoanSpace.ai username - DON'T force white, let it inherit logo colors */
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message.assistant .message-sender,
[data-theme="dark"] body .message.assistant .username .logo-loan,
[data-theme="dark"] body .message.assistant .username .logo-space,
[data-theme="dark"] body .message.assistant .message-sender .logo-loan,
[data-theme="dark"] body .message.assistant .message-sender .logo-space {
    color: inherit !important;
    /* This allows the logo colors to show through */
}

/* If LoanSpace.ai is showing as white, explicitly set the logo colors */
/* Uncomment these lines and adjust colors if needed */
/*
[data-theme="dark"] body .message.assistant .username .logo-loan {
    color: #1e3a5f !important;
}

[data-theme="dark"] body .message.assistant .username .logo-space {
    color: #f97316 !important;
}
*/

/* Text Selection/Highlight - MAXIMUM SPECIFICITY */
[data-theme="dark"] html body ::selection,
[data-theme="dark"] body.dark ::selection,
[data-theme="dark"] body *::selection {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] html body ::-moz-selection,
[data-theme="dark"] body.dark ::-moz-selection,
[data-theme="dark"] body *::-moz-selection {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* Specific selection for message content */
[data-theme="dark"] .message-content::selection,
[data-theme="dark"] .message-content *::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] .message-content::-moz-selection,
[data-theme="dark"] .message-content *::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}
/* ============================================
   FIX SCROLL AREA - PREVENT OVERLAP WITH INPUT
   Add this to the BOTTOM of dark-mode.css
   ============================================ */

/* Ensure chatbox doesn't scroll behind input area */
[data-theme="dark"] #chatbox,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .messages-container {
    /* Add bottom padding equal to input area height */
    padding-bottom: 120px !important;
    /* Adjust max-height to account for input */
    max-height: calc(100vh - 280px) !important;
}

/* Input area - ensure it stays on top */
[data-theme="dark"] .input-area,
[data-theme="dark"] #input-area,
[data-theme="dark"] .chat-input-area {
    position: sticky !important;
    position: -webkit-sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: var(--color-bg-secondary) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Reset input border for dark mode */
[data-theme="dark"] #input {
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] #input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

/* Prevent scroll behind input on mobile */
@media (max-width: 768px) {
    [data-theme="dark"] #chatbox,
    [data-theme="dark"] .chat-area {
        padding-bottom: 140px !important;
        max-height: calc(100vh - 240px) !important;
    }
}

/* Fix scrollbar position */
[data-theme="dark"] #chatbox::-webkit-scrollbar {
    width: 8px !important;
    z-index: 1 !important;
}

/* Ensure last message has space before input */
[data-theme="dark"] .message:last-child {
    margin-bottom: 20px !important;
}

/* Container adjustments */
[data-theme="dark"] .chat-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

[data-theme="dark"] .chat-messages,
[data-theme="dark"] .messages-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* ============================================
   FINAL FIX - AI USERNAME LOGO COLORS & NAVY HIGHLIGHT
   Add this to the VERY BOTTOM of dark-mode.css
   This overrides everything above
   ============================================ */

/* USER USERNAME - FORCE WHITE */
[data-theme="dark"] body .message.user .username,
[data-theme="dark"] body .message.human .username,
[data-theme="dark"] body .message.user .message-sender,
[data-theme="dark"] body .message.human .message-sender {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* AI USERNAME - RESET TO ALLOW LOGO COLORS */
[data-theme="dark"] body .message.assistant .username,
[data-theme="dark"] body .message.assistant .message-sender,
[data-theme="dark"] body .message.bot .username,
[data-theme="dark"] body .message.bot .message-sender {
    color: unset !important;
    font-weight: 600 !important;
}

/* If username contains logo spans, ensure they show their colors */
[data-theme="dark"] body .message.assistant .username *,
[data-theme="dark"] body .message.assistant .message-sender * {
    color: inherit !important;
}

/* Explicit logo colors - UNCOMMENT AND ADJUST IF NEEDED */
/* If "LoanSpace.ai" is still showing white, uncomment these and set your colors: */
/*
[data-theme="dark"] body .message.assistant .username .logo-loan,
[data-theme="dark"] body .message.assistant .message-sender .logo-loan {
    color: #1e3a5f !important;
}

[data-theme="dark"] body .message.assistant .username .logo-space,
[data-theme="dark"] body .message.assistant .message-sender .logo-space {
    color: #f97316 !important;
}
*/

/* TEXT SELECTION - NAVY BLUE BACKGROUND WITH WHITE TEXT */
[data-theme="dark"] ::selection,
[data-theme="dark"] body ::selection,
[data-theme="dark"] html body ::selection,
[data-theme="dark"] * ::selection,
[data-theme="dark"] body * ::selection {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] ::-moz-selection,
[data-theme="dark"] body ::-moz-selection,
[data-theme="dark"] html body ::-moz-selection,
[data-theme="dark"] * ::-moz-selection,
[data-theme="dark"] body * ::-moz-selection {
    background: #1e3a5f !important;
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

/* Ensure selection works in all message content */
[data-theme="dark"] .message-content::selection,
[data-theme="dark"] .message::selection,
[data-theme="dark"] .message *::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

[data-theme="dark"] .message-content::-moz-selection,
[data-theme="dark"] .message::-moz-selection,
[data-theme="dark"] .message *::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* ============================================
   FIX: QUESTION CARD LINK BACKGROUNDS
   Ensures <a> tag cards match <div> cards
   ============================================ */
[data-theme="dark"] body a.question-card-link,
[data-theme="dark"] html body a.question-card-link,
[data-theme="dark"] body a.feature-card-modern.question-card {
    background: var(--color-bg-secondary) !important;
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

[data-theme="dark"] body a.question-card-link:hover,
[data-theme="dark"] html body a.question-card-link:hover {
    background: var(--color-bg-tertiary) !important;
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   WELCOME BANNER V2 - DARK MODE
   ============================================ */

[data-theme="dark"] .welcome-banner-v2 {
    background: transparent !important;
}

[data-theme="dark"] .welcome-title-v2 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .welcome-subtitle-v2 {
    color: #94a3b8 !important;
}

[data-theme="dark"] .welcome-card-v2 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .welcome-card-v2:hover {
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Preserve gradient icons in dark mode — just keep them as-is */
/* Only override the default (non-colored) icon */
[data-theme="dark"] .welcome-card-v2:not([class*="wc-blue"]):not([class*="wc-teal"]):not([class*="wc-amber"]):not([class*="wc-green"]):not([class*="wc-purple"]):not([class*="wc-rose"]) .wc-icon {
    background: rgba(79, 70, 229, 0.25) !important;
    color: #a5b4fc !important;
}

/* Colored card hover borders in dark mode */
[data-theme="dark"] .wc-blue:hover  { border-color: #3b82f6 !important; }
[data-theme="dark"] .wc-teal:hover  { border-color: #14b8a6 !important; }
[data-theme="dark"] .wc-amber:hover { border-color: #f59e0b !important; }
[data-theme="dark"] .wc-green:hover { border-color: #22c55e !important; }
[data-theme="dark"] .wc-purple:hover{ border-color: #a855f7 !important; }
[data-theme="dark"] .wc-rose:hover  { border-color: #f43f5e !important; }

[data-theme="dark"] .wc-label {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .wc-desc {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .wc-arrow {
    color: #475569 !important;
}

[data-theme="dark"] .welcome-card-v2:hover .wc-arrow {
    color: #94a3b8 !important;
}

[data-theme="dark"] .welcome-hint-v2 {
    color: #94a3b8 !important;
}

/* ============================================================
   SIDEBAR DARK MODE TOGGLE BUTTON
   Uses .sidebar-dark-mode class (NOT .dark-mode-toggle) to
   avoid conflicts with the floating circle button styles
   ============================================================ */
.sidebar-dark-mode {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.sidebar-dark-mode:hover {
    background: var(--soft-blue, #e8f4fc) !important;
    color: var(--text-primary, #1e293b) !important;
    transform: translateX(4px) !important;
}
[data-theme="dark"] .sidebar-dark-mode {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .sidebar-dark-mode:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* ============================================================
   FUNNEL PAGE DARK MODE
   ============================================================ */

/* Funnel CSS variable overrides */
[data-theme="dark"] {
    --bg: #0f172a;
    --white: #1e293b;
    --text: #f1f5f9;
    --text-light: #94a3b8;
    --text-muted: #64748b;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.2);
    --primary-bg: #1e1b4b;
    --success-bg: #064e3b;
    --warning-bg: #451a03;
    --danger-bg: #450a0a;
}

/* Funnel header */
[data-theme="dark"] .funnel-header {
    background: #000000 !important;
    border-bottom-color: #1e293b !important;
}
[data-theme="dark"] .funnel-logo img {
    filter: brightness(0.9);
}
[data-theme="dark"] .skip-to-chat,
[data-theme="dark"] .header-auth-link {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .skip-to-chat:hover,
[data-theme="dark"] .header-auth-link:hover {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .btn-register {
    background: #4f46e5 !important;
    color: #ffffff !important;
}

/* Funnel hero banner — split layout */
[data-theme="dark"] .hero-split-text {
    background: linear-gradient(135deg, #0c0818 0%, #150e30 40%, #1e1350 100%) !important;
}
[data-theme="dark"] .funnel-hero-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .funnel-hero-subtitle {
    color: #94a3b8 !important;
}
[data-theme="dark"] .funnel-hero-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #c7d2fe !important;
}
[data-theme="dark"] .hero-split-image::before {
    background: linear-gradient(to right, #150e30, transparent) !important;
}

/* Funnel body */
[data-theme="dark"] body:has(.funnel-header) {
    background: #0f172a !important;
}

/* Progress bar */
[data-theme="dark"] .progress-container {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .progress-step .step-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .progress-step.active .step-label {
    color: #818cf8 !important;
}

/* Wizard container & cards */
[data-theme="dark"] .wizard-container {
    background: transparent !important;
}
[data-theme="dark"] .wizard-container h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .wizard-container p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .goal-card,
[data-theme="dark"] .option-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .goal-card:hover,
[data-theme="dark"] .option-card:hover {
    border-color: #6366f1 !important;
    background: #253041 !important;
}
[data-theme="dark"] .goal-card.selected,
[data-theme="dark"] .option-card.selected {
    border-color: #6366f1 !important;
    background: #1e1b4b !important;
}
/* Inline option cards (credit score range, etc.) — default light-mode
   selected state uses var(--primary-bg) which is too pale to stand out
   on the dark funnel page. Use a saturated indigo fill so the selection
   is unmistakable. */
[data-theme="dark"] .inline-option-card.selected {
    border-color: #6366f1 !important;
    background: #1e3a8a !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}
[data-theme="dark"] .inline-option-card.selected .inline-option-label {
    color: #ffffff !important;
}
[data-theme="dark"] .goal-card .card-title,
[data-theme="dark"] .option-card .card-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .goal-card .card-desc,
[data-theme="dark"] .option-card .card-desc {
    color: #94a3b8 !important;
}

/* Card icons */
[data-theme="dark"] .card-icon {
    background: #334155 !important;
}

/* Wizard form inputs */
[data-theme="dark"] .wizard-container input[type="text"],
[data-theme="dark"] .wizard-container input[type="email"],
[data-theme="dark"] .wizard-container input[type="tel"],
[data-theme="dark"] .wizard-container input[type="number"],
[data-theme="dark"] .wizard-container select,
[data-theme="dark"] .wizard-container textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .wizard-container input::placeholder {
    color: #64748b !important;
}

/* Navigation buttons */
[data-theme="dark"] .btn-back {
    background: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-back:hover {
    background: #475569 !important;
}

/* Trust bar */
[data-theme="dark"] .funnel-trust-bar {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-badge {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-social-proof {
    border-top-color: #334155 !important;
}
[data-theme="dark"] .trust-proof-text {
    color: #94a3b8 !important;
}
[data-theme="dark"] .trust-proof-text strong {
    color: #f1f5f9 !important;
}

/* Score screen */
[data-theme="dark"] .score-screen {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .score-screen h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .score-message {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .score-breakdown,
[data-theme="dark"] .score-recommendations {
    background: #1e293b !important;
    border-color: #334155 !important;
}
/* Nudge banner (funnel completion) — light-mode backgrounds stay in dark
   mode but the global `[data-theme="dark"] h3` rule forces headings light,
   producing invisible light-on-light text. Give each variant a dark tinted
   background with readable light text. */
[data-theme="dark"] .nudge-high {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #a7f3d0 !important;
}
[data-theme="dark"] .nudge-high h3 {
    color: #6ee7b7 !important;
}
[data-theme="dark"] .nudge-mid {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    color: #c7d2fe !important;
}
[data-theme="dark"] .nudge-mid h3 {
    color: #a5b4fc !important;
}
[data-theme="dark"] .nudge-low {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fde68a !important;
}
[data-theme="dark"] .nudge-low h3 {
    color: #fcd34d !important;
}
/* Recommendation cards keep a white background from funnel.css while the
   body color switches to white in dark mode — invisible text. Flip the
   card to dark with readable light text and a brighter accent border. */
[data-theme="dark"] .recommendation-card {
    background: #0f172a !important;
    border-left-color: #6366f1 !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

/* Lender connect form */
[data-theme="dark"] .lender-connect-section {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .lender-connect-header h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lender-connect-header p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .lender-connect-form input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lender-connect-form label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .lender-form-disclaimer {
    color: #94a3b8 !important;
}

/* Lead confirmed */
[data-theme="dark"] .lead-confirmed {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lead-confirmed h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .lead-confirmed p {
    color: #cbd5e1 !important;
}

/* Mobile menu */
[data-theme="dark"] .mobile-menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .mobile-menu-item {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] .mobile-menu-item:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Funnel dark mode toggle button */
.funnel-dark-toggle {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #64748b !important;
    font-size: 16px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}
.funnel-dark-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #4f46e5 !important;
    transform: scale(1.05) !important;
}
[data-theme="dark"] .funnel-dark-toggle {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fbbf24 !important;
}
[data-theme="dark"] .funnel-dark-toggle:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* ===================================================================
   CALCULATOR LENDER CONNECT FORM — Dark Mode
   (Shared form on closing costs, refinance, property cost pages)
   =================================================================== */
[data-theme="dark"] .calc-lender-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .calc-lender-section::before {
    background: linear-gradient(90deg, #6366f1, #818cf8, #34d399) !important;
}
[data-theme="dark"] .calc-lender-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}
[data-theme="dark"] .calc-lender-header h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .calc-lender-header p {
    color: #94a3b8 !important;
}
[data-theme="dark"] .calc-form-group label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .calc-form-group input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .calc-form-group input::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] .calc-form-group input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
[data-theme="dark"] .calc-lender-disclaimer {
    color: #64748b !important;
}
[data-theme="dark"] .calc-lender-skip {
    color: #64748b !important;
}
[data-theme="dark"] .calc-lender-skip:hover {
    color: #818cf8 !important;
}
[data-theme="dark"] .calc-lender-confirmed {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* ===================================================================
   CLOSING COSTS PAGE — Dark Mode Enhancements
   =================================================================== */
[data-theme="dark"] .closing-costs-page .page-header h1,
[data-theme="dark"] .refinance-page .page-header h1 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .closing-costs-page .page-header .subtitle,
[data-theme="dark"] .refinance-page .page-header .subtitle {
    color: #94a3b8 !important;
}

/* Form inputs */
[data-theme="dark"] .closing-costs-page .form-group label,
[data-theme="dark"] .refinance-page .form-group label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .closing-costs-page .form-group input,
[data-theme="dark"] .closing-costs-page .form-group select,
[data-theme="dark"] .refinance-page .form-group input,
[data-theme="dark"] .refinance-page .form-group select {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .closing-costs-page .form-group input:focus,
[data-theme="dark"] .closing-costs-page .form-group select:focus,
[data-theme="dark"] .refinance-page .form-group input:focus,
[data-theme="dark"] .refinance-page .form-group select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Input prefixes/suffixes */
[data-theme="dark"] .input-with-prefix,
[data-theme="dark"] .input-with-suffix {
    border-color: #334155 !important;
}
[data-theme="dark"] .prefix,
[data-theme="dark"] .suffix {
    color: #94a3b8 !important;
    background: #0f172a !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .help-text {
    color: #94a3b8 !important;
}
[data-theme="dark"] .help-text.calculated-amount {
    color: #60a5fa !important;
}

/* Secondary button */
[data-theme="dark"] .btn-secondary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* Results area */
[data-theme="dark"] .results-header h2 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .results-header .location {
    color: #94a3b8 !important;
}
[data-theme="dark"] .summary-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .summary-card.highlight {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}
[data-theme="dark"] .card-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .card-value {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .breakdown-amount {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-row.subtotal {
    border-color: #334155 !important;
}
[data-theme="dark"] .notes-section {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .info-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .info-section {
    border-color: #334155 !important;
}
[data-theme="dark"] .error-message {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

/* ===================================================================
   REFINANCE PAGE — Additional Dark Mode
   =================================================================== */
[data-theme="dark"] .stat-card {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .tips-box {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
/* Stat card + tips box children — page CSS sets text-secondary/text-muted
   colors that don't get overridden by the container color above. */
[data-theme="dark"] .stat-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .stat-footnote {
    color: #94a3b8 !important;
}
[data-theme="dark"] .tips-box h4 {
    color: #60a5fa !important;
}
[data-theme="dark"] .tips-box li {
    color: #cbd5e1 !important;
}

/* ============================================
   CALCULATOR TEXT CONTRAST OVERRIDES
   Page CSS sets hard-coded dark colors (#1e293b, #64748b, #475569)
   or var(--text-secondary)/var(--text-muted) that become unreadable
   on dark backgrounds. Override to high-contrast light equivalents.
   ============================================ */

/* Refinance calculator — remaining text elements */
[data-theme="dark"] .slider-header p,
[data-theme="dark"] .info-card p {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .slider-labels,
[data-theme="dark"] .page-footer {
    color: #94a3b8 !important;
}

/* Dashboard — labels, descriptions, score text */
[data-theme="dark"] .breakdown-card-title,
[data-theme="dark"] .btn-step-toggle,
[data-theme="dark"] .result-total-cost-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .journey-progress-text,
[data-theme="dark"] .panel-subtitle,
[data-theme="dark"] .result-breakdown-label,
[data-theme="dark"] .result-monthly-label,
[data-theme="dark"] .score-label {
    color: #94a3b8 !important;
}
[data-theme="dark"] .checkbox-label {
    color: #e2e8f0 !important;
}
/* Dashboard result values and score — hard-coded #1e293b → white for
   maximum readability since these are the headline numbers. */
[data-theme="dark"] .result-breakdown-value,
[data-theme="dark"] .result-monthly-total,
[data-theme="dark"] .result-total-cost-value,
[data-theme="dark"] .score-number,
[data-theme="dark"] .scenario-name-input {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .verdict-box.positive {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .verdict-box.negative {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .contact-form input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .result-box {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
/* Result box contents — default light-mode colors (dark gray label,
   primary-blue value) disappear on the translucent-blue dark background. */
[data-theme="dark"] .result-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .result-value {
    color: #ffffff !important;
}
[data-theme="dark"] .card-icon {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* ===================================================================
   DASHBOARD PAGE — Dark Mode (comprehensive)
   =================================================================== */
[data-theme="dark"] .dashboard-page {
    background: #000000 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .dashboard-page .page-header h1 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .dashboard-page .subtitle {
    color: #94a3b8 !important;
}
[data-theme="dark"] .cta-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .cta-content {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .cta-content strong {
    color: #ffffff !important;
}
[data-theme="dark"] .cta-content span {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .cta-content i {
    color: #60a5fa !important;
}
[data-theme="dark"] .dashboard-tabs {
    background: #0f172a !important;
}
[data-theme="dark"] .tab-btn {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .tab-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .tab-btn.active {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}
[data-theme="dark"] .tab-btn i {
    color: inherit !important;
}
[data-theme="dark"] .panel-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .readiness-form-panel input,
[data-theme="dark"] .readiness-form-panel select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .readiness-form-panel label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .breakdown-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .breakdown-card-bar {
    background: #334155 !important;
}
[data-theme="dark"] .recommendations-card li {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .history-item {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .journey-progress-bar-container {
    background: #334155 !important;
}
[data-theme="dark"] .step-upcoming .step-icon {
    background: #334155 !important;
    color: #64748b !important;
}
[data-theme="dark"] .step-current .step-icon {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}
[data-theme="dark"] .scenario-input-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .scenario-fields input,
[data-theme="dark"] .scenario-fields select {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .scenario-result-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .chart-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .last-score-note {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Skip-to-main-content link — visible only on keyboard focus.
   Lets keyboard/screen-reader users bypass nav/sidebar and jump
   straight to the page's primary content. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: #1e3a8a;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    z-index: 100000;
    transition: top 0.15s ease-out;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid #fbbf24;
    outline-offset: -3px;
}
[data-theme="dark"] .skip-link {
    background: #1e40af;
    color: #ffffff;
}

/* Suppress the browser's default focus ring on skip-link targets.
   These elements receive programmatic focus when the skip-link is
   activated; they're content containers, not natural focusable
   widgets, so a visible outline would just look weird. */
#main-content:focus,
#funnelHero:focus {
    outline: none;
}

/* ===== mobile-fixes.css ===== */
/* Hide scroll dots by default (shown only on mobile) */
.scroll-dots {
    display: none;
}

/* ============================================
   DARK MODE CUSTOMIZATIONS
   ============================================ */

/* Remove chat gradient - solid black background */
[data-theme="dark"] .chat-container,
[data-theme="dark"] #chatbox,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .main-chat {
    background: #000000 !important;
    background-image: none !important;
}

/* Logo colors in username */
[data-theme="dark"] .message.assistant .logo-loan {
    color: #2563eb !important;
}

[data-theme="dark"] .message.assistant .logo-space {
    color: #f97316 !important;
}

/* Remove light backgrounds from list items (fixes white boxes) */
[data-theme="dark"] .message-content div,
[data-theme="dark"] .message-content ol,
[data-theme="dark"] .message-content ul,
[data-theme="dark"] .message-content li,
[data-theme="dark"] .message-content > * {
    background: transparent !important;
    background-image: none !important;
}

/* Navy text selection */
html[data-theme="dark"] body *::selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] body *::-moz-selection {
    background: #1e3a5f !important;
    color: #ffffff !important;
}

/* Logo swap for dark mode - all screen sizes including desktop */
[data-theme="dark"] .sidebar-logo {
    content: url("/static/loanspace.ai-logo-dark.png") !important;
    width: 100% !important;
    height: auto !important;
}

/* ============================================
   INPUT BOX - SUBTLE STYLING (ALL DEVICES)
   ============================================ */

/* LIGHT MODE: Light gray background with dark text (scoped to chat input area) */
#userInput,
body #userInput,
.input-area #userInput,
.input-area input[type="text"],
.input-area textarea {
    border: 2px solid rgba(79, 70, 229, 0.3) !important;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 16px !important;
    color: #1f2937 !important; /* Dark text color */
}

/* Light mode placeholder */
#userInput::placeholder,
.input-area input::placeholder,
.input-area textarea::placeholder {
    color: #9ca3af !important; /* Medium gray for placeholder */
}

/* DARK MODE: Sidebar-matching background with white text (scoped to chat input area) */
[data-theme="dark"] #userInput,
[data-theme="dark"] body #userInput,
[data-theme="dark"] .input-area #userInput,
[data-theme="dark"] .input-area input[type="text"],
[data-theme="dark"] .input-area textarea {
    border: 1px solid #374151 !important; /* Darker border for dark mode */
    background: #1f2937 !important; /* Dark gray - matches sidebar */
    background-color: #1f2937 !important;
    color: #ffffff !important; /* White text */
}

/* Dark mode placeholder */
[data-theme="dark"] #userInput::placeholder,
[data-theme="dark"] .input-area input::placeholder,
[data-theme="dark"] .input-area textarea::placeholder {
    color: #9ca3af !important; /* Medium gray placeholder */
}

/* Keep input area container clean */
.input-area {
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    /* Removed background: transparent - was conflicting with mobile solid backgrounds */
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */

.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 2px solid var(--color-border-primary);
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}

.dark-mode-toggle:hover {
    background: var(--color-bg-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

/* ============================================
   THINKING ORB - ALL DEVICES
   ============================================ */

/* Container — pill shape with orb + text */
.thinking,
.message.thinking {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 14px 22px 14px 18px !important;
    background: #f8f9fb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    width: auto !important;
    max-width: 220px !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* The orb — 18px, orange brand color, with glow. Placed AFTER text via ::after + order */
.thinking::after,
.message.thinking::after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    background: radial-gradient(circle at 36% 30%, #ffb074, #ff8c42 55%, #d96b20) !important;
    border-radius: 50% !important;
    animation: orbPulse 2s ease-in-out infinite !important;
    display: block !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: scale(1);
    box-shadow: 0 0 6px 2px rgba(255, 140, 66, 0.35),
                0 0 2px 1px rgba(255, 140, 66, 0.5);
    z-index: 2 !important;
    order: 2 !important;
    border: none !important;
    padding: 0 !important;
}

/* Hide ::before — not needed */
.thinking::before,
.message.thinking::before {
    content: none !important;
    display: none !important;
}

@keyframes orbPulse {
    0%, 100% {
        box-shadow: 0 0 6px 2px rgba(255, 140, 66, 0.35),
                    0 0 2px 1px rgba(255, 140, 66, 0.5);
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        box-shadow: 0 0 18px 8px rgba(255, 140, 66, 0.6),
                    0 0 6px 3px rgba(255, 140, 66, 0.8);
        transform: scale(1.8);
        opacity: 1;
    }
}

/* Dark Mode */
[data-theme="dark"] .thinking,
[data-theme="dark"] .message.thinking {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #9ca3af !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .thinking::after,
[data-theme="dark"] .message.thinking::after {
    background: radial-gradient(circle at 36% 30%, #ffc799, #ff9d5c 55%, #e88040) !important;
    box-shadow: 0 0 12px 4px rgba(255, 157, 92, 0.5),
                0 0 3px 1px rgba(255, 157, 92, 0.7);
}

/* NUCLEAR HIDE - Kill the old .spinner element and text */
.thinking .spinner,
.message.thinking .spinner,
.thinking span,
.message.thinking span {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    animation: none !important;
}

/* Also target legacy selectors in case they're used elsewhere */
.thinking-indicator,
.message .spinner,
.message-content .spinner,
.loading-spinner,
#thinkingSpinner,
.thinking-spinner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 14px 22px 14px 18px !important;
    background: #f8f9fb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
}

.thinking-indicator::after,
.message .spinner::after,
.message-content .spinner::after,
.loading-spinner::after,
#thinkingSpinner::after {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    background: radial-gradient(circle at 36% 30%, #ffb074, #ff8c42 55%, #d96b20) !important;
    border-radius: 50% !important;
    animation: orbPulse 3s ease-in-out infinite !important;
    display: block !important;
    box-shadow: 0 0 10px 3px rgba(255, 140, 66, 0.4),
                0 0 3px 1px rgba(255, 140, 66, 0.6) !important;
}

/* Hide children of legacy selectors */
.thinking-indicator *:not(.thinking-text),
.message .spinner *:not(.thinking-text),
.message-content .spinner *:not(.thinking-text),
.loading-spinner *:not(.thinking-text),
#thinkingSpinner *:not(.thinking-text) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Protect button spinners from chat spinner overrides */
.btn-calculate .spinner {
    display: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    gap: 0 !important;
}
.btn-calculate .spinner::after {
    display: none !important;
    content: none !important;
}
.btn-calculate.loading .spinner {
    display: block !important;
}
.btn-calculate.loading .btn-text {
    display: none !important;
}

/* ============================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Keep mobile header on tablets */
    .mobile-header {
        display: flex !important;
        height: 70px !important; /* Slightly taller for better proportions */
        padding: 12px 20px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important; /* Remove any top margin */
        z-index: 2147483647 !important; /* Max z-index — always on top */
        background: var(--bg-primary, #ffffff) !important; /* Solid background so content doesn't show through */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow for depth */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }

    .main-content {
        z-index: auto !important;
    }

    /* Calculator page containers - add top padding to clear fixed tablet header */
    .dti-container,
    .afford-container,
    .amort-container,
    .rvb-form-container,
    .calculator-container,
    .pq-container {
        padding-top: 80px !important;
    }
    .calc-hub-page {
        padding-top: 56px !important;
    }

    /* Dark mode tablet header - match body background (#000000) */
    [data-theme="dark"] .mobile-header,
    [data-theme="dark"] body .mobile-header,
    html[data-theme="dark"] .mobile-header,
    html[data-theme="dark"] body .mobile-header {
        background: #000000 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    }
    
    .mobile-logo-img {
        height: 45px !important; /* Bigger logo to fill header space */
    }

    /* Dark mode: swap tablet logo to black background version */
    [data-theme="dark"] .mobile-logo-img {
        content: url("/static/loanspace.ai-logo-mobile-dark.png") !important;
        background: #000000 !important;
        background-color: #000000 !important;
    }

    /* Dark mode toggle on tablet - pill style to match other buttons */
    .input-area .dark-mode-toggle,
    .input-area #darkModeToggle,
    .dark-mode-toggle {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        border-radius: 50px !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    
    /* FORCE SHOW full desktop welcome banner AND feature cards on tablets */
    /* Must override style-polish.css which hides these at max-width: 1024px */
    .welcome-banner,
    .welcome-hero,
    .welcome-title,
    .welcome-subtitle,
    .welcome-cta,
    .features-grid,
    .feature-cards,
    .feature-card-modern,
    .feature-card,
    .feature-icon-wrapper,
    .feature-icon,
    .feature-title,
    .feature-description {
        display: block !important; /* Override any hiding rules */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important; /* Override height: 0 */
        overflow: visible !important; /* Override overflow: hidden */
    }
    
    .features-grid {
        display: grid !important; /* Grid layout for cards - not block! */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Add padding between header and welcome message */
    .welcome-banner {
        margin-top: 20px !important; /* Space below header */
    }
    
    /* Adjust body padding - less top space, account for fixed header */
    body {
        padding-top: 70px !important; /* Match header height exactly - no extra space */
        margin-top: 0 !important; /* Remove any top margin */
    }
    
    /* Keep input area at bottom */
    .input-area {
        min-height: 150px !important;
    }
    
    body {
        padding-bottom: 170px !important;
    }
    
    /* Thinking spinner positioning for tablets */
    .thinking,
    .message.thinking {
        margin-top: 90px !important; /* Clear mobile header */
        position: relative !important;
        z-index: 50 !important;
    }

    /* Sidebar: hidden off-screen by default on tablets */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 250px !important;
        transform: translateX(-250px) !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        transition: transform 0.3s ease !important;
    }

    /* Sidebar: slide in when open */
    .sidebar.active,
    .sidebar.open {
        transform: translateX(0) !important;
        z-index: 10000 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Sidebar overlay on tablets */
    .sidebar-overlay {
        display: block !important;
        z-index: 9999 !important;
    }

    .sidebar-overlay.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* ============================================
   MOBILE OPTIMIZATIONS (phones only, up to 767px)
   ============================================ */

@media (max-width: 767px) { /* Changed from 1024px to 767px - MOBILE ONLY */
    /* CRITICAL: Reset html only (not html body to avoid specificity conflict) */
    html {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body {
        margin: 0 !important;
        /* Top padding clears the fixed mobile-header (~56px + safe-area-inset on notched devices). */
        padding-top: calc(56px + env(safe-area-inset-top)) !important;
        padding-right: 24px !important;
        padding-bottom: 0 !important;
        padding-left: 12px !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Enable scrolling */
        -webkit-overflow-scrolling: touch !important; /* Smooth momentum scrolling on iOS */
        min-height: auto !important; /* Remove any min-height */
        height: auto !important; /* Remove fixed height */
    }

    /* Chat page is viewport-locked — single flex column inside main-content,
       only #chatbox scrolls. Disable body scroll and padding here; the
       chat-scrollable.css rules handle internal layout. */
    body.chat-page {
        padding: 0 !important;
        overflow: hidden !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
    }
    
    /* FORCE .mobile-header to absolute top of viewport (NOT sticky!) */
    .mobile-header,
    body .mobile-header,
    html body .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* z-index sits above page content but BELOW the open sidebar
           (which is z-index 10000) so the hamburger menu can overlay
           the header when the user taps it. */
        z-index: 500 !important;
        background: var(--bg-primary, #ffffff) !important;
        /* Respect iOS safe-area inset so the logo clears the status bar / Dynamic Island.
           Using max() so notched devices get the inset (~59px) while flat-topped devices
           fall back to the 8px design baseline. */
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-right: 24px !important;
        padding-bottom: 8px !important;
        padding-left: 12px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-transform: translateZ(0) !important; /* Force GPU compositing layer */
        transform: translateZ(0) !important;
    }

    [data-theme="dark"] .mobile-header,
    [data-theme="dark"] body .mobile-header {
        background: #000000 !important;
    }

    /* Prevent main-content from creating a stacking context that traps or overlaps the header */
    .main-content {
        z-index: auto !important;
    }
    
    /* Remove ALL top spacing from mobile-header children */
    .mobile-header,
    .mobile-header *,
    .mobile-header > *,
    .mobile-header div,
    .mobile-header button {
        margin-top: 0 !important;
    }
    
    /* Main content - add top padding to ensure it clears header */
    .main-content,
    body .main-content,
    html body .main-content {
        padding-top: 0px !important; /* Minimized to maximize chat space */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        overflow-y: auto !important; /* Enable vertical scrolling */
        -webkit-overflow-scrolling: touch !important; /* Smooth momentum scrolling on iOS */
        min-height: auto !important; /* Remove any min-height */
        height: auto !important; /* Remove fixed height */
    }
    
    /* Calculator page containers — body already provides
       calc(56px + env(safe-area-inset-top)) top padding to clear the fixed mobile-header,
       so these just need a small visual gap on top of that. */
    .dti-container,
    .afford-container,
    .amort-container,
    .rvb-form-container,
    .calculator-container,
    .pq-container {
        padding-top: 14px !important;
    }
    .calc-hub-page {
        padding-top: 8px !important;
    }

    /* NOTE: .chat-container, #chatbox, .input-area mobile rules removed —
       these elements live only on the chat page. Their mobile layout is now
       owned by chat-scrollable.css under body.chat-page (viewport-locked
       flex column with #chatbox as the sole scroller). The previous rules
       made the body scroll the entire page with a fixed-position input,
       which created a parallel layout model and 176px of dead space at the
       bottom of every other mobile page. */

    /* Light/dark backgrounds for the (now flex-flow, not fixed) input area */
    .input-area {
        background: #ffffff;
    }
    [data-theme="dark"] .input-area {
        background: #000000;
    }


    /* Orange Pulsing Dot Spinner - Mobile-Specific Positioning */
    .thinking-indicator,
    .spinner,
    .loading-spinner,
    #thinkingSpinner,
    .thinking-spinner {
        margin-top: 90px !important; /* Clear fixed mobile header */
        position: relative !important;
        z-index: 50 !important;
    }
    
    /* Input box on mobile */
    #userInput,
    #input,
    .input-area #userInput,
    .input-area #input,
    .input-area input[type="text"],
    .input-area textarea {
        height: 60px !important; /* 2 rows: (22px line-height × 2) + 16px padding */
        min-height: 60px !important;
        max-height: 60px !important;
        width: calc(100% - 20px) !important; /* Narrower - 20px total margin */
        max-width: calc(100% - 20px) !important;
        margin-left: 10px !important; /* Center with margins */
        margin-right: 10px !important;
        padding: 8px 12px !important;
        line-height: 22px !important;
        font-size: 16px !important; /* 16px prevents iOS zoom */
        box-sizing: border-box !important;
    }

    /* Smaller placeholder on mobile so it doesn't get cut off */
    .input-area textarea::placeholder,
    .input-area #input::placeholder {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    /* Dark mode toggle in input area - pill style to match other buttons */
    .input-area .dark-mode-toggle,
    .dark-mode-toggle {
        position: static !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        display: inline-flex !important;
        vertical-align: middle !important;
        border-radius: 50px !important;
        box-shadow: none !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
    }
    
    /* Prevent horizontal scroll + enable smooth iOS scrolling */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth momentum scrolling on iOS */
        touch-action: pan-y !important; /* Allow vertical scrolling, prevent gesture conflicts */
    }
    
    /* Ensure sidebar slides in above everything when open */
    .sidebar.active,
    .sidebar.open {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 250px !important;
        transform: translateX(0) !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-overlay.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Position Login/Register below rate widget on mobile/tablet */
    .sidebar,
    .sidebar-content {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .sidebar-logo {
        order: 1 !important; /* Logo first */
    }
    
    .rate-widget {
        order: 2 !important; /* Rate widget second */
        border-bottom: none !important; /* Remove white line below */
        margin-bottom: 0 !important;
        padding-bottom: 12px !important;
    }
    
    .sidebar-footer {
        order: 3 !important; /* Login/Register third (after rate widget) */
        border-top: none !important; /* Remove white line above */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Everything else comes after */
    .sidebar-item,
    .sidebar-section {
        order: 4 !important;
    }

    /* Center the action buttons on mobile */
    .button-group {
        justify-content: center !important;
    }

    /* Smaller buttons on mobile */
    #sendButton {
        padding: 10px 18px !important;
        font-size: 14px !important;
        gap: 6px !important;
    }

    .upload-button,
    #speechButton,
    #darkModeToggle {
        padding: 10px 13px !important;
        font-size: 15px !important;
    }

    /* ---- Compact welcome text so cards are visible ---- */
    .welcome-banner {
        padding: 12px 14px 4px 14px !important;
        margin: 0 10px 10px 10px !important;
    }

    .welcome-hero {
        margin-bottom: 4px !important;
    }

    .welcome-title,
    h1.welcome-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 0 !important;
    }

    /* Hide subtitle on mobile — saves ~60px of height */
    .welcome-subtitle {
        display: none !important;
    }

    /* ---- Mobile feature cards: horizontal scroll strip ---- */
    .welcome-banner {
        position: relative !important;
    }

    .features-grid {
        display: grid !important;
        visibility: visible !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 14px 0 0 0 !important;
        padding: 4px 4px 12px 4px !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .features-grid::-webkit-scrollbar {
        display: none !important;
    }

    .feature-card-modern,
    .feature-card {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 1 !important;
        min-width: unset !important;
        max-width: unset !important;
        width: 100% !important;
        padding: 12px 10px !important;
        text-align: center !important;
        border-radius: 14px !important;
        border: 1.5px solid rgba(74, 144, 226, 0.15) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        background: var(--white, #ffffff) !important;
    }

    .feature-card-modern .feature-icon-wrapper,
    .feature-card .feature-icon-wrapper {
        display: flex !important;
        margin-bottom: 6px !important;
    }

    .feature-card-modern .feature-icon,
    .feature-card .feature-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .feature-card-modern .feature-icon i,
    .feature-card .feature-icon i {
        font-size: 16px !important;
    }

    .feature-card-modern .feature-title,
    .feature-card .feature-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* Hide descriptions on mobile cards — title + icon is enough */
    .feature-card-modern .feature-description,
    .feature-card .feature-description {
        display: none !important;
    }

    /* Scroll indicator dots below feature cards */
    .scroll-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 6px 0 2px 0 !important;
    }

    .scroll-dots .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.15);
        transition: background 0.3s ease, transform 0.3s ease;
    }

    .scroll-dots .dot.active {
        background: rgba(74, 144, 226, 0.8);
        transform: scale(1.3);
    }

    [data-theme="dark"] .scroll-dots .dot {
        background: rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] .scroll-dots .dot.active {
        background: rgba(74, 144, 226, 0.9);
    }

    /* Dark mode: swap mobile logo to black-background version */
    [data-theme="dark"] .mobile-logo-img {
        content: url("/static/loanspace.ai-logo-mobile-dark.png") !important;
        background: #000000 !important;
        background-color: #000000 !important;
    }
}

/* ============================================
   LIGHT-MODE-ONLY PAGES OVERRIDE
   Pages that don't support dark mode use body.light-mode-only
   to force white header & light logo at all breakpoints.
   ============================================ */
[data-theme="dark"] .light-mode-only .mobile-header,
[data-theme="dark"] body.light-mode-only .mobile-header,
html[data-theme="dark"] .light-mode-only .mobile-header,
html[data-theme="dark"] body.light-mode-only .mobile-header {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .light-mode-only .mobile-logo-img,
html[data-theme="dark"] .light-mode-only .mobile-logo-img,
html[data-theme="dark"] body.light-mode-only .mobile-logo-img {
    content: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .light-mode-only .mobile-menu-btn span,
html[data-theme="dark"] body.light-mode-only .mobile-menu-btn span {
    background: #1e293b !important;
}

[data-theme="dark"] .light-mode-only .mobile-rate-label,
[data-theme="dark"] .light-mode-only .mobile-rate-value,
[data-theme="dark"] .light-mode-only .mobile-rate-divider,
html[data-theme="dark"] body.light-mode-only .mobile-rate-label,
html[data-theme="dark"] body.light-mode-only .mobile-rate-value,
html[data-theme="dark"] body.light-mode-only .mobile-rate-divider {
    color: #1e293b !important;
}

/* Also override sidebar on light-mode-only pages */
[data-theme="dark"] .light-mode-only .sidebar,
html[data-theme="dark"] body.light-mode-only .sidebar {
    background: var(--bg-primary, #ffffff) !important;
    color: #1e293b !important;
}

[data-theme="dark"] .light-mode-only .sidebar-logo,
html[data-theme="dark"] body.light-mode-only .sidebar-logo {
    content: none !important;
}


/* ===== editorial-tokens.css ===== */
/* ============================================================
   editorial-tokens.css
   Shared editorial finance theme tokens — cream paper, navy ink,
   brand blue + orange, Fraunces serif, JetBrains Mono.

   Source of truth: the funnel page (static/css/funnel.css), which
   was designed first. The /chat page mirrors this palette via
   static/css/chat-editorial.css (using --ed-* aliases for scoped
   !important overrides). Other templates consume these tokens
   directly off :root via the style bundle.

   Concatenated LAST into style-bundle.css so it has final say
   on any same-named tokens defined earlier in the bundle.
   ============================================================ */

:root {
  /* Ink + paper */
  --ink: #0b1b2b;
  --ink-soft: #1f3a5f;
  --paper: #faf7f2;
  --paper-2: #f3ede2;
  --rule: #c8c0b0;
  --rule-strong: #9c9080;

  /* Brand colors — pulled from the logo: bright royal blue (roof)
     and bright orange (door stripe). All contrast ratios on --paper
     hit WCAG AAA. */
  --brand-blue: #1a6db5;
  --brand-blue-soft: #4a9ad4;
  --brand-blue-deep: #11507f;
  --brand-orange: #ef7b1d;
  --brand-orange-soft: #f5a04a;
  --brand-orange-deep: #c95f0a;

  /* Back-compat aliases — older rules still reference --gold /
     --gold-soft. Mapped to the brand orange so the palette stays
     consistent. */
  --gold: var(--brand-orange);
  --gold-soft: var(--brand-orange-soft);

  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Fraunces", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Overrides for legacy bundle tokens — these names are referenced
     across style-sidebar.css / style-improvements.css / style-professional.css
     for the page body, .main-content, cards, and text colors.

     style-professional.css applies `body { background: var(--bg-primary)
     !important }`, so remapping --bg-primary is what actually shifts the
     page background to cream (--bg-main alone doesn't win against the
     !important rule). Same pattern for --text-* across the bundle. */

  /* Backgrounds */
  --bg-main: #faf7f2;        /* was #f8fafc — editorial paper */
  --bg-primary: #faf7f2;     /* was #ffffff — editorial paper (locked with !important on body) */
  --bg-secondary: #f3ede2;   /* was #f8fafc — editorial paper-2 */
  --bg-tertiary: #f3ede2;    /* was #f1f5f9 — editorial paper-2 */
  --bg-hover: #f3ede2;       /* was #f1f5f9 — editorial paper-2 */

  /* Text */
  --text-primary: #0b1b2b;   /* was #1e293b/#0f172a — editorial ink */
  --text-secondary: #1f3a5f; /* was #475569/#334155 — editorial ink-soft */
  --text-muted: #9c9080;     /* was #94a3b8/#64748b — editorial rule-strong */
}

/* Dark mode override — match editorial dark instead of older navies.
   Also remaps the editorial-specific tokens (--ink, --paper, --rule)
   so any rule using them directly stays readable on the dark surface.
   Without these, e.g. .eyebrow-page on the funnel hero stayed at
   --ink-soft=#1f3a5f (dark navy text) on a #0b1220 background. */
[data-theme="dark"] {
  /* Legacy bundle tokens */
  --bg-main: #0b1220;
  --bg-primary: #0b1220;
  --bg-secondary: #11192a;
  --bg-tertiary: #11192a;
  --bg-hover: #11192a;
  --text-primary: #f5efe2;
  --text-secondary: #b8c4d6;
  --text-muted: #6c7a90;

  /* Editorial tokens — dark variants */
  --ink: #f5efe2;          /* was #0b1b2b — now light cream for text */
  --ink-soft: #b8c4d6;     /* was #1f3a5f — now light blue-gray */
  --paper: #0b1220;        /* was #faf7f2 — now editorial deep ink */
  --paper-2: #11192a;      /* was #f3ede2 — now slightly lifted deep ink */
  --rule: rgba(126, 196, 245, 0.18);       /* was #c8c0b0 cream-rule */
  --rule-strong: rgba(126, 196, 245, 0.32); /* was #9c9080 */
}

/* ===== editorial-sidebar.css ===== */
/* ============================================================
   editorial-sidebar.css
   Editorial-themed sidebar / rate widget / mobile header rules,
   global (no body.chat-page scope) so every page that uses the
   sidebar layout picks them up via the bundle.

   These mirror the chat-editorial.css scoped rules but reference
   the canonical tokens from editorial-tokens.css instead of the
   chat-only --ed-* aliases.

   !important is used because the older bundle sources
   (style-sidebar.css, style-improvements.css, style-professional.css)
   already use !important heavily — higher specificity alone isn't
   enough to win.

   On /chat the equivalent body.chat-page rules in chat-editorial.css
   load after this file and produce the same visual result, so the
   chat page is unaffected.
   ============================================================ */

/* ---- Sidebar ----------------------------------------------- */
.sidebar {
  background: var(--paper-2) !important;
  border-right: 1px solid var(--rule) !important;
  box-shadow: none !important;
}

/* On tablet (768-1024px) the mobile-header is `position: fixed`
   with the highest z-index in the stack, so it overlays the top
   of the sidebar when it slides open — clipping the logo.
   Pushing the sidebar's content down 70px (the header's intrinsic
   height) so the logo and rate widget clear the header band. */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    padding-top: 70px !important;
  }
}
.sidebar-header {
  border-bottom: 1px solid var(--rule) !important;
  background: transparent !important;
}
.sidebar-section-title {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--brand-blue) !important;
}
.sidebar-item,
.sidebar-item-link {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar-item:hover,
.sidebar-item-link:hover {
  background: rgba(26, 109, 181, 0.08) !important;
  color: var(--brand-blue-deep) !important;
  transform: none !important;
}
.sidebar-item.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: 0 8px 20px -10px rgba(11, 27, 43, 0.45) !important;
  position: relative;
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange) !important;
  box-shadow: 0 0 0 3px rgba(239, 123, 29, 0.18) !important;
}
.sidebar-item.active .sidebar-icon,
.sidebar-item.active .sidebar-text { color: var(--paper) !important; }
.sidebar-icon {
  color: var(--brand-blue) !important;
  background: transparent !important;
}
.sidebar-item-link .sidebar-icon { color: var(--brand-blue) !important; }
.sidebar-footer {
  border-top: 1px solid var(--rule) !important;
  background: transparent !important;
}

/* User profile in the logged-in sidebar footer. The bundle styles
   .user-name / .user-status with light colors designed for the old
   dark sidebar — invisible on cream paper. Restyle for editorial. */
.user-profile {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}
.user-avatar {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.user-name {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.user-status {
  color: var(--ink-soft) !important;
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.logout-btn {
  color: var(--ink-soft) !important;
  background: transparent !important;
  border: none !important;
}
.logout-btn:hover {
  color: var(--brand-orange-deep) !important;
  background: rgba(239, 123, 29, 0.08) !important;
}

.sidebar-badge {
  background: var(--brand-orange) !important;
  color: #fff !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
}

/* ---- Rate widget (sidebar) ---- */
.rate-widget {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.rate-widget-header,
.rate-widget-header span {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--brand-blue) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.rate-row {
  border-top: 1px solid var(--rule) !important;
  background: transparent !important;
}
.rate-row:first-of-type { border-top: none !important; }
.rate-label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
}
.rate-value {
  font-family: var(--font-mono) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.rate-arrow.up   { color: #b04646 !important; }
.rate-arrow.down { color: #2f7a4a !important; }
.rate-arrow.flat { color: var(--rule-strong) !important; }
.rate-widget-footer {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--rule) !important;
}

/* ---- Mobile header ----------------------------------------- */
/* Compact editorial header — tight vertical padding so the chat
   and content surfaces below have maximum vertical real estate.

   padding-top uses env(safe-area-inset-top) with NO floor: on iOS
   Safari with the URL bar at the top, the safe-area inset is
   already covered by the URL bar so we want 0 padding (avoids
   visible cream gap above the logo). When the URL bar collapses
   on scroll, the inset value snaps back to the notch height and
   the header gracefully expands to protect content. */
.mobile-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: none !important;
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: 4px !important;
  gap: 12px !important;
}
.mobile-logo-img { height: 32px !important; }

/* Editorial hamburger — substantial, well-proportioned lines.
   The bundle base rule (style-sidebar.css) defines a 28x22px button
   with 2px tall spans, which can read as too skinny on retina
   mobile screens. Bumping to a more iconic size matches the visual
   weight of the chat page header.

   flex-shrink: 0 + min-width are critical: .mobile-header is
   display:flex, and the default flex-shrink: 1 was letting the
   browser collapse the button to ~14px wide on narrow viewports.
   The spans inside need align-self: stretch to fill the cross-axis
   when align-items is overridden anywhere in the cascade. */
.mobile-menu-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 28px !important;
  padding: 4px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  align-items: stretch !important;
}
.mobile-menu-btn span {
  background: var(--ink) !important;
  height: 3px !important;
  width: 100% !important;
  align-self: stretch !important;
  border-radius: 2px !important;
  display: block !important;
}
.mobile-rate-label {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-soft) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.mobile-rate-value {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
.mobile-rate-divider { color: var(--rule-strong) !important; }

/* ---- Dark mode ---- */
/* Editorial dark sidebar — slightly lifted from the page background
   so it reads as a distinct surface. Overrides dark-mode.css's
   `background: #000000 !important` rule (same specificity, this rule
   loads later in the bundle so it wins the cascade). */
[data-theme="dark"] .sidebar {
  background: #0f1a2b !important;
  border-right-color: rgba(126, 196, 245, 0.18) !important;
}

/* Suppress dark-mode.css's logo-image swap. The dark variant
   (loanspace.ai-logo-dark.png) has a baked-in dark background that
   reads as a black box against the editorial navy sidebar. Forcing
   the regular colorful logo gives a cleaner look — the sidebar
   surface is dark enough that the logo's transparent background
   shows through cleanly. */
[data-theme="dark"] .sidebar-logo {
  content: normal !important;
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .logo-container {
  background: transparent !important;
}
[data-theme="dark"] .sidebar-header { border-bottom-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .sidebar-section-title { color: #7ec4f5 !important; }
[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .sidebar-item-link { color: #f5efe2 !important; }
[data-theme="dark"] .sidebar-item:hover,
[data-theme="dark"] .sidebar-item-link:hover {
  background: rgba(74, 154, 212, 0.10) !important;
  color: #7ec4f5 !important;
}
[data-theme="dark"] .sidebar-icon { color: var(--brand-blue-soft) !important; }
[data-theme="dark"] .sidebar-item.active { background: #f5efe2 !important; color: #0b1220 !important; }
[data-theme="dark"] .sidebar-item.active .sidebar-icon,
[data-theme="dark"] .sidebar-item.active .sidebar-text { color: #0b1220 !important; }
[data-theme="dark"] .sidebar-footer { border-top-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .user-profile { border-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .user-name { color: #f5efe2 !important; }
[data-theme="dark"] .user-status { color: #cdd4e0 !important; }
[data-theme="dark"] .user-avatar { background: var(--brand-blue-soft) !important; color: #0b1220 !important; }
[data-theme="dark"] .logout-btn { color: #cdd4e0 !important; }
[data-theme="dark"] .logout-btn:hover { color: var(--brand-orange-soft) !important; background: rgba(245, 160, 74, 0.10) !important; }
[data-theme="dark"] .rate-widget { border-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .rate-widget-header,
[data-theme="dark"] .rate-widget-header span { color: #7ec4f5 !important; }
[data-theme="dark"] .rate-row { border-top-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .rate-label { color: #b8c4d6 !important; }
[data-theme="dark"] .rate-value { color: #f5efe2 !important; }
[data-theme="dark"] .rate-widget-footer { color: #b8c4d6 !important; border-top-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .mobile-header { background: #0b1220 !important; border-bottom-color: rgba(126, 196, 245, 0.18) !important; }
[data-theme="dark"] .mobile-menu-btn span { background: #f5efe2 !important; }
[data-theme="dark"] .mobile-rate-label { color: #b8c4d6 !important; }
[data-theme="dark"] .mobile-rate-value { color: #f5efe2 !important; }

/* ============================================================
   Editorial page-content overrides
   Non-chat, non-funnel pages still ship template-inline hero banners
   (blue gradients with white text) and stark-white card surfaces from
   the pre-editorial design.  Convert the most visible offenders to
   editorial paper + serif so the cream body actually reads as cream.

   Scoped via :not(.chat-page):not(.funnel-page) on body so the chat
   transcript and funnel index keep their own editorial treatments
   (which they already do via chat-editorial.css / funnel.css).
   ============================================================ */

/* Hero/eyebrow banner used on the Affordable Homes page.  The
   template applies `background: linear-gradient(135deg, #1a6db5,
   #11507f)` with `color: white` directly on the element, which
   overrides everything from the bundle.  We use higher specificity
   (body + class) and !important to win without touching the template. */
body:not(.chat-page):not(.funnel-page) .hero-affordable {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 2.5rem 2rem !important;
}
body:not(.chat-page):not(.funnel-page) .hero-affordable h1,
body:not(.chat-page):not(.funnel-page) .hero-affordable p,
body:not(.chat-page):not(.funnel-page) .hero-affordable i {
  color: var(--ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
body:not(.chat-page):not(.funnel-page) .hero-affordable h1 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 34 !important;
  letter-spacing: -0.01em !important;
}
body:not(.chat-page):not(.funnel-page) .hero-affordable p {
  color: var(--ink-soft) !important;
  opacity: 1 !important;
}
body:not(.chat-page):not(.funnel-page) .hero-affordable i {
  color: var(--brand-blue) !important;
}
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .hero-affordable {
  background: #11192a !important;
  border-color: rgba(126, 196, 245, 0.18) !important;
}
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .hero-affordable h1,
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .hero-affordable p {
  color: #f5efe2 !important;
}
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .hero-affordable p {
  color: #cdd4e0 !important;
}

/* Generic `.page-header` (used on /properties and others) — text-only
   header with a centered h1 + subtitle.  Promote the h1 to serif so
   it matches the funnel/chat editorial typography. */
body:not(.chat-page):not(.funnel-page) .page-header h1 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  font-variation-settings: "opsz" 34 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

/* Tone down the stark-white card surfaces to editorial paper-2 with
   a thin rule border.  Keep input fields / dropdowns white since the
   contrast still matters for form usability. */
body:not(.chat-page):not(.funnel-page) .program-card,
body:not(.chat-page):not(.funnel-page) .listing-card,
body:not(.chat-page):not(.funnel-page) .search-panel,
body:not(.chat-page):not(.funnel-page) .skeleton-card {
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
body:not(.chat-page):not(.funnel-page) .program-card:hover,
body:not(.chat-page):not(.funnel-page) .listing-card:hover {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 10px 24px -16px rgba(11, 27, 43, 0.25) !important;
}
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .program-card,
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .listing-card,
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .search-panel,
[data-theme="dark"] body:not(.chat-page):not(.funnel-page) .skeleton-card {
  background: #11192a !important;
  border-color: rgba(126, 196, 245, 0.18) !important;
}