/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
    /* CODE 1 / globals.css tokens */
    --primary: #5B5FF8;
    --primary-foreground: #ffffff;
    --secondary: #f2f2f8;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --destructive: #d4183d;
    --chart-1: #e07b2d;
    --chart-2: #2d9fa3;
    --chart-3: #3d5a8a;
    --chart-4: #d4a72c;
    --chart-5: #c9a227;
    --radius: 10px;
    --c1: var(--primary);
    --c2: #7b7ffa;
    --grad: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 60%, #fff) 100%);
    --bg: #ffffff;
    --bg-2: color-mix(in srgb, var(--muted) 50%, #fff);
    --bg-3: #f3f3f5;
    --text: #030213;
    --text-2: #374151;
    --border: rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
    --input-bg: #f3f3f5;
    --nav-h: 64px;
    --hero-showcase-gap: clamp(32px, 5vw, 64px);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
}

img { -webkit-user-drag: none; pointer-events: none; }
a { text-decoration: none; color: inherit; transition: all .2s; }
ul { list-style: none; }

/* desktop-only / mobile-only — định nghĩa trong navbar-common.css */

/* ==========================================================================
   MAIN
   ========================================================================== */
.main-container { display: flex; flex-direction: column; flex: 1; width: 100%; }

/* ==========================================================================
   HERO — 2 cột trên desktop
   ========================================================================== */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--hero-showcase-gap, 56px);
    padding: 80px clamp(16px, 4vw, 32px) 80px;
    position: relative;
    overflow: hidden;
    background: var(--bg);
    width: 100%;
    box-sizing: border-box;
}

/* Gradient orb nền */
.hero-section::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 750px;
    height: 700px;
    background: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--primary) 7%, transparent) 0,
        color-mix(in srgb, var(--primary) 7%, transparent) 20%,
        transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    display: flex;
    width: 100%;
    z-index: 2;
    position: relative;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    z-index: 2;
}

.hero-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.illustration-inner {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-lottie-player {
    width: 100%;
    height: 100%;
}

.hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    z-index: 2;
    max-width: 680px;
    width: 100%;
}

.badge-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: calc(var(--radius) - 4px);
    border: 1px solid transparent;
    background: var(--secondary);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

