*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{
  --blue1:#3b82f6;--blue2:#1d4ed8;--orange1:#f59e0b;--orange2:#ea580c;
  --ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--bg:#f8fafc;
}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
body.is-embed{background:transparent;padding:0}

.lc-card{
  width:100%;max-width:460px;height:min(700px,calc(100vh - 32px));
  background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 25px 60px rgba(15,23,42,.35);
}
.is-embed .lc-card{max-width:none;height:100vh;border-radius:0;box-shadow:none}

/* Header */
.lc-head{display:flex;align-items:center;gap:14px;padding:18px 22px;color:#fff;
  background:linear-gradient(135deg,var(--blue1),var(--blue2));flex-shrink:0}
.lc-avatar{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.25);
  display:grid;place-items:center;padding:4px;flex-shrink:0}
.lc-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.lc-head-text{flex:1;min-width:0}
.lc-title{font-weight:600;font-size:17px}
.lc-status{font-size:12.5px;opacity:.95;display:flex;align-items:center;gap:6px;margin-top:2px}
.lc-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.3)}
.lc-close{background:rgba(255,255,255,.2);border:0;color:#fff;width:32px;height:32px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer}

/* Start */
.lc-start{flex:1;overflow:auto;padding:24px 20px;text-align:center}
.lc-start-icon{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  color:var(--blue1);background:linear-gradient(135deg,#eff6ff,#dbeafe)}
.lc-start h1{font-size:20px;margin-bottom:8px}
.lc-sub{font-size:13.5px;color:#475569;line-height:1.55;margin-bottom:22px}
.lc-start input{width:100%;padding:13px 16px;margin-bottom:10px;border:2px solid var(--line);border-radius:12px;
  font-size:14.5px;outline:none;transition:border-color .15s;font-family:inherit}
.lc-start input:focus{border-color:var(--blue1)}
.lc-hint{font-size:11.5px;color:var(--muted);margin:2px 0 18px}
.lc-error{font-size:12.5px;color:#dc2626;background:#fef2f2;border-radius:8px;padding:8px;margin:-8px 0 14px}
.lc-btn{width:100%;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;
  font-family:inherit;transition:transform .1s,opacity .15s}
.lc-btn:active{transform:scale(.98)}
.lc-btn:disabled{opacity:.6;cursor:wait}
.lc-btn-primary{background:linear-gradient(135deg,var(--blue1),var(--blue2));margin-bottom:12px}
.lc-btn-promo{background:linear-gradient(135deg,var(--orange1),var(--orange2));box-shadow:0 8px 20px rgba(234,88,12,.3);letter-spacing:.3px}

/* Chat */
.lc-chat{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.lc-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.lc-msg{max-width:80%;display:flex;flex-direction:column}
.lc-msg .bubble{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.lc-msg .bubble a{color:inherit;text-decoration:underline}
.lc-msg .bubble img{display:block;max-width:220px;max-height:260px;border-radius:10px;cursor:zoom-in;margin:-3px -5px 4px}
.lc-msg .bubble img:only-child{margin:-3px -5px}
.lc-msg .meta{font-size:10.5px;color:var(--muted);margin-top:3px;padding:0 4px}
.lc-msg.agent{align-self:flex-start}
.lc-msg.agent .bubble{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.lc-msg.visitor{align-self:flex-end;align-items:flex-end}
.lc-msg.visitor .bubble{background:linear-gradient(135deg,var(--blue1),var(--blue2));color:#fff;border-bottom-right-radius:4px}
.lc-msg.system{align-self:center;max-width:90%}
.lc-msg.system .bubble{background:#e2e8f0;color:#475569;font-size:12px;border-radius:10px;text-align:center}
.lc-msg.pending{opacity:.6}

.lc-closed{background:#fff7ed;color:#9a3412;font-size:13px;padding:10px 16px;text-align:center;border-top:1px solid #fed7aa}
.lc-closed button{margin-left:6px;border:0;background:var(--orange2);color:#fff;border-radius:8px;padding:5px 10px;cursor:pointer;font-size:12px}

.lc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 12px}
.lc-chips:empty{display:none}
.lc-chips button{border:1px solid var(--line);background:#fff;color:var(--blue1);border-radius:999px;
  padding:6px 12px;font-size:12.5px;cursor:pointer;text-transform:uppercase;font-family:inherit}
.lc-chips button:hover{border-color:var(--blue1);background:#eff6ff}

.lc-composer{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-top:1px solid var(--line)}
.lc-composer.disabled{opacity:.5;pointer-events:none}
.lc-attach{width:42px;height:42px;border-radius:50%;background:#f1f5f9;color:var(--blue1);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.lc-composer input[type=text]{flex:1;min-width:0;border:2px solid var(--blue1);border-radius:999px;padding:11px 16px;font-size:14px;outline:none;font-family:inherit}
.lc-send{width:44px;height:44px;border-radius:50%;border:0;color:#fff;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue1),var(--blue2));display:grid;place-items:center}
.lc-send:disabled{opacity:.6}

.lc-foot{font-size:11px;color:#94a3b8;text-align:center;padding:9px;border-top:1px solid #f1f5f9;flex-shrink:0;background:#fff}
.lc-foot strong{color:#64748b}

.lc-typing-day{align-self:center;font-size:11px;color:var(--muted);margin:6px 0}

.lc-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:10;cursor:zoom-out;padding:16px}
.lc-lightbox img{max-width:100%;max-height:100%;border-radius:8px}

@media (max-width:500px){
  body{padding:0}
  .lc-card{max-width:none;height:100vh;height:100dvh;border-radius:0}
}