/* WAConnect UI - all local, no CDN needed */
:root {
  --wa: #25d366; --wa-dark: #075e54; --wa-teal: #128c7e; --wa-teal-dark: #0e7468;
  --ink: #101828; --muted: #667085; --line: #e4e7ec; --bg: #f3f5f8;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: .95rem; }
h1,h2,h3,h4,h5 { letter-spacing: -.01em; }
a { color: var(--wa-teal); } a:hover { color: var(--wa-teal-dark); }

/* ---- buttons / forms / cards ---- */
.btn { border-radius: .6rem; font-weight: 500; }
.btn-success { --bs-btn-bg: var(--wa-teal); --bs-btn-border-color: var(--wa-teal); --bs-btn-hover-bg: var(--wa-teal-dark); --bs-btn-hover-border-color: var(--wa-teal-dark);
  --bs-btn-active-bg: var(--wa-teal-dark); --bs-btn-active-border-color: var(--wa-teal-dark); --bs-btn-disabled-bg: var(--wa-teal); --bs-btn-disabled-border-color: var(--wa-teal); }
.btn-outline-success { --bs-btn-color: var(--wa-teal); --bs-btn-border-color: var(--wa-teal); --bs-btn-hover-bg: var(--wa-teal); --bs-btn-hover-border-color: var(--wa-teal); --bs-btn-active-bg: var(--wa-teal); }
.form-control, .form-select { border-radius: .6rem; border-color: #d0d5dd; }
.form-control:focus, .form-select:focus { border-color: var(--wa-teal); box-shadow: 0 0 0 .2rem rgba(18,140,126,.18); }
.form-label { font-weight: 500; font-size: .88rem; margin-bottom: .3rem; }
.card { border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; border-radius: .9rem .9rem 0 0 !important; }
.table { --bs-table-bg: transparent; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; border-bottom-width: 1px; }
.table > :not(caption) > * > * { padding: .65rem .85rem; }
.alert { border-radius: .7rem; border: 0; }
.help { background: #e7f6ee; border-left: 4px solid var(--wa); border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1.2rem; font-size: .92rem; }
code { color: #0f5132; background: #eef6f1; padding: .05rem .3rem; border-radius: .3rem; } pre code { background: none; color: inherit; padding: 0; }
pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .7rem; overflow: auto; font-size: .84rem; }
.pill { display: inline-block; white-space: nowrap; flex-shrink: 0; padding: .15rem .6rem; border-radius: 1rem; font-size: .76rem; font-weight: 600; }
.pill-green { background: #d9f5e5; color: #0b6b3a; } .pill-grey { background: #e6e9ee; color: #475467; }
.pill-red { background: #fde2e2; color: #a11; } .pill-amber { background: #fff1cc; color: #8a5a00; } .pill-blue { background: #dbeafe; color: #1e4fa3; }
.wa-preview { background: #efeae2; border-radius: .7rem; padding: 1rem; }
.wa-preview .bubble { background: #fff; border-radius: .6rem; padding: .5rem .8rem; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.stat { font-size: 1.7rem; font-weight: 600; }
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #dfe5e7; color: #54656f; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.avatar.biz { background: var(--wa-teal); color: #fff; }
.brand { color: var(--wa-teal); font-weight: 700; font-size: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #25d366, #128c7e); display: inline-flex; align-items: center; justify-content: center; }
.brand .logo svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- sidebar ---- */
.sidebar { background: #fff; border-right: 1px solid var(--line); min-height: 100vh; }
@media (min-width: 768px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow: auto; } }
.sidebar a.nav-l { color: #344054; text-decoration: none; padding: .5rem .75rem; display: flex; justify-content: space-between; align-items: center; border-radius: .6rem; font-size: .93rem; margin-bottom: 2px; font-weight: 500; }
.sidebar a.nav-l .lbl { display: inline-flex; align-items: center; gap: .65rem; }
.sidebar a.nav-l svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sidebar a.nav-l:hover { background: #f3f5f8; }
.sidebar a.nav-l.active { background: #dcf8e6; color: #054d44; font-weight: 600; } .sidebar a.nav-l.active svg { opacity: 1; }
.sidebar .sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #98a2b3; margin: 1rem .75rem .35rem; font-weight: 600; }
.biz-card { display: flex; align-items: center; gap: .6rem; padding: .6rem; border-radius: .8rem; background: #f3f5f8; text-decoration: none; color: inherit; margin-bottom: .6rem; }
.biz-card:hover { background: #e9edf2; color: inherit; }

/* ---- chat screen ---- */
.wa-app { display: flex; height: 100vh; background: #fff; }
@media (max-width: 767px) { .wa-app { height: calc(100vh - 56px); } .wa-list { width: 100% !important; } .wa-app.has-chat .wa-list { display: none; } .wa-app:not(.has-chat) .wa-main { display: none; } }
.wa-list { width: 360px; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; }
.wa-head { background: #f0f2f5; padding: .6rem .9rem; display: flex; align-items: center; gap: .7rem; min-height: 62px; }
.wa-search { padding: .6rem .7rem; border-bottom: 1px solid #eef0f3; }
.wa-items { overflow: auto; flex: 1; }
.wa-item { display: flex; gap: .7rem; padding: .7rem .9rem; border-bottom: 1px solid #f1f3f5; text-decoration: none; color: inherit; align-items: center; }
.wa-item:hover { background: #f5f6f6; color: inherit; } .wa-item.active { background: #e9edef; }
.wa-item .meta { flex: 1; min-width: 0; } .wa-item .top { display: flex; justify-content: space-between; gap: .5rem; }
.wa-item .prev { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #efeae2; }
.wa-msgs { flex: 1; overflow: auto; padding: 1rem 6%; }
.wa-comp { background: #f0f2f5; padding: .6rem .8rem; display: flex; gap: .5rem; align-items: flex-end; position: relative; }
.wa-comp textarea { flex: 1; border: 0; border-radius: 1.3rem; padding: .6rem 1rem; resize: none; max-height: 120px; outline: none; font-size: .95rem; }
.wa-comp textarea:disabled { background: #e6e8eb; }
.rb { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--wa-teal); color: #fff; font-size: 1.1rem; flex-shrink: 0; }
.rb:disabled { opacity: .5; } .ib { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; font-size: 1.6rem; color: #54656f; line-height: 1; flex-shrink: 0; }
.ib:hover { background: #e2e5e8; }
.day { text-align: center; margin: .8rem 0; } .day span { background: #fff; border-radius: .5rem; padding: .2rem .7rem; font-size: .75rem; color: #54656f; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.row-m { display: flex; margin-bottom: 3px; } .row-m.out { justify-content: flex-end; }
.bub { max-width: min(75%, 520px); padding: .35rem .6rem .2rem; border-radius: .55rem; box-shadow: 0 1px 1px rgba(0,0,0,.13); background: #fff; white-space: pre-wrap; word-wrap: break-word; }
.row-m.out .bub { background: #d9fdd3; }
.bub .t { float: right; margin: .5rem 0 0 .6rem; font-size: .68rem; color: #667781; white-space: nowrap; }
.bub .tick.read { color: #53bdeb; } .bub .tick.failed { color: #d92d20; font-weight: 700; }
.bub img, .bub video { max-width: 100%; max-height: 300px; border-radius: .4rem; display: block; margin-bottom: .2rem; }
.bub .tag { font-size: .68rem; color: #667781; display: block; }
.bub .err { color: #d92d20; font-size: .78rem; display: block; clear: both; }
.wa-banner { background: #fff3cd; padding: .55rem 1rem; font-size: .85rem; display: none; }
.wa-empty { margin: auto; text-align: center; color: #667781; padding: 2rem; }
.live { font-size: .72rem; color: #667781; display: inline-flex; align-items: center; gap: .3rem; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #98a2b3; display: inline-block; }
.live.ok i { background: #25d366; } .live.bad i { background: #d92d20; } .live.bad { color: #d92d20; }
.wa-notice { background: #fde2e2; color: #912018; font-size: .85rem; padding: .5rem 1rem; display: none; }
.wa-menu { position: absolute; bottom: 62px; left: 10px; background: #fff; border-radius: .8rem; box-shadow: 0 6px 24px rgba(16,24,40,.18); padding: .4rem; display: none; min-width: 200px; z-index: 20; }
.wa-menu.show { display: block; }
.wa-menu button { display: flex; width: 100%; gap: .6rem; align-items: center; border: 0; background: none; padding: .55rem .8rem; border-radius: .5rem; text-align: left; font-size: .93rem; }
.wa-menu button:hover:not(:disabled) { background: #f3f5f8; } .wa-menu button:disabled { opacity: .4; }
.wa-modal { position: fixed; inset: 0; background: rgba(16,24,40,.55); display: none; align-items: center; justify-content: center; z-index: 1055; padding: 1rem; }
.wa-modal.show { display: flex; }
.wa-modal .panel { background: #fff; border-radius: 1rem; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.wa-modal .ph { padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.wa-modal .pb { padding: 1.1rem 1.2rem; } .wa-modal .pf { padding: .8rem 1.2rem; border-top: 1px solid var(--line); text-align: right; }

/* ---- login / register ---- */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-side { flex: 1 1 46%; background: radial-gradient(1200px 600px at -10% -10%, #25d366 0, transparent 55%), linear-gradient(160deg, #075e54 0%, #128c7e 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side .brand { color: #fff; font-size: 1.4rem; } .auth-side .brand .logo { background: rgba(255,255,255,.18); }
.auth-side h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.2; max-width: 440px; }
.auth-side p.lead { color: rgba(255,255,255,.85); max-width: 440px; font-size: 1.02rem; }
.auth-feat { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .9rem; max-width: 460px; }
.auth-feat li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255,255,255,.95); }
.auth-feat .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.16); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.auth-feat .ic svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-feat small { display: block; color: rgba(255,255,255,.75); }
.auth-main { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: #fff; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h2 { font-weight: 700; margin-bottom: .25rem; }
.auth-card .sub { color: var(--muted); margin-bottom: 1.5rem; }
.auth-card .form-control { padding: .7rem .9rem; }
.auth-card .btn-lg { padding: .75rem; font-size: 1rem; }
.field { margin-bottom: 1rem; }
.field .errs { color: #b42318; font-size: .82rem; margin-top: .3rem; }
.field.has-error .form-control { border-color: #f04438; }
.field .hint { color: var(--muted); font-size: .8rem; margin-top: .3rem; } .field .hint ul { padding-left: 1.1rem; margin: .2rem 0 0; }
.pw { position: relative; } .pw .tog { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--wa-teal); font-size: .8rem; font-weight: 600; padding: .3rem .5rem; }
.pw .form-control { padding-right: 4.2rem; }
.auth-foot { text-align: center; margin-top: 1.4rem; color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .auth-wrap { flex-direction: column; } .auth-side { flex: none; padding: 1.5rem 1.25rem; gap: .75rem; } .auth-side h1 { font-size: 1.4rem; } .auth-side .lead, .auth-feat { display: none; } .auth-side .copy { display: none; } .auth-main { padding: 1.5rem 1rem 2.5rem; align-items: flex-start; } }