/* ============================================================
   CONFORTOCARE — LIVE CHAT SIDEBAR
   assets/css/livechat.css  •  v2.2
   + Botão de anexo maior no mobile (mesmo tamanho do desktop)
   + Scroll lock mobile robusto (via position:fixed no JS)
   + Demais estilos da v2.1 mantidos
   ============================================================ */

:root {
  --lc-orange     : #FF6B35;
  --lc-orange-d   : #E55A2B;
  --lc-orange-l   : #FF8C5F;
  --lc-orange-g   : linear-gradient(135deg, #FF6B35, #FF8C5F);
  --lc-green      : #10B981;
  --lc-danger     : #EF4444;
  --lc-danger-d   : #DC2626;

  --lc-bg         : #FFFFFF;
  --lc-bg2        : #F5F7FA;
  --lc-bg3        : #EDF2F7;
  --lc-surface    : #FFFFFF;
  --lc-border     : #E0E6ED;
  --lc-border-sub : #EDF2F7;

  --lc-text       : #2C3E50;
  --lc-text-sub   : #546E7A;
  --lc-text-muted : #90A4AE;

  --lc-shadow-sm  : 0 2px 8px  rgba(44,62,80,.08);
  --lc-shadow-md  : 0 4px 16px rgba(44,62,80,.10);
  --lc-shadow-lg  : 0 8px 32px rgba(44,62,80,.14);
  --lc-shadow-chat: -8px 0 40px rgba(44,62,80,.12);

  --lc-width      : 420px;
  --lc-z          : 9100;
  --lc-spring     : cubic-bezier(.16,1,.3,1);
  --lc-ease       : cubic-bezier(.4,0,.2,1);
  --lc-dur        : .36s;
}

*, *::before, *::after { box-sizing: border-box; }

/* ============================================================
   OVERLAY
   ============================================================ */
.lc-overlay {
  position      : fixed;
  inset         : 0;
  background    : rgba(44,62,80,.45);
  backdrop-filter: blur(4px);
  z-index       : calc(var(--lc-z) + 1);
  opacity       : 0;
  pointer-events: none;
  transition    : opacity var(--lc-dur) var(--lc-ease);
}
.lc-overlay.show { opacity:1; pointer-events:all; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.lc-sidebar {
  position      : fixed;
  top           : 0;
  right         : 0;
  width         : var(--lc-width);
  height        : 100dvh;
  background    : var(--lc-bg);
  border-left   : 1px solid var(--lc-border);
  box-shadow    : var(--lc-shadow-chat);
  z-index       : calc(var(--lc-z) + 2);
  display       : flex;
  flex-direction: column;
  transform     : translateX(100%);
  transition    : transform var(--lc-dur) var(--lc-spring);
  overflow      : hidden;
  font-family   : 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.lc-sidebar.open { transform: translateX(0); }

/* ============================================================
   HEADER
   ============================================================ */
.lc-header {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 0 14px 0 18px;
  height        : 64px;
  flex-shrink   : 0;
  background    : var(--lc-bg);
  border-bottom : 2px solid var(--lc-border-sub);
  position      : relative;
}
.lc-header::after {
  content   : '';
  position  : absolute;
  bottom    : 0;
  left      : 18px;
  right     : 14px;
  height    : 2px;
  background: var(--lc-orange-g);
  border-radius: 2px 2px 0 0;
}

.lc-brand {
  display    : flex;
  align-items: center;
  gap        : 11px;
  flex       : 1;
  min-width  : 0;
}
.lc-brand-icon {
  position       : relative;
  width          : 40px;
  height         : 40px;
  border-radius  : 12px;
  background     : linear-gradient(135deg,rgba(255,107,53,.12),rgba(255,140,95,.08));
  border         : 1.5px solid rgba(255,107,53,.2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 18px;
  color          : var(--lc-orange);
  flex-shrink    : 0;
}
.lc-brand-dot {
  position     : absolute;
  bottom       : -2px;
  right        : -2px;
  width        : 11px;
  height       : 11px;
  background   : var(--lc-green);
  border-radius: 50%;
  border       : 2px solid var(--lc-bg);
  animation    : lc-blink 2.5s ease infinite;
}
@keyframes lc-blink { 0%,100%{opacity:1} 50%{opacity:.45} }

.lc-brand-name {
  font-size     : 15px;
  font-weight   : 700;
  color         : var(--lc-text);
  margin        : 0 0 2px;
  letter-spacing: .1px;
}
.lc-brand-status {
  font-size  : 12px;
  color      : var(--lc-green);
  display    : flex;
  align-items: center;
  gap        : 5px;
  margin     : 0;
}
.lc-dot-online {
  width        : 6px;
  height       : 6px;
  background   : var(--lc-green);
  border-radius: 50%;
  flex-shrink  : 0;
  animation    : lc-blink 2.5s ease infinite;
}

.lc-header-btns {
  display       : flex;
  gap           : 4px;
  align-items   : center;
  opacity       : 0;
  pointer-events: none;
  transform     : translateX(8px);
  transition    : opacity .25s var(--lc-ease), transform .25s var(--lc-spring);
}
.lc-header-btns.show { opacity:1; pointer-events:all; transform:translateX(0); }

.lc-hbtn {
  width          : 34px;
  height         : 34px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : transparent;
  border         : 1px solid var(--lc-border);
  border-radius  : 9px;
  color          : var(--lc-text-sub);
  font-size      : 15px;
  cursor         : pointer;
  transition     : all .2s;
}
.lc-hbtn:hover { background:rgba(255,107,53,.08); border-color:rgba(255,107,53,.35); color:var(--lc-orange); }
.lc-hbtn-danger:hover { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.35); color:var(--lc-danger); }

.lc-close-btn {
  width          : 34px;
  height         : 34px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : transparent;
  border         : 1px solid var(--lc-border);
  border-radius  : 9px;
  color          : var(--lc-text-muted);
  font-size      : 16px;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : all .2s;
}
.lc-close-btn:hover { background:var(--lc-bg2); color:var(--lc-text); }

/* ============================================================
   PANELS
   ============================================================ */
.lc-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  min-height    : 0;
}

/* ============================================================
   WELCOME
   ============================================================ */
.lc-welcome {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : 40px 28px 32px;
  overflow-y    : auto;
  text-align    : center;
  background    : var(--lc-bg);
}
.lc-welcome-hero {
  position       : relative;
  width          : 100px;
  height         : 100px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin-bottom  : 28px;
}
.lc-welcome-icon-wrap {
  position       : relative;
  width          : 80px;
  height         : 80px;
  border-radius  : 50%;
  background     : linear-gradient(135deg,rgba(255,107,53,.1),rgba(255,140,95,.06));
  border         : 2px solid rgba(255,107,53,.2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 2;
}
.lc-welcome-icon { font-size:38px; color:var(--lc-orange); }

.lc-hero-ring {
  position     : absolute;
  border-radius: 50%;
  border       : 1.5px solid rgba(255,107,53,.15);
  animation    : lc-ring-out 3s ease infinite;
}
.lc-ring1 { width:100px; height:100px; animation-delay:0s; }
.lc-ring2 { width:100px; height:100px; animation-delay:1.3s; }
@keyframes lc-ring-out { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.6);opacity:0} }

.lc-welcome-title {
  font-size   : 22px;
  font-weight : 700;
  color       : var(--lc-text);
  margin      : 0 0 8px;
  line-height : 1.3;
}
.lc-welcome-title strong { color:var(--lc-orange); }
.lc-welcome-sub { font-size:14px; color:var(--lc-text-sub); margin:0 0 16px; line-height:1.5; }

.lc-horario {
  display      : inline-flex;
  align-items  : center;
  gap          : 7px;
  font-size    : 12px;
  font-weight  : 500;
  color        : var(--lc-green);
  background   : rgba(16,185,129,.07);
  border       : 1px solid rgba(16,185,129,.2);
  border-radius: 20px;
  padding      : 6px 14px;
  margin-bottom: 28px;
}

.lc-form { width:100%; max-width:310px; }
.lc-field { margin-bottom:14px; text-align:left; }
.lc-field label {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  color         : var(--lc-text-sub);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom : 6px;
}
.lc-field input {
  width        : 100%;
  padding      : 11px 14px;
  background   : var(--lc-bg2);
  border       : 1.5px solid var(--lc-border);
  border-radius: 10px;
  color        : var(--lc-text);
  font-size    : 14px;
  font-family  : inherit;
  outline      : none;
  transition   : all .2s;
}
.lc-field input::placeholder { color:var(--lc-text-muted); }
.lc-field input:focus { border-color:var(--lc-orange); background:var(--lc-bg); box-shadow:0 0 0 3px rgba(255,107,53,.12); }

.lc-btn-start {
  width          : 100%;
  padding        : 13px 20px;
  background     : var(--lc-orange-g);
  border         : none;
  border-radius  : 11px;
  color          : #fff;
  font-size      : 14px;
  font-weight    : 600;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  letter-spacing : .2px;
  transition     : all .25s;
  box-shadow     : 0 4px 14px rgba(255,107,53,.3);
}
.lc-btn-start:hover   { transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,107,53,.4); filter:brightness(1.05); }
.lc-btn-start:active  { transform:translateY(0); }
.lc-btn-start:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

