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

:root{
    --primary:#16a34a;
    --primary-dark:#15803d;
    --text:#0f172a;
    --text-light:#64748b;
    --border:#dbe4ee;
    --page-max-width:clamp(32rem,92vw,72rem);
    --page-gutter:clamp(1rem,2vw,1.5rem);
    --chat-width:clamp(36rem,88vw,52rem);
}

html,
body{
    min-height:100%;
}

body{
    font-family:'Inter',sans-serif;
    font-size:1.1rem;
    line-height:1.7;
    color:var(--text);
    background:
    radial-gradient(
        circle at top,
        #ffffff 0%,
        #f8fafc 45%,
        #eef2f7 100%
    );
    min-height:100vh;
    overflow-x:hidden;
    padding-bottom:clamp(2rem,4vw,3rem);
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-inline:0;
    position:relative;
}

/* ======================================
   LAYOUT
====================================== */

.header,
.main,
footer{
    position:relative;
    z-index:1;
}

.page-shell{
    width:min(100%,var(--page-max-width));
    margin:0 auto;
    padding:0 var(--page-gutter);
    display:flex;
    flex-direction:column;
    gap:clamp(0.35rem,0.8vw,0.8rem);
    position:relative;
    z-index:1;
}

@media(min-width:900px){
    .page-shell{
        gap:clamp(0.25rem,0.6vw,0.6rem);
    }
}


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

.header{
    width:100%;
    margin:0;
    padding:clamp(0.6rem,1vw,0.9rem) 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}

.header-left{
    display:flex;
    align-items:center;
    gap:0.9rem;
}

.header-left img{
    width:3.4rem;
}

.header-left h1{
    font-size:2rem;
    font-weight:800;
    line-height:1;
}

.header-subtitle{
    margin-top:0.35rem;
    color:var(--text-light);
    font-size:0.9rem;
    font-weight:500;
}

.beta{
    margin-left:0.5rem;
    background:#dcfce7;
    color:#166534;
    padding:0.35rem 0.8rem;
    border-radius:999px;
    font-size:0.75rem;
    font-weight:700;
}

.header-right{
    display:flex;
    gap:0.65rem;
}

.top-btn{
    background:white;
    border:1px solid var(--border);
    border-radius:0.85rem;
    padding:0.72rem 1.15rem;
    cursor:pointer;
    font-size:0.95rem;
    transition:.2s;
}

.top-btn:hover{

    transform:translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.05);
}

.history-btn{
    display:none;
}

/* ======================================
   MAIN
====================================== */

.main{
    width:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.95rem;
    margin:0;
}

.start-screen.start-screen--collapsed{
    margin-top:clamp(0.6rem,1vw,1.1rem) auto 0;
}


/* ======================================
   START + CONVERSATION SCREENS
====================================== */

.start-screen{
    width:100%;
    max-width:var(--chat-width);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.6rem;
    text-align:center;
    transition:.35s ease;
    margin:clamp(-5.2rem,-7vw,-4.2rem) auto 0;
}

@media(min-width:900px){
    .start-screen{
        margin:clamp(-5.8rem,-8vw,-4.8rem) auto 0;
    }
}

.conversation-screen{
    width:100%;
}

body[data-state="active"] .suggestions{
    display:none;
}

body[data-state="active"] .hero{
    margin-top:clamp(0.7rem,1.6vw,1.4rem);
    gap:0.15rem;
}

body[data-state="active"] .hero-icon{
    width:clamp(12rem,32vw,18rem);
    margin-bottom:-0.15rem;
}

body[data-state="active"] .hero p{
    font-size:0.95rem;
    line-height:1.4;
    padding-top:0.35rem;
    margin-bottom:0.35rem;
}

body[data-state="active"] .main{
    gap:0.35rem;
}

body[data-state="active"] .conversation-screen{
    padding-top:clamp(2.5rem,3vw,3rem);
    position:relative;
    overflow:visible;
}

body[data-state="active"] .search-container{
    position:sticky;
    top:clamp(5rem,8vw,6.5rem);
    z-index:5;
    width:min(100%,var(--chat-width));
    margin:0 auto;
}

body[data-state="active"] #chat{
    max-height:clamp(16rem,46vh,24rem);
    overflow-y:auto;
    padding-right:0.35rem;
    margin-top:clamp(2rem,3vw,2.25rem);
}

