:root{
  --font-ui:"Sora","Avenir Next","Segoe UI","Helvetica Neue",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  --bg:#f5f7fb;
  --bg-soft:#eef2f7;
  --card:#ffffff;
  --card-2:#fbfcfe;
  --text:#122033;
  --muted:#5d6b84;
  --line:#dce5f2;
  --line-strong:#cfd9ea;
  --primary:#0f766e;
  --primary-hover:#0b625c;
  --secondary:#475569;
  --danger:#c63d32;
  --shadow:0 18px 48px rgba(15, 23, 42, 0.11);
  --shadow-soft:0 8px 24px rgba(15, 23, 42, 0.08);
  --table-head:#edf3fb;
  --success-bg:#dff9ea;
  --success-fg:#0a6a3a;
  --warn-bg:#fff4d9;
  --warn-fg:#8a5a09;
  --info-bg:#ddf2ff;
  --info-fg:#0c5f87;
  --error-bg:#ffe2e0;
  --error-fg:#9a291f;
}

[data-theme="dark"]{
  --bg:#07111f;
  --bg-soft:#0d1d33;
  --card:#0e1a2b;
  --card-2:#15253a;
  --text:#ecf3ff;
  --muted:#9fb0ca;
  --line:#23354f;
  --line-strong:#2f4463;
  --primary:#2ab7cb;
  --primary-hover:#4acde0;
  --secondary:#60738f;
  --danger:#de5a52;
  --shadow:0 18px 48px rgba(0, 0, 0, 0.35);
  --shadow-soft:0 8px 24px rgba(0, 0, 0, 0.3);
  --table-head:#13253a;
  --success-bg:#0f2d22;
  --success-fg:#76e5af;
  --warn-bg:#33280f;
  --warn-fg:#f4ca6c;
  --info-bg:#10293a;
  --info-fg:#86c9f2;
  --error-bg:#3a1616;
  --error-fg:#ff9f96;
}

*{box-sizing:border-box}
html,body{min-height:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-ui);
  background:var(--bg);
}

.app-shell{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 14px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),#2563eb);
  font-weight:800;
}
.brand b{display:block}
.brand span,.page-subtitle,.eyebrow{color:var(--muted);font-size:13px}
.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.page-subtitle{margin:6px 0 0;max-width:720px}
.plain-link{text-decoration:none}
.wrap{max-width:1440px;margin:0 auto;padding:22px 20px 32px;width:100%;min-width:0}
h1,h2,h3{margin:0}
h1{font-size:clamp(1.4rem, 2vw + .6rem, 2rem);letter-spacing:.01em}
h2{font-size:1.1rem}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;min-width:0}
.grid > *,
.split > *{min-width:0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 14px}
.stat-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  box-shadow:var(--shadow-soft);
}
.stat-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.stat-card strong{display:block;margin-top:6px;font-size:1.7rem}
.row{display:flex;gap:8px;align-items:center;min-width:0}
.col{display:flex;flex-direction:column;gap:6px}

.card{
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow-soft);
  padding:14px;
  animation:riseIn .38s ease both;
  min-width:0;
}
.card:hover{border-color:var(--line-strong)}
.section-card{margin-bottom:14px}

.hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.small{font-size:12px;color:var(--muted)}
.sub{font-size:12px;color:var(--muted);margin-top:4px}
.mono{font-family:var(--font-mono)}

input,select,textarea{
  flex:1;
  width:100%;
  color:var(--text);
  background:color-mix(in srgb, var(--card) 85%, var(--bg-soft));
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  outline:0;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
textarea{resize:vertical;font-family:inherit}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

input[type="file"]{
  padding:6px;
  cursor:pointer;
  background:color-mix(in srgb, var(--card) 80%, var(--bg-soft));
}
input[type="file"]::file-selector-button{
  margin-right:10px;
  border:1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  background:color-mix(in srgb, var(--primary) 16%, var(--card));
  color:var(--text);
  padding:8px 12px;
  border-radius:9px;
  font-family:inherit;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, border-color .2s ease, background-color .2s ease;
}
input[type="file"]::-webkit-file-upload-button{
  margin-right:10px;
  border:1px solid color-mix(in srgb, var(--primary) 36%, var(--line));
  background:color-mix(in srgb, var(--primary) 16%, var(--card));
  color:var(--text);
  padding:8px 12px;
  border-radius:9px;
  font-family:inherit;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, border-color .2s ease, background-color .2s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  border-color:color-mix(in srgb, var(--primary) 58%, var(--line));
}

button{
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:8px;
  cursor:pointer;
  background:var(--primary);
  color:#f7fcff;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
button:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 8px 16px color-mix(in srgb, var(--primary) 30%, transparent)}
button:active{transform:translateY(0)}
button.secondary{background:var(--secondary)}
button.danger{background:var(--danger)}
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 12px;
  border-radius:8px;
  background:var(--primary);
  color:#f7fcff;
  text-decoration:none;
  font-weight:600;
}
.button-link.secondary{background:var(--secondary)}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.topbar-left{display:flex;flex-direction:column;gap:8px;min-width:0}
.topbar-actions{display:flex;gap:8px;align-items:center;min-width:0}

