/*==========================================================
UNTOLD
STYLE.CSS
PHASE 1
==========================================================*/

/*========================
GOOGLE FONT
========================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*========================
ROOT
========================*/

:root{

    --primary:#5B6CFF;
    --primary-dark:#4458ff;

    --secondary:#7C8BFF;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;

    --white:#ffffff;

    --gray-50:#fafafa;
    --gray-100:#f5f5f5;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-400:#9ca3af;
    --gray-500:#6b7280;
    --gray-600:#4b5563;
    --gray-700:#374151;
    --gray-800:#1f2937;
    --gray-900:#111827;

    --body:#fcfcfd;

    --radius-sm:10px;
    --radius:16px;
    --radius-lg:24px;
    --radius-xl:32px;

    --shadow-sm:
        0 2px 10px rgba(0,0,0,.05);

    --shadow:
        0 12px 35px rgba(0,0,0,.08);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.12);

    --transition:.30s ease;

    --container:1240px;

    --navH:84px;

    /* Floating action stack (fab / ai-bot / ai-chat), bottom-right */
    --fab-size:66px;
    --fab-gap:16px;
    --fab-bottom:34px;
    --fab-right:34px;

    --ai-bot-size:68px;

}

/*========================
DARK THEME
========================*/

body.dark{

    --body:#0f172a;

    --white:#111827;

    --gray-50:#0b1220;
    --gray-100:#111827;
    --gray-200:#1f2937;
    --gray-300:#374151;
    --gray-400:#6b7280;
    --gray-500:#9ca3af;
    --gray-600:#d1d5db;
    --gray-700:#e5e7eb;
    --gray-800:#f3f4f6;
    --gray-900:#ffffff;

}

/*========================
RESET
========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--body);

    color:var(--gray-900);

    line-height:1.6;

    overflow-x:hidden;

    transition:background .4s,color .4s;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/*========================
SELECTION
========================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*========================
IMAGES
========================*/

img{

    display:block;

    max-width:100%;

}

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

a{

    text-decoration:none;

    color:inherit;

}

/*========================
BUTTONS
========================*/

button{

    border:none;

    outline:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

/*========================
INPUTS
========================*/

input,
textarea{

    font-family:inherit;

    outline:none;

}

/*========================
LIST
========================*/

ul{

    list-style:none;

}

/*========================
CONTAINER
========================*/

.container{

    width:min(
        92%,
        var(--container)
    );

    margin:auto;

}

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

section{

    padding:110px 0;

}

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

h1{

    font-size:clamp(2.2rem, 4.6vw, 4.5rem);

    line-height:1.05;

    font-weight:800;

}

h2{

    font-size:clamp(1.7rem, 3vw, 2.9rem);

    line-height:1.2;

    font-weight:700;

}

h3{

    font-size:1.35rem;

    font-weight:700;

}

p{

    color:var(--gray-500);

}

/*========================
SKIP LINK
========================*/

.skip-link{

    position:fixed;

    top:-60px;

    left:16px;

    z-index:10000;

    background:var(--primary);

    color:#fff;

    padding:12px 20px;

    border-radius:12px;

    font-weight:700;

    transition:top .25s ease;

}

.skip-link:focus{

    top:16px;

}

/*========================
SECTION TAG
========================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#eef2ff;

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:18px;

}

body.dark .section-tag{

    background:rgba(91,108,255,.15);

}

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

.section-header{

    max-width:760px;

    margin:auto auto 70px;

    text-align:center;

}

.section-header h2{

    margin-bottom:18px;

}

.section-header p{

    font-size:1.08rem;

}

/*========================
PRIMARY BUTTON
========================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 28px;

    background:var(--primary);

    color:#fff;

    border-radius:16px;

    font-weight:700;

    transition:transform var(--transition),box-shadow var(--transition),filter var(--transition);

    box-shadow:

        0 12px 30px rgba(91,108,255,.25);

    white-space:nowrap;

}

.primary-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

}

.primary-btn:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

}

/*========================
GHOST BUTTON
========================*/

.ghost-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 24px;

    border-radius:16px;

    border:1px solid var(--gray-200);

    color:var(--gray-800);

    background:#fff;

    transition:var(--transition);

}

.ghost-btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

/*========================
SECONDARY BUTTON
========================*/

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 26px;

    border-radius:16px;

    border:1px solid var(--gray-200);

    transition:.3s;

    font-weight:600;

}

.secondary-btn:hover{

    transform:translateY(-3px);

    background:#fff;

}

/*========================
ICON BUTTON
========================*/

.icon-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid var(--gray-200);

    transition:.3s;

    flex-shrink:0;

}

.icon-btn:hover{

    transform:rotate(15deg);

    box-shadow:var(--shadow);

}

/*========================
HIDDEN
========================*/

.hidden{

    display:none !important;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f4f6;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes popIn{

    from{

        opacity:0;

        transform:scale(.92) translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*========================
UTILITY CLASSES
========================*/

.text-center{

    text-align:center;

}

.mt-2{

    margin-top:20px;

}

.mt-4{

    margin-top:40px;

}

.mb-2{

    margin-bottom:20px;

}

.mb-4{

    margin-bottom:40px;

}

.shadow{

    box-shadow:var(--shadow);

}

.radius{

    border-radius:var(--radius-lg);

}

/*==========================================================
PHASE 2
NAVBAR + HERO
==========================================================*/

/*========================
NAVBAR
========================*/

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.72);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.35s;

}

.navbar.scrolled{

    background:rgba(255,255,255,.92);

    box-shadow:var(--shadow-sm);

}

body.dark .navbar{

    background:rgba(15,23,42,.78);

    border-color:rgba(255,255,255,.08);

}

body.dark .navbar.scrolled{

    background:rgba(15,23,42,.94);

}

.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:var(--navH);

}