#lcLoggedStart { width:100%; max-width:310px; }

.lc-return-opts {
  width         : 100%;
  max-width     : 310px;
  flex-direction: column;
  gap           : 10px;
}
.lc-opt-btn {
  width          : 100%;
  padding        : 12px 20px;
  background     : var(--lc-bg2);
  border         : 1.5px solid var(--lc-border);
  border-radius  : 11px;
  color          : var(--lc-text);
  font-size      : 14px;
  font-weight    : 600;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 8px;
  transition     : all .2s;
}
.lc-opt-btn:hover { background:var(--lc-bg3); border-color:rgba(255,107,53,.35); transform:translateY(-1px); }
.lc-opt-primary { background:var(--lc-orange-g); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(255,107,53,.25); }
.lc-opt-primary:hover { filter:brightness(1.06); box-shadow:0 6px 18px rgba(255,107,53,.35); }

/* ============================================================
   SUBHEADER (histórico)
   ============================================================ */
.lc-subheader {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 14px 18px;
  border-bottom: 1px solid var(--lc-border-sub);
  background   : var(--lc-bg);
  flex-shrink  : 0;
  font-size    : 14px;
  font-weight  : 600;
  color        : var(--lc-text);
}
.lc-back-btn {
  width          : 30px;
  height         : 30px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--lc-bg2);
  border         : 1px solid var(--lc-border);
  border-radius  : 8px;
  color          : var(--lc-text-sub);
  font-size      : 14px;
  cursor         : pointer;
  flex-shrink    : 0;
  transition     : all .2s;
}
.lc-back-btn:hover { background:var(--lc-orange); border-color:var(--lc-orange); color:#fff; }

.lc-hist-badge { margin-left:auto; font-size:11px; font-weight:600; padding:2px 10px; border-radius:20px; }
.lc-hist-badge.ativa     { background:rgba(16,185,129,.1); color:var(--lc-green); }
.lc-hist-badge.encerrada { background:var(--lc-bg3); color:var(--lc-text-muted); }

/* ============================================================
   MENSAGENS
   ============================================================ */
.lc-messages {
  flex          : 1;
  overflow-y    : auto;
  padding       : 20px 16px 10px;
  background    : var(--lc-bg2);
  min-height    : 0;
  display       : flex;
  flex-direction: column;
  /* Garante scroll interno sem propagar para a página */
  overscroll-behavior: contain;
}
.lc-messages::-webkit-scrollbar       { width:4px; }
.lc-messages::-webkit-scrollbar-track { background:transparent; }
.lc-messages::-webkit-scrollbar-thumb { background:var(--lc-border); border-radius:4px; }

.lc-messages-inner {
  display       : flex;
  flex-direction: column;
  gap           : 3px;
  margin-top    : auto;
}

.lc-msg {
  display  : flex;
  max-width: 82%;
  animation: lc-msg-in .3s var(--lc-spring) forwards;
  opacity  : 0;
}
@keyframes lc-msg-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);   }
}
.lc-msg.sent     { align-self:flex-end; flex-direction:row-reverse; }
.lc-msg.received { align-self:flex-start; }