.nav{display:flex;flex-direction:column;gap:6px}
.navlink{
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  padding:10px 11px;
  border-radius:8px;
  transition:transform .12s ease, border-color .2s ease, background-color .2s ease;
}
.navlink.active,
.navlink:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--primary) 44%, var(--line));
  background:color-mix(in srgb, var(--primary) 14%, var(--card));
}

.theme-toggle{
  min-width:108px;
  background:color-mix(in srgb, var(--primary) 12%, var(--card));
  color:var(--text);
  border-color:color-mix(in srgb, var(--primary) 40%, var(--line));
}

table{width:100%;border-collapse:collapse;margin-top:8px}
.table-scroll{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:8px;
}
.compact-table{margin-top:10px}
.compact-table table{min-width:520px}
.logs-table-scroll table{min-width:820px}
.logs-table-scroll.tall{max-height:560px}
.logs-table-scroll.short{max-height:380px}
.device-table{min-width:1060px}
th,td{
  padding:10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}
th{
  background:var(--table-head);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
}
tr:hover td{background:color-mix(in srgb, var(--primary) 7%, transparent)}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-width:220px;
}
.actions button{
  padding:7px 9px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
}
.device-table .actions{max-width:330px}

.pill{
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  display:inline-block;
}
.pill.connected{background:var(--success-bg);color:var(--success-fg)}
.pill.qr_ready{background:var(--warn-bg);color:var(--warn-fg)}
.pill.initializing{background:var(--info-bg);color:var(--info-fg)}
.pill.disconnected{background:var(--error-bg);color:var(--error-fg)}
.needs-reply-card{color:inherit;text-decoration:none;position:relative;transition:.2s ease}
.needs-reply-card small{color:var(--muted);font-weight:700}
.needs-reply-card.active{border:2px solid #f59e0b;background:color-mix(in srgb,#f59e0b 14%,var(--card));box-shadow:0 0 0 4px color-mix(in srgb,#f59e0b 12%,transparent)}
.needs-reply-card.active strong{color:#d97706}
.needs-reply-pill{display:block;width:max-content;margin-top:6px;padding:4px 8px;border-radius:999px;background:#f59e0b;color:#fff!important;text-decoration:none;font-size:11px;font-weight:800}

.modal{
  position:fixed;
  inset:0;
  background:rgba(2, 8, 20, .58);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999
}
.modal.hidden{display:none}
.modal-content{
  background:linear-gradient(180deg,var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--line);
  border-radius:8px;
  max-width:560px;
  width:92%;
  padding:14px;
  position:relative;
  box-shadow:var(--shadow);
  min-width:0;
}
.wide-modal{max-width:880px}
.modal-content img{
  max-width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.close{position:absolute;right:10px;top:10px;background:var(--secondary)}

pre{
  white-space:pre-wrap;
  background:color-mix(in srgb, var(--card) 70%, #061321 30%);
  color:var(--text);
  border:1px solid var(--line);
  padding:10px;
  border-radius:12px;
  overflow:auto;
  min-width:0;
  max-width:100%;
}
.preview{background:color-mix(in srgb, var(--card) 60%, #071522 40%);color:var(--text)}
code{
  font-family:var(--font-mono);
  background:color-mix(in srgb, var(--primary) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  border-radius:8px;
  padding:2px 6px;
}

.status-ok{
  margin:0 0 10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--success-fg) 40%, var(--line));
  color:var(--success-fg);
  background:var(--success-bg);
}
.status-err{
  margin:0 0 10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--error-fg) 40%, var(--line));
  color:var(--error-fg);
  background:var(--error-bg);
}

/* Long modals: keep inside viewport + scroll content */
#testModal,
#bcastModal,
#autoReplyModal{
  align-items:flex-start;
  padding:14px 10px;
}
#testModal .modal-content,
#bcastModal .modal-content,
#autoReplyModal .modal-content{
  width:min(760px, 96vw);
  max-height:calc(100vh - 28px);
  overflow:auto;
}
#autoReplyModal .modal-content{width:min(920px, 96vw)}
.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 80%, var(--bg-soft));
}
.toggle-line input{width:auto;flex:0 0 auto}
.toggle-line.compact{align-self:start}
.rule-builder{
  display:grid;
  grid-template-columns:minmax(160px,.75fr) minmax(220px,1fr) minmax(320px,1.4fr);
  gap:10px;
  align-items:end;
  margin:8px 0;
}
.auto-reply-text-field{grid-column:span 1}
.auto-reply-file-field{
  grid-column:1 / -1;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 78%, var(--bg-soft));
}
.auto-file-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.auto-file-option{
  min-height:34px;
  padding:6px 8px;
}
.auto-file-preview{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.auto-file-thumb{
  width:88px;
  height:88px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
}
.file-preview-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  border:1px dashed var(--line);
  border-radius:8px;
  color:var(--muted);
  background:color-mix(in srgb, var(--card) 80%, var(--bg-soft));
  font-weight:700;
}
.attachment-preview-modal{width:min(980px, 96vw)}
.attachment-preview-body{
  min-height:240px;
  max-height:70vh;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:color-mix(in srgb, var(--card) 82%, var(--bg-soft));
}
.attachment-preview-body img{
  display:block;
  max-width:100%;
  max-height:70vh;
  object-fit:contain;
}
.attachment-preview-body iframe{
  width:100%;
  height:min(70vh, 720px);
  border:0;
  background:#fff;
}
.attachment-file-icon{
  padding:22px;
  text-align:center;
  color:var(--muted);
}
.attachment-preview-actions{justify-content:flex-end;margin-top:10px}