/*========================
LOGO
========================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:1.45rem;

    font-weight:800;

}

.logo img{

    width:46px;

    height:46px;

    object-fit:contain;

    border-radius:12px;

}

.logo span{

    color:var(--gray-900);

}

/*========================
DESKTOP NAV
========================*/

.desktop-nav{

    display:flex;

    align-items:center;

    gap:42px;

}

.desktop-nav a{

    position:relative;

    color:var(--gray-600);

    font-weight:600;

    transition:.3s;

}

.desktop-nav a:hover{

    color:var(--primary);

}

.desktop-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.desktop-nav a:hover::after{

    width:100%;

}

/*========================
NAV ACTIONS
========================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

/*========================
MOBILE BUTTON
========================*/

.mobile-menu-btn{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--gray-200);

    transition:.3s;

    align-items:center;

    justify-content:center;

}

body.dark .mobile-menu-btn{

    background:#1f2937;

    border-color:#374151;

    color:#f8fafc;

}

.mobile-menu-btn:hover{

    transform:rotate(90deg);

}

/*========================
MOBILE MENU
========================*/

.mobile-menu-backdrop{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(4px);

    z-index:998;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

.mobile-menu-backdrop.show{

    opacity:1;

    pointer-events:auto;

}

.mobile-menu{

    position:fixed;

    top:0;

    right:0;

    height:100%;

    width:min(84%,340px);

    background:#fff;

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:110px 30px 30px;

    transform:translateX(100%);

    transition:.35s cubic-bezier(.22,.9,.35,1);

    z-index:999;

    box-shadow:var(--shadow-lg);

}

body.dark .mobile-menu{

    background:#111827;

}

.mobile-menu.active{

    transform:none;

}

.mobile-menu a{

    font-size:1.1rem;

    font-weight:600;

    padding:14px 4px;

    border-bottom:1px solid var(--gray-200);

}

.mobile-menu-actions{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-top:26px;

}

.mobile-menu-actions button{

    width:100%;

}

/*========================
HERO
========================*/

.hero{

    padding-top:180px;

    padding-bottom:120px;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-180px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(91,108,255,.18),

        transparent 70%

    );

    pointer-events:none;

}

/*========================
GRID
========================*/

.hero-grid{

    display:grid;

    grid-template-columns:

        1.05fr

        .95fr;

    gap:80px;

    align-items:center;

}

/*========================
CONTENT
========================*/

.hero-content{

    animation:fadeUp .9s;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    background:#eef2ff;

    color:var(--primary);

    border-radius:999px;

    font-weight:700;

    margin-bottom:28px;

}

body.dark .hero-badge{

    background:rgba(91,108,255,.15);

}

.hero-content h1{

    max-width:650px;

    margin-bottom:26px;

}

.hero-content p{

    font-size:1.12rem;

    max-width:600px;

    margin-bottom:38px;

    line-height:1.9;

}

/*========================
BUTTON GROUP
========================*/

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

/*========================
STATS
========================*/

.hero-stats{

    display:flex;

    gap:60px;

    flex-wrap:wrap;

}

.hero-stats div{

    display:flex;

    flex-direction:column;

}

.hero-stats h2{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:6px;

}

.hero-stats span{

    color:var(--gray-500);

}

/*========================
SHOWCASE
========================*/

.hero-showcase{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:650px;

}

/*========================
FLOATING CARD
========================*/

.floating-card{

    width:420px;

    max-width:100%;

    background:#fff;

    border-radius:28px;

    padding:30px;

    box-shadow:var(--shadow-lg);

    animation:

        float

        6s

        ease-in-out

        infinite;

}

body.dark .floating-card{

    background:#111827;

}

.card-head{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

}

.card-head img{

    width:42px;

    border-radius:10px;

}

.card-head span{

    font-weight:700;

}

.floating-card h3{

    font-size:1.5rem;

    line-height:1.5;

    margin-bottom:20px;

}

.floating-card p{

    margin-bottom:28px;

}

.card-footer{

    display:flex;

    justify-content:space-between;

    color:var(--gray-500);

    font-size:.95rem;

}

/*========================
SMALL FLOATING CARDS
========================*/

.floating-card.small{

    position:absolute;

    width:230px;

    padding:22px;

    border-radius:22px;

    left:-30px;

    top:90px;

    animation-delay:1s;

}

.floating-card.small.right{

    right:-30px;

    left:auto;

    bottom:80px;

    top:auto;

    animation-delay:2s;

}

.floating-card.small h4{

    line-height:1.6;

    font-size:1.05rem;

}

/*========================
HOVER
========================*/

.floating-card:hover{

    transform:

        translateY(-8px)

        rotate(-1deg);

    transition:.4s;

}

/*========================
RESPONSIVE
========================*/

