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

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

:root{

    --primary:#EC7000;
    --primary-dark:#d96400;

    --background:#f5f6fb;

    --card:#ffffff;

    --text:#1d1d1f;

    --secondary:#6d6d6d;

    --bot:#eef2f7;

    --user:#EC7000;

    --border:#e7e7e7;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --radius:22px;

}

body{

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

    background:
    linear-gradient(180deg,#fff7ef 0%,#f5f6fb 100%);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

/* ===========================
   CELULAR
=========================== */

.phone{

    width:100%;

    max-width:430px;

    height:110vh;

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

    backdrop-filter:blur(15px);

    border-radius:35px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);

}

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

.topbar{

    background:linear-gradient(
    135deg,
    #EC7000,
    #ff8b21);

    color:rgb(247, 202, 4);

    padding:22px;

}

.logo-area{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-area img{

    width:75px;

    height:auto;

    object-fit:contain;

    background:transparent;

    border-radius:0;

    padding:0;

    display:block;

}

.logo-area h1{

    font-size:18px;

    font-weight:600;

}

.status{

    margin-top:4px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    opacity:.95;

}

.online{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#31d158;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.4);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}

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

.hero{

    padding:12px;

    text-align:center;

}

.hero h2{

    color:var(--text);

    font-size:18px;

}

.hero p{

    margin-top:8px;

    color:var(--secondary);

    font-size:13px;

    line-height:1.5;

}

/* ===========================
 BARRA
=========================== */

.progress-area{

padding:0 20px 20px;

}

.progress-bar{

height:8px;

background:#ececec;

border-radius:30px;

overflow:hidden;

margin-bottom:8px;

}

.progress{

width:8%;

height:100%;

background:linear-gradient(
90deg,
#EC7000,
#ffb347);

transition:.4s;

}

#progressText{

font-size:12px;

color:gray;

}

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

.chat{

flex:1;

overflow-y:auto;

padding:20px;

display:flex;

flex-direction:column;

gap:18px;

scroll-behavior:smooth;

}

.chat::-webkit-scrollbar{

width:5px;

}

.chat::-webkit-scrollbar-thumb{

background:#ddd;

border-radius:20px;

}

/* ===========================
 MENSAGENS
=========================== */

.message{

display:flex;

align-items:flex-end;

gap:10px;

animation:show .35s ease;

}

@keyframes show{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:none;

}

}

.message.bot{

justify-content:flex-start;

}

.message.user{

justify-content:flex-end;

}

.avatar{

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

font-size:18px;

}

.bot-avatar{

background:#EC7000;

color:white;

}

.user-avatar{

background:#2d6cdf;

color:white;

}

.bubble{

max-width:75%;

padding:14px 16px;

border-radius:20px;

font-size:14px;

line-height:1.6;

box-shadow:var(--shadow);

word-break:break-word;

position:relative;

}

.bot .bubble{

background:var(--bot);

color:#222;

border-bottom-left-radius:6px;

}

.user .bubble{

background:var(--user);

color:white;

border-bottom-right-radius:6px;

}

.time{

display:block;

font-size:11px;

margin-top:6px;

opacity:.7;

text-align:right;

}
/* ==========================================
   TYPING (Assistente digitando)
========================================== */

.typing {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 0 20px 18px;
    animation: fadeUp .3s ease;
}

.hidden {
    display: none;
}

.typing-bubble {
    background: var(--bot);
    padding: 16px 18px;
    border-radius: 20px;
    border-bottom-left-radius: 6px;
    display: flex;
    gap: 6px;
    box-shadow: var(--shadow);
}

.typing-bubble span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
    animation: typing 1.3s infinite;
}

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

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

@keyframes typing {

    0%,80%,100%{
        transform:translateY(0);
        opacity:.5;
    }

    40%{
        transform:translateY(-6px);
        opacity:1;
    }

}

/* ==========================================
   AÇÕES RÁPIDAS
========================================== */

.quick-actions{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    padding:0 20px 18px;

}

.quick-actions button{

    background:white;

    border:1px solid #ececec;

    color:#444;

    padding:11px 18px;

    border-radius:999px;

    cursor:pointer;

    font-size:13px;

    font-weight:500;

    transition:.25s;

}

.quick-actions button:hover{

    background:var(--primary);

    color:white;

    border-color:var(--primary);

    transform:translateY(-2px);

}

/* ==========================================
   INPUT
========================================== */
footer{
    background:white;
    border-top:1px solid #ececec;
    position: relative;
    z-index: 10;
}

.input-area{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

}

.input-area input{

    flex:1;

    border:none;

    outline:none;

    background:#f5f5f7;

    padding:15px 18px;

    border-radius:30px;

    font-size:14px;

    transition:.3s;

}

.input-area input:focus{

    background:white;

    box-shadow:0 0 0 2px rgba(236,112,0,.15);

}

.input-area button{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    transition:.25s;

}

#send{

    background:var(--primary);

    color:white;

}

#send:hover{

    background:var(--primary-dark);

    transform:scale(1.08);

}