.lc-msg-bubble {
  padding      : 10px 14px;
  border-radius: 16px;
  font-size    : 14px;
  line-height  : 1.55;
  word-break   : break-word;
  max-width    : 100%;
}
.lc-msg.sent     .lc-msg-bubble {
  background               : var(--lc-orange-g);
  color                    : #fff;
  border-bottom-right-radius: 4px;
  box-shadow               : 0 2px 8px rgba(255,107,53,.2);
}
.lc-msg.received .lc-msg-bubble {
  background             : var(--lc-bg);
  color                  : var(--lc-text);
  border                 : 1px solid var(--lc-border);
  border-bottom-left-radius: 4px;
  box-shadow             : var(--lc-shadow-sm);
}

/* Imagem na mensagem */
.lc-msg-img {
  display      : block;
  max-width    : 220px;
  max-height   : 200px;
  border-radius: 10px;
  object-fit   : cover;
  cursor       : pointer;
  transition   : opacity .2s;
}
.lc-msg-img:hover { opacity:.88; }
.lc-msg.sent .lc-msg-img  { border:2px solid rgba(255,255,255,.3); }
.lc-msg.received .lc-msg-img { border:1px solid var(--lc-border); }

/* Vídeo na mensagem */
.lc-msg-video {
  display      : block;
  max-width    : 240px;
  max-height   : 180px;
  border-radius: 10px;
  width        : 100%;
}
.lc-msg.sent .lc-msg-video     { border:2px solid rgba(255,255,255,.2); }
.lc-msg.received .lc-msg-video { border:1px solid var(--lc-border); }