@media(max-width:1100px){

.hero-grid{

    grid-template-columns:1fr;

}

.hero-content{

    text-align:center;

}

.hero-content h1,
.hero-content p{

    margin-inline:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.hero-showcase{

    margin-top:70px;

}

}

@media(max-width:860px){

.desktop-nav{

    display:none;

}

.mobile-menu-btn{

    display:flex;

}

.hero{

    padding-top:150px;

}

.hero-showcase{

    min-height:520px;

}

.floating-card{

    width:100%;

}

.floating-card.small{

    display:none;

}

}

@media(max-width:650px){

.nav-actions .ghost-btn,
.nav-actions .primary-btn{

    display:none;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a,

.hero-buttons button{

    width:100%;

}

.hero-stats{

    gap:28px;

}

.hero-stats h2{

    font-size:1.5rem;

}

}


/*==========================================================
PHASE 3
LANDING PAGE SECTIONS
==========================================================*/

/*========================
FEATURES
========================*/

.features{

    background:linear-gradient(
        180deg,
        transparent,
        rgba(91,108,255,.03)
    );

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.feature-card{

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:28px;

    padding:38px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

body.dark .feature-card{

    background:#111827;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:var(--primary);

    transform:scaleX(0);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-lg);

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#eef2ff;

    color:var(--primary);

    font-size:1.7rem;

    margin-bottom:28px;

}

body.dark .feature-icon{

    background:rgba(91,108,255,.15);

}

.feature-card h3{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

}

.feature-card p{

    line-height:1.9;

}

/*========================
NEW BADGE (feature highlight)
========================*/

.new-badge{

    display:inline-block;

    padding:3px 12px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:.62rem;

    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;

    vertical-align:middle;

}

/*========================
HOW IT WORKS
========================*/

.steps{

    background:var(--body);

}

.steps-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.step{

    background:#fff;

    border-radius:30px;

    padding:45px;

    text-align:center;

    border:1px solid var(--gray-200);

    transition:.35s;

}

body.dark .step{

    background:#111827;

}

.step:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.step-number{

    width:76px;

    height:76px;

    margin:auto;

    margin-bottom:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:1.6rem;

    font-weight:800;

}

.step h3{

    margin-bottom:16px;

}

/*========================
PREVIEW
========================*/

.preview{

    background:linear-gradient(
        180deg,
        rgba(91,108,255,.03),
        transparent
    );

}

.preview-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.thought-preview{

    background:#fff;

    border-radius:30px;

    padding:34px;

    border:1px solid var(--gray-200);

    transition:.35s;

    display:flex;

    flex-direction:column;

    gap:20px;

}

body.dark .thought-preview{

    background:#111827;

}

.thought-preview:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.preview-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.preview-top span{

    background:#eef2ff;

    color:var(--primary);

    padding:8px 16px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

}

body.dark .preview-top span{

    background:rgba(91,108,255,.15);

}

.preview-top small{

    color:var(--gray-500);

}

.preview-bottom{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    color:var(--gray-500);

    font-weight:600;

}

/*========================
ABOUT
========================*/

.about{

    padding-top:40px;

}

.about-card{

    background:linear-gradient(
        135deg,
        var(--primary),
        #7b89ff
    );

    color:#fff;

    border-radius:36px;

    padding:80px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.about-card::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-180px;

    right:-120px;

}

.about-card .section-tag{

    background:rgba(255,255,255,.18);

    color:#fff;

}

.about-card h2{

    margin-bottom:24px;

}

.about-card p{

    color:rgba(255,255,255,.92);

    max-width:780px;

    margin:auto;

    font-size:1.1rem;

    line-height:2;

}

/*========================
CTA
========================*/

.cta{

    padding-top:80px;

}

.cta-card{

    background:#fff;

    border-radius:36px;

    text-align:center;

    padding:80px 40px;

    border:1px solid var(--gray-200);

    box-shadow:var(--shadow);

}

body.dark .cta-card{

    background:#111827;

}

.cta-card h2{

    margin-bottom:20px;

}

.cta-card p{

    max-width:650px;

    margin:auto;

    margin-bottom:40px;

    font-size:1.08rem;

}

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

footer{

    padding:90px 0 30px;

    background:#0f172a;

    color:#fff;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    margin-bottom:60px;

}

.footer-logo{

    margin-bottom:24px;

}

footer p{

    color:rgba(255,255,255,.7);

}

footer h4{

    margin-bottom:22px;

}

footer a{

    display:block;

    margin-bottom:14px;

    color:rgba(255,255,255,.7);

    transition:.3s;

}

footer a:hover{

    color:#fff;

    transform:translateX(6px);

}

.copyright{

    text-align:center;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.55);

    font-size:.95rem;

}

/*========================
RESPONSIVE
========================*/

@media(max-width:1100px){

.feature-grid{

    grid-template-columns:repeat(2,1fr);

}

.preview-grid{

    grid-template-columns:repeat(2,1fr);

}

.steps-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:700px){

.feature-grid{

    grid-template-columns:1fr;

}

.preview-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.about-card{

    padding:50px 28px;

}

.cta-card{

    padding:50px 28px;

}

.about-card h2{

    font-size:2.2rem;

}

}

/*==========================================================
PHASE 4
AUTH + DASHBOARD
==========================================================*/

/*========================
AUTH OVERLAY
========================*/

.auth-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(14px);

    z-index:3000;

    animation:fadeUp .35s;

}

/*========================
AUTH CARD
========================*/

.auth-card{

    width:100%;

    max-width:470px;

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:32px;

    padding:42px;

    position:relative;

    box-shadow:var(--shadow-lg);

    animation:popIn .3s ease;

}

body.dark .auth-card{

    background:#111827;

}

/*========================
CLOSE BUTTON
========================*/

.close-btn{

    position:absolute;

    top:22px;

    right:22px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gray-100);

    transition:.3s;

}

.close-btn:hover{

    background:var(--danger);

    color:#fff;

}

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

