/* =====================================================================
   Estilo compartilhado — Central do Criador + Painel do Gestor
   (mesmo sistema visual dourado/preto do site principal)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#09090b;
  --bg-2:#0d0e12;
  --surface: rgba(255,255,255,0.035);
  --surface-solid:#131419;
  --surface-solid-2:#191a20;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --gold:#F2B200;
  --gold-2:#C98A00;
  --amber:#FFD54A;
  --amber-2:#E8A400;
  --text:#f4f4f5;
  --text-muted:#a3a3ad;
  --text-dim:#71717a;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ok:#4ADE80;
  --warn:#FFD54A;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:'Inter', -apple-system, sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans', sans-serif; letter-spacing:-0.01em; font-weight:700; margin:0;}
a{color:inherit;}
button{font-family:inherit;}
::selection{background:var(--gold); color:#0a0a0c;}

.pw-app{display:flex; flex-direction:column; height:100vh; height:100dvh;}

/* topbar */
.pw-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border);
  background:rgba(13,14,18,0.9); backdrop-filter:blur(14px); flex-shrink:0;
}
.pw-brand{display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:16px;}
.pw-brand img{width:30px; height:30px; border-radius:8px; display:block;}
.pw-brand span.tag{font-size:10.5px; color:var(--text-dim); background:rgba(255,255,255,0.05); border:1px solid var(--border); padding:2px 7px; border-radius:6px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.pw-topbar-right{display:flex; align-items:center; gap:10px;}
.pw-pill{font-size:12.5px; color:var(--text-muted); padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface);}
.pw-btn{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s; text-decoration:none;
}
.pw-btn-primary{background:linear-gradient(100deg, var(--gold-2), var(--amber-2)); color:#0a0a0c; box-shadow:0 6px 20px -6px rgba(242,178,0,0.5);}
.pw-btn-primary:hover{transform:translateY(-1px);}
.pw-btn-ghost{background:var(--surface); border-color:var(--border-strong); color:var(--text);}
.pw-btn-ghost:hover{border-color:var(--amber); background:rgba(255,213,74,0.06);}
.pw-btn-sm{padding:6px 12px; font-size:12.5px;}
.pw-btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important;}

/* demo banner */
.pw-demo-banner{
  background:linear-gradient(90deg, rgba(242,178,0,0.18), rgba(255,213,74,0.1));
  border-bottom:1px solid rgba(242,178,0,0.3);
  color:#FFDD6B; font-size:13px; font-weight:600; text-align:center;
  padding:8px 14px; flex-shrink:0;
}

/* layout: sidebar + main */
.pw-body{display:flex; flex:1; min-height:0;}
.pw-sidebar{
  width:280px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--bg-2); overflow-y:auto; display:flex; flex-direction:column;
}
.pw-sidebar-header{padding:16px 16px 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim);}
.pw-creator-item{
  display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;
  border-left:3px solid transparent; transition:background .15s;
}
.pw-creator-item:hover{background:var(--surface);}
.pw-creator-item.active{background:rgba(255,213,74,0.08); border-left-color:var(--amber);}
.pw-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold), var(--amber));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0a0c; font-size:14px;
  overflow:hidden;
}
.pw-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.pw-avatar-sm{width:26px; height:26px; font-size:11px;}
.pw-creator-item{align-items:center;}
.pw-creator-item .ci-body{min-width:0; flex:1;}
.pw-creator-item b{display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pw-creator-item span{font-size:12px; color:var(--text-dim);}
.pw-status-dot{width:8px; height:8px; border-radius:50%; margin-left:auto; flex-shrink:0;}
.pw-status-ativo{background:var(--ok);}
.pw-status-novo{background:var(--amber);}
.pw-status-treinamento{background:#60A5FA;}

/* linha 1 (nome + hora) e linha 2 (prévia + indicador) da lista de conversas */
.ci-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.ci-time{font-size:11px; color:var(--text-dim); flex-shrink:0; white-space:nowrap;}
.ci-bottom{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px;}
.ci-preview{font-size:12.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;}
.ci-unread-dot{width:9px; height:9px; border-radius:50%; background:var(--amber); flex-shrink:0; box-shadow:0 0 0 2px rgba(242,178,0,0.2);}
.pw-creator-item.unread .ci-preview{color:var(--text); font-weight:600;}
.pw-creator-item.unread .ci-time{color:var(--amber); font-weight:700;}

/* bolinha vermelha de "tem coisa nova" em cima de uma aba (Conversa/Conversas) */
.pw-tab-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#FF5A5A; margin-left:6px; vertical-align:middle; box-shadow:0 0 0 2px rgba(255,90,90,0.2);}
.pw-group-header{
  padding:14px 16px 6px; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--amber); display:flex; align-items:center; gap:8px;
}
.pw-group-header::after{content:""; flex:1; height:1px; background:var(--border);}
.pw-group-header:first-child{padding-top:6px;}
.pw-card-avatar{
  width:52px; height:52px; border-radius:50%; overflow:hidden; margin-bottom:10px;
  background:linear-gradient(135deg, var(--gold), var(--amber));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0a0c; font-size:18px;
}
.pw-card-avatar img{width:100%; height:100%; object-fit:cover;}

.pw-main{flex:1; display:flex; flex-direction:column; min-width:0;}

/* tabs (área do criador) */
.pw-tabs{display:flex; gap:4px; padding:10px 16px 0; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto;}
.pw-tab{
  padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--text-dim);
  border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap;
}
.pw-tab.active{color:var(--text); border-bottom-color:var(--amber);}