/* Arquivo genérico */
.lc-msg-file {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size    : 13px;
  font-weight  : 600;
  transition   : opacity .2s;
  white-space  : nowrap;
  overflow     : hidden;
  max-width    : 220px;
}
.lc-msg-file i { font-size:18px; flex-shrink:0; }
.lc-msg-file span { overflow:hidden; text-overflow:ellipsis; }
.lc-msg.sent .lc-msg-file {
  background : rgba(255,255,255,.2);
  color      : #fff;
  border     : 1px solid rgba(255,255,255,.3);
}
.lc-msg.sent .lc-msg-file:hover { background:rgba(255,255,255,.3); }
.lc-msg.received .lc-msg-file {
  background : var(--lc-bg2);
  color      : var(--lc-text);
  border     : 1px solid var(--lc-border);
}
.lc-msg.received .lc-msg-file:hover { background:var(--lc-bg3); }

/* Caption (texto após mídia) */
.lc-msg-caption {
  font-size  : 13px;
  margin-top : 6px;
  line-height: 1.45;
}
.lc-msg.sent .lc-msg-caption     { color:rgba(255,255,255,.9); }
.lc-msg.received .lc-msg-caption { color:var(--lc-text-sub); }

.lc-msg-meta {
  display    : flex;
  align-items: center;
  gap        : 5px;
  margin-top : 4px;
  padding    : 0 2px;
}
.lc-msg-time   { font-size:11px; color:var(--lc-text-muted); }
.lc-msg-sender { font-size:11px; font-weight:600; color:var(--lc-text-muted); }
.lc-msg.sent .lc-msg-meta { justify-content:flex-end; }

.lc-msg + .lc-msg.sent,
.lc-msg + .lc-msg.received { margin-top:2px; }
.lc-msg.sent   + .lc-msg.received,
.lc-msg.received + .lc-msg.sent { margin-top:10px; }

/* Sistema */
.lc-msg-system {
  align-self : center;
  margin     : 10px 0;
  display    : flex;
  animation  : lc-msg-in .3s var(--lc-spring) forwards;
  opacity    : 0;
}
.lc-msg-system-inner {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  background   : var(--lc-bg);
  border       : 1px solid var(--lc-border);
  border-radius: 20px;
  padding      : 5px 13px;
  font-size    : 12px;
  color        : var(--lc-text-muted);
}

/* ============================================================
   PREVIEW DE ARQUIVO (antes de enviar)
   ============================================================ */