@media(max-width:900px){
    body[data-state="active"] .search-container{
        top:clamp(3rem,6vw,4.5rem);
    }
    body[data-state="active"] #chat{
        max-height:clamp(18rem,50vh,22rem);
        margin-top:clamp(1.5rem,3vw,2rem);
    }
}


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

.hero{
    text-align:center;
    margin-top:clamp(-2rem,-4vw,-1.4rem);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.25rem;
    width:100%;
}

.hero-icon{
    width:clamp(18rem,44vw,32rem);
    aspect-ratio:2.8 / 1;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    margin-bottom:-0.3rem;
    transform-origin:center bottom;
    transition:width 0.35s ease, margin 0.35s ease;
}

.hero-logo{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    display:block;
}

.hero p{
    max-width:650px;
    margin:0;
    padding-top:0.5rem;
    color:var(--text-light);
    font-size:17px;
    line-height:1.6;
}

.hero h2{

    font-size:38px;

    font-weight:600;

    letter-spacing:-1px;

    margin-bottom:10px;
}

@media(min-width:900px){
    .hero{
        margin-top:clamp(-1.5rem,-3vw,-1rem);
        gap:0.25rem;
    }
    .hero-icon{
        width:min(46rem,var(--chat-width));
        margin-bottom:-0.5rem;
    }
    .hero p{
        max-width:min(46rem,var(--chat-width));
        padding-top:0.65rem;
    }
}


/* ======================================
   SUGESTIE
====================================== */

.suggestions{
    width:100%;
    margin-top:0.35rem;
    margin-bottom:0.35rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.9rem;
    flex-wrap:nowrap;
}

.suggestions-nav{
    background:#ffffff;
    border:1px solid #dbe4ee;
    border-radius:999px;
    width:1.9rem;
    height:1.9rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.95rem;
    color:#0f172a;
    cursor:pointer;
    box-shadow:
        0 2px 6px rgba(0,0,0,.04);
    transition:.2s;
    flex-shrink:0;
    padding:0;
}

.suggestions-nav:hover{
    border-color:#16a34a;
    box-shadow:
        0 6px 16px rgba(22,163,74,.12);
}

.suggestions-list{
    display:flex;
    flex-wrap:nowrap;
    gap:0.55rem;
    justify-content:center;
    width:auto;
    max-width:min(var(--chat-width),36rem);
    overflow:hidden;
}

.suggestions-list button{
    background:#ffffff;
    border:1px solid #dbe4ee;
    border-radius:999px;
    padding:0.3rem 1rem;
    cursor:pointer;
    font-size:0.75rem;
    font-weight:500;
    color:#0f172a;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
    box-shadow:
        0 2px 6px rgba(0,0,0,.04);
    transition:.2s;
    flex-shrink:1;
    min-width:0;
    white-space:nowrap;
}

.suggestions-list button:hover{
    transform:translateY(-1px);
    border-color:#16a34a;
    box-shadow:
        0 6px 16px rgba(22,163,74,.12);
}

@media(max-width:900px){
    .suggestions{
        display:none;
    }
}



/* ======================================
   PROJECT MODAL
====================================== */

.project-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,0.55);
    backdrop-filter:blur(12px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:clamp(1.5rem,3vw,2.5rem);
    z-index:200;
}

.project-modal-overlay.is-open{
    display:flex;
}

body.modal-open .page-shell,
body.modal-open header,
body.modal-open footer,
body.modal-open .conversation-screen{
    filter:blur(2px) brightness(0.85);
    transition:filter .3s ease;
}

.project-modal{
    width:min(800px,95vw);
    max-height:90vh;
    background:#ffffff;
    border-radius:1.5rem;
    padding:1.75rem 2rem;
    box-shadow:
        0 25px 80px rgba(15,23,42,.25);
    overflow:auto;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}

.project-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
}

.project-modal-hero{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}

.project-modal h2{
    margin:0;
    font-size:1.6rem;
    font-weight:700;
    color:#0f172a;
}

.project-modal-description{
    margin:0;
    color:#475569;
}

.project-modal-grid{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.project-modal-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1rem;
    align-items:stretch;
}