/* chat */
.pw-chat{flex:1; display:flex; flex-direction:column; min-height:0;}
.pw-chat-header{padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;}
.pw-chat-header b{font-size:15px;}
.pw-chat-header span{display:block; font-size:12.5px; color:var(--text-dim); margin-top:2px;}
.pw-chat-msgs{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px;}
.pw-msg{max-width:72%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.5;}
.pw-msg .meta{font-size:11px; opacity:.6; margin-top:4px;}
.pw-msg.in{align-self:flex-start; background:var(--surface-solid-2); border:1px solid var(--border); border-bottom-left-radius:4px;}
.pw-msg.out{align-self:flex-end; background:linear-gradient(100deg, var(--gold-2), var(--amber-2)); color:#0a0a0c; border-bottom-right-radius:4px;}
.pw-chat-empty{margin:auto; text-align:center; color:var(--text-dim); font-size:14px; padding:30px;}
.pw-chat-input{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); flex-shrink:0;}
.pw-chat-input textarea{
  flex:1; resize:none; border-radius:12px; border:1px solid var(--border-strong);
  background:var(--surface-solid); color:var(--text); padding:12px 14px; font-size:16px; font-family:inherit; -webkit-text-size-adjust:100%; text-size-adjust:100%;
  max-height:120px;
}
.pw-chat-input textarea:focus{outline:none; border-color:var(--amber);}
.pw-mic-btn{
  flex-shrink:0; width:44px; height:44px; padding:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.pw-mic-btn.recording{background:rgba(255,90,90,0.14); border-color:#FF5A5A; color:#FF8A8A; animation:pw-mic-pulse 1.2s ease-in-out infinite;}
@keyframes pw-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,0.35);}50%{box-shadow:0 0 0 8px rgba(255,90,90,0);}}
.pw-mic-timer{font-size:12px; color:#FF8A8A; font-weight:700; align-self:center; min-width:36px;}
.pw-mic-cancel{flex-shrink:0; width:30px; height:30px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; background:rgba(255,90,90,0.14); border:1px solid #FF5A5A; color:#FF8A8A; cursor:pointer; margin-left:2px; align-self:center;}
.pw-mic-cancel:hover{background:rgba(255,90,90,0.28);}
.pw-msg audio{display:block; max-width:230px; height:36px; margin-top:2px;}
.pw-msg audio::-webkit-media-controls-panel{background:transparent;}

/* cards / lists (treinamentos, campanhas) */
.pw-scroll{flex:1; overflow-y:auto; padding:24px;}
.pw-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px;}
.pw-card{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; display:flex; flex-direction:column; gap:8px;
}
.pw-card h4{font-size:15px;}
.pw-card p{font-size:13.5px; color:var(--text-muted); margin:0; line-height:1.5;}
.pw-tag{display:inline-flex; align-self:flex-start; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#FFDD6B; background:rgba(242,178,0,0.14); border:1px solid rgba(242,178,0,0.3); padding:3px 9px; border-radius:999px;}
.pw-card a.pw-card-link{margin-top:4px; font-size:13.5px; font-weight:700; color:var(--amber); text-decoration:none;}
.pw-card a.pw-card-link:hover{text-decoration:underline;}
.pw-announce{border-left:3px solid var(--amber); padding:0; overflow:hidden;}
.pw-announce h4, .pw-announce p, .pw-announce > span{margin-left:18px; margin-right:18px;}
.pw-announce h4{margin-top:16px;}
.pw-announce > span{display:block; margin-bottom:16px;}
.pw-announce.destaque{background:linear-gradient(135deg, rgba(242,178,0,0.12), rgba(255,213,74,0.04));}
.pw-announce-img{width:100%; height:150px; object-fit:cover; display:block;}
.pw-empty-state{color:var(--text-dim); font-size:14px; text-align:center; padding:60px 20px;}

/* forms */
.pw-form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.pw-form-row label{font-size:12.5px; font-weight:600; color:var(--text-muted);}
.pw-form-row input, .pw-form-row select, .pw-form-row textarea{
  padding:11px 13px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--surface-solid); color:var(--text); font-size:14px; font-family:inherit;
}
.pw-form-row input:focus, .pw-form-row select:focus, .pw-form-row textarea:focus{outline:none; border-color:var(--amber);}
.pw-form-row textarea{resize:vertical; min-height:80px;}

/* login screen */
.pw-login-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:20px;}
.pw-login-card{
  width:100%; max-width:380px; background:var(--surface-solid); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); padding:32px 28px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.pw-login-card .pw-brand{justify-content:center; margin-bottom:6px; font-size:18px;}
