
.lp-wrap{display:flex;justify-content:center;margin:26px 0;font-family:system-ui,-apple-system,Segoe UI,Roboto}
.lp-phone{width:360px;height:740px;border-radius:40px;background:#0b0f1a;box-shadow:0 30px 70px rgba(0,0,0,.35);padding:12px;position:relative}
.lp-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:160px;height:30px;border-radius:0 0 18px 18px;background:#0b0f1a;z-index:5}
.lp-screen{height:100%;border-radius:32px;background:#ffffff;overflow:hidden;position:relative}
.lp-status{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 10px 14px;font-weight:800}
.lp-time{font-size:14px}
.lp-status-icons{display:flex;gap:6px;align-items:center;color:#111827}
.lp-dot{width:6px;height:6px;border-radius:99px;background:#111827;display:inline-block;opacity:.65}
.lp-batt{font-size:12px;opacity:.75}
.lp-appbar{padding:0 14px 12px 14px;border-bottom:1px solid #e5e7eb;background:#f9fafb}
.lp-app-title{font-weight:900;font-size:18px}
.lp-app-sub{margin-top:4px;color:#6b7280;font-size:12px}
.lp-body{position:relative;height:calc(100% - 86px)}
.lp-list{height:100%;overflow:auto;padding:10px 8px 18px 8px}
.lp-thread{display:flex;justify-content:space-between;gap:10px;border:1px solid #eef2f7;border-radius:16px;padding:12px 12px;margin:8px 6px;cursor:pointer;background:#fff}
.lp-thread:hover{background:#f8fafc}
.lp-thread:focus{outline:2px solid #2563eb;outline-offset:2px}
.lp-thread-from{font-weight:900}
.lp-thread-preview{color:#6b7280;font-size:13px;margin-top:2px}
.lp-thread-date{color:#6b7280;font-size:12px;white-space:nowrap;margin-top:2px}
.lp-empty{padding:14px;color:#6b7280}
.lp-hint{padding:10px 14px;color:#6b7280;font-size:12px}

/* Chat overlay */
.lp-chat{position:absolute;inset:0;background:#fff;display:none;flex-direction:column}
.lp-chat.is-open{display:flex}
.lp-chat-head{display:flex;align-items:center;gap:10px;padding:12px 12px;border-bottom:1px solid #e5e7eb;background:#f9fafb}
.lp-back{border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:8px 10px;font-weight:900;cursor:pointer}
.lp-chat-title{font-weight:900}
.lp-chat-messages{flex:1;overflow:auto;padding:14px;background:#ffffff}
.lp-bubble{max-width:78%;padding:10px 12px;border-radius:18px;margin:8px 0;line-height:1.25;border:1px solid #eef2f7}
.lp-bubble.you{margin-left:auto;background:#2563eb;color:#fff;border-color:transparent}
.lp-bubble.them{margin-right:auto;background:#f3f4f6;color:#111827}
.lp-bubble-meta{font-size:11px;opacity:.75;margin-top:6px}
.lp-chat-compose{display:flex;gap:10px;padding:12px;border-top:1px solid #e5e7eb;background:#fff}
#lp-compose-body{flex:1;border:1px solid #d1d5db;border-radius:16px;padding:10px 12px}
.lp-send{border:none;background:#111827;color:#fff;border-radius:16px;padding:10px 14px;font-weight:900;cursor:pointer}

/* Modal */
.lp-modal{display:none;position:fixed;inset:0;z-index:99999}
.lp-modal.is-open{display:block}
.lp-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.lp-modal-card{position:relative;max-width:420px;margin:14vh auto 0 auto;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:16px}
.lp-modal-title{font-weight:900;margin-bottom:8px}
.lp-modal-body{color:#111827;margin-bottom:14px}
.lp-modal-actions{display:flex;justify-content:flex-end}
.lp-btn{background:#111827;color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
