/* Estilos exclusivos da página de agentes. O restante vem do /style.css do site (mesmo design). */
.console{padding:clamp(80px,10vw,150px) var(--pad) clamp(60px,7vw,110px)}
.console-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:7vw}
.console-head h2{font-size:clamp(42px,6.4vw,104px);line-height:1.02;letter-spacing:-.055em;font-weight:400}
.console-head h2 em{color:#89918a}
.console-body{margin-top:70px;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:start}
.console-lede{font-family:Editorial,Georgia,serif;font-style:italic;font-size:clamp(24px,2.6vw,38px);line-height:1.18;color:#7e897f}
.console-box{background:var(--night);color:var(--white);padding:clamp(26px,3vw,48px);min-height:420px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.console-box::before{content:"";position:absolute;inset:0;background:url('/images/cume.jpg') 60% center/cover;opacity:.07;filter:saturate(.4);pointer-events:none}
.console-box>*{position:relative}
.active-agent{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#d9c49c;padding-bottom:18px;border-bottom:1px solid #ffffff24}
.thread{flex:1;display:flex;flex-direction:column;gap:22px;padding:30px 0;max-height:480px;overflow:auto}
.msg{font-size:15px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;max-width:620px}
.msg.assistant{font-family:Editorial,Georgia,serif;font-size:clamp(20px,1.9vw,27px);line-height:1.3;color:var(--white)}
.msg.user{align-self:flex-end;text-align:right;font-size:13px;letter-spacing:.01em;color:#c3b28e;border-right:1px solid #c3b28e;padding-right:16px}
.msg.pending{opacity:.55}
.msg.error{color:#e6a999}
.ask{display:flex;align-items:center;gap:18px;border-top:1px solid #ffffff2e;padding-top:6px}
.ask input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--white);font:inherit;font-size:clamp(16px,1.5vw,20px);padding:18px 0}
.ask input::placeholder{color:#8f9d9a}
.ask:focus-within{border-top-color:var(--sand)}
.ask button{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.16em;color:var(--white);padding:14px 0 14px 8px}
.ask button i{font-style:normal;width:42px;height:42px;border:1px solid #ffffff66;border-radius:50%;display:grid;place-items:center;font-size:16px;transition:transform .3s,background .3s}
.ask button:hover:not(:disabled) i{transform:translate(3px,-3px);background:#ffffff14}
.ask button:disabled{opacity:.5;cursor:wait}
.agent-index{padding:0 var(--pad)}
.agent-index-head{padding-bottom:50px;display:grid;grid-template-columns:.55fr 1.45fr;gap:7vw}
.agent-index-head h2{font-size:clamp(38px,5vw,76px);font-weight:400;line-height:1.03;letter-spacing:-.05em}
.agent-index-head h2 em{color:#839181}
.agent-list{padding-bottom:130px}
.agent-row{width:100%;text-align:left;cursor:pointer;transition:background .35s}
.agent-row h2{transition:color .3s,transform .5s var(--ease)}
.agent-row:hover h2,.agent-row.selected h2{transform:translateX(12px)}
.agent-row.selected h2{color:#839181}
.agent-row.selected .product-arrow::before{content:"●";font-size:11px;margin-right:12px;color:var(--sand);vertical-align:middle}
.agent-row .product-arrow{font-weight:400}
@media(max-width:820px){
  .console{padding:80px 6vw 60px}
  .console-head,.console-body,.agent-index-head{grid-template-columns:1fr;gap:30px}
  .console-head h2{font-size:clamp(40px,11vw,65px)}
  .console-body{margin-top:45px}
  .agent-index{padding:0 6vw}
  .agent-list{padding-bottom:90px}
  .ask button span{display:none}
}