:root{
  --bg:#09050d;
  --panel:#120818;
  --panel2:#160a1f;
  --text:#f9eefb;
  --muted:#cbb6d6;

  --primary:#8d49ff;
  --secondary:#ff3b6e;
  --accent:#23d5ab;

  --border:rgba(180,140,240,.22);
  --ring:rgba(122,60,255,.35);
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --maxWidth:980px;

  --radius:16px;
  --radius-sm:12px;

  --glow1: 0 0 30px rgba(141,73,255,.35), 0 0 60px rgba(35,213,171,.25);
  --glow2: 0 0 12px rgba(255,59,110,.4);

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(122,60,255,.12), transparent 60%),
    radial-gradient(1000px 500px at 90% 110%, rgba(35,213,171,.10), transparent 60%),
    var(--bg);
}

/* App grid responsivo (sidebar como drawer no mobile) */
.app{
  height:100%;
  display:grid;
  grid-template-columns:320px 1fr;
}

/* Sidebar / Drawer */
.sidebar{
  border-right:1px solid var(--border);
  overflow:auto;
  background:
    linear-gradient(180deg,rgba(18,6,24,.75),rgba(14,6,18,.7));
  backdrop-filter: blur(6px);
  z-index:20;
}
.brand{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px;border-bottom:1px solid var(--border)
}
.brand .left{display:flex;align-items:center;gap:10px}
.logo{
  width:28px;height:28px;border-radius:8px;
  background:conic-gradient(from 180deg,var(--primary),var(--secondary),var(--accent),var(--primary));
  box-shadow:var(--glow1);
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.badge{
  background:linear-gradient(90deg,var(--secondary),var(--primary));
  color:#120818;padding:4px 10px;border-radius:999px;font-weight:900;font-size:12px
}
.side-actions{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.btn{
  border:1px solid var(--border);
  background:
    linear-gradient(180deg,rgba(160,120,240,.10),rgba(160,120,240,.05));
  color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:800;
  transition:.2s box-shadow, .2s transform;
}
.btn:hover{box-shadow:0 8px 20px rgba(122,60,255,.22); transform: translateY(-1px)}
.history{padding:10px}
.conv{
  border:1px solid var(--border);
  background:rgba(180,140,240,.08);
  border-radius:14px;padding:10px;margin:8px 6px;cursor:pointer;
  transition:.2s background, .2s border-color, .2s transform;
}
.conv:hover{background:rgba(180,140,240,.14);border-color:rgba(180,140,240,.35); transform: translateY(-1px)}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.title{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.meta{display:flex;align-items:center;gap:8px}
.badge-model{
  font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(122,60,255,.18);
  border:1px solid rgba(122,60,255,.4)
}
.date{color:var(--muted);font-size:12px;margin-top:6px}
.icon.delete{cursor:pointer;color:#ff9b9b}

/* Header */
main{display:flex;flex-direction:column;height:100%;overflow:hidden}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:
    linear-gradient(270deg,rgba(122,60,255,.14),rgba(255,59,110,.10),rgba(0,0,0,0));
}
.brand-mini{display:flex;align-items:center;gap:12px}
.name{font-weight:900;font-size:20px; letter-spacing:.2px}
.icon-btn.menu{
  border:1px solid var(--border);
  background:rgba(180,140,240,.10);
  color:var(--text);
  border-radius:12px;cursor:pointer;
  width:40px;height:40px;display:grid;place-items:center;
}
.model-select{display:flex;align-items:center;gap:8px}
.model-select label{color:var(--muted);font-size:12px}
.select{
  appearance:none;-webkit-appearance:none;
  padding:10px 34px 10px 12px;border-radius:12px;border:1px solid var(--border);
  background:#fff;color:#000;font-weight:800;cursor:pointer;
  box-shadow: inset 0 0 0 2px transparent; transition: .2s box-shadow
}
.select:focus{outline:none; box-shadow: 0 0 0 3px var(--ring)}

/* Mensagens */
.messages{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px;
  scroll-behavior:smooth;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0))
}
.messages-inner{
  max-width:var(--maxWidth);margin:0 auto;display:flex;flex-direction:column;gap:14px
}
.msg{display:flex;flex-direction:column;gap:6px}
.from{font-size:11px;color:var(--muted)}
.bubble{
  border:1px solid rgba(180,140,240,.28);
  background:linear-gradient(180deg, rgba(24,12,36,.92), rgba(18,10,28,.90));
  color:#fff6ff;padding:12px 16px;border-radius:16px;line-height:1.68;white-space:pre-wrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.msg.user .bubble{
  border-color: rgba(35,213,171,.35);
  background: linear-gradient(180deg, rgba(14,24,24,.92), rgba(10,18,20,.90));
}
.msg.ai .bubble{display:flex;gap:10px;align-items:flex-start}
.attachments{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.attachments img{
  max-width:240px;border-radius:12px;border:1px solid rgba(180,140,240,.25);
  box-shadow: 0 4px 12px rgba(0,0,0,.25)
}

/* Composer */
.composer{
  flex:0 0 auto;border-top:1px solid var(--border);
  padding:12px 16px calc(12px + var(--safe-bottom));
  background:linear-gradient(180deg,rgba(20,10,30,.6),rgba(16,8,24,.6));
  backdrop-filter:blur(8px);z-index:5
}
.wrap{
  border:1px solid var(--border);
  background:rgba(180,140,240,.08);
  border-radius:14px;padding:8px;display:flex;gap:8px;align-items:center
}
.composer input[type="text"]{
  flex:1;background:transparent;color:var(--text);border:none;outline:none;font-size:16px
}
.send{
  background:linear-gradient(90deg,var(--secondary),var(--primary));
  color:#16060b;border:none;padding:10px 14px;border-radius:12px;font-weight:900;cursor:pointer;
  box-shadow: 0 6px 16px rgba(122,60,255,.25); transition:.2s transform
}
.send:hover{transform: translateY(-1px)}
.attach{
  width:40px;height:40px;border:1px solid var(--border);
  background:rgba(180,140,240,.10);border-radius:12px;cursor:pointer;display:grid;place-items:center
}
.pending{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pending .thumb{position:relative}
.pending img{
  width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid rgba(180,140,240,.25)
}
.pending .rm{
  position:absolute;top:-6px;right:-6px;background:var(--secondary);border:none;color:#fff;
  width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:12px;line-height:20px
}

/* Botão voltar ao fim */
#scrollToLatest{
  display:none;position:absolute;bottom:88px;right:22px;background:var(--primary);color:#fff;border:none;
  border-radius:50%;width:44px;height:44px;cursor:pointer;box-shadow:var(--shadow);font-size:20px;
  align-items:center;justify-content:center
}

/* Modal nome */
.modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55)
}
.modal .box{
  width:min(90vw,520px);border:1px solid var(--border);border-radius:16px;padding:18px;
  background:linear-gradient(180deg,rgba(22,12,32,.96),rgba(16,8,24,.96)); box-shadow: var(--shadow)
}
.modal .ttl{font-weight:900;margin-bottom:10px}
.modal .row{display:flex;gap:10px}
.modal input{
  flex:1;border:1px solid var(--border);background:rgba(180,140,240,.08);color:var(--text);border-radius:12px;padding:10px
}
.modal button{
  border:1px solid var(--border);
  background:linear-gradient(90deg,var(--secondary),var(--primary));
  color:#16060b;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer
}

/* Loading */
.loading{
  position:absolute;inset:auto 0 50% 0;display:flex;gap:10px;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transform:translateY(10px);transition:.25s;
}
.loading.active{opacity:1;transform:translateY(0)}
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin 1s linear infinite
}
.loading-text{color:#e6d9f3;font-size:13px}

/* Drawer overlay */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter: blur(2px);
  opacity:0;visibility:hidden;transition:.25s;z-index:15;
}
.drawer-overlay.active{opacity:1;visibility:visible}

/* Responsivo */
@media (max-width: 980px){
  .app{grid-template-columns: 1fr}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:min(86vw, 320px);transform:translateX(-100%);
    transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.45); z-index:20;
  }
  .sidebar.open{transform:translateX(0)}
  .title{max-width:140px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}