.lc-file-preview {
  display        : none;
  align-items    : center;
  gap            : 10px;
  padding        : 10px 14px;
  background     : var(--lc-bg2);
  border-top     : 1px solid var(--lc-border-sub);
  flex-shrink    : 0;
  position       : relative;
}
.lc-file-preview-img {
  max-width    : 80px;
  max-height   : 70px;
  border-radius: 8px;
  object-fit   : cover;
  border       : 1px solid var(--lc-border);
  display      : block;
}
.lc-file-preview-video {
  max-width    : 120px;
  max-height   : 70px;
  border-radius: 8px;
  border       : 1px solid var(--lc-border);
  display      : block;
}
.lc-file-preview-doc {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 8px 12px;
  background : var(--lc-bg);
  border     : 1px solid var(--lc-border);
  border-radius: 10px;
  flex       : 1;
  min-width  : 0;
}
.lc-file-preview-doc i { font-size:22px; color:var(--lc-orange); flex-shrink:0; }
.lc-file-preview-name {
  font-size    : 12px;
  font-weight  : 600;
  color        : var(--lc-text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}
.lc-file-preview-size { font-size:11px; color:var(--lc-text-muted); margin-top:2px; }
.lc-file-preview-remove {
  width          : 28px;
  height         : 28px;
  flex-shrink    : 0;
  background     : rgba(239,68,68,.1);
  border         : 1px solid rgba(239,68,68,.25);
  border-radius  : 50%;
  color          : var(--lc-danger);
  font-size      : 12px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : all .2s;
  margin-left    : auto;
}
.lc-file-preview-remove:hover { background:var(--lc-danger); color:#fff; }

/* ============================================================
   INPUT
   ============================================================ */
.lc-input-wrap {
  flex-shrink: 0;
  padding    : 12px 14px 10px;
  background : var(--lc-bg);
  border-top : 1px solid var(--lc-border-sub);
}
.lc-input-row {
  display      : flex;
  align-items  : flex-end;
  gap          : 8px;
  background   : var(--lc-bg2);
  border       : 1.5px solid var(--lc-border);
  border-radius: 14px;
  padding      : 8px 10px;
  transition   : border-color .2s;
  margin-bottom: 6px;
}
.lc-input-row:focus-within { border-color:rgba(255,107,53,.5); box-shadow:0 0 0 3px rgba(255,107,53,.08); }

/* ── Botão de anexo (paperclip) ─────────────────────────── */
.lc-attach-btn {
  width          : 38px;
  height         : 38px;
  flex-shrink    : 0;
  background     : transparent;
  border         : none;
  color          : var(--lc-text-muted);
  font-size      : 18px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  align-self     : center;
  border-radius  : 9px;
  transition     : all .2s;
  /* Área de toque generosa para mobile */
  -webkit-tap-highlight-color: transparent;
  touch-action   : manipulation;
}
.lc-attach-btn:hover { color:var(--lc-orange); background:rgba(255,107,53,.08); }

.lc-textarea {
  flex       : 1;
  background : transparent;
  border     : none;
  outline    : none;
  color      : var(--lc-text);
  font-size  : 14px;
  font-family: inherit;
  line-height: 1.5;
  resize     : none;
  max-height : 120px;
  overflow-y : auto;
  scrollbar-width: none;
  align-self : center;
  padding    : 0;
}
.lc-textarea::placeholder { color:var(--lc-text-muted); }
.lc-textarea::-webkit-scrollbar { display:none; }

.lc-send-btn {
  width          : 38px;
  height         : 38px;
  flex-shrink    : 0;
  background     : var(--lc-orange-g);
  border         : none;
  border-radius  : 10px;
  color          : #fff;
  font-size      : 16px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  align-self     : center;
  transition     : transform .2s, opacity .2s;
  box-shadow     : 0 2px 8px rgba(255,107,53,.25);
  -webkit-tap-highlight-color: transparent;
  touch-action   : manipulation;
}
.lc-send-btn:hover   { transform:scale(1.08); }
.lc-send-btn:active  { transform:scale(.94); }
.lc-send-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

.lc-footer-hint {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  font-size      : 11px;
  color          : var(--lc-text-muted);
  margin         : 0;
}
.lc-typing-hint { display:none; color:var(--lc-orange); font-weight:500; }
.lc-typing-hint.show { display:inline; }

/* ============================================================
   HISTÓRICO — LISTA
   ============================================================ */
.lc-hist-list {
  flex      : 1;
  overflow-y: auto;
  padding   : 12px;
  background: var(--lc-bg2);
  overscroll-behavior: contain;
}
.lc-hist-list::-webkit-scrollbar       { width:4px; }
.lc-hist-list::-webkit-scrollbar-thumb { background:var(--lc-border); border-radius:4px; }

.lc-hist-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  height         : 200px;
  color          : var(--lc-text-muted);
}
.lc-hist-empty i { font-size:32px; opacity:.4; }
.lc-hist-empty p { font-size:14px; }

.lc-hist-item {
  background   : var(--lc-bg);
  border       : 1px solid var(--lc-border);
  border-radius: 12px;
  padding      : 13px 15px;
  margin-bottom: 8px;
  cursor       : pointer;
  transition   : all .2s;
}
.lc-hist-item:hover { border-color:rgba(255,107,53,.4); box-shadow:var(--lc-shadow-sm); transform:translateY(-1px); }

.lc-hist-item-top {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  margin-bottom  : 5px;
}
.lc-hist-item-date   { font-size:11px; color:var(--lc-text-muted); }
.lc-hist-item-status {
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 8px;
  border-radius: 8px;
}
.lc-hist-item-status.ativa     { background:rgba(16,185,129,.1); color:var(--lc-green); }
.lc-hist-item-status.encerrada { background:var(--lc-bg2); color:var(--lc-text-muted); }

.lc-hist-item-preview {
  font-size    : 13px;
  color        : var(--lc-text-sub);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.lc-messages-ro { background:var(--lc-bg2); opacity:.92; }
.lc-messages-ro .lc-msg-bubble { cursor:default; }

/* ============================================================
   MODAL
   ============================================================ */
.lc-modal-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(44,62,80,.55);
  backdrop-filter: blur(6px);
  z-index        : calc(var(--lc-z) + 10);
  display        : flex;
  align-items    : center;
  justify-content: center;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity .25s var(--lc-ease);
}
.lc-modal-overlay.show { opacity:1; pointer-events:all; }

.lc-modal {
  background   : var(--lc-bg);
  border       : 1px solid var(--lc-border);
  border-radius: 20px;
  padding      : 32px 28px 26px;
  width        : 340px;
  max-width    : calc(100vw - 36px);
  text-align   : center;
  box-shadow   : 0 24px 60px rgba(44,62,80,.2);
  transform    : scale(.92) translateY(12px);
  transition   : transform .3s var(--lc-spring);
}
.lc-modal-overlay.show .lc-modal { transform:scale(1) translateY(0); }

.lc-modal-icon {
  width          : 60px;
  height         : 60px;
  background     : rgba(239,68,68,.08);
  border         : 2px solid rgba(239,68,68,.2);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 auto 20px;
  font-size      : 26px;
  color          : var(--lc-danger);
}
.lc-modal h3 { font-size:18px; font-weight:700; color:var(--lc-text); margin:0 0 10px; }
.lc-modal p  { font-size:14px; color:var(--lc-text-sub); margin:0 0 24px; line-height:1.6; }
.lc-modal-btns { display:flex; gap:10px; }

.lc-modal-cancel {
  flex        : 1;
  padding     : 11px;
  background  : var(--lc-bg2);
  border      : 1.5px solid var(--lc-border);
  border-radius: 10px;
  color       : var(--lc-text-sub);
  font-size   : 14px;
  font-weight : 600;
  cursor      : pointer;
  transition  : all .2s;
}
.lc-modal-cancel:hover { background:var(--lc-bg3); color:var(--lc-text); }

.lc-modal-confirm {
  flex         : 1;
  padding      : 11px;
  background   : linear-gradient(135deg,var(--lc-danger),var(--lc-danger-d));
  border       : none;
  border-radius: 10px;
  color        : #fff;
  font-size    : 14px;
  font-weight  : 600;
  cursor       : pointer;
  box-shadow   : 0 4px 12px rgba(239,68,68,.25);
  transition   : all .2s;
}
.lc-modal-confirm:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768px)
   ============================================================ */
