:root{
  --bg:#212121;
  --bg-2:#171717;
  --bg-3:#2f2f2f;
  --hover:#2a2a2a;
  --line:rgba(255,255,255,.09);
  --txt:#ececec;
  --muted:#a9a9a9;
  --dim:#7a7a7a;
  --brand:#22d3ee;
  --brand-2:#0ea5b7;
  --ok:#38e8a8;
  --danger:#ff6b7d;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0}
input,textarea,select{font:inherit; color:inherit}
[hidden]{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24)}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- auth ---------------- */
.auth{
  position:fixed; inset:0; display:grid; place-items:center; padding:24px;
  background:radial-gradient(900px 600px at 50% -10%, #2b3a3f 0%, #171717 55%, #0f0f0f 100%);
  overflow:auto; z-index:50;
}
.auth-card{
  width:100%; max-width:400px; background:rgba(33,33,33,.96); border:1px solid var(--line);
  border-radius:20px; padding:28px 26px 22px; box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.auth-mark{width:38px; height:38px; object-fit:contain}
.auth-name{font-size:18px; letter-spacing:.14em; font-weight:600}
.auth-name span{color:var(--brand)}
.auth-sub{font-size:11.5px; color:var(--dim); letter-spacing:.06em}
.tabs{display:flex; gap:4px; background:#171717; padding:4px; border-radius:12px; margin-bottom:18px}
.tabs button{flex:1; padding:9px 0; border-radius:9px; font-size:13px; color:var(--muted)}
.tabs button.on{background:#2f2f2f; color:#fff}
.form{display:flex; flex-direction:column; gap:12px}
.form label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
.form input{
  background:#171717; border:1px solid #3a3a3a; border-radius:11px; padding:12px 13px;
  font-size:14.5px; outline:none; transition:.15s; color:#f1f1f1;
}
.form input:focus{border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(34,211,238,.10)}
.primary{
  background:var(--txt); color:#0f0f0f; border-radius:11px; padding:12px 16px;
  font-size:14px; font-weight:600; transition:.15s; margin-top:4px;
}
.primary:hover{background:#fff}
.primary:disabled{opacity:.5; cursor:default}
.msg{font-size:12.5px; margin:2px 0 0; padding:9px 11px; border-radius:9px; line-height:1.45}
.msg.err{background:rgba(255,107,125,.10); color:#ffb3bd; border:1px solid rgba(255,107,125,.3)}
.msg.ok{background:rgba(56,232,168,.10); color:#a9f6d6; border:1px solid rgba(56,232,168,.3)}
.auth-foot{margin:18px 0 0; font-size:11px; color:var(--dim); text-align:center; letter-spacing:.04em}

/* ---------------- layout ---------------- */
.app{display:flex; height:100%}
.side{
  width:264px; flex:0 0 264px; background:var(--bg-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0; transition:transform .22s ease;
}
.side-top{display:flex; align-items:center; gap:8px; padding:14px 14px 8px}
.brand{display:flex; align-items:center; gap:9px; font-size:13.5px; letter-spacing:.12em; font-weight:600}
.brand img{width:24px; height:24px; object-fit:contain}
.brand b{color:var(--brand)}
.icon-btn{
  width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  color:var(--muted); font-size:15px; transition:.15s;
}
.icon-btn:hover{background:var(--bg-3); color:#fff}
.new-chat{
  margin:6px 12px 10px; display:flex; align-items:center; gap:9px; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; font-size:13.5px; color:var(--txt);
  background:rgba(255,255,255,.02); transition:.15s;
}
.new-chat:hover{background:var(--bg-3)}
.new-chat svg{color:var(--brand)}
.side-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 8px 10px}
.side-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 8px 6px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.proj-list,.chat-list{display:flex; flex-direction:column; gap:2px}
.item{
  display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:9px;
  font-size:13.5px; color:#d7d7d7; text-align:left; width:100%; transition:.12s;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.item:hover{background:var(--bg-3)}
.item.on{background:#343434; color:#fff}
.item .ico{color:var(--dim); flex:0 0 auto; font-size:12px}
.item.on .ico{color:var(--brand)}
.item .lbl{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis}
.item .cnt{font-size:10px; color:var(--dim)}
.item .del{opacity:0; font-size:12px; color:var(--dim); padding:0 2px}
.item:hover .del{opacity:1}
.item .del:hover{color:var(--danger)}
.side-empty{padding:6px 9px 10px; font-size:12px; color:#6d6d6d}
.side-foot{border-top:1px solid var(--line); padding:8px; position:relative}
.user-btn{display:flex; align-items:center; gap:9px; width:100%; padding:8px; border-radius:10px; text-align:left}
.user-btn:hover{background:var(--bg-3)}
.av{
  width:28px; height:28px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,#22d3ee,#0e7490); color:#04222a; font-size:12.5px; font-weight:700;
}
.user-txt{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.user-txt b{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.user-txt i{font-size:10.5px; color:var(--dim); font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dots{color:var(--dim); font-size:15px}
.user-menu{
  position:absolute; left:10px; right:10px; bottom:56px; background:#2b2b2b; border:1px solid var(--line);
  border-radius:11px; padding:5px; box-shadow:0 18px 40px rgba(0,0,0,.5); z-index:20;
}
.user-menu button{display:block; width:100%; text-align:left; padding:9px 11px; border-radius:8px; font-size:13px}
.user-menu button:hover{background:rgba(255,255,255,.07); color:#ffb3bd}

/* ---------------- main ---------------- */
.main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; background:var(--bg)}
.topbar{
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line);
  background:rgba(33,33,33,.9); backdrop-filter:blur(8px); flex:0 0 auto; min-height:52px;
}
.top-title{display:flex; align-items:center; gap:9px; min-width:0; flex:1 1 auto}
.top-title b{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip{font-size:10.5px; color:var(--brand); border:1px solid rgba(34,211,238,.35); background:rgba(34,211,238,.08); padding:2px 8px; border-radius:99px; white-space:nowrap}
.effort select{
  background:#2f2f2f; border:1px solid var(--line); border-radius:9px; padding:5px 8px;
  font-size:11.5px; color:var(--muted); outline:none;
}
.thread{flex:1 1 auto; min-height:0; overflow-y:auto; scroll-behavior:smooth}
.thread-inner{max-width:760px; margin:0 auto; padding:26px 20px 8px; display:flex; flex-direction:column; gap:22px}

/* welcome */
.welcome{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 18px; gap:12px}
.welcome-logo{width:74px; height:74px; object-fit:contain; opacity:.95}
.welcome h1{font-size:26px; font-weight:600; margin:6px 0 0; letter-spacing:-.01em}
.welcome p{margin:0; color:var(--muted); font-size:14px}
.suggest{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:14px; max-width:520px}
.suggest button{
  border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:12px;
  padding:9px 13px; font-size:12.5px; color:#d7d7d7; transition:.15s;
}
.suggest button:hover{background:var(--bg-3); border-color:#3d3d3d}

/* mensagens */
.msg-row{display:flex; gap:13px; align-items:flex-start}
.msg-row.user{justify-content:flex-end}
.bubble-user{
  background:#2f2f2f; border-radius:20px; padding:10px 16px; max-width:80%;
  white-space:pre-wrap; word-break:break-word; font-size:15px;
}
.avatar-ai{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:#0f2f36; border:1px solid rgba(34,211,238,.35); overflow:hidden;
}
.avatar-ai img{width:22px; height:22px; object-fit:contain}
.body-ai{flex:1 1 auto; min-width:0; padding-top:2px; font-size:15px; word-break:break-word}
.body-ai > *:first-child{margin-top:0}
.body-ai > *:last-child{margin-bottom:0}
.body-ai p{margin:0 0 12px}
.body-ai h1,.body-ai h2,.body-ai h3{margin:18px 0 8px; font-size:16px; line-height:1.35}
.body-ai ul,.body-ai ol{margin:0 0 12px; padding-left:22px}
.body-ai li{margin:3px 0}
.body-ai strong{color:#fff}
.body-ai a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.body-ai code{background:#2b2b2b; border:1px solid var(--line); padding:1px 5px; border-radius:5px; font-size:.88em; font-family:"Cascadia Mono",Consolas,monospace}
.body-ai pre{
  position:relative; background:#161616; border:1px solid var(--line); border-radius:12px;
  padding:14px 14px; overflow-x:auto; margin:0 0 14px;
}
.body-ai pre code{background:none; border:0; padding:0; font-size:12.8px; line-height:1.5; display:block; white-space:pre}
.body-ai blockquote{margin:0 0 12px; padding-left:12px; border-left:2px solid #3d3d3d; color:var(--muted)}
.copy{
  position:absolute; top:7px; right:7px; font-size:10.5px; color:var(--muted);
  background:#242424; border:1px solid var(--line); border-radius:7px; padding:3px 8px; opacity:0; transition:.15s;
}
pre:hover .copy{opacity:1}
.tools{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.tool{font-size:11px; color:#9fe8f5; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.22); border-radius:99px; padding:3px 9px}
.tool.fail{color:#ffb3bd; background:rgba(255,107,125,.08); border-color:rgba(255,107,125,.28)}
.reason{
  margin:0 0 10px; font-size:12.5px; color:var(--dim); border-left:2px solid #3a3a3a; padding-left:10px;
  white-space:pre-wrap; max-height:120px; overflow:hidden; cursor:pointer;
}
.reason.open{max-height:none}
.msg-acts{display:flex; gap:4px; margin-top:4px}
.msg-acts button{color:var(--dim); font-size:11.5px; padding:3px 7px; border-radius:7px}
.msg-acts button:hover{background:var(--bg-3); color:#fff}
.typing{display:inline-flex; gap:4px; padding:4px 0}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.25; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.err-box{color:#ffb3bd; font-size:13px; background:rgba(255,107,125,.08); border:1px solid rgba(255,107,125,.25); border-radius:10px; padding:9px 12px}

/* composer */
.composer-wrap{flex:0 0 auto; padding:6px 20px 14px; background:linear-gradient(180deg, rgba(33,33,33,0), var(--bg) 18%)}
.composer{
  max-width:760px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  background:#2f2f2f; border:1px solid #3d3d3d; border-radius:26px; padding:8px 8px 8px 16px;
  box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.composer:focus-within{border-color:#4a4a4a}
.composer textarea{
  flex:1 1 auto; resize:none; border:0; outline:none; background:none; padding:8px 0;
  max-height:200px; font-size:15px; line-height:1.5; color:#f1f1f1;
}
.composer textarea::placeholder{color:#8b8b8b}
.send{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:#d7d7d7; color:#171717; transition:.15s;
}
.send:hover{background:#fff}
.send:disabled{opacity:.4; cursor:default}
.send.stop{background:#ff6b7d; color:#1a0b0e}
.legal{max-width:760px; margin:8px auto 0; text-align:center; font-size:10.5px; color:#6d6d6d}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.62); display:grid; place-items:center; padding:20px; z-index:60}
.modal-card{width:100%; max-width:440px; background:#242424; border:1px solid var(--line); border-radius:16px; padding:22px}
.modal-card h3{margin:0 0 16px; font-size:15px; font-weight:600}
.modal-card form{display:flex; flex-direction:column; gap:12px}
.modal-card label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
.modal-card input,.modal-card textarea{
  background:#171717; border:1px solid #3a3a3a; border-radius:10px; padding:10px 12px;
  font-size:14px; outline:none; resize:vertical;
}
.modal-card input:focus,.modal-card textarea:focus{border-color:var(--brand-2)}
.modal-acts{display:flex; justify-content:flex-end; gap:8px; margin-top:4px}
.ghost{border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13.5px; color:var(--muted)}
.ghost:hover{background:var(--bg-3); color:#fff}

.scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:30}
.only-mobile{display:none}

@media (max-width:860px){
  .only-mobile{display:grid}
  .side{position:fixed; inset:0 auto 0 0; z-index:40; transform:translateX(-102%); box-shadow:0 0 60px rgba(0,0,0,.6)}
  .side.open{transform:translateX(0)}
  .thread-inner{padding:18px 14px 6px}
  .composer-wrap{padding:6px 12px 10px}
  .welcome h1{font-size:22px}
  .welcome-logo{width:60px;height:60px}
  .bubble-user{max-width:88%}
}

/* ---------- anexos ---------- */
.attach-btn{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:transparent; color:#c9c9c9; border:1px solid #4a4a4a; transition:.15s;
}
.attach-btn:hover{background:#3a3a3a; color:#fff}
.composer.drop{border-color:var(--brand); box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.attach-bar{
  max-width:760px; margin:0 auto 8px; display:flex; flex-wrap:wrap; gap:8px;
}
.att-chip{
  display:flex; align-items:center; gap:8px; max-width:260px; padding:6px 8px 6px 6px;
  background:#2a2a2a; border:1px solid #3d3d3d; border-radius:12px;
}
.att-chip.up{opacity:.7}
.att-chip.bad{border-color:rgba(255,107,125,.55); background:rgba(255,107,125,.08)}
.att-chip img{width:34px; height:34px; object-fit:cover; border-radius:8px; flex:0 0 auto}
.att-badge{
  flex:0 0 auto; min-width:34px; height:34px; padding:0 6px; border-radius:8px; display:grid; place-items:center;
  background:#383838; color:#dcdcdc; font-size:9.5px; font-weight:700; letter-spacing:.04em;
}
.att-meta{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.att-meta b{font-size:11.5px; font-weight:500; color:#eaeaea; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.att-meta small{font-size:10px; color:#8f8f8f}
.att-x{flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:#3d3d3d; color:#cfcfcf; font-size:10px; display:grid; place-items:center}
.att-x:hover{background:#ff6b7d; color:#1a0b0e}

.att-view{display:flex; flex-wrap:wrap; gap:8px}
.bubble-user .bubble-text{white-space:pre-wrap; word-break:break-word}
.bubble-user .att-view{margin-top:8px}
.att-imgs{display:flex; flex-wrap:wrap; gap:8px}
.att-imgs a{display:block; line-height:0}
.att-imgs img{
  max-width:240px; max-height:240px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,.14); background:#1b1b1b;
}
.att-file{
  display:flex; align-items:center; gap:8px; padding:7px 10px 7px 7px; max-width:280px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:10px; text-decoration:none;
}
.att-file:hover{background:rgba(255,255,255,.12)}
.att-file .att-meta b{color:#f1f1f1}