/* ===== basic palette ===== */
:root{
    --bg-dark: #07111F;
    --bg-header: #0E1C31;
    --assistant-bg: #FFFFFF;
    --assistant-text: #111;
    --user-bg: #003E91;
    --user-text: #FFF;
    --input-bg: #0E1C31;
    --input-text:#EEE;
    --primary: #316CF4;
    --radius: 14px;
    --avatar-size:32px;
}

/* ===== reset & layout ===== */
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,sans-serif}
html,body{height:100%}
body{display:flex;flex-direction:column;background:var(--bg-dark);color:#DDD}

/* ===== header ===== */
.chat-header,header.chat-header{
    display:flex;align-items:center;gap:.7rem;
    background:var(--bg-header);padding:.7rem 1rem;
    border-bottom:1px solid #16243C;
}
.agent-avatar{
    width:var(--avatar-size);height:var(--avatar-size);
    border-radius:50%;background:url('https://i.pravatar.cc/40') center/cover;
}
.agent-name{font-weight:600;font-size:.95rem;color:#FFF}
.header-actions{margin-left:auto;display:flex;gap:.8rem;font-size:1rem;color:#4C6CB8}

/* ===== timeline ===== */
main#chat-timeline{
    flex:1;overflow-y:auto;padding:1.2rem .8rem 5rem;
    display:flex;flex-direction:column;gap:.6rem;
}

/* bubbles */
.bubble{
    max-width:70%;padding:.75rem 1rem;border-radius:var(--radius);
    font-size:.9rem;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;
}
.bubble.assistant{
    background:var(--assistant-bg);color:var(--assistant-text);align-self:flex-start;
    border-top-left-radius:0;
}
.bubble.user{
    background:var(--user-bg);color:var(--user-text);align-self:flex-end;
    border-top-right-radius:0;
}

/* ===== composer ===== */
#composer{
    position:fixed;bottom:0;left:0;right:0;
    background:var(--bg-header);padding:.6rem .9rem;
    display:flex;align-items:center;gap:.6rem;border-top:1px solid #16243C;
}
#attach{background:none;border:none;color:var(--primary);font-size:1.2rem}
#message-input{
    flex:1;background:var(--input-bg);color:var(--input-text);
    border:1px solid #1C2E4A;border-radius:var(--radius);padding:.55rem .8rem;
    outline:none;
}
#send{
    background:var(--primary);color:#FFF;border:none;padding:.55rem 1.1rem;
    border-radius:var(--radius);font-weight:600;cursor:pointer
}
#send:hover{background:#3A7BFF}