:root{
    /* Site brand colors */
    --primary:#1a365d;
    --secondary:#2c5282;
    --accent:#2f5ea8;
    --accent-hover:#264a8a;

    /* WhatsApp colors */
    --wa-green:#00a884;
    --wa-teal:#008069;
    --wa-dark:#075E54;
    --wa-light:#D9FDD3;
    --wa-bg:#E4DDD6;
    --wa-input:#F0F2F5;

    --ink:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --stroke:#e2e8f0;

    --danger:#ef4444;
    --warn:#f59e0b;
    --ok:#10b981;
    --info:#6366f1;

    --shadow: 0 10px 30px rgba(2,6,23,.08);
    --shadow2: 0 4px 18px rgba(2,6,23,.08);
    --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background: radial-gradient(1200px 600px at 20% 0%, #eafff3 0%, transparent 55%),
    radial-gradient(1200px 600px at 80% 0%, #e7f1ff 0%, transparent 55%),
    linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
    min-height:100vh;
    color:var(--ink);
}

/* Header - matches site */
.topbar{
    padding: 16px 0;
    border-bottom: 3px solid var(--accent);
    position: sticky;
    top: 0;
    background: var(--primary);
    z-index: 100;
}
.topbar-inner{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}
.logo img{
    height:40px;
    filter: brightness(0) invert(1);
}
.lang-toggle{
    display:flex;
    gap:8px;
}
.lang-toggle a{
    padding:6px 12px;
    text-decoration:none;
    color:rgba(255,255,255,0.8);
    border-radius:4px;
    font-size:0.875rem;
    transition: all 0.2s;
}
.lang-toggle a:hover{
    background:rgba(255,255,255,0.1);
    color:white;
}
.lang-toggle a.active{
    background:var(--accent);
    color:white;
}

.btn{
    border:1px solid var(--stroke);
    background:white;
    padding:9px 12px;border-radius:6px;
    font-size:12px;font-weight:600;color:var(--ink);
    cursor:pointer;
    transition: all .2s ease;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.ghost{background: transparent; border-color:transparent}

/* Layout */
.wrap{
    max-width: 980px;
    margin: 0 auto;
    padding: 18px;
}

/* Demo area */
.demo{
    display:none;
    gap: 16px;
    align-items:flex-start;
    margin-top: 18px;
}
.demo.active{display:grid; grid-template-columns: 1fr 360px; }
@media (max-width: 860px){
    .demo.active{grid-template-columns:1fr}
}

.panel{
    background: rgba(255,255,255,.92);
    border:1px solid rgba(226,232,240,.9);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow:hidden;
}

/* Dashboard */
.dash{
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--stroke);
    background: linear-gradient(135deg, #f8fafc, #edf2f7);
}
.dash-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
    margin-bottom: 10px;
}
.dash-top h4{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--primary);
    font-weight:600;
}
.dash-top .btn{
    background:white;
    color:var(--ink);
    border:1px solid var(--stroke);
}
.dash-top .btn:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.dash-member{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    background:white;
    border-radius:10px;
    margin-bottom:12px;
    border:1px solid var(--stroke);
}
.member-avatar{
    width:42px;height:42px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:white;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:14px;
    flex-shrink:0;
}
.member-info{
    min-width:0;
}
.member-name{
    font-weight:700;
    color:var(--ink);
    font-size:14px;
    margin-bottom:2px;
}
.member-details{
    font-size:12px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.member-details .separator{
    opacity:.5;
}
.dash-kpis{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:10px;
}
.kpi{
    background: rgba(255,255,255,.9);
    border:1px solid rgba(226,232,240,.9);
    border-radius: 14px;
    padding: 10px 10px;
    text-align:center;
}
.kpi .label{font-size:11px;color:#94a3b8;margin-bottom:4px;font-weight:700}
.kpi .value{font-size:12px;font-weight:900;color:#0f172a}
.value.warn{color:var(--warn)}
.value.danger{color:var(--danger)}
.value.ok{color:var(--ok)}
.value.info{color:var(--info)}

/* Chat - WhatsApp authentic styling */
.chat-header{
    background: #075E54;
    color:white;
    padding: 10px 16px;
    display:flex;
    align-items:center;
    gap: 12px;
}
.chat-back{
    width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;
    opacity:.9;
    cursor:pointer;
}
.chat-back:hover{opacity:1}
.chat-back svg{width:20px;height:20px}
.chat-left{display:flex;align-items:center;gap:12px;flex:1}
.avatar{
    width:40px;height:40px;border-radius:50%;
    background: #DFE5E7;
    display:flex;align-items:center;justify-content:center;
    font-size: 18px;
    overflow:hidden;
    flex-shrink:0;
}
.avatar svg{width:24px;height:24px;fill:#fff}
.chat-title{line-height:1.25;min-width:0}
.chat-title h3{font-size:16px;font-weight:500;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title .status{font-size:13px;opacity:.8;font-weight:400}
.chat-actions{
    display:flex;
    gap:20px;
    align-items:center;
}
.chat-actions svg{
    width:22px;height:22px;
    fill:white;
    opacity:.9;
    cursor:pointer;
}
.chat-actions svg:hover{opacity:1}

.chat-body{
    background-color: #E4DDD6;
    background-image: url("data:image/svg+xml,%3Csvg width='412' height='412' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='41.2' height='41.2'%3E%3Cpath fill='%23dbd4cb' d='M20.6 0l-6.18 6.18L20.6 12.36l6.18-6.18L20.6 0zM6.18 14.42L0 20.6l6.18 6.18 6.18-6.18-6.18-6.18zm28.84 0l-6.18 6.18 6.18 6.18 6.18-6.18-6.18-6.18zM20.6 28.84l-6.18 6.18L20.6 41.2l6.18-6.18-6.18-6.18z' opacity='.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    height: 480px;
    overflow-y:auto;
    padding: 8px 62px 8px 62px;
    display:flex;
    flex-direction:column;
    gap: 2px;
    position:relative;
}

.msg{
    max-width: 75%;
    padding: 6px 7px 8px 9px;
    border-radius: 7.5px;
    font-size: 14.2px;
    line-height: 19px;
    box-shadow: 0 1px .5px rgba(11,20,26,.13);
    animation: msgIn .15s ease;
    position: relative;
    z-index:1;
    word-wrap: break-word;
}
@keyframes msgIn{from{opacity:0}to{opacity:1}}

.msg.in{
    background:#ffffff;
    align-self:flex-start;
    border-top-left-radius: 0;
    margin-left: 8px;
}
.msg.in::before{
    content:'';
    position:absolute;
    left:-8px;top:0;
    width:0;height:0;
    border-top:0 solid transparent;
    border-bottom:13px solid transparent;
    border-right:8px solid #ffffff;
}
.msg.out{
    background: var(--wa-light);
    align-self:flex-end;
    border-top-right-radius: 0;
    margin-right: 8px;
}
.msg.out::after{
    content:'';
    position:absolute;
    right:-8px;top:0;
    width:0;height:0;
    border-top:0 solid transparent;
    border-bottom:13px solid transparent;
    border-left:8px solid var(--wa-light);
}

.msg-content{white-space:pre-wrap}
.msg-meta{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:3px;
    margin-top:2px;
    float:right;
    margin-left:8px;
    position:relative;
    top:5px;
}
.time{font-size:11px;color:#667781;line-height:15px}
.ticks{display:inline-flex;align-items:center}
.ticks svg{width:16px;height:11px;fill:#53bdeb}
.ticks.sent svg{fill:#667781}
.ticks.delivered svg{fill:#667781}
.ticks.read svg{fill:#53bdeb}

.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;clear:both}
.wa-btn{
    background:#ffffff;
    border:none;
    color:#027eb5;
    padding: 10px 16px;
    border-radius: 7.5px;
    cursor:pointer;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 1px .5px rgba(11,20,26,.13);
    transition: background .15s ease;
}
.wa-btn:hover{background:#f5f6f6}
.wa-btn:active{background:#e9edef}
.wa-btn:disabled{opacity:.55;cursor:not-allowed}

/* Typing indicator */
.typing{
    display:inline-flex;
    align-items:center;
    gap: 4px;
    padding: 12px 16px;
    background: #ffffff;
    border-radius: 7.5px;
    border-top-left-radius: 0;
    box-shadow: 0 1px .5px rgba(11,20,26,.13);
    margin-left: 8px;
    position:relative;
    z-index:1;
}
.typing::before{
    content:'';
    position:absolute;
    left:-8px;top:0;
    border-top:0 solid transparent;
    border-bottom:13px solid transparent;
    border-right:8px solid #ffffff;
}
.dots{display:inline-flex;gap:4px}
.dot{
    width:8px;height:8px;border-radius:50%;background:#9CA3AF;
    animation: typingBounce .8s infinite ease-in-out;
}
.dot:nth-child(1){animation-delay:0s}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{
    0%,60%,100%{transform:translateY(0)}
    30%{transform:translateY(-4px)}
}

/* Chat footer - WhatsApp style */
.chat-footer{
    display:flex;
    padding: 5px 10px;
    background: var(--wa-input);
    gap: 8px;
    align-items:flex-end;
}
.chat-footer-icons{
    display:flex;
    gap:4px;
    padding-bottom:8px;
}
.chat-footer-icons svg{
    width:26px;height:26px;
    fill:#54656F;
    padding:4px;
    cursor:pointer;
    border-radius:50%;
}
.chat-footer-icons svg:hover{background:rgba(11,20,26,.1)}
.chat-input-wrap{
    flex:1;
    background:white;
    border-radius: 8px;
    display:flex;
    align-items:flex-end;
    min-height:42px;
    padding: 0 8px;
}
.chat-footer input{
    flex:1;
    border: none;
    background:transparent;
    padding: 11px 0;
    font-size: 15px;
    outline:none;
    line-height:20px;
}
.chat-footer input::placeholder{color:#667781}
.chat-send{
    width:42px;height:42px;
    border-radius:50%;
    background: var(--wa-green);
    border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    margin-bottom:4px;
    transition: background .2s;
}
.chat-send:hover{background:var(--wa-teal)}
.chat-send:disabled{background:#9CA3AF;cursor:not-allowed}
.chat-send svg{width:20px;height:20px;fill:white;margin-left:2px}

/* Right side: tech + hints */
.side{
    display:flex;
    flex-direction:column;
    gap: 12px;
}
.side .sidecard{
    background: rgba(255,255,255,.92);
    border:1px solid rgba(226,232,240,.9);
    border-radius: 18px;
    box-shadow: var(--shadow2);
    overflow:hidden;
}
.sidecard .hd{
    padding: 12px 12px;
    background: var(--primary);
    color: white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight: 600;
    font-size: 12px;
    letter-spacing:.3px;
}
.sidecard .bd{padding: 12px}
.log{
    max-height: 210px;
    overflow:auto;
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    background:#0b1220;
    padding: 10px 12px;
}
.log .row{padding:6px 0;border-bottom: 1px solid rgba(148,163,184,.14)}
.log .in{color:#60a5fa}
.log .out{color:#4ade80}
.log .sys{color:#fbbf24}

.mini{
    font-size: 12px;
    color: #475569;
    line-height: 1.55;
    white-space: pre-line;
}
.mini b{color:#0f172a}

/* Proof card inside message */
.proof{
    margin-top:8px;
    border-radius: 8px;
    overflow:hidden;
    background: #d9fdd3;
}
.proof.pending{
    background: #fff3cd;
}
.proof-hd{
    padding:10px 12px;
    display:flex;align-items:center;gap:8px;
    font-weight: 600;
    color:#166534;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 13px;
}
.proof.pending .proof-hd{color:#856404}
.proof-bd{padding:8px 12px}
.proof-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom: 1px solid rgba(0,0,0,.06); font-size:13px}
.proof-row:last-child{border-bottom:0}
.proof-row .k{color:#667781;font-weight:500}
.proof-row .v{font-weight:600;color:#111b21}

/* In-chat Flow Card */
.flow-chat-card{
    background:#ffffff;
    border-radius:8px;
    padding:12px;
    min-width:240px;
    max-width:280px;
    box-shadow:0 1px 1px rgba(11,20,26,.06);
}
.flow-chat-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid #e9edef;
}
.flow-chat-title{
    font-weight:600;
    color:#111b21;
    font-size:14px;
}
.flow-chat-step{
    font-size:11px;
    color:#667781;
    background:#f0f2f5;
    padding:2px 8px;
    border-radius:4px;
}
.flow-chat-section{ margin:8px 0; }
.flow-chat-label{ font-size:11px; color:#667781; margin-bottom:2px; text-transform:uppercase; letter-spacing:.3px; }
.flow-chat-value{ font-size:14px; color:#111b21; font-weight:500; }
.flow-chat-value.emphasis{ color:#ea4335; font-size:16px; font-weight:600; }
.flow-chat-options{ display:flex; flex-direction:column; gap:6px; }
.flow-chat-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    background:#f0f2f5;
    border:2px solid transparent;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    transition: all .15s ease;
}
.flow-chat-option:hover{ background:#e9edef; }
.flow-chat-option.selected{
    border-color: #00a884;
    background:#d9fdd3;
}
.flow-chat-option input{ accent-color: #00a884; }
.flow-chat-instructions{
    background:#e7f8ff;
    color:#027eb5;
    padding:10px 12px;
    border-radius:8px;
    font-size:13px;
    line-height:1.5;
}
.flow-chat-input{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #e9edef;
    outline:none;
    font-size:14px;
    margin-top:4px;
}
.flow-chat-input:focus{ border-color:#00a884; }
.flow-chat-checkbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px 12px;
    border-radius:8px;
    background:#fff3cd;
    color:#856404;
    margin-top:10px;
    font-size:13px;
    cursor:pointer;
}
.flow-chat-checkbox input{ accent-color:#00a884; margin-top:2px; }
.flow-chat-actions{
    display:flex;
    gap:8px;
    margin-top:12px;
}
.flow-chat-btn{
    flex:1;
    padding:10px 14px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    font-weight:500;
    font-size:14px;
    transition: all .15s ease;
}
.flow-chat-btn.primary{ background: #00a884; color:#fff; }
.flow-chat-btn.primary:hover{ background:#008f72; }
.flow-chat-btn.primary:disabled{ opacity:.5; cursor:not-allowed; }
.flow-chat-btn.secondary{ background:#f0f2f5; color:#54656f; }
.flow-chat-btn.secondary:hover{ background:#e9edef; }
.flow-chat-cancelled{ color:#667781; font-size:13px; font-style:italic; }

.sect{margin-bottom: 16px}
.sect h4{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color:#94a3b8;
    margin-bottom: 10px;
    font-weight: 900;
}
.field{
    border:1px solid rgba(226,232,240,.9);
    border-radius: 14px;
    padding: 12px;
    background: #f8fafc;
    margin-bottom: 10px;
}
.field label{
    display:block;
    font-size: 11px;
    color:#94a3b8;
    font-weight: 900;
    margin-bottom: 4px;
}
.field .val{font-weight:900;color:#0f172a}
.field input, .field select{
    width:100%;
    padding: 10px 12px;
    border:1px solid rgba(226,232,240,.9);
    border-radius: 12px;
    margin-top: 6px;
    outline:none;
    font-size: 13px;
    background:white;
}
.radio{display:flex;gap:10px;flex-direction:column}
.opt{
    border:1px solid var(--stroke);
    border-radius: 8px;
    padding: 12px;
    background:#f8fafc;
    cursor:pointer;
    display:flex;gap:10px;align-items:center;
    font-weight: 600;
    transition: all .15s ease;
}
.opt:hover{border-color: var(--accent)}
.opt.selected{border-color: var(--accent); background: rgba(47,94,168,.06)}
.opt input{accent-color: var(--accent)}

.note{
    background:#dbeafe;
    border:1px solid rgba(59,130,246,.25);
    color:#1e40af;
    border-radius: 14px;
    padding: 12px;
    font-size: 12px;
    line-height:1.6;
    white-space: pre-wrap;
    font-weight: 700;
}
.check{
    display:flex;gap:10px;align-items:flex-start;
    background:#fef3c7;
    border:1px solid rgba(245,158,11,.35);
    border-radius: 14px;
    padding: 12px;
    color:#92400e;
    font-weight: 800;
    font-size: 12px;
    margin-top: 10px;
}
.check input{margin-top:2px; accent-color: var(--accent)}

/* Toast */
.toast{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    background: rgba(15,23,42,.92);
    color: white;
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    font-size: 13px;
    font-weight: 800;
    z-index: 1000;
    display:none;
    max-width: min(720px, 92vw);
}
.toast.show{display:block;animation: pop .18s ease}
@keyframes pop{from{transform:translateX(-50%) translateY(8px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.toast .muted{opacity:.85;font-weight:700}

/* Try It Panel */
.tryit-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.tryit-desc{
    font-size:13px;
    color:var(--muted);
    line-height:1.5;
}
.tryit-field{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.tryit-field label{
    font-size:11px;
    font-weight:700;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.tryit-phone-wrap{
    display:flex;
    align-items:center;
    background:white;
    border:1px solid var(--stroke);
    border-radius:8px;
    overflow:hidden;
}
.tryit-prefix{
    padding:10px 12px;
    background:#f1f5f9;
    font-weight:600;
    color:#475569;
    font-size:14px;
    border-right:1px solid var(--stroke);
}
.tryit-phone-wrap input{
    flex:1;
    border:none;
    padding:10px 12px;
    font-size:14px;
    outline:none;
}
.tryit-name-wrap{
    display:flex;
    gap:6px;
}
.tryit-name-wrap input{
    flex:1;
    padding:10px 12px;
    border:1px solid var(--stroke);
    border-radius:8px;
    font-size:14px;
    outline:none;
}
.tryit-name-wrap input:focus{
    border-color:var(--accent);
}
.tryit-refresh{
    width:42px;
    height:42px;
    border:1px solid var(--stroke);
    border-radius:8px;
    background:white;
    cursor:pointer;
    font-size:18px;
    color:var(--muted);
    transition:all .15s ease;
}
.tryit-refresh:hover{
    background:#f8fafc;
    border-color:var(--accent);
    color:var(--accent);
}
.tryit-hint{
    font-size:11px;
    color:#94a3b8;
    margin-top:2px;
}
.tryit-locale-wrap{
    display:flex;
    gap:16px;
}
.tryit-radio{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    cursor:pointer;
}
.tryit-radio input{
    accent-color:var(--accent);
}
.tryit-submit{
    background:var(--wa-green);
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:all .15s ease;
    margin-top:4px;
}
.tryit-submit:hover{
    background:var(--wa-teal);
}
.tryit-submit:disabled{
    opacity:.6;
    cursor:not-allowed;
}
.tryit-result{
    display:none;
    padding:12px;
    border-radius:8px;
    font-size:13px;
    line-height:1.5;
}
.tryit-result.success{
    display:block;
    background:#d9fdd3;
    color:#166534;
}
.tryit-result.error{
    display:block;
    background:#fee2e2;
    color:#991b1b;
}