/* ========== GLOBAL RESET & DARK PALETTE ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}
body{
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:#121212;      /* permanent dark */
    color:#fff;
}

/* ========== ENTRY PAGE (fullscreen hero) ========== */
body.form-page{
    display:grid;            /* grid > flex for bullet-proof centring */
    place-items:center;      /* both axes */
    height:100dvh;
    background:#000;
}

/* Hero card ------------------------------------------------------- */
.form-container{
    width:75vw;              /* centred perfectly */
    max-width:900px;
    min-width:320px;
    max-height:96vh;
    overflow-y:auto;
    padding:clamp(48px,6vw,72px);
    background:#111;
    border-radius:20px;
    box-shadow:0 0 60px rgba(0,255,204,.25);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Logo (+25 % from original – already applied) -------------------- */
.form-logo{
    width:clamp(430px,75%,630px);
    margin-bottom:12px;      /* ↓ tightened gap */
}

/* Headline */
.form-heading{
    margin-top:12px;         /* ↓ tightened gap */
    font-size:clamp(30px,3.2vw,36px);
    font-weight:600;
}

/* Entry form */
.entry-form{
    display:flex;flex-direction:column;gap:16px;
    width:100%;max-width:400px;margin-top:32px;
}
.entry-form input,
.entry-form button{
    width:100%;              /* ensures button = input width */
    font-size:16px;
    padding:14px;
    border-radius:8px;       /* rounded edges for all */
}

/* Mobile ---------------------------------------------------------- */
@media(max-width:600px){
    .form-container{width:92vw;padding:32px;}
    .form-logo{width:70%;}
    .form-heading{font-size:24px;}
    .entry-form input,
    .entry-form button{font-size:15px;padding:12px;}
}

@media(max-width:600px){
    .chat-form {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Visibility helpers */
.hidden{opacity:0;pointer-events:none;transition:opacity .5s}
.visible{opacity:1;pointer-events:all}

/* ========== CHAT PAGE ========== */
.chat-container{
    display:flex;flex-direction:column;
    width:80vw;max-width:1000px;min-width:320px;
    height:100dvh;margin:0 auto;padding:20px;
}

.chat-header{display:flex;justify-content:space-between;align-items:center;margin-top:15px;margin-bottom:15px}
.highlight{color:#00c2a8}

/* Chat box */
.chat-box{
    flex-grow:1;background:#1e1e1e;border:1px solid #333;
    border-radius:10px;padding:15px;overflow-y:auto;
    display:flex;flex-direction:column;
}

/* Bubbles */
.bubble{max-width:75%;padding:10px 15px;border-radius:18px;margin:5px 10px;font-size:15px;line-height:1.4;word-wrap:break-word}
.user-bubble{background:#86ecec;color:#000;align-self:flex-end;border-bottom-right-radius:4px}
.bot-bubble{background:#ffd700;color:#000;align-self:flex-start;border-bottom-left-radius:4px}
.timestamp{display:block;font-size:11px;color:#777;margin-top:5px;text-align:right}

/* Typing indicator */
.typing{display:none;font-style:italic;color:#666;margin:5px 0}

/* Input area */
.chat-form {
    display: flex;
    position: sticky;
    bottom: 0;
    background: #121212;
    padding: 10px 0;
    z-index: 10;
}
#user-input{
    flex:1;padding:10px;border-radius:6px;border:1px solid #444;background:#222;color:#fff
}
button{
    padding:10px 20px;margin-left:10px;background:#00c2a8;color:#fff;
    border:none;border-radius:6px;cursor:pointer
}

/* Code blocks */
.bubble-content pre{background:#2d2d2d;color:#f8f8f2;padding:10px;border-radius:6px;overflow-x:auto;white-space:pre-wrap;margin-top:8px;font-size:14px}

/* ── thumbs buttons (dark pills) ─────────────────────────────── */
.feedback{
    display:flex;gap:8px;margin-top:6px;
}

.thumb{
    background:#000;
    border:1px solid #444;
    color:#fff;
    font-size:16px;
    padding:6px 10px;       /* pill look */
    border-radius:6px;
    cursor:pointer;
    transition:background .15s;
}

.thumb:hover{ background:#222; }     /* subtle hover—not green/red */

body.form-page{
    overflow:hidden !important;
    margin:0 !important;
}

/* Absolutely centre the hero card regardless of shadows or UI chrome */
.form-container{
    position:fixed;                /* take it out of normal flow   */
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:90dvh;              /* if card ever taller, it scrolls inside */
    overflow-y:auto;               /* internal scroll only          */
}

/* 3️⃣  smaller, centred CTA button (80 % of input width) */
.entry-form button{
    width:80%;
    max-width:320px;                  /* hard cap */
    padding:12px;
    font-size:15px;
    margin:0 auto;                    /* centres it */
}

/* 4️⃣  tighter logo → heading gap */
.form-logo{ margin-bottom:6px; }
.form-heading{ margin-top:6px; }