.pw-login-card p.sub{text-align:center; color:var(--text-dim); font-size:13.5px; margin:0 0 24px;}
.pw-error{color:#FF8A8A; font-size:13px; margin-top:6px;}

/* modal */
.pw-modal-backdrop{position:fixed; inset:0; background:rgba(5,5,7,0.7); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.pw-modal{width:100%; max-width:440px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:var(--radius-lg); padding:26px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);}
.pw-modal h3{margin-bottom:16px;}
.pw-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}

/* fab (mobile new message / add) */
.pw-fab{
  position:fixed; bottom:20px; right:20px; width:52px; height:52px; border-radius:50%;
  background:linear-gradient(100deg, var(--gold-2), var(--amber-2)); color:#0a0a0c;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800;
  box-shadow:0 10px 30px -8px rgba(242,178,0,0.6); border:none; cursor:pointer; z-index:20;
}

/* creator link copy box (gestor) */
.pw-link-box{display:flex; align-items:center; gap:8px; background:var(--surface-solid); border:1px solid var(--border-strong); border-radius:10px; padding:8px 10px; font-size:12.5px; color:var(--text-muted); word-break:break-all;}

/* responsive */
@media (max-width:860px){
  .pw-sidebar{position:fixed; top:0; left:0; bottom:0; z-index:40; transform:translateX(-100%); transition:transform .25s; box-shadow:0 0 40px rgba(0,0,0,0.5);}
  .pw-sidebar.open{transform:translateX(0);}
  .pw-sidebar-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:35; display:none;}
  .pw-sidebar-overlay.open{display:block;}
  .pw-menu-toggle{display:flex !important;}
}
@media (max-width:640px){
  .pw-topbar{flex-wrap:wrap; row-gap:8px; padding:12px 16px;}
  .pw-topbar-right{flex-wrap:wrap; row-gap:8px; width:100%; justify-content:flex-start;}
}
.pw-menu-toggle{display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; cursor:pointer; color:var(--text);}

::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12); border-radius:8px;}


/* caixa de digitar do chat (gestor e central) ficando espremida em telas
   estreitas — os botões (anexo/mic/IA/Enviar) não encolhem, então sobra
   quase nada pro textarea. Aqui a gente encolhe só os botões e garante um
   espaço mínimo decente pra digitar. */
@media (max-width:480px){
  .pw-chat-input{gap:6px; padding:12px 10px;}
  .pw-chat-input .pw-mic-btn{width:36px; height:36px; font-size:16px;}
  .pw-chat-input .pw-btn-primary{padding:9px 10px;}
  .pw-chat-input textarea{min-width:64px; padding:10px 10px;}
}

/* recados (tela inicial do criador, estilo icones) */
.pw-recados-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;padding:18px;}
.pw-recado-tile{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;background:none;border:none;padding:0;}
.pw-recado-icon{width:100%;aspect-ratio:1/1;border-radius:18px;background:var(--surface-solid);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;position:relative;box-shadow:0 8px 18px -10px rgba(0,0,0,0.5);}
.pw-recado-icon img{width:100%;height:100%;object-fit:cover;}
.pw-recado-pin{position:absolute;top:-4px;right:-4px;background:var(--gold);color:#1a1400;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;}
.pw-recado-batalha-badge{position:absolute;bottom:-4px;left:-4px;font-size:14px;}
.pw-recado-tile-titulo{font-size:13px;color:var(--text-dim);line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.pw-recado-empty{padding:40px 24px;text-align:center;color:var(--text-dim);}
.pw-recado-modal-img{width:100%;border-radius:var(--radius-md);margin-bottom:14px;max-height:280px;object-fit:cover;}
.pw-recado-modal-meta{font-size:12px;color:var(--text-dim);margin-top:10px;}