.auth-logo{

    text-align:center;

    margin-bottom:34px;

}

.auth-logo img{

    width:72px;

    margin:auto auto 20px;

    border-radius:18px;

}

.auth-logo h2{

    font-size:2rem;

    margin-bottom:10px;

}

.auth-logo p{

    color:var(--gray-500);

}

/*========================
FORM
========================*/

.auth-form{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.auth-form label{

    font-weight:600;

    color:var(--gray-700);

}

.auth-form input{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    border:1px solid var(--gray-200);

    background:#fff;

    transition:.3s;

    font-size:1rem;

}

body.dark .auth-form input{

    background:#1f2937;

    border-color:#374151;

    color:#fff;

}

.auth-form input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(91,108,255,.15);

}

.auth-submit{

    margin-top:14px;

    width:100%;

}

/*========================
SWITCH TEXT
========================*/

.switch-text{

    text-align:center;

    margin-top:12px;

    color:var(--gray-500);

}

.text-btn{

    color:var(--primary);

    font-weight:700;

}

.text-btn:hover{

    text-decoration:underline;

}

/*========================
DASHBOARD
========================*/

.dashboard{

    min-height:100vh;

    display:grid;

    grid-template-columns:290px 1fr;

    background:var(--body);

}

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

.sidebar{

    position:sticky;

    top:0;

    height:100vh;

    background:#fff;

    border-right:1px solid var(--gray-200);

    padding:34px 24px;

    display:flex;

    flex-direction:column;

    z-index:1200;

}

body.dark .sidebar{

    background:#111827;

}

.sidebar-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:60px;

}

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

.sidebar-logo{

    display:flex;

    align-items:center;

    gap:14px;

    font-size:1.45rem;

    font-weight:800;

}

.sidebar-logo img{

    width:48px;

    border-radius:12px;

}

.sidebar-close{

    display:none;

}

/*========================
NAVIGATION
========================*/

.sidebar-nav{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.nav-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    color:var(--gray-600);

    transition:.3s;

    font-weight:600;

}

.nav-item i{

    width:20px;

    text-align:center;

}

.nav-item:hover{

    background:#eef2ff;

    color:var(--primary);

}

body.dark .nav-item:hover{

    background:rgba(91,108,255,.15);

}

.nav-item.active{

    background:var(--primary);

    color:#fff;

}

/*========================
BOTTOM
========================*/

.sidebar-bottom{

    margin-top:auto;

}

.logout-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:16px;

    border-radius:18px;

    background:#fee2e2;

    color:var(--danger);

    font-weight:700;

    transition:.3s;

}

body.dark .logout-btn{

    background:rgba(239,68,68,.15);

}

.logout-btn:hover{

    transform:translateY(-3px);

}

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

.sidebar-backdrop{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.5);

    backdrop-filter:blur(4px);

    z-index:1100;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

.sidebar-backdrop.show{

    opacity:1;

    pointer-events:auto;

}

/*========================
SIDEBAR OPEN BUTTON (mobile)
========================*/

.sidebar-open{

    display:none;

}

/*========================
CONTENT
========================*/

.dashboard-content{

    padding:45px;

    min-width:0;

}

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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:40px;

}

.dashboard-header h1{

    font-size:2.2rem;

}

.dashboard-header p{

    margin-top:8px;

}

/*========================
EDIT BAR
========================*/

#editBar{

    display:none;

    justify-content:space-between;

    align-items:center;

    background:#eef2ff;

    color:var(--primary);

    padding:18px 24px;

    border-radius:18px;

    margin-bottom:24px;

    animation:popIn .25s ease;

}

body.dark #editBar{

    background:rgba(91,108,255,.15);

}

#editBar.show{

    display:flex;

}

#cancelEditBtn{

    color:var(--danger);

    font-weight:700;

}

/*========================
COMPOSER
========================*/

.composer{

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:28px;

    padding:34px;

    margin-bottom:40px;

    box-shadow:var(--shadow-sm);

    scroll-margin-top:100px;

}

body.dark .composer{

    background:#111827;

}

.composer h2{

    font-size:1.8rem;

    margin-bottom:26px;

}

.composer input,

.composer textarea{

    width:100%;

    padding:18px;

    border-radius:18px;

    border:1px solid var(--gray-200);

    margin-bottom:18px;

    background:#fff;

    transition:.3s;

    resize:vertical;

    font-size:1rem;

}

body.dark .composer input,

body.dark .composer textarea{

    background:#1f2937;

    border-color:#374151;

    color:#fff;

}

.composer input:focus,

.composer textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(91,108,255,.15);

}

#saveBtn{

    width:100%;

    justify-content:center;

}

/*========================
SECTION HEAD
========================*/

.section-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:26px;

}

.section-head h2{

    font-size:1.8rem;

}

/*========================
NOTES GRID
========================*/

#notes,

#exploreNotes{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:26px;

    align-items:start;

}

/*========================
RESPONSIVE
========================*/

@media(max-width:1100px){

.dashboard{

    grid-template-columns:1fr;

}

.sidebar{

    position:fixed;

    top:0;

    left:0;

    transform:translateX(-100%);

    width:290px;

    z-index:1200;

    transition:.35s cubic-bezier(.22,.9,.35,1);

    box-shadow:var(--shadow-lg);

}

.sidebar.active{

    transform:none;

}

.sidebar-backdrop{

    display:block;

}

.sidebar-close{

    display:flex;

}

.sidebar-open{

    display:flex;

}

.dashboard-content{

    padding:28px;

}

}

