.lc-backdrop{ position:fixed; inset:0; background:rgba(10,8,30,.35); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; }
.lc-backdrop.lc-open{ opacity:1; visibility:visible; transition:opacity .25s ease, visibility 0s; }

/* Floats inset from all three free edges (left/right/bottom) instead of a full-bleed
   edge-to-edge bottom sheet — a rounded floating card, matching the admin side's floating
   widget, not a native action-sheet look. */
.lc-panel{ position:fixed; left:24px; right:24px; bottom:44px; top:auto; height:74vh; height:74dvh; max-width:560px; margin:0 auto;
  background:var(--surface); border-radius:20px; box-shadow:0 14px 40px rgba(0,0,0,.3); z-index:71;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(30px) scale(.97); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .28s cubic-bezier(.22,.9,.32,1), opacity .22s ease, visibility 0s linear .28s; }
.lc-panel.lc-open{ transform:translateY(0) scale(1); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .28s cubic-bezier(.22,.9,.32,1), opacity .22s ease, visibility 0s; }

.lc-panel-head{ display:flex; align-items:center; gap:9px; padding:10px 12px; color:#fff;
  background:linear-gradient(135deg, var(--mm-primary, #0ea5e9), color-mix(in oklab, var(--mm-primary, #0ea5e9) 65%, #000)); flex-shrink:0; }
.lc-head-avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.22); flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.lc-head-avatar img{ width:100%; height:100%; object-fit:cover; }
.lc-head-main{ flex:1; min-width:0; }
.lc-title{ font-weight:800; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lc-status{ font-size:11px; opacity:.9; display:flex; align-items:center; gap:5px; margin-top:1px; }
.lc-status-dot{ width:7px; height:7px; border-radius:50%; background:#c9ced9; transition:background .2s; }
.lc-status-dot.online{ background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:lcPulse 1.8s infinite; }
@keyframes lcPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 70%{box-shadow:0 0 0 6px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.lc-head-acts{ display:flex; align-items:center; gap:4px; }
.lc-iconbtn{ border:0; background:rgba(255,255,255,.18); color:#fff; width:28px; height:28px; border-radius:50%; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lc-endbtn{ border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; }
.lc-closebtn{ border:0; background:rgba(255,255,255,.18); color:#fff; width:28px; height:28px; border-radius:50%; font-size:14px; cursor:pointer; }

.lc-search-bar{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ring); background:var(--surface); flex-shrink:0; }
.lc-search-bar input{ flex:1; min-width:0; padding:7px 11px; border:1px solid var(--ring); border-radius:999px; font-size:16px; background:var(--surface-2); color:var(--text); }
.lc-search-count{ font-size:11px; color:var(--muted); white-space:nowrap; }

.lc-agents{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--ring); flex-shrink:0; }
.lc-agent-avatars{ display:flex; }
.lc-agent-avatar{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#5f8cff,#8763ff); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; border:2px solid var(--surface); margin-left:-8px; }
.lc-agent-avatar:first-child{ margin-left:0; }
.lc-agents-text{ font-size:11px; color:var(--muted); }

.lc-prechat{ flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.lc-prechat-icon{ font-size:38px; }
.lc-prechat-title{ font-weight:800; font-size:15.5px; margin-top:6px; color:var(--text); }
.lc-prechat-sub{ font-size:12px; color:var(--muted); margin:6px 0 14px; }
.lc-field{ width:100%; max-width:280px; text-align:left; margin-bottom:11px; }
.lc-field label{ display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.lc-field .lc-req{ color:#c1362f; }
.lc-prechat input{ width:100%; max-width:280px; box-sizing:border-box; padding:10px 13px; border:1.5px solid var(--ring); border-radius:12px;
  font-size:16px; font-family:inherit; background:var(--surface); color:var(--text); }
.lc-prechat input:focus{ outline:none; border-color:var(--mm-primary, #0ea5e9); }
.lc-prechat-note{ font-size:11.5px; color:#c1362f; min-height:15px; margin-bottom:6px; }
.lc-prechat-go{ width:100%; max-width:280px; border:0; border-radius:12px; padding:11px; font-weight:800; font-size:13.5px; cursor:pointer;
  background:var(--mm-primary, #0ea5e9); color:#fff; }

.lc-skeleton{ flex:1; padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); }
.lc-sk{ height:30px; border-radius:8px; max-width:60%; background:linear-gradient(90deg, var(--ring), var(--surface), var(--ring)); background-size:200% 100%; animation:lcsk 1.2s infinite; }
.lc-sk-staff{ align-self:flex-start; }
.lc-sk-customer{ align-self:flex-end; width:45%; }
.lc-sk-short{ width:35%; }
@keyframes lcsk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── WhatsApp-density thread + bubbles (shared class names with the admin side) ── */
.lc-thread-wrap{ flex:1; position:relative; min-height:0; display:flex; flex-direction:column; }
.lc-thread{ flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; background:var(--surface-2); }
.lc-msg{ position:relative; padding:6px 9px; border-radius:8px; font-size:13.5px; line-height:1.4; max-width:78%; white-space:pre-wrap; word-break:break-word; margin:2px 0; }
.lc-msg.from-staff{ background:var(--surface); color:var(--text); align-self:flex-start; border-bottom-left-radius:2px; box-shadow:0 1px 2px rgba(20,20,50,.08); }
.lc-msg.from-customer{ background:var(--mm-primary, #0ea5e9); color:#fff; align-self:flex-end; border-bottom-right-radius:2px; }
.lc-msg.grouped-top{ margin-top:0; }
.lc-msg.from-staff.grouped-top{ border-top-left-radius:8px; }
.lc-msg.from-staff.grouped-bottom{ border-bottom-left-radius:8px; }
.lc-msg.from-customer.grouped-top{ border-top-right-radius:8px; }
.lc-msg.from-customer.grouped-bottom{ border-bottom-right-radius:8px; }
.lc-msg + .lc-msg{ margin-top:2px; }
.lc-msg:not(.grouped-top) { margin-top:8px; }
.lc-msg-body{ display:inline; }
.lc-msg .when{ font-size:9.5px; opacity:.65; margin-top:2px; display:flex; align-items:center; gap:3px; justify-content:flex-end; }
.lc-msg.from-staff .when{ justify-content:flex-start; }
.lc-seen{ opacity:.8; }
.lc-msg .lc-attachment{ margin-top:4px; }
.lc-msg .lc-attachment img{ max-width:180px; max-height:180px; border-radius:6px; display:block; }
.lc-msg .lc-file-chip{ display:inline-block; background:rgba(0,0,0,.12); border-radius:8px; padding:6px 10px; font-size:11.5px; color:inherit; text-decoration:none; }
.lc-empty{ text-align:center; color:var(--muted); font-size:12px; padding:26px 10px; }
.lc-closed-note{ text-align:center; color:var(--muted); font-size:11px; padding:8px; align-self:center; }
.lc-offline-banner{ background:#fff4e0; color:#a16207; font-size:11px; text-align:center; padding:7px 14px; flex-shrink:0; }
.lc-queue-banner{ background:#fff4e0; color:#a16207; font-size:11px; text-align:center; padding:6px 14px; flex-shrink:0; }

/* Reactions */
.lc-reactions{ display:flex; gap:3px; flex-wrap:wrap; margin-top:3px; }
.lc-reaction-pill{ background:var(--surface); border:1px solid var(--ring); border-radius:999px; font-size:11px; padding:1px 6px; cursor:pointer; line-height:1.4; }
.lc-reaction-pill.mine{ border-color:var(--mm-primary,#0ea5e9); }
.lc-react-trigger{ position:absolute; top:-10px; right:-6px; width:20px; height:20px; border-radius:50%; border:1px solid var(--ring); background:var(--surface);
  font-size:10px; cursor:pointer; display:none; align-items:center; justify-content:center; padding:0; }
.lc-msg:hover .lc-react-trigger, .lc-msg:active .lc-react-trigger{ display:flex; }
.lc-msg.deleted{ opacity:.65; }
.lc-msg-deleted{ font-style:italic; color:var(--muted); }
.lc-react-popover{ position:absolute; bottom:100%; right:0; margin-bottom:4px; background:var(--surface); border:1px solid var(--ring); border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,.18); padding:4px 6px; display:flex; gap:2px; z-index:10; }
.lc-react-popover button{ border:0; background:transparent; font-size:17px; cursor:pointer; padding:2px 3px; border-radius:50%; }
.lc-react-popover button:hover{ background:var(--surface-2); }

/* New-message entrance + scroll-to-bottom pill */
.lc-msg-enter{ opacity:0; transform:translateY(6px); }
.lc-msg-enter-active{ opacity:1; transform:translateY(0); transition:opacity .2s ease, transform .2s ease; }
.lc-scrolldown{ position:absolute; bottom:10px; left:50%; transform:translateX(-50%); border:0; border-radius:999px; padding:6px 14px; font-size:11.5px; font-weight:700;
  background:var(--mm-primary,#0ea5e9); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer; }
mark.lc-search-hit{ background:#ffe066; color:#000; border-radius:2px; padding:0 1px; }

.lc-queue{ margin:14px auto; max-width:280px; background:#fff4e0; border:1px solid #ffe4b3; border-radius:14px; padding:18px 16px; text-align:center; }
.lc-queue-spinner{ width:20px; height:20px; margin:0 auto 8px; border:3px solid #ffe4b3; border-top-color:#a16207; border-radius:50%; animation:lcspin .8s linear infinite; }
@keyframes lcspin{ to{ transform:rotate(360deg); } }
.lc-queue-title{ font-weight:800; font-size:13.5px; color:#a16207; }
.lc-queue-sub{ font-size:12px; color:#8a5a06; margin-top:5px; }
.lc-queue-note{ font-size:10.5px; color:#b08a4a; margin-top:7px; }

.lc-closed-card{ margin:14px auto; max-width:280px; background:var(--surface); border:1px solid var(--ring); border-radius:14px; padding:18px 16px; text-align:center; }
.lc-closed-card-title{ font-weight:800; font-size:13.5px; color:var(--text); }
.lc-closed-card-sub{ font-size:12px; color:var(--muted); margin-top:5px; }
.lc-closed-card-btn{ margin-top:12px; border:0; border-radius:999px; padding:9px 18px; font-weight:800; font-size:12.5px; cursor:pointer;
  background:var(--mm-primary, #0ea5e9); color:#fff; }

.lc-typing{ padding:3px 14px; font-size:10.5px; color:var(--muted); font-style:italic; flex-shrink:0; }

/* Composer — WhatsApp-style icon-first pill */
.lc-preview-strip{ display:flex; gap:6px; padding:8px 10px 0; overflow-x:auto; flex-shrink:0; background:var(--surface); }
.lc-preview-item{ position:relative; width:52px; height:52px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--surface-2); border:1px solid var(--ring); }
.lc-preview-item img{ width:100%; height:100%; object-fit:cover; }
.lc-preview-item .lc-preview-file{ display:flex; align-items:center; justify-content:center; height:100%; font-size:18px; }
.lc-preview-remove{ position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:#c1362f; color:#fff; border:0; font-size:9px; cursor:pointer; line-height:1; }
.lc-composer{ position:relative; display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid var(--ring); flex-shrink:0; background:var(--surface); }
.lc-composer input[type=text]{ flex:1; min-width:0; padding:8px 13px; border:1px solid var(--ring); border-radius:999px; font-size:16px; font-family:inherit; background:var(--surface-2); color:var(--text); }
.lc-composer input[type=text]:focus{ outline:none; border-color:var(--mm-primary, #0ea5e9); }
.lc-composer button#lcSendBtn{ border:0; border-radius:999px; width:34px; height:34px; flex-shrink:0; background:var(--mm-primary, #0ea5e9); color:#fff; font-weight:800; cursor:pointer; font-size:14px; }

/* Emoji picker */
.lc-emoji-picker{ position:absolute; bottom:100%; left:8px; margin-bottom:6px; width:260px; max-height:220px; background:var(--surface); border:1px solid var(--ring);
  border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.2); overflow:hidden; display:flex; flex-direction:column; z-index:20; }
.lc-emoji-search{ margin:6px; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; font-size:12px; background:var(--surface-2); color:var(--text); }
.lc-emoji-tabs{ display:flex; border-bottom:1px solid var(--ring); flex-shrink:0; }
.lc-emoji-tab{ flex:1; border:0; background:transparent; padding:6px; font-size:15px; cursor:pointer; }
.lc-emoji-tab.active{ background:var(--surface-2); }
.lc-emoji-grid{ flex:1; overflow-y:auto; padding:6px; }
.lc-emoji-grid-cat{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.lc-emoji-btn{ border:0; background:transparent; font-size:19px; padding:4px; cursor:pointer; border-radius:6px; }
.lc-emoji-btn:hover{ background:var(--surface-2); }

.lc-feedback{ padding:14px 16px; border-top:1px solid var(--ring); background:var(--surface); flex-shrink:0; }
.lc-fb-title{ font-size:12.5px; font-weight:700; text-align:center; margin-bottom:8px; color:var(--text); }
.lc-fb-stars{ display:flex; justify-content:center; gap:6px; margin-bottom:10px; }
.lc-star{ border:0; background:transparent; font-size:24px; color:var(--ring); cursor:pointer; padding:0; line-height:1; }
.lc-star.active{ color:#f5b400; }
.lc-fb-msg{ width:100%; box-sizing:border-box; padding:8px 11px; border:1.5px solid var(--ring); border-radius:12px; font-size:16px; font-family:inherit; resize:vertical; min-height:48px; background:var(--surface); color:var(--text); }
.lc-fb-acts{ display:flex; gap:8px; margin-top:10px; }
.lc-fb-acts button{ flex:1; border:0; border-radius:12px; padding:9px; font-weight:800; font-size:12px; cursor:pointer; }
.lc-fb-skip{ background:var(--surface-2); color:var(--text); }
.lc-fb-send{ background:var(--mm-primary, #0ea5e9); color:#fff; }
.lc-fb-send:disabled{ opacity:.5; }