/* =====================================================================
   BB Link · Estilos globais
   ===================================================================== */

*{box-sizing:border-box}
body{margin:0;background:#f3f5f9;color:#17283c;font:14px/1.5 system-ui,sans-serif}

/* =====================================================================
   Login overlay
   ===================================================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: #0d1a26;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.login-card {
  background: #12273b;
  border: 1px solid #1e3a52;
  border-radius: 14px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.login-brand {
  font-size: 26px;
  font-weight: 850;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.login-brand span { color: #79d7c8; }

.login-card h2 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -.3px;
}

.login-card p {
  color: #8ba0b5;
  font-size: 12px;
  margin: 0 0 22px;
}

.login-card label {
  display: block;
  color: #adc0d2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  margin-bottom: 12px;
}

.login-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #24425c;
  border-radius: 7px;
  background: #0d1a2a;
  color: #fff;
  font: inherit;
  margin-top: 4px;
}

.login-card input:focus {
  outline: 2px solid #79d7c8;
  outline-offset: 1px;
}

.login-card button {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #0a84ff;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
  transition: background .15s;
}

.login-card button:hover:not(:disabled) { background: #409cff; }
.login-card button:disabled { opacity: .6; cursor: default; }

.login-error {
  background: #5a2b2b;
  color: #ffd6d6;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin: 12px 0 0 0 !important;
}

.logout-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border: 1px solid #2a4058;
  background: transparent;
  color: #adc0d2;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.logout-btn:hover {
  background: #28455e;
  color: #fff;
}

/* =====================================================================
   Sidebar
   ===================================================================== */
.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:#12273b;color:#fff;padding:34px 22px;display:flex;flex-direction:column}
.brand{font-size:30px;font-weight:850;letter-spacing:-1px}
.brand span{color:#79d7c8}
.brand small{display:block;font-size:9px;letter-spacing:2px;color:#adc0d2;margin-top:4px}
nav{display:grid;gap:8px;margin-top:48px}
.nav{background:transparent;text-align:left;color:#c7d4e2;border-radius:9px;padding:12px;border:0;font:inherit;cursor:pointer}
.nav.active{background:#28455e;color:white}
.sidebar-note{margin-top:auto;font-size:12px;color:#b4c5d5}
.sidebar-note p{font-size:11px;margin-top:22px}
#mode-badge{display:inline-block;background:#28455e;color:#79d7c8;font-size:10px;padding:3px 8px;border-radius:5px;font-weight:600;letter-spacing:.5px}

/* =====================================================================
   Main + Header
   ===================================================================== */
main{margin-left:236px;padding:36px 38px;max-width:1680px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px;gap:20px;flex-wrap:wrap}
header h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:7px 0 10px}
header p{color:#64758a;margin:8px 0 0}
h2{font-size:19px;line-height:1.4;margin:0 0 10px}
h3{font-size:14px;margin-top:25px}
p{color:#64758a;margin:8px 0 16px}
.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#46706d;text-transform:uppercase}
.mode{background:#fff0c8;color:#815708;padding:8px 12px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap}

/* =====================================================================
   Header direito (sessão + agents)
   ===================================================================== */
.header-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.session-badge{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e2e7ee;border-radius:9px;padding:8px 12px;font-size:12px;min-width:220px}
.session-badge .dot{width:10px;height:10px;border-radius:50%;background:#adb5bd;flex-shrink:0}
.session-badge strong{display:block;font-size:12px;color:#111214}
.session-badge small{display:block;font-size:11px;color:#74859a}
.session-on .dot{background:#16704b;box-shadow:0 0 0 3px #d5efe1}
.session-on strong{color:#16704b}
.session-off .dot{background:#a83f35;box-shadow:0 0 0 3px #f8d7d4;animation:pulse 1.5s infinite}
.session-off strong{color:#a83f35}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.icon-btn{background:transparent;border:0;color:#74859a;font-size:16px;cursor:pointer;padding:0 4px}
.icon-btn:hover{color:#17675e}

.account-picker{display:flex;align-items:center;gap:8px;font-size:12px}
.account-picker label{font-weight:600;color:#566a7d;font-size:11px}
.account-picker select{min-width:180px;padding:8px 10px}
.account-picker button{padding:8px 12px}

/* =====================================================================
   Toolbar + métricas
   ===================================================================== */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.toolbar h2{margin:0}
.toolbar label{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:600;color:#566a7d}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.metrics article,.panel{background:white;border:1px solid #e2e7ee;border-radius:12px;padding:22px}
.metrics span{color:#566a7d;font-size:12px}
.metrics strong{display:block;font-size:35px;line-height:1.3;margin:8px 0}
.metrics small{color:#74859a;font-size:11px}
.caption{font-size:11px;line-height:1.6}

/* =====================================================================
   Workspace (histórico + detalhe)
   ===================================================================== */
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:20px;margin-top:24px}
.table-scroll{overflow:auto}
table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:left;font-size:12px}
th{padding:12px 9px;border-bottom:1px solid #dce3ed;color:#74859a;font-weight:600}
td{padding:14px 9px;border-bottom:1px solid #edf0f5}
td small{display:block;color:#74859a}
.selected-row{background:#f1f8f7}

/* =====================================================================
   Badges
   ===================================================================== */
.badge{display:inline-block;border-radius:5px;padding:4px 7px;background:#eef2f7;color:#536880;font-size:11px;font-weight:600}
.badge.DONE{background:#e1f4eb;color:#16704b}
.badge.FAILED,.badge.INTERRUPTED{background:#fce9e8;color:#a83f35}
.badge.TOKEN,.badge.LOGIN,.badge.REVIEW,.badge.AGUARDANDO_SESSAO,.badge.NEEDS_TOKEN,.badge.ASSIGNED{background:#fff1d6;color:#926110}
.badge.PARTIAL{background:#fff1d6;color:#926110}
.badge.QUEUED{background:#eef2f7;color:#536880}
.badge.RUNNING{background:#e3f0fc;color:#346aff}
.badge.TOKEN_READY{background:#e1f4eb;color:#16704b}

/* =====================================================================
   Botões + inputs
   ===================================================================== */
button,input,select,textarea{font:inherit}
button{cursor:pointer;background:#17675e;color:#fff;border:0;border-radius:7px;padding:11px 16px;font-weight:650;transition:background .15s}
button:hover:not(:disabled){background:#145349}
button:disabled{opacity:.45;cursor:default}
.secondary{background:#edf2f6;color:#395168}
.secondary:hover:not(:disabled){background:#dfe6ee}
.small{padding:8px 10px;font-size:12px}
.danger{color:#994339}
.danger:hover:not(:disabled){background:#fce9e8}
.table-button{padding:7px 9px;font-size:11px}
.table-button.danger{color:#a83f35;background:#fce9e8}
.table-button.danger:hover:not(:disabled){background:#f5d5d2}

label{display:grid;gap:6px;font-size:12px;font-weight:600;color:#33475b}
input,select{padding:10px 12px;border:1px solid #cdd7e1;border-radius:7px;background:white;color:#21354a;min-width:0}
input:focus,select:focus{outline:2px solid #85beb7;outline-offset:1px}
input[readonly]{background:#f3f6f9;color:#74859a}
form{display:grid;gap:17px;margin:18px 0}
form small{font-weight:400;color:#7c8999}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-panel{max-width:780px}
fieldset{border:1px solid #e2e7ee;border-radius:8px;padding:14px 18px;display:grid;gap:10px}
fieldset legend{font-size:12px;font-weight:600;color:#566a7d;padding:0 8px}

.checkbox{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer;color:#33475b}
.checkbox input[type="checkbox"]{width:auto;min-width:0;padding:0;margin:0;cursor:pointer}
.row-actions{display:flex;gap:10px;flex-wrap:wrap}

/* =====================================================================
   Alerts
   ===================================================================== */
.alert{background:#edf5f4;color:#275f59;padding:12px 15px;border-radius:8px}
.alert.error{background:#fff0ee;color:#a53c35}
.attention{background:#fff5dc;border:1px solid #ecdbad;border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px}
.attention p{margin:3px 0;font-size:12px}
.attention button{background:#936314;white-space:nowrap}
.attention button:hover:not(:disabled){background:#7a5210}

.session-alert{background:#fff3f3;border:1px solid #f5c2bc;border-left:4px solid #a83f35;border-radius:10px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:23px;flex-wrap:wrap}
.session-alert p{margin:3px 0;font-size:12px;color:#a83f35}
.session-alert button{background:#a83f35;color:#fff;white-space:nowrap}
.session-alert button:hover:not(:disabled){background:#8c2f28}

/* =====================================================================
   Detalhe + timeline
   ===================================================================== */
#result button{margin-top:9px}
#result input{width:100%}
.mono,code,pre{font-family:ui-monospace,monospace;font-size:11px;overflow-wrap:anywhere}
.mono{color:#74859a}
code{background:#f3f6f9;padding:2px 5px;border-radius:4px}
pre{white-space:pre-wrap;background:#f3f6f9;padding:15px;border-radius:6px}
.timeline{padding-left:18px;font-size:12px}
.timeline li{padding:0 0 17px 8px;border-left:1px solid #e4eaf0;list-style:disc}
.timeline small{display:block;color:#8895a3}
.timeline p{margin:4px 0 0}

.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:12px}
.pagination button{padding:7px 10px}
.empty{padding:30px 0;text-align:center;color:#8a98a9}

/* =====================================================================
   Fila
   ===================================================================== */
.queue-panel{margin-top:20px}
.queue-list{padding:0;margin:0;list-style:none;max-height:230px;overflow:auto}
.queue-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #edf0f5;font-size:12px}

/* =====================================================================
   Accounts (usado em settings e recipients)
   ===================================================================== */
.account-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f5}
.account-row.active{background:#f1f8f7;margin:0 -12px;padding:12px}
.account-row.inactive{opacity:.6}
.account-row strong{display:block;font-size:14px;color:#111214}
.account-row small{display:block;color:#74859a;font-size:11px}
.account-row > div:last-child{display:flex;gap:6px}

/* =====================================================================
   Agents (cards)
   ===================================================================== */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.agent-card{background:#fff;border:1px solid #e2e7ee;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.agent-card .agent-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.agent-card h3{margin:0;font-size:16px;color:#111214}
.agent-card .agent-loc{font-size:11px;color:#74859a;margin-top:2px}
.agent-card .agent-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px;color:#64758a}
.agent-card .agent-meta b{color:#111214;font-weight:600;display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.agent-card .agent-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:auto;padding-top:8px;border-top:1px solid #edf0f5}

.agent-status{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}
.agent-status .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.agent-status.on{background:#e1f4eb;color:#16704b}
.agent-status.on .dot{background:#16704b}
.agent-status.warn{background:#fff1d6;color:#926110}
.agent-status.warn .dot{background:#e3a702}
.agent-status.off{background:#fce9e8;color:#a83f35}
.agent-status.off .dot{background:#a83f35}

.agent-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e7ee;border-radius:9px;padding:6px 10px;font-size:12px}
.agent-pill .dot{width:8px;height:8px;border-radius:50%;background:#adb5bd}
.agent-pill.on .dot{background:#16704b}
.agent-pill.off .dot{background:#a83f35}

/* =====================================================================
   API key box (modal de novo agent)
   ===================================================================== */
.api-key-box{background:#fff5dc;border:1px solid #ecdbad;border-radius:10px;padding:16px;margin:12px 0}
.api-key-box strong{color:#815708;font-size:14px}
.api-key-box code{display:block;background:#fff;border:1px dashed #cdd7e1;border-radius:6px;padding:10px;margin:8px 0;font-size:12px;word-break:break-all;font-family:ui-monospace,monospace;color:#111214}
.api-key-box .warn{color:#a83f35;font-size:11px;font-weight:600;margin:6px 0}

/* =====================================================================
   Modais
   ===================================================================== */
.modal{position:fixed;inset:0;background:rgba(18,39,59,.65);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-content{background:#fff;border-radius:12px;padding:28px 32px;max-width:520px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto}
.modal-content h2{margin:0 0 8px;font-size:22px;color:#111214}
.modal-content p{color:#64758a;font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;flex-wrap:wrap}

/* =====================================================================
   Rodapé
   ===================================================================== */
footer{font-size:11px;color:#8997a6;margin-top:35px;text-align:center}

/* =====================================================================
   Utilidades
   ===================================================================== */
[hidden]{display:none!important}

/* =====================================================================
   Responsivo
   ===================================================================== */
@media(max-width:1150px){
  .sidebar{width:200px}
  main{margin-left:200px;padding:25px}
  .workspace{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .agent-grid{grid-template-columns:1fr}
}

@media(max-width:650px){
  .sidebar{position:static;width:auto;padding:16px}
  .brand{font-size:23px}
  .brand small,.sidebar-note{display:none}
  nav{margin-top:15px;display:flex;gap:4px;flex-wrap:wrap}
  .nav{font-size:11px;padding:8px}
  main{margin:0;padding:18px}
  header{align-items:flex-start;gap:10px}
  header h1{font-size:26px}
  .metrics{gap:8px}
  .metrics article{padding:15px}
  .panel{padding:17px}
  .two{grid-template-columns:1fr}
  .attention,.session-alert{align-items:flex-start;flex-direction:column}
  .mode{font-size:10px}
  .session-badge{min-width:auto;width:100%}
  .header-right{width:100%}
  .modal-content{padding:20px}
}