.hero-title {
    font-size: clamp(36px, 5vw + 8px, 70px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
}

.hero-title-line {
    display: block;
    white-space: nowrap;
}

.hero-highlight {
    background: linear-gradient(135deg, #5B5FF8 0%, #818cf8 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.gradient-text {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: clamp(16px, 1vw + 4px, 18px);
    color: var(--muted-foreground);
    line-height: 1.6;
    max-width: 672px;
}

.cta-input-group {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 5px 5px 20px;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cta-input-group:focus-within {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}

.email-field {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 14px;
    -webkit-user-select: auto;
    user-select: auto;
}
.email-field::placeholder { color: #9ca3af; }

.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0 24px;
    height: 40px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: background .2s;
}
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, #000); }

/* Hero right — CODE 1 HeroSection.tsx */
.hero-right {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    z-index: 2;
}

/* CODE 1 HeroSection — relative mx-auto max-w-5xl h-96 lg:h-[500px] */
.hero-showcase-wrap {
    position: relative;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    height: 26rem;
    overflow: visible;
}

.hero-showcase-scene {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
    pointer-events: none;
    user-select: none;
    color: var(--primary);
    isolation: isolate;
    overflow: visible;
}

/* Ảnh trung tâm — cố định giữa khung mọi màn hình */
/* CODE 1 — Central Hub w-24 h-24, luôn nổi trên card 3D */
.showcase-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(120px);
    transform-style: preserve-3d;
    z-index: 20;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

.showcase-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    background: transparent;
    border-radius: 22%;
}

/* CODE 1 — floating-card shadow-lg rounded-2xl transform-gpu */
.floating-card {
    position: absolute;
    z-index: 5;
    box-sizing: border-box;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    padding: 16px;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: none;
}
/* fc bám cố định trong card — không tự transform */
.floating-card .fc-motion {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: none;
    will-change: auto;
}

/* Vị trí thẻ — port từ CODE 1 Tailwind */
.fc-pos-button      { top: 4rem;  left: 5rem;  width: 10rem; height: 6rem; }
.fc-pos-colors      { top: 8rem;  right: 6rem; width: 9rem;  height: 7rem; }
.fc-pos-typography  { bottom: 5rem; left: 3rem;  width: 11rem; height: 8rem; }
.fc-pos-components  { bottom: 6rem; right: 6rem; width: 9.5rem; height: 9rem; }
.fc-pos-spacing     { top: 5rem;  right: 10rem; width: 8rem;  height: 5rem; }
.fc-pos-icons       { bottom: 8rem; left: 8rem;  width: 9rem;  height: 6rem; }
.fc-pos-docs        { top: 10rem; left: 10rem; width: 10rem; height: 7rem; }
.fc-pos-versions    { top: 2.5rem; right: 14rem; width: 8.5rem; height: 6.5rem; }

.fc-label { font-size: 12px; color: var(--muted-foreground); margin-bottom: 8px; }
.fc-bar-group { display: flex; flex-direction: column; gap: 8px; }
.fc-bar-group.fc-gap-xs { gap: 4px; }
.fc-bar-group.fc-gap-sm { gap: 8px; }
.fc-bar-group.fc-gap-md { gap: 12px; }
.fc-bar { border-radius: 4px; display: block; flex-shrink: 0; }
.fc-h-1 { height: 4px; } .fc-h-2 { height: 8px; } .fc-h-3 { height: 12px; } .fc-h-4 { height: 16px; }
.fc-w-4 { width: 16px; } .fc-w-8 { width: 32px; } .fc-w-12 { width: 48px; } .fc-w-16 { width: 64px; }
.fc-w-20 { width: 80px; } .fc-w-24 { width: 96px; } .fc-w-28 { width: 112px; }
.fc-w-full { width: 100%; } .fc-w-3-4 { width: 75%; } .fc-w-4-5 { width: 80%; }
.fc-w-5-6 { width: 83.333%; } .fc-w-2-3 { width: 66.666%; }
.fc-flex-1 { flex: 1; min-width: 0; }
.fc-bg-primary { background: var(--primary); }
.fc-bg-secondary { background: var(--secondary); }
.fc-bg-accent { background: var(--accent); }
.fc-bg-muted { background: var(--muted); }
.fc-bg-destructive { background: var(--destructive); }
.fc-bg-chart-1 { background: var(--chart-1); }
.fc-bg-chart-2 { background: var(--chart-2); }
.fc-bg-chart-3 { background: var(--chart-3); }
.fc-fg-90 { background: color-mix(in srgb, var(--text) 90%, transparent); }
.fc-fg-70 { background: color-mix(in srgb, var(--text) 70%, transparent); }
.fc-fg-20 { background: color-mix(in srgb, var(--text) 20%, transparent); }
.fc-fg-30 { background: color-mix(in srgb, var(--text) 30%, transparent); }
.fc-fg-40 { background: color-mix(in srgb, var(--text) 40%, transparent); }
.fc-fg-50 { background: color-mix(in srgb, var(--text) 50%, transparent); }

.fc-grid-4 { display: grid; grid-template-columns: repeat(4, 16px); gap: 4px; }
.fc-grid-4.fc-gap-md { gap: 8px; }
.fc-grid-4.fc-grid-sm { grid-template-columns: repeat(4, 12px); }
.fc-swatch { width: 16px; height: 16px; border-radius: 4px; }
.fc-swatch-sm { width: 12px; height: 12px; }

.fc-row-item { display: flex; align-items: center; gap: 8px; }
.fc-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.fc-dot-round { border-radius: 50%; }
.fc-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fc-dot-green { background: #22c55e; }
.fc-dot-yellow { background: #eab308; }
.fc-version-text { font-size: 12px; color: var(--text-2); }

.showcase-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .2;
    z-index: 2;
}
.sc-line { animation: scPulse 2s ease-in-out infinite; }
.sc-delay-1 { animation-delay: .5s; }
.sc-delay-2 { animation-delay: 1s; }
.sc-delay-3 { animation-delay: 1.5s; }

.showcase-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.showcase-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    animation: particlePulse 3s ease-in-out infinite;
}

@keyframes scPulse { 0%,100%{opacity:.15} 50%{opacity:.7} }
@keyframes particlePulse { 0%,100%{opacity:.2;transform:scale(1)} 50%{opacity:.8;transform:scale(1.4)} }

/* reveal — dùng scroll-reveal.css global */

/* lg — khung cao hơn một chút */
@media (min-width: 1024px) {
    .hero-showcase-wrap { height: 550px; }
}

/* Mobile/tablet: cùng scene 3D như PC */
.hero-showcase-scene { display: block; }
.showcase-mobile { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .sc-line,
    .showcase-particles span { animation: none; }
}

/* ==========================================================================
   HERO CTA ROW — two buttons
   ========================================================================== */
.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-cta { width: auto; }

.btn-watch-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    transition: background .2s, color .2s;
}
.btn-watch-demo:hover { background: var(--accent); }

@media (max-width: 480px) {
    .hero-cta-row { flex-direction: column; gap: 12px; }
    .btn-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   SECTION DIVIDER
   ========================================================================== */
.section-divider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1px;
    overflow: visible;
}
.section-divider span {
    display: block;
    width: min(880px, 80%);
    height: 1px;
    background: var(--border);
}

/* ==========================================================================
   SHARED SECTION STYLES
   ========================================================================== */
.capabilities-section,
.experience-section {
    padding: 80px clamp(16px, 4vw, 32px);
    width: 100%;
    box-sizing: border-box;
}

.capabilities-section { background: #f6f6fa; border-top: 1px solid rgba(0, 0, 0, 0.05); }
.experience-section   { background: var(--bg); }

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.section-title {
    font-size: clamp(30px, 4vw + 6px, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: clamp(16px, 1vw + 4px, 18px);
    color: var(--muted-foreground);
    max-width: 672px;
    margin: 0 auto 64px;
    line-height: 1.6;
}

.cap-inner { max-width: 72rem; margin: 0 auto; }
.cap-head { text-align: center; margin-bottom: 64px; }
.cap-head h2 {
    font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    color: var(--text);
}
.cap-head p {
    color: var(--muted-foreground);
    font-size: clamp(14px, 1vw + 12px, 16px);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==========================================================================
   CAPABILITIES CARDS
   ========================================================================== */
.cap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
}

.cap-card {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--border) 100%, #e5e7eb);
    border-radius: 20px;
    background: #fff;
    padding: 24px;
    height: 16rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.cap-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 12%, transparent);
}

.cap-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cap-card:hover .cap-icon {
    transform: scale(1.1) rotate(4deg);
}

/* Individual Card Icon Palettes */
.cap-grid article:nth-child(1) .cap-icon { background: #eef0ff; color: #5B5FF8; border: 1px solid color-mix(in srgb, #5B5FF8 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #5B5FF8 8%, transparent); }
.cap-grid article:nth-child(1):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #5B5FF8 18%, transparent); }

.cap-grid article:nth-child(2) .cap-icon { background: #fff7ed; color: #ea580c; border: 1px solid color-mix(in srgb, #ea580c 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #ea580c 8%, transparent); }
.cap-grid article:nth-child(2):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #ea580c 18%, transparent); }

.cap-grid article:nth-child(3) .cap-icon { background: #ecfdf5; color: #059669; border: 1px solid color-mix(in srgb, #059669 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #059669 8%, transparent); }
.cap-grid article:nth-child(3):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #059669 18%, transparent); }

.cap-grid article:nth-child(4) .cap-icon { background: #f5f3ff; color: #7c3aed; border: 1px solid color-mix(in srgb, #7c3aed 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #7c3aed 8%, transparent); }
.cap-grid article:nth-child(4):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #7c3aed 18%, transparent); }

.cap-grid article:nth-child(5) .cap-icon { background: #fdf2f8; color: #db2777; border: 1px solid color-mix(in srgb, #db2777 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #db2777 8%, transparent); }
.cap-grid article:nth-child(5):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #db2777 18%, transparent); }

.cap-grid article:nth-child(6) .cap-icon { background: #e8f5ff; color: #0284c7; border: 1px solid color-mix(in srgb, #0284c7 12%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #0284c7 8%, transparent); }
.cap-grid article:nth-child(6):hover .cap-icon { box-shadow: 0 4px 12px color-mix(in srgb, #0284c7 18%, transparent); }

.cap-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    padding: 2px 10px;
    border-radius: 100px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

.cap-card h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--text);
}

.cap-card p {
    color: var(--muted-foreground);
    font-size: 13px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cap-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   EXPERIENCE / GEMINI DEMO
   ========================================================================== */
.experience-demo {
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.demo-input-row {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 6px 6px 18px;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.demo-input-row:focus-within {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 8%, transparent);
}

.demo-input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--text); font-size: 14px;
    -webkit-user-select: auto; user-select: auto;
}
.demo-input::placeholder { color: #9ca3af; }

.btn-generate {
    position: relative;
    display: inline-flex; align-items: center;
    background: var(--primary);
    color: var(--primary-foreground); border: none;
    border-radius: var(--radius);
    padding: 9px 18px 9px 0.9em;
    font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}
.btn-generate:active:not(:disabled) { transform: scale(0.95); }
.btn-generate:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-generate-icon-wrap,
.btn-generate-icon-inner {
    display: inline-flex;
    align-items: center;
}
.btn-generate-icon {
    display: block;
    flex-shrink: 0;
    transform-origin: center;
    transition: transform 0.3s ease;
}
.btn-generate-label {
    margin-left: 4px;
    transition: transform 0.3s ease;
}
.btn-generate:hover:not(:disabled) .btn-generate-icon-inner {
    animation: btn-generate-fly 0.6s ease-in-out infinite alternate;
}
.btn-generate:hover:not(:disabled) .btn-generate-icon {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}
.btn-generate:hover:not(:disabled) .btn-generate-label {
    transform: translateX(4em);
}
@keyframes btn-generate-fly {
    from { transform: translateY(0.1em); }
    to { transform: translateY(-0.1em); }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    background-color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.demo-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; margin-bottom: 24px;
}

.demo-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #d5d5d5;
    font-size: 12px; padding: 6px 14px;
    cursor: pointer; transition: all .18s;
    -webkit-user-select: none; user-select: none;
}
.demo-chip:hover {
    background: var(--accent);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    color: var(--primary);
}

.demo-chat-box {
    background: color-mix(in srgb, var(--primary) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
    border-radius: 14px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    min-height: 0;
    transition: opacity .3s ease, margin .3s ease;
}
.demo-chat-box.visible {
    height: min(300px, 42vh);
    max-height: min(300px, 42vh);
    opacity: 1;
    margin-bottom: 12px;
}
.demo-chat-header {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    color: var(--primary);
    font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    flex-shrink: 0;
}
.demo-chat-header .demo-chat-sparkle {
    flex-shrink: 0;
    animation: demo-chat-spin 3s linear infinite;
}
@keyframes demo-chat-spin {
    to { transform: rotate(360deg); }
}
.demo-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.demo-chat-bubble {
    max-width: 88%;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.65;
    -webkit-user-select: text;
    user-select: text;
    word-break: break-word;
}
.demo-chat-bubble--user {
    align-self: flex-end;
    background: var(--primary);
    color: var(--primary-foreground);
    border-bottom-right-radius: 4px;
}
.demo-chat-bubble--assistant {
    align-self: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-bottom-left-radius: 4px;
}
.demo-chat-bubble--assistant p { margin: 0 0 8px; }
.demo-chat-bubble--assistant p:last-child { margin-bottom: 0; }
.demo-chat-list {
    margin: 6px 0 8px;
    padding-left: 18px;
    list-style: disc;
}
.demo-chat-list li { margin-bottom: 4px; }
.experience-section.chat-active {
    scroll-margin-top: 72px;
}

@media (max-width: 992px) {
    .demo-input,
    .demo-input::placeholder {
        font-size: 16px !important;
    }
    .demo-chat-box.visible {
        height: min(260px, 36vh);
        max-height: min(260px, 36vh);
    }
    .floating-card .fc-label { margin-bottom: 6px; }
    .floating-card .fc-bar-group { gap: 6px; }
    .floating-card .fc-bar-group.fc-gap-xs { gap: 3px; }
    .floating-card .fc-bar-group.fc-gap-md { gap: 8px; }
    .floating-card .fc-grid-4 { gap: 3px; }
    .floating-card .fc-grid-4.fc-gap-md { gap: 5px; }
}

.typing-dots span { animation: blink 1.2s infinite; opacity: 0; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.technex-footer {
    width: 100%;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    color: var(--muted);
    font-size: 13px;
}