.project-modal-column{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.project-modal-column .project-card{
    flex:1;
}

.project-card--wide{
    grid-column:1 / -1;
}

.project-flow-list,
.project-sources-list,
.project-sources-sublist{
    margin:0;
    padding-left:1.4rem;
    line-height:1.6;
}

.project-flow-list li,
.project-sources-list > li,
.project-sources-sublist li{
    margin-bottom:0.45rem;
}

.project-sources-sublist{
    padding-left:1.2rem;
}

.project-modal-close{
    border:none;
    background:#f8fafc;
    width:2.75rem;
    height:2.75rem;
    border-radius:999px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    color:#0f172a;
    transition:.2s;
}

.project-modal-close:hover{
    background:#e2e8f0;
    transform:translateY(-1px);
}

.project-card{
    border:1px solid #e2e8f0;
    border-radius:1.25rem;
    padding:1.25rem;
    background:#f8fafc;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.project-card-header{
    font-size:0.95rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#0f172a;
    margin-bottom:0.75rem;
}

.project-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:0.75rem;
}

.project-card-item{
    display:flex;
    align-items:center;
    gap:0.65rem;
    padding:0.65rem 0.85rem;
    background:#fff;
    border-radius:1rem;
    border:1px solid #e2e8f0;
    font-weight:600;
    font-size:0.95rem;
    color:#0f172a;
}

.project-card-icon{
    width:2rem;
    height:2rem;
    border-radius:0.75rem;
    background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.project-flow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0.7rem;
}

.flow-stage{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.7rem 1rem;
    border-radius:1rem;
    border:1px solid #e2e8f0;
    background:#fff;
    font-weight:600;
    color:#0f172a;
    text-align:center;
}

.flow-stage::after{
    content:"→";
    margin-left:0.6rem;
    color:#94a3b8;
    font-size:1.1rem;
}

.flow-stage:last-child::after{
    content:"";
}

.project-flow-description{
    margin:0;
    color:#475569;
    line-height:1.6;
}

.project-tech{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}

.tech-badge{
    padding:0.5rem 1rem;
    border-radius:999px;
    background:#edf2ff;
    color:#312e81;
    font-weight:600;
    font-size:.85rem;
    border:1px solid rgba(99,102,241,0.35);
}

.project-sources{
    display:flex;
    flex-direction:column;
    gap:0.65rem;
}

.project-sources-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:0.75rem;
}

.source-pill{
    align-self:flex-start;
    padding:0.65rem 0.85rem;
    border-radius:0.85rem;
    background:#fff;
    border:1px solid #e2e8f0;
    font-weight:600;
    color:#0f172a;
}

.project-sources-note{
    margin:0;
    color:#475569;
    line-height:1.4;
}

@media(max-width:700px){
    .project-modal{
        padding:1.25rem 1.5rem;
    }
    .project-flow{
        justify-content:center;
    }
}
/* ======================================
   SEARCH
====================================== */

.search-container{
    width:100%;
    margin:0;
    margin-top:0.4rem;
    padding:0.6rem 0.9rem;
    background:white;
    border:1px solid var(--border);
    border-radius:1rem;
    box-shadow:
        0 10px 24px rgba(15,23,42,.08);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:0.65rem;
}

.search-container textarea{
    width:100%;
    min-height:2.35rem;
    max-height:3.6rem;
    padding-block:0.4rem;
    padding-right:0.3rem;
    height:auto;
    resize:none;
    border:none;
    outline:none;
    background:none;
    font-family:inherit;
    font-size:1.1rem;
    line-height:1.7;
    color:var(--text);
}

.search-container textarea::placeholder{
    color:#94a3b8;
    font-size:1.05rem;
}

.search-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:0.75rem;
}

.left-buttons{

    display:flex;

    gap:10px;
}

.left-buttons button{

    background:#f8fafc;

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

    border-radius:12px;

    padding:10px 14px;

    cursor:pointer;

    font-size:13px;
}

.send-btn{
    width:2.75rem;
    height:2.75rem;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    cursor:pointer;
    transition:.2s;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.send-btn:hover{

    background:var(--primary-dark);

    transform:scale(1.05);    .page-shell{
        gap:clamp(0.7rem,1.2vw,1.1rem);
    }
    .start-screen{
        margin:0.4rem auto 0;
    }
    .hero{
        gap:0.3rem;
    }
    .hero-icon{
        width:min(100%,calc(100vw - var(--page-gutter) * 2));
        max-width:100%;
    }
    .hero-logo{
        height:auto;
    }
    .suggestions-list button{
        font-size:0.65rem;
    }

}

/* ======================================
   CHAT
====================================== */

#chat{

    margin-top:0;
}

.user-message{

    max-width:900px;

    margin:15px auto;

    background:white;

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

    border-radius:16px;

    padding:18px;
}

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