@media (max-width:768px) {
  :root { --lc-width:100vw; }

  .lc-sidebar   { border-left:none; box-shadow:none; }
  .lc-welcome   { padding:32px 20px 24px; }
  .lc-messages  { padding:14px 12px 8px; }
  .lc-input-wrap{ padding:10px 12px 12px; }
  .lc-modal     { width:calc(100% - 28px); }

  /* ── Botões de ação maiores para toque ── */
  .lc-attach-btn {
    width    : 44px;
    height   : 44px;
    font-size: 20px;
    /* Área de toque ainda maior via padding negativo via margin */
    margin   : -4px;
    padding  : 4px;
  }
  .lc-send-btn {
    width    : 44px;
    height   : 44px;
    font-size: 17px;
  }

  /* ── Input row com mais espaço interno ── */
  .lc-input-row {
    padding   : 6px 8px;
    gap       : 6px;
    border-radius: 16px;
  }

  /* ── Mensagens um pouco mais largas ── */
  .lc-msg       { max-width:88%; }
  .lc-msg-img   { max-width:180px; }
  .lc-msg-video { max-width:200px; }

  /* ── Prevent iOS bounce scroll no body ── */
  body.lc-open {
    /* position:fixed é aplicado via JS — aqui só garantimos overflow */
    overflow: hidden !important;
  }
}

/* ── Prevent iOS rubber-band no conteúdo do chat ── */
.lc-sidebar {
  -webkit-overflow-scrolling: touch;
}