@media(max-width:700px){

.auth-card{

    padding:28px;

}

.dashboard-header{

    flex-direction:row;

    align-items:center;

}

.dashboard-header h1{

    font-size:1.5rem;

}

.dashboard-header p{

    font-size:.92rem;

}

.composer{

    padding:24px;

}

#notes,
#exploreNotes{

    grid-template-columns:1fr;

}

}


/*==========================================================
PHASE 5
CARDS + UTILITIES
==========================================================*/

/*========================
DYNAMIC THOUGHT CARD
(rendered by script.js for My Thoughts / Explore)
========================*/

.thought-card{

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:28px;

    padding:28px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

    display:flex;

    flex-direction:column;

    gap:16px;

    animation:popIn .3s ease;

}

body.dark .thought-card{

    background:#111827;

}

.thought-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.thought-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

}

.thought-top h3{

    font-size:1.3rem;

    word-break:break-word;

}

.thought-top small{

    flex-shrink:0;

    background:#eef2ff;

    color:var(--primary);

    padding:6px 14px;

    border-radius:999px;

    font-size:.78rem;

    font-weight:700;

}

body.dark .thought-top small{

    background:rgba(91,108,255,.15);

}

.thought-card > p{

    color:var(--gray-500);

    line-height:1.85;

    word-break:break-word;

    overflow-wrap:anywhere;

}

.thought-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:auto;

    padding-top:6px;

}

.thought-footer > span{

    color:var(--gray-500);

    font-weight:600;

}

.thought-footer > div{

    display:flex;

    gap:10px;

}

/*========================
ACTIONS
========================*/

.edit-btn,
.delete-btn{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

    background:var(--gray-100);

}

.edit-btn:hover{

    transform:translateY(-3px);

    background:#eef2ff;

}

.delete-btn:hover{

    transform:translateY(-3px);

    background:#fee2e2;

}

.edit-btn{

    color:var(--primary);

}

.delete-btn{

    color:var(--danger);

}

/*========================
LIKE BUTTON
========================*/

.like-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:var(--gray-100);

    color:var(--gray-600);

    font-weight:700;

    transition:.3s;

}

.like-btn:hover{

    transform:translateY(-3px);

    background:#fde2ec;

    color:#ec4899;

}

.like-btn.liked{

    background:#ec4899;

    color:#fff;

}

.like-btn.liked:hover{

    background:#db2777;

    color:#fff;

}

/*========================
TOAST
========================*/

.toast{

    position:fixed;

    right:28px;

    bottom:28px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 24px;

    background:#111827;

    color:#fff;

    border-radius:18px;

    box-shadow:var(--shadow-lg);

    transform:translateY(120px);

    opacity:0;

    transition:.35s;

    z-index:5000;

    max-width:min(90vw,380px);

}

.toast.show{

    opacity:1;

    transform:none;

}

.toast i{

    color:var(--success);

    font-size:1.2rem;

    flex-shrink:0;

}

/*========================
LOADER
========================*/

.loading-screen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    z-index:6000;

}

body.dark .loading-screen{

    background:rgba(15,23,42,.94);

}

.loader-wrapper{

    text-align:center;

}

.loader-wrapper img{

    width:72px;

    margin:auto;

    margin-bottom:22px;

    animation:pulse 1.5s infinite;

    border-radius:16px;

}

.loader-wrapper p{

    font-weight:600;

}

.loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid #e5e7eb;

    border-top:5px solid var(--primary);

    margin:auto;

    margin-bottom:20px;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*========================
FAB
========================*/

.fab{

    position:fixed;

    right:34px;

    bottom:34px;

    width:66px;

    height:66px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.35rem;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 20px 40px rgba(91,108,255,.35);

    transition:.35s;

    z-index:900;

    right:calc(34px + env(safe-area-inset-right));

    bottom:calc(34px + env(safe-area-inset-bottom));

}

.fab:hover{

    transform:translateY(-6px) rotate(12deg);

}

/*========================
BACK TO TOP
========================*/

.back-to-top{

    position:fixed;

    left:34px;

    bottom:34px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--gray-200);

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

    transition:.3s;

    opacity:0;

    pointer-events:none;

    z-index:900;

    left:calc(34px + env(safe-area-inset-left));

    bottom:calc(34px + env(safe-area-inset-bottom));

}

.back-to-top.show{

    opacity:1;

    pointer-events:auto;

}

.back-to-top:hover{

    transform:translateY(-5px);

}

/*========================
DELETE MODAL
========================*/

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(15,23,42,.6);

    backdrop-filter:blur(10px);

    z-index:5000;

    padding:20px;

}

.modal-card{

    width:100%;

    max-width:430px;

    background:#fff;

    border-radius:30px;

    padding:40px;

    text-align:center;

    animation:popIn .3s ease;

}

body.dark .modal-card{

    background:#111827;

}

.modal-icon{

    width:74px;

    height:74px;

    border-radius:50%;

    margin:auto auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fee2e2;

    color:var(--danger);

    font-size:1.7rem;

}