@keyframes riseIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.public-wrap{max-width:960px}
.qr-box{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
#publicQrImg{
  max-width:min(420px, 100%);
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.doc-list{
  margin:8px 0 0 18px;
  padding:0;
}
.doc-list li{margin:0 0 6px}
.profile-card{max-width:720px}

body > .wrap .nav{
  flex-direction:row;
  flex-wrap:wrap;
  margin-top:8px;
}

@media(max-width:980px){
  .app-shell{display:block}
  .sidebar{position:relative;height:auto;padding:12px}
  .brand{margin-bottom:10px}
  .nav{flex-direction:row;overflow:auto;padding-bottom:2px}
  .navlink{white-space:nowrap}
  .grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rule-builder{grid-template-columns:1fr}
  .auto-reply-text-field,
  .auto-reply-file-field{grid-column:1}
  .auto-file-options{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-actions{justify-content:flex-end}
  .split{grid-template-columns:1fr}
}

@media(max-width:640px){
  body{font-size:14px}
  .wrap{padding:12px 10px 18px}
  .sidebar{padding:10px 10px 8px}
  .brand{gap:8px;margin-bottom:8px}
  .brand-mark{width:36px;height:36px}
  .brand span{font-size:12px}
  .nav{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    gap:6px;
    margin:0 -10px;
    padding:0 10px 4px;
    overflow-x:auto;
  }
  .navlink{padding:9px 10px;font-size:13px}
  .topbar{gap:10px;margin-bottom:10px}
  .topbar-actions{width:100%;flex-wrap:wrap}
  .topbar-actions .theme-toggle,
  .topbar-actions a,
  .topbar-actions a button{width:100%}
  .grid{gap:10px;margin-bottom:10px}
  .card,.stat-card{padding:12px}
  .stats-grid{gap:10px}
  .stat-card strong{font-size:1.35rem}
  .row{align-items:stretch;flex-wrap:wrap}
  .row > input,
  .row > select,
  .row > textarea,
  .row > button,
  .row > a,
  .row > div,
  .row > label{
    min-width:0 !important;
    width:100%;
    flex:1 1 100% !important;
  }
  .row > label input[type="checkbox"]{width:auto;flex:0 0 auto !important}
  button{width:100%}
  input[type="file"]{font-size:13px}
  input[type="file"]::file-selector-button,
  input[type="file"]::-webkit-file-upload-button{
    display:block;
    width:100%;
    margin:0 0 8px;
  }
  .actions{
    min-width:220px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .actions button{width:100%;white-space:normal}
  .device-table{min-width:920px}
  .compact-table table{min-width:480px}
  .logs-table-scroll table{min-width:760px}
  #testModal,
  #bcastModal,
  #autoReplyModal,
  #autoReplyPreviewModal{padding:8px;align-items:flex-start}
  .modal{align-items:flex-start;padding:8px}
  .modal-content{
    width:100%;
    max-width:none;
    max-height:calc(100vh - 16px);
    overflow:auto;
    padding:12px;
    padding-top:44px;
  }
  .close{
    right:8px;
    top:8px;
    width:auto;
    min-width:38px;
    padding:7px 10px;
  }
  #testModal .modal-content,
  #bcastModal .modal-content,
  #autoReplyModal .modal-content{max-height:calc(100vh - 16px)}
  #autoReplyModal .modal-content,
  .attachment-preview-modal{width:100%}
  .rule-builder{gap:8px}
  .settings-row{gap:8px}
  .toggle-line{align-items:flex-start}
  .auto-file-preview{
    align-items:stretch;
    flex-direction:column;
  }
  .auto-file-thumb,
  .file-preview-pill{
    width:100%;
    height:auto;
    min-height:92px;
    max-height:220px;
  }
  .auto-file-thumb{object-fit:contain}
  .attachment-preview-body{
    min-height:220px;
    max-height:calc(100vh - 190px);
  }
  .attachment-preview-body img{max-height:calc(100vh - 210px)}
  .attachment-preview-body iframe{height:calc(100vh - 210px)}
  .attachment-preview-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .attachment-preview-actions .button-link{width:100%}
  .stats-grid,.settings-row{grid-template-columns:1fr}
  th,td{padding:8px}
  pre{
    white-space:pre;
    max-width:100%;
    overflow:auto;
  }
  code{word-break:break-word}
}
.bot-step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:14px 0}.bot-step-card{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--card-2)}.bot-step-card h3{margin:0 0 10px}.bot-step-card textarea{font-family:inherit}