#restart{

    background:#eef2f7;

    color:#555;

}

#restart:hover{

    transform:rotate(-180deg);

    background:#dbe4ee;

}

/* ==========================================
   EFEITOS
========================================== */

button{

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

}

button:active{

    transform:scale(.95);

}

input::placeholder{

    color:#9ca3af;

}

/* ==========================================
   ANIMAÇÕES
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   MODO ESCURO
========================================== */

body.dark{

    background:#0f172a;

}

body.dark .phone{

    background:#111827;

}

body.dark .hero h2{

    color:white;

}

body.dark .hero p{

    color:#cbd5e1;

}

body.dark .chat{

    background:#111827;

}


body.dark .bot .bubble{

    background:#1f2937;

    color:white;

}

body.dark .user .bubble{

    background:var(--primary);

}

body.dark .input-area{

    background:#111827;

}

body.dark input{

    background:#1f2937;

    color:white;

}

body.dark footer{

    border-top:1px solid #1f2937;

    background:#111827;

}

body.dark .quick-actions button{

    background:#1f2937;

    border-color:#374151;

    color:#e5e7eb;

}

body.dark .progress-bar{

    background:#1f2937;

}

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

@media (max-width:480px){

.phone{

    width:100%;

    height:100vh;

    border-radius:0;

}

.hero{

    padding:18px;

}

.hero h2{

    font-size:20px;

}

.logo-area img{

    width:52px;

    height:52px;

}

.bubble{

    max-width:84%;

    font-size:13px;

}

.input-area{

    padding:14px;

}

}

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

@media (min-width:900px){

.phone{

    max-width:440px;

}

}

/* ==========================================
   TRANSIÇÕES GLOBAIS
========================================== */

*{

    transition:
    background .25s,
    color .25s,
    border-color .25s;

}/* =====================================================
   VERSÃO 2.0 - MELHORIAS DA CLARA
   Cole este bloco no FINAL do style.css
===================================================== */

/* ---------- Cabeçalho ---------- */

.logo-area{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
}

.logo-itau{
    width:68px;
    height:auto;
    object-fit:contain;
}

.assistant-info{
    display:flex;
    align-items:center;
    gap:12px;
}

.assistant-photo{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.35);
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.assistant-role{
    display:block;
    font-size:12px;
    font-weight:500;
    color:#fff;
    opacity:.95;
    margin-top:2px;
}

.logo-area h1{
    color:#fff;
    font-size:18px;
    font-weight:600;
}

.status{
    color:#fff;
}

/* ---------- Hero ---------- */



.hero h2{

    font-size:24px;

    margin-bottom:10px;

}

.hero p{

    max-width:330px;

    margin:auto;

}


/* ---------- Bolhas ---------- */

.bubble{

    border-radius:22px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.08);

}

.bot .bubble{

    background:#f5f7fb;

}

.user .bubble{

    background:linear-gradient(
        135deg,
        #EC7000,
        #ff8b21
    );

}

/* ---------- Digitação ---------- */

.typing-photo{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

}

/* ---------- Botões ---------- */

.quick-actions button{

    border:none;

    box-shadow:
        0 6px 14px rgba(0,0,0,.06);

}

.quick-actions button:hover{

    transform:translateY(-3px);

}

/* ---------- Campo ---------- */

.input-area{

    box-shadow:
        0 -8px 20px rgba(0,0,0,.04);

}

.input-area input{

    background:#f8f8fa;

}

.input-area input:focus{

    background:#fff;

}

/* ---------- Mobile ---------- */

@media(max-width:480px){

.logo-itau{

    width:58px;

}

.assistant-photo{

    width:48px;

    height:48px;

}

.assistant-role{

    font-size:11px;

}

.hero h2{

    font-size:21px;

}

}