.modal-actions{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.modal-actions button{

    flex:1;

}

/*========================
DANGER BUTTON
========================*/

.danger-btn{

    padding:15px;

    border-radius:16px;

    background:var(--danger);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.danger-btn:hover{

    background:#dc2626;

    transform:translateY(-3px);

}

/*========================
EMPTY STATE
========================*/

.empty-state{

    grid-column:1/-1;

    padding:70px 20px;

    text-align:center;

}

.empty-state img{

    width:210px;

    margin:auto auto 30px;

    opacity:.9;

}

.empty-state h2{

    margin-bottom:16px;

    font-size:2rem;

}

.empty-state p{

    max-width:500px;

    margin:auto;

}

/*========================
CREDITS
========================*/

.credits{

    text-align:center;

    padding:30px;

    color:var(--gray-500);

    font-size:.92rem;

}

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

@media(max-width:768px){

:root{

    /* Single source of truth for the whole floating stack
       (.fab / .ai-bot / .ai-chat / .back-to-top) on mobile.
       Because .ai-bot and .ai-chat position themselves with
       calc() off these same vars, they now automatically stay
       in sync with the FAB instead of using separate hardcoded
       numbers at a different breakpoint (that mismatch was why
       the bot could end up mispositioned/clipped on phones). */
    --fab-size:58px;
    --fab-gap:14px;
    --fab-bottom:20px;
    --fab-right:20px;
    --ai-bot-size:60px;

}

.fab{

    width:var(--fab-size);

    height:var(--fab-size);

    right:calc(var(--fab-right) + env(safe-area-inset-right));

    bottom:calc(var(--fab-bottom) + env(safe-area-inset-bottom));

}

.back-to-top{

    width:50px;

    height:50px;

    left:calc(20px + env(safe-area-inset-left));

    bottom:calc(var(--fab-bottom) + env(safe-area-inset-bottom));

}

.modal-card{

    margin:20px;

    padding:28px;

}

.toast{

    left:20px;

    right:20px;

    bottom:20px;

    max-width:none;

}

}

/*==========================================================
PHASE 6
FINAL POLISH
==========================================================*/

/*========================
GLOBAL TRANSITIONS
========================*/

*,
*::before,
*::after{

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

/*========================
FOCUS STATES
========================*/

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(91,108,255,.35);

    border-radius:8px;

}

/*========================
CARD HOVER EFFECT
========================*/

.feature-card,
.step,
.thought-preview,
.thought-card,
.composer,
.cta-card,
.about-card,
.floating-card{

    will-change:transform;

    transition:transform .35s ease,box-shadow .35s ease,background-color .3s ease,border-color .3s ease;

}

/*========================
BUTTON ACTIVE
========================*/

.primary-btn:active,
.secondary-btn:active,
.ghost-btn:active,
.icon-btn:active,
.like-btn:active,
.edit-btn:active,
.delete-btn:active,
.fab:active{

    transform:scale(.96);

}

/*========================
INPUT PLACEHOLDER
========================*/

input::placeholder,
textarea::placeholder{

    color:var(--gray-400);

}

/*========================
TEXT SELECTION
========================*/

h1,
h2,
h3{

    letter-spacing:-0.03em;

}

/*========================
SMOOTH IMAGES
========================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

/*========================
BODY LOCK
========================*/

body.modal-open{

    overflow:hidden;

}

/*========================
DASHBOARD SPACING
========================*/

.dashboard-content>*+*{

    margin-top:30px;

}

/*========================
AUTH INPUT AUTOFILL
========================*/

input:-webkit-autofill{

    -webkit-box-shadow:
        0 0 0 1000px #fff inset;

}

body.dark input:-webkit-autofill{

    -webkit-box-shadow:
        0 0 0 1000px #1f2937 inset;

    -webkit-text-fill-color:#fff;

}

/*========================
SCROLL OFFSET
========================*/

html{

    scroll-padding-top:100px;

}

/*========================
REDUCED MOTION
========================*/

@media(prefers-reduced-motion:reduce){

*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}

}

/*========================
LARGE DESKTOP
========================*/

@media(min-width:1600px){

.container{

    max-width:1400px;

}

}

/*========================
TABLET
========================*/

@media(max-width:992px){

section{

    padding:90px 0;

}

.dashboard-content{

    padding:24px;

}

.hero-grid{

    gap:50px;

}

}

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

@media(max-width:768px){

section{

    padding:70px 0;

}

.container{

    width:94%;

}

.hero{

    padding-top:130px;

}

.hero-buttons{

    gap:14px;

}

.section-header{

    margin-bottom:50px;

}

.feature-card,
.step,
.thought-preview{

    padding:26px;

}

.dashboard-header{

    margin-bottom:24px;

}

.composer{

    padding:22px;

}

.thought-card{

    padding:22px;

}

.about-card,

.cta-card{

    border-radius:24px;

}

.footer-grid{

    gap:40px;

}

}

/*========================
SMALL MOBILE
========================*/

@media(max-width:480px){

.logo span{

    display:none;

}

.primary-btn,
.secondary-btn,
.ghost-btn{

    width:100%;

}

.nav-actions{

    gap:10px;

}

.feature-icon{

    width:60px;

    height:60px;

    font-size:1.4rem;

}

.step-number{

    width:60px;

    height:60px;

    font-size:1.2rem;

}

.auth-card{

    border-radius:22px;

}

.modal-card{

    border-radius:22px;

}

.thought-top{

    flex-direction:column;

}

}

/*========================
DARK MODE ENHANCEMENTS
========================*/

body.dark{

    color:#f8fafc;

}

body.dark .feature-card,
body.dark .step,
body.dark .thought-preview,
body.dark .composer,
body.dark .cta-card,
body.dark .thought-card,
body.dark .auth-card,
body.dark .modal-card,
body.dark .sidebar,
body.dark .floating-card{

    border-color:#273244;

}

body.dark .ghost-btn,
body.dark .secondary-btn,
body.dark .icon-btn{

    background:#1f2937;

    border-color:#374151;

    color:#f8fafc;

}

body.dark .back-to-top{

    background:#1f2937;

    border-color:#374151;

}

body.dark .close-btn{

    background:#1f2937;

}

body.dark .like-btn{

    background:#1f2937;

    color:#e5e7eb;

}

body.dark .edit-btn,
body.dark .delete-btn{

    background:#1f2937;

}

/*========================
FINAL MICRO INTERACTIONS
========================*/

.primary-btn:hover{

    filter:brightness(1.05);

}

.icon-btn:hover i{

    transform:rotate(15deg);

}

.feature-icon i{

    transition:transform .3s ease;

}

.feature-card:hover .feature-icon i{

    transform:scale(1.15);

}

.thought-card:hover h3{

    color:var(--primary);

}

/*========================
END
========================*/

/*  bot css */

/* =========================================================
   AI CALMING COMPANION

   Positioning notes:
   - Sits above the FAB in the same bottom-right stack, with a
     real gap between the two buttons (they used to touch).
   - The chat window opens above the bot button with its own
     gap, instead of overlapping it.
   - Safe-area insets are honoured, matching .fab/.back-to-top.
========================================================= */

/* ---------- Floating Bot Button ---------- */

.ai-bot {
    position: fixed;

    right: calc(var(--fab-right) + env(safe-area-inset-right));
    bottom: calc(
        var(--fab-bottom) + var(--fab-size) + var(--fab-gap) +
        env(safe-area-inset-bottom)
    );

    width: var(--ai-bot-size);
    height: var(--ai-bot-size);

    border-radius: 50%;

    background: #5b6cff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 99998;

    box-shadow:
        0 10px 30px rgba(91, 108, 255, 0.35);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Bot hover */

.ai-bot:hover {
    transform: translateY(-5px) scale(1.05);

    box-shadow:
        0 15px 35px rgba(91, 108, 255, 0.45);
}


/* Bot icon */

.ai-bot-icon {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    color: #5b6cff;

    font-size: 25px;

    position: relative;

    z-index: 2;

    transition: transform 0.25s ease;
}


/* Active (chat open) state — icon rotates into a "close" hint */

.ai-bot.active {
    transform: none;
}

.ai-bot.active .ai-bot-icon {
    transform: rotate(90deg);
}

.ai-bot.active .ai-bot-pulse {
    display: none;
}


/* Pulse behind bot */

.ai-bot-pulse {
    position: absolute;

    width: var(--ai-bot-size);
    height: var(--ai-bot-size);

    border-radius: 50%;

    background: rgba(91, 108, 255, 0.25);

    animation: aiBotPulse 2s infinite;
}


@keyframes aiBotPulse {

    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}


/* ---------- Chat Window ---------- */

.ai-chat {
    position: fixed;

    right: calc(var(--fab-right) + env(safe-area-inset-right));
    bottom: calc(
        var(--fab-bottom) + var(--fab-size) + var(--fab-gap) +
        var(--ai-bot-size) + var(--fab-gap) +
        env(safe-area-inset-bottom)
    );

    width: 380px;
    max-width: calc(100vw - 32px);

    height: 560px;
    max-height: calc(100vh - 220px);

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    z-index: 99999;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(20, 30, 60, 0.08);

    box-shadow:
        0 20px 60px rgba(20, 30, 60, 0.18);

    animation: aiChatOpen 0.25s ease;
}


@keyframes aiChatOpen {

    from {
        opacity: 0;
        transform: translateY(15px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ---------- Chat Header ---------- */

.ai-chat-header {
    min-height: 76px;

    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #5b6cff;

    color: #ffffff;

    flex-shrink: 0;
}


.ai-chat-title {
    display: flex;
    align-items: center;

    gap: 12px;
}


.ai-chat-avatar {
    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;

    flex-shrink: 0;
}


.ai-chat-title h3 {
    margin: 0;

    font-size: 16px;
    font-weight: 700;

    color: #ffffff;
}


.ai-chat-title span {
    display: flex;
    align-items: center;

    margin-top: 3px;

    font-size: 12px;

    opacity: 0.9;
}


.ai-online-dot {
    display: inline-block !important;

    width: 7px;
    height: 7px;

    margin-right: 4px;

    border-radius: 50%;

    background: #8cffb0;

    vertical-align: middle;
}


/* Close button */

.ai-close {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 50%;

    background: transparent;

    color: #ffffff;

    cursor: pointer;

    font-size: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    transition: background 0.2s ease;
}


.ai-close:hover {
    background: rgba(255, 255, 255, 0.18);
}


/* ---------- Messages Area ---------- */

.ai-messages {
    flex: 1;

    overflow-y: auto;

    padding: 20px 16px;

    background: #f8f9ff;

    display: flex;
    flex-direction: column;

    gap: 12px;

    min-height: 0;
}


/* Scrollbar */

.ai-messages::-webkit-scrollbar {
    width: 5px;
}


.ai-messages::-webkit-scrollbar-thumb {
    background: #d3d7ed;

    border-radius: 10px;
}


/* ---------- Welcome Message ---------- */

.ai-welcome-message {
    margin: auto;

    width: 90%;

    text-align: center;

    color: #64708a;
}


.ai-welcome-icon {
    width: 55px;
    height: 55px;

    margin: 0 auto 12px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;

    box-shadow:
        0 5px 20px rgba(20, 30, 60, 0.08);
}


.ai-welcome-message p {
    margin: 0;

    font-size: 15px;

    line-height: 1.5;

    color: #64708a;
}


/* ---------- Messages ---------- */

.ai-message {
    display: flex;

    width: 100%;
}


.ai-message.user {
    justify-content: flex-end;
}


.ai-message.assistant {
    justify-content: flex-start;
}


.ai-message-content {
    max-width: 78%;

    padding: 11px 14px;

    border-radius: 16px;

    font-size: 14px;

    line-height: 1.5;

    word-wrap: break-word;

    white-space: pre-wrap;
}


/* User message */

.ai-message.user .ai-message-content {
    background: #5b6cff;

    color: #ffffff;

    border-bottom-right-radius: 5px;
}


/* AI message */

.ai-message.assistant .ai-message-content {
    background: #ffffff;

    color: #26324a;

    border-bottom-left-radius: 5px;

    box-shadow:
        0 2px 10px rgba(20, 30, 60, 0.06);
}


/* ---------- Typing Indicator ---------- */

.ai-typing {
    display: flex;

    align-items: center;

    gap: 4px;

    min-width: 52px;

    padding: 13px 15px;
}


.ai-typing span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8c95aa;

    animation: aiTyping 1.2s infinite ease-in-out;
}


.ai-typing span:nth-child(2) {
    animation-delay: 0.15s;
}


.ai-typing span:nth-child(3) {
    animation-delay: 0.3s;
}


@keyframes aiTyping {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}


/* ---------- Suggested Thought ---------- */

.ai-thought {
    padding: 10px 14px;

    background: #f8f9ff;

    border-top: 1px solid #e8eaf3;

    flex-shrink: 0;
}


.ai-thought-card {
    padding: 12px 14px;

    border-radius: 14px;

    background: #ffffff;

    border-left: 4px solid #5b6cff;

    box-shadow:
        0 3px 12px rgba(20, 30, 60, 0.06);
}


.ai-thought-label {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-bottom: 6px;

    color: #5b6cff;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.ai-thought-card h4 {
    margin: 0 0 4px;

    color: #26324a;

    font-size: 14px;
}


.ai-thought-card p {
    margin: 0;

    color: #64708a;

    font-size: 13px;

    line-height: 1.45;
}


/* ---------- Input Area ---------- */

.ai-chat-input-area {
    display: flex;

    align-items: flex-end;

    gap: 8px;

    padding: 12px;

    background: #ffffff;

    border-top: 1px solid #e8eaf3;

    flex-shrink: 0;
}


.ai-chat-input-area textarea {
    flex: 1;

    min-height: 42px;
    max-height: 110px;

    resize: none;

    padding: 11px 13px;

    border: 1px solid #dfe3ef;

    border-radius: 14px;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.4;

    color: #26324a;

    background: #f8f9ff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.ai-chat-input-area textarea:focus {
    border-color: #5b6cff;

    box-shadow:
        0 0 0 3px rgba(91, 108, 255, 0.1);
}


.ai-chat-input-area textarea::placeholder {
    color: #9aa3b7;
}


/* Send button */

.ai-send {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border: none;

    border-radius: 50%;

    background: #5b6cff;

    color: #ffffff;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.ai-send:hover {
    transform: scale(1.05);

    background: #4d5de8;
}


.ai-send:disabled {
    cursor: not-allowed;

    opacity: 0.5;

    transform: none;
}


/* ---------- Dark mode ---------- */

body.dark .ai-chat {
    background: #111827;

    border-color: #273244;
}

body.dark .ai-messages {
    background: #0b1220;
}

body.dark .ai-message.assistant .ai-message-content {
    background: #1f2937;

    color: #f8fafc;
}

body.dark .ai-welcome-icon {
    background: #1f2937;
}

body.dark .ai-thought {
    background: #0b1220;

    border-color: #273244;
}

body.dark .ai-thought-card {
    background: #1f2937;
}

body.dark .ai-thought-card h4 {
    color: #f8fafc;
}

body.dark .ai-chat-input-area {
    background: #111827;

    border-color: #273244;
}

body.dark .ai-chat-input-area textarea {
    background: #0b1220;

    border-color: #374151;

    color: #f8fafc;
}


/* ---------- Hidden ---------- */

/*
   Your project already uses .hidden,
   but keeping this here ensures the AI
   components behave correctly.
*/

.ai-bot.hidden,
.ai-chat.hidden,
.ai-thought.hidden {
    display: none !important;
}


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

@media (max-width: 768px) {

    /* right/bottom now inherit from .ai-bot's base rule, which
       reads var(--fab-size)/var(--fab-gap)/var(--fab-bottom) —
       already switched to the mobile values above at this same
       768px breakpoint, so the bot always sits directly above
       the FAB with a real gap, on every phone size. */

    .ai-bot-icon {
        width: 46px;
        height: 46px;

        font-size: 21px;
    }

    .ai-bot-pulse {
        width: var(--ai-bot-size);
        height: var(--ai-bot-size);
    }

    .ai-chat {
        right: 10px;
        left: 10px;

        width: auto;

        height: min(600px, calc(100vh - 200px));

        max-height: calc(100vh - 200px);

        border-radius: 20px;
    }

    .ai-message-content {
        max-width: 84%;
    }
}


/* Very small phones */

@media (max-width: 380px) {

    .ai-chat {
        right: 6px;
        left: 6px;

        border-radius: 16px;
    }

    .ai-chat-header {
        min-height: 68px;
    }

    .ai-messages {
        padding: 15px 12px;
    }

    .ai-chat-input-area {
        padding: 9px;
    }
}