/* ============================================================
   Emprego dos Sonhos — visual do protótipo (chat home office)
   ============================================================ */
:root{
  --bg:#eef1f6; --panel:#fff;
  --primary:#4f46e5; --primary-dark:#3730a3;
  --text:#1f2430; --muted:#6b7280;
  --bubble:#fff; --coin:#f59e0b; --green:#16a34a;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; justify-content:center; padding:24px; min-height:100vh;
}
.app{
  width:100%; max-width:920px; display:grid; grid-template-columns:260px 1fr;
  background:var(--panel); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 40px rgba(20,20,40,.12); min-height:640px;
}

/* SIDEBAR */
.sidebar{
  background:linear-gradient(180deg,#4f46e5,#3730a3); color:#fff;
  padding:24px 20px; display:flex; flex-direction:column; gap:22px;
}
.brand{font-size:14px; letter-spacing:.5px; opacity:.85; text-transform:uppercase;}
.profile{display:flex; align-items:center; gap:12px;}
.avatar{
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.profile-name{font-weight:600;}
.profile-role{font-size:12px; opacity:.8;}
.wallet{background:rgba(255,255,255,.12); border-radius:12px; padding:14px 16px;}
.wallet-label{font-size:12px; opacity:.8; margin-bottom:4px;}
.wallet-value{
  font-size:22px; font-weight:700; display:flex; align-items:center; gap:6px;
  transition:transform .25s ease;
}
.wallet-value.bump{transform:scale(1.12);}
.wallet-sub{font-size:11px; opacity:.7; margin-top:4px;}
.loja-link{
  display:block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  color:#fff; text-decoration:none; text-align:center; font-size:13px; font-weight:600;
  border-radius:10px; padding:10px 12px; transition:background .15s;
}
.loja-link:hover{background:rgba(255,255,255,.22);}
.status-block{margin-top:auto; font-size:12px; opacity:.75; line-height:1.6;}
.lib-mini{margin-top:14px; background:linear-gradient(120deg,#0b3d2e,#0e5a3f); color:#fff; border-radius:12px; padding:12px 14px;}
.lib-mini-topo{display:flex; justify-content:space-between; font-size:13px; font-weight:700;}
.lib-mini-topo b{color:#ffe08a; font-size:15px;}
.lib-mini-barra{height:8px; background:rgba(255,255,255,.2); border-radius:99px; overflow:hidden; margin:8px 0 6px;}
.lib-mini-barra i{display:block; height:100%; background:linear-gradient(90deg,#2dd881,#ffe08a); border-radius:99px; transition:width .5s;}
.lib-mini-prox{font-size:11px; opacity:.9; line-height:1.4;}
.status-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#4ade80; margin-right:6px;
}

/* MAIN */
.main{display:flex; flex-direction:column; height:100%;}
.chat-header{
  padding:16px 22px; border-bottom:1px solid #eceef2;
  display:flex; align-items:center; justify-content:space-between;
}
.chat-header h1{font-size:15px; margin:0;}
.chat-header .sub{font-size:12px; color:var(--muted);}
.chat-body{
  flex:1; padding:22px; overflow-y:auto; display:flex; flex-direction:column;
  gap:10px; background:#f7f8fc;
}
.msg{display:flex; gap:10px; max-width:78%; align-items:flex-end; animation:pop .25s ease;}
@keyframes pop{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
.msg .mini-avatar{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:14px; flex-shrink:0; color:#fff;
}
.msg.ana .mini-avatar{background:#4f46e5;}
.msg.bruno .mini-avatar{background:#f59e0b;}
.bubble-wrap{display:flex; flex-direction:column;}
.sender-name{font-size:11px; color:var(--muted); margin-bottom:3px; margin-left:2px;}
.bubble{
  background:var(--bubble); padding:10px 14px; border-radius:14px;
  border-top-left-radius:4px; font-size:14px; line-height:1.45;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.bubble .holerite{
  margin-top:8px; font-size:12.5px; background:#f4f6ff; border:1px solid #e2e6ff;
  border-radius:8px; padding:8px 10px; line-height:1.7; font-variant-numeric:tabular-nums;
}
.holerite .neg{color:#dc2626;}
.holerite .pos{color:var(--green); font-weight:700;}
.typing{
  display:flex; gap:4px; align-items:center; background:var(--bubble);
  padding:12px 16px; border-radius:14px; border-top-left-radius:4px;
  width:fit-content; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.typing span{width:6px; height:6px; border-radius:50%; background:#c7cad1; animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;}
.typing span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

/* TASK CARD */
.task-card{
  align-self:center; width:100%; max-width:520px; background:#fff;
  border:1px solid #e6e8f0; border-radius:14px; padding:18px 20px; margin:6px 0;
  box-shadow:0 4px 16px rgba(20,20,40,.06); animation:pop .3s ease;
}
.task-card .tag{
  display:inline-block; font-size:11px; background:#eef0ff; color:var(--primary);
  padding:3px 9px; border-radius:100px; font-weight:600; margin-bottom:10px;
}
.task-card h3{margin:0 0 6px; font-size:16px;}
.task-card p{margin:0 0 12px; font-size:13px; color:var(--muted); line-height:1.5;}
.deadline{
  font-size:12px; color:#b45309; background:#fff7ed; padding:5px 10px;
  border-radius:8px; display:inline-block; margin-bottom:14px;
}
.quiz-options{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.option{
  border:1px solid #e2e4ec; border-radius:10px; padding:10px 12px; font-size:13px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.option:hover{border-color:var(--primary); background:#f5f5ff;}
.option.correct{border-color:var(--green); background:#f0fdf4;}
.option.wrong{border-color:#dc2626; background:#fef2f2;}
.option.disabled{pointer-events:none; opacity:.7;}
.feedback{font-size:13px; font-weight:600; margin-top:4px;}
.feedback.ok{color:var(--green);}
.feedback.no{color:#dc2626;}

.start-btn-wrap{display:flex; align-items:center; justify-content:center; flex:1;}
.start-btn{
  background:var(--primary); color:#fff; border:none; padding:14px 26px;
  border-radius:12px; font-size:14px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px rgba(79,70,229,.3); transition:transform .15s;
}
.start-btn:hover{transform:translateY(-2px);}

.composer{padding:14px 22px; border-top:1px solid #eceef2; display:flex; gap:10px;}
.composer input{
  flex:1; border:1px solid #e2e4ec; border-radius:10px; padding:10px 14px;
  font-size:13px; background:#f7f8fc;
}
.composer button{
  background:#e2e4ec; color:var(--muted); border:none; border-radius:10px;
  padding:10px 16px; font-size:13px; cursor:not-allowed;
}
.composer button.ativo{background:var(--primary); color:#fff; cursor:pointer;}
.composer button.ativo:hover{background:var(--primary-dark);}

@media (max-width:720px){
  body{padding:8px;}
  .app{grid-template-columns:1fr; min-height:96vh;}
  .sidebar{flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; padding:14px 16px;}
  .brand{width:100%;}
  .wallet{flex:1; min-width:150px; padding:10px 12px;}
  .status-block{display:none;}
  .loja-link{flex-basis:100%;}
}

/* popup da lição (explicação pós-resposta) */
.pop-fundo{position:fixed;inset:0;background:rgba(20,20,45,.55);z-index:70;display:none;align-items:center;justify-content:center;padding:16px;}
.pop-fundo.aberto{display:flex;}
.pop{background:#fff;border-radius:16px;max-width:460px;width:100%;padding:26px 26px 22px;text-align:center;box-shadow:0 18px 50px rgba(20,20,40,.25);animation:pop .25s ease;}
.pop-emoji{font-size:52px;margin-bottom:6px;}
.pop h2{margin:0 0 10px;font-size:19px;}
.pop-texto{font-size:14px;color:var(--muted);line-height:1.55;text-align:left;background:#f7f8fc;border-radius:10px;padding:12px 14px;}
.pop-btn{margin-top:14px;width:100%;background:var(--primary);color:#fff;border:none;padding:13px 0;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;}
.pop-btn:hover{background:var(--primary-dark);}
.start-btn.menor{padding:11px 20px;font-size:13px;}
.start-btn-wrap.proxima{flex:0 0 auto;padding:8px 0;gap:10px;flex-wrap:wrap;}
/* Folgar 😴 — ação secundária: pular o dia sem salário */
.start-btn.folgar{background:#fff;color:var(--muted);border:1.5px solid #e2e4ec;box-shadow:none;}
.start-btn.folgar:hover{border-color:var(--primary);color:var(--primary);}
#startWrap{flex-direction:column;gap:10px;}
.dica-quiz{font-size:12.5px;color:var(--muted);font-style:italic;margin:0 0 12px;}

/* balão do usuário (direita) */
.msg.voce{align-self:flex-end;flex-direction:row;}
.msg.voce .mini-avatar{background:#16a34a;}
.msg.voce .bubble{background:#dcfce7;border-top-left-radius:14px;border-top-right-radius:4px;}
.msg.voce .sender-name{text-align:right;margin-right:2px;}

/* chips de resposta rápida */
.chips-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;animation:pop .25s ease;}
.chip-btn{border:1.5px solid var(--primary);background:#fff;color:var(--primary);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;}
.chip-btn:hover{background:#eef0ff;}

/* cartão de conta */
.conta-card{border-left:4px solid #b45309;}
.task-card .tag.conta{background:#fff7ed;color:#b45309;}
.pagar-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:10px;padding:12px 0;font-size:14px;font-weight:700;cursor:pointer;}
.pagar-btn:hover{filter:brightness(1.08);}