footer{
    width:100%;
    margin:0;
    padding:1.25rem 0;
    border-top:1px solid var(--border);
    font-size:1rem;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:1rem;
    align-items:center;
}

.footer-left{
    display:flex;
    align-items:center;
    gap:0.65rem;
}

.footer-center{
    justify-self:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.45rem;
    color:var(--text-light);
    text-align:center;
    font-size:1rem;
    line-height:1.6;
}

.footer-center-main{
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.footer-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0.6rem;
    flex-wrap:wrap;
}

.footer-right span{
    font-size:0.95rem;
    font-weight:600;
    color:var(--text-light);
}

.footer-build{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0.5rem;
    font-size:0.95rem;
    font-weight:500;
    color:var(--text-light);
    letter-spacing:0.15px;
}

.source{
    width:34px;
    height:34px;
    border-radius:14px;
    border:1px solid #cbd5e1;
    background:#f8fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:600;
    letter-spacing:.3px;
    color:#1e293b;
    text-decoration:none;
}

/* ======================================
   SVG
====================================== */

.rogozino-landscape{

    position:fixed;

    left:0;
    right:0;

    bottom:0;

    width:100%;

    height:420px;

    opacity:0.18;

    filter:contrast(1.08) saturate(1.03);

    pointer-events:none;

    z-index:0;
}

.rogozino-landscape svg{

    width:100%;
    height:100%;
}

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

@media(max-width:900px){
    .header{
        flex-direction:column;
        gap:1rem;
    }
    .header-right{
        flex-wrap:wrap;
        justify-content:center;
    }
    .top-btn{
        font-size:0.75rem;
        padding:0.5rem 0.85rem;
    }
    .main{
        padding-bottom:1.75rem;
    }
    .hero h2{
        font-size:1.8rem;
    }
    .hero p{
        font-size:1rem;
    }
    .ai-bubble{
        max-width:85%;
    }
    .user-bubble{
        max-width:80%;
    }
    .chat-window{
        padding:0;
    }
    .search-container{
        width:100%;
        border-radius:0.85rem;
    }

    .conversation-container{
        max-width:100%;
        padding-inline:clamp(1rem,2vw,1.5rem);
    }
    footer{
        grid-template-columns:1fr;
        text-align:center;
    }
    .footer-left,
    .footer-right{
        justify-content:center;
    }
}

/* =========================
   CONVERSATION
========================= */

/* =========================
   CONVERSATION
========================= */

.conversation-container{
    width:100%;
    max-width:var(--chat-width);
    margin:0 auto;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items:center;
    box-sizing:border-box;
}

.chat-window{
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
    border:none;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.chat-window .message,
.chat-window .welcome-message{

    width:100%;

    max-width:var(--chat-width);

    margin:0 auto;
}

body[data-state="active"] .welcome-message{
    display:none;
}

.welcome-message,
.message.ai{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:0;
}

.message.user{

    display:flex;

    justify-content:flex-end;

    margin-bottom:0;
}

.message.ai.is-new{

    animation:aiFadeIn .35s ease-out;
}


.message.ai.typing{

    opacity:.95;

}

.ai-bubble.typing-bubble{

    background:#f4faf5;

    border-color:#d0dfcc;

    padding:14px 18px;

    font-size:14px;

    line-height:1.45;

    display:flex;

    flex-direction:column;

    gap:4px;

    letter-spacing:.01em;

}

.typing-text{

    color:#4b5563;

    font-size:14px;

    font-weight:600;

}

.typing-dots{

    display:flex;

    gap:6px;

    align-items:center;

}

.typing-dots span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    animation:typingPulse 1s ease-in-out infinite;

}

.typing-dots span:nth-child(2){

    animation-delay:.2s;

}

.typing-dots span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typingPulse{

    0%,
    100%{
        opacity:.2;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }

}

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


.ai-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#16a34a;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.ai-bubble{
    max-width:65%;
    background:#f8fdf8;
    border:1px solid #d7e7d7;
    border-radius:18px;
    padding:18px 20px;
    font-size:1.05rem;
    line-height:1.8;
    box-shadow:
        0 3px 10px rgba(15,23,42,.06);
}

.user-bubble{
    max-width:58%;
    background:linear-gradient(135deg,#16a34a,#0f9d4d);
    color:white;
    border-radius:18px 18px 4px 18px;
    padding:18px 20px;
    font-size:1.05rem;
    line-height:1.8;
    box-shadow:
        0 6px 16px rgba(22,163,74,.25);
}

.source-info{

    display:none;

}