/* ============================================================
   css/live-chat.css — "Chat with us Live"
   ============================================================ */

.lc-page {
  padding: 2rem 1.5rem 5rem;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---------- hero ---------- */
.lc-hero { text-align: center; margin-bottom: 2.2rem; }
.lc-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tx-brand, #B48AFF);
  display: inline-block;
  padding: .3rem .8rem;
  border: 1px solid var(--brand-border, rgba(138,63,252,.25));
  background: var(--brand-light, rgba(138,63,252,.12));
  border-radius: var(--r-full, 999px);
  margin-bottom: .9rem;
}
.lc-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
  color: var(--tx1, #fff);
}
.lc-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand, #8A3FFC), var(--cyan, #00A8D2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lc-hero p {
  color: var(--tx2, rgba(255,255,255,.6));
  max-width: 620px;
  margin: 0 auto;
  font-size: .96rem;
  line-height: 1.6;
}
.lc-hero-cta { display: flex; gap: .7rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }
.lc-hero-note { margin: .7rem 0 0; font-size: .8rem; color: var(--tx3, rgba(255,255,255,.35)); }

.lc-error {
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.3);
  color: #fda4af;
  padding: .8rem 1rem;
  border-radius: var(--r-md, 12px);
  margin-bottom: 1.4rem;
  font-size: .88rem;
}

/* ---------- buttons ---------- */
.lc-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .62rem 1.25rem;
  border-radius: var(--r-sm, 8px);
  font-family: var(--font-body, sans-serif);
  font-size: .87rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .18s var(--ease, ease);
}
.lc-btn-primary { background: linear-gradient(135deg, var(--brand, #8A3FFC), #6D28D9); color: #fff; box-shadow: var(--shadow-glow, 0 8px 40px rgba(138,63,252,.15)); }
.lc-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lc-btn-ghost { background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--tx1, #fff); border-color: var(--border, rgba(255,255,255,.08)); }
.lc-btn-ghost:hover { border-color: var(--border-hover, rgba(255,255,255,.15)); }
.lc-btn-danger { background: rgba(244,63,94,.12); color: #fda4af; border-color: rgba(244,63,94,.28); }
.lc-btn-danger:hover { background: rgba(244,63,94,.2); }

/* ---------- layout ---------- */
.lc-layout {
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
  gap: 1.4rem;
  align-items: start;
}

.lc-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .9rem;
}
.lc-section-head h2 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--tx1, #fff); }
.lc-count { font-family: var(--font-mono, monospace); font-size: .68rem; color: var(--tx3, rgba(255,255,255,.35)); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- expert cards ---------- */
.lc-grid { display: grid; grid-template-columns: 1fr; gap: 1.05rem; }

.lc-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg, 18px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: linear-gradient(150deg, rgba(138,63,252,.10), rgba(0,168,210,.06));
  padding: 1.25rem 1.25rem 1.15rem;
  cursor: pointer;
  transition: border-color .25s var(--ease, ease), transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
  min-height: 268px;
  display: flex; flex-direction: column; justify-content: flex-end;
  outline: none;
}
.lc-card:hover, .lc-card:focus-visible { border-color: var(--border-hover, rgba(255,255,255,.15)); transform: translateY(-3px); box-shadow: var(--shadow-card, 0 8px 40px rgba(0,0,0,.4)); }
.lc-card.is-selected { border-color: var(--brand-border, rgba(138,63,252,.25)); box-shadow: 0 0 0 1px var(--brand-border, rgba(138,63,252,.25)), var(--shadow-glow, 0 8px 40px rgba(138,63,252,.15)); }

/* Video sits under everything and is always partly visible, then fills in on hover. */
.lc-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  opacity: .45;
  transform: scale(1.03);
  transition: opacity .35s var(--ease, ease), transform .7s var(--ease, ease);
  pointer-events: none;
}
.lc-card:hover .lc-card-video,
.lc-card:focus-visible .lc-card-video,
.lc-card.is-playing .lc-card-video { opacity: .92; transform: scale(1); }

.lc-card-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,4,14,.55) 0%, rgba(6,4,14,.28) 32%, rgba(6,4,14,.86) 74%, rgba(6,4,14,.96) 100%);
  transition: opacity .35s var(--ease, ease);
}
.lc-card:hover .lc-card-shade,
.lc-card:focus-visible .lc-card-shade { opacity: .78; }

.lc-card-top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }

.lc-card-avatar {
  position: relative; width: 56px; height: 56px; flex: none;
  border-radius: 15px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 25px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.lc-card-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-card-avatar .lc-emoji { position: relative; z-index: 0; font-style: normal; }
.lc-card-avatar img + .lc-emoji { opacity: 0; }

.lc-live, .lc-lock {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono, monospace);
  font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .65rem; border-radius: var(--r-full, 999px);
  backdrop-filter: blur(6px);
}
.lc-live { background: rgba(16,185,129,.16); color: #6ee7b7; border: 1px solid rgba(16,185,129,.32); }
.lc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: lcPulse 2s infinite; }
@keyframes lcPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.lc-lock { background: rgba(245,158,11,.16); color: #fcd34d; border: 1px solid rgba(245,158,11,.34); }

/* Round play badge fades in on hover; it is a real button so the preview can
   be started WITH voice. */
.lc-card-play {
  position: absolute; left: 50%; top: 44%; z-index: 3;
  width: 54px; height: 54px;
  transform: translate(-50%, -50%) scale(.7);
  border-radius: 50%;
  display: grid; place-items: center;
  padding: 0; cursor: pointer;
  background: rgba(8,5,16,.52);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 15px;
  opacity: 0;
  transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease), background .2s var(--ease, ease), border-color .2s var(--ease, ease);
  pointer-events: auto;
}
.lc-card:hover .lc-card-play,
.lc-card:focus-visible .lc-card-play,
.lc-card.is-sound .lc-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lc-card-play i { margin-left: 0; }
.lc-card-play:hover { background: rgba(138,63,252,.5); border-color: rgba(255,255,255,.65); }
.lc-card-play:focus-visible { outline: 2px solid var(--brand, #8A3FFC); outline-offset: 3px; }
.lc-card.is-sound .lc-card-play {
  background: rgba(138,63,252,.6); border-color: rgba(255,255,255,.8);
  animation: lcVoicePulse 1.7s infinite;
}
.lc-card.is-sound .lc-card-video { opacity: 1; }
@keyframes lcVoicePulse {
  0% { box-shadow: 0 0 0 0 rgba(138,63,252,.55); }
  70% { box-shadow: 0 0 0 16px rgba(138,63,252,0); }
  100% { box-shadow: 0 0 0 0 rgba(138,63,252,0); }
}
/* Touch devices have no hover, so the control must be discoverable up front. */
@media (hover: none) {
  .lc-card-play { opacity: .9; transform: translate(-50%, -50%) scale(.94); }
}

.lc-card-body { position: relative; z-index: 2; margin-top: auto; }
.lc-card-body h3 { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--tx1, #fff); text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.lc-card-body p { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.74); text-shadow: 0 1px 10px rgba(0,0,0,.5); }

.lc-card-cta {
  position: relative; z-index: 2; margin-top: .9rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 700; color: var(--tx-brand, #B48AFF);
  background: none; border: 0; padding: 0; margin-left: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  align-self: flex-start;
}
.lc-card-cta:focus-visible { outline: 2px solid var(--brand, #8A3FFC); outline-offset: 4px; border-radius: 4px; }
.lc-card-cta i { font-size: .68rem; transition: transform .2s var(--ease, ease); }
.lc-card:hover .lc-card-cta i { transform: translateX(4px); }

.lc-empty { color: var(--tx3, rgba(255,255,255,.35)); font-size: .85rem; text-align: center; padding: 1.5rem 0; }

/* ---------- chat panel ---------- */
.lc-chat {
  position: sticky; top: 1rem;
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h, 56px) - 3rem);
  min-height: 460px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--r-xl, 20px);
  background: var(--bg-elevated, #141414);
  overflow: hidden;
}

.lc-chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  background: rgba(255,255,255,.02);
}
.lc-chat-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.lc-chat-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--brand-light, rgba(138,63,252,.12));
  border: 1px solid var(--brand-border, rgba(138,63,252,.25));
  font-size: 18px;
}
.lc-chat-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-chat-avatar .lc-emoji { position: relative; z-index: 0; font-style: normal; }
.lc-chat-meta { min-width: 0; }
.lc-chat-meta strong { display: block; font-size: .9rem; font-weight: 700; color: var(--tx1, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chat-meta small { display: block; font-family: var(--font-mono, monospace); font-size: .66rem; color: var(--tx3, rgba(255,255,255,.35)); letter-spacing: .03em; }
.lc-chat-actions { display: flex; gap: .4rem; flex: none; }

.lc-icon-btn {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg-hover, rgba(255,255,255,.06));
  color: var(--tx2, rgba(255,255,255,.6));
  cursor: pointer; font-size: .78rem;
  transition: all .18s var(--ease, ease);
}
.lc-icon-btn:hover:not(:disabled) { color: var(--tx1, #fff); border-color: var(--border-hover, rgba(255,255,255,.15)); }
.lc-icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- messages ---------- */
.lc-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .8rem; scroll-behavior: smooth; }
.lc-log::-webkit-scrollbar { width: 6px; }
.lc-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }

.lc-msg { max-width: 88%; font-size: .89rem; line-height: 1.62; }
.lc-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand, #8A3FFC), #6D28D9);
  color: #fff;
  padding: .62rem .95rem;
  border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.lc-msg-ai {
  align-self: flex-start;
  background: var(--bg-card, rgba(33,33,33,.5));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px 16px 16px 4px;
  padding: .7rem .95rem;
  color: var(--tx1, #fff);
  word-wrap: break-word;
}
.lc-msg-ai.lc-err { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.09); color: #fda4af; }
.lc-msg-tag {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono, monospace); font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx3, rgba(255,255,255,.35));
  margin-bottom: .45rem;
}
.lc-msg-tag img { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; }

.lc-msg-ai .md > *:first-child { margin-top: 0; }
.lc-msg-ai .md > *:last-child { margin-bottom: 0; }
.lc-msg-ai .md p { margin: 0 0 .6rem; }
.lc-msg-ai .md h1, .lc-msg-ai .md h2, .lc-msg-ai .md h3 { margin: .8rem 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--tx1, #fff); }
.lc-msg-ai .md ul, .lc-msg-ai .md ol { margin: 0 0 .6rem; padding-left: 1.15rem; }
.lc-msg-ai .md li { margin-bottom: .2rem; }
.lc-msg-ai .md code {
  font-family: var(--font-mono, monospace); font-size: .8em;
  background: rgba(0,0,0,.4); padding: .12em .38em; border-radius: 4px;
}
.lc-msg-ai .md pre {
  background: rgba(0,0,0,.5); border: 1px solid var(--border, rgba(255,255,255,.08));
  padding: .7rem; border-radius: 10px; overflow-x: auto; margin: 0 0 .6rem;
}
.lc-msg-ai .md pre code { background: none; padding: 0; }
.lc-msg-ai .md a { color: var(--tx-brand, #B48AFF); }
.lc-msg-ai .md table { border-collapse: collapse; margin: 0 0 .6rem; width: 100%; font-size: .84em; }
.lc-msg-ai .md th, .lc-msg-ai .md td { border: 1px solid var(--border, rgba(255,255,255,.08)); padding: .3rem .5rem; text-align: left; }

.lc-hero-msg { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.lc-hero-msg .lc-hero-av {
  width: 48px; height: 48px; flex: none; border-radius: 14px;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--brand-light, rgba(138,63,252,.12));
  border: 1px solid var(--brand-border, rgba(138,63,252,.25));
  font-size: 22px;
  box-shadow: 0 8px 26px -10px rgba(138,63,252,.7);
}
.lc-hero-msg .lc-hero-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-hero-msg b { display: block; font-size: .95rem; }
.lc-hero-msg small { font-family: var(--font-mono, monospace); font-size: .64rem; color: #6ee7b7; letter-spacing: .05em; }

.lc-cursor {
  display: inline-block; width: 7px; height: 1em; vertical-align: -2px;
  background: var(--tx-brand, #B48AFF); margin-left: 2px; border-radius: 2px;
  animation: lcBlink 1s steps(2) infinite;
}
@keyframes lcBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.lc-typing { display: flex; gap: 4px; padding: .3rem 0; }
.lc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tx3, rgba(255,255,255,.35)); animation: lcDot 1.2s infinite; }
.lc-typing i:nth-child(2) { animation-delay: .15s; }
.lc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lcDot { 0%,60%,100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.lc-copy {
  margin-top: .5rem; font-size: .68rem; color: var(--tx3, rgba(255,255,255,.35));
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono, monospace); letter-spacing: .05em; text-transform: uppercase;
}
.lc-copy:hover { color: var(--tx-brand, #B48AFF); }

/* ---------- starter chips ---------- */
.lc-suggest { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.1rem .6rem; }
.lc-suggest:empty { display: none; }
.lc-chip {
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--bg-hover, rgba(255,255,255,.06));
  color: var(--tx2, rgba(255,255,255,.6));
  border-radius: var(--r-full, 999px);
  padding: .38rem .8rem; font-size: .75rem; cursor: pointer;
  transition: all .18s var(--ease, ease);
  font-family: var(--font-body, sans-serif);
}
.lc-chip:hover { border-color: var(--brand-border, rgba(138,63,252,.25)); color: var(--tx1, #fff); background: var(--brand-light, rgba(138,63,252,.12)); }

/* ---------- paid gate ---------- */
.lc-gate {
  position: absolute; inset: auto 0 0 0; top: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 5; padding: 1.5rem;
}
.lc-chat { position: relative; }
.lc-gate-inner {
  text-align: center; max-width: 320px;
  background: var(--bg-elevated, #141414);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--r-xl, 20px);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-card, 0 4px 30px rgba(0,0,0,.3));
}
.lc-gate-icon { font-size: 1.5rem; color: var(--tx-brand, #B48AFF); margin-bottom: .7rem; }
.lc-gate-inner h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--tx1, #fff); }
.lc-gate-inner p { margin: 0 0 1.1rem; font-size: .85rem; color: var(--tx2, rgba(255,255,255,.6)); line-height: 1.55; }
.lc-gate-cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- composer ---------- */
.lc-composer { border-top: 1px solid var(--border, rgba(255,255,255,.08)); padding: .75rem .9rem .55rem; background: rgba(255,255,255,.02); }
.lc-composer-inner {
  display: flex; align-items: flex-end; gap: .45rem;
  background: var(--bg-card, rgba(33,33,33,.5));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--r-lg, 16px);
  padding: .45rem .5rem .45rem .85rem;
  transition: border-color .18s var(--ease, ease);
}
.lc-composer-inner:focus-within { border-color: var(--border-focus, rgba(138,63,252,.5)); }

#lcInput {
  flex: 1; background: none; border: none; outline: none; resize: none;
  color: var(--tx1, #fff); font-family: var(--font-body, sans-serif);
  font-size: .9rem; line-height: 1.5; max-height: 132px; padding: .3rem 0;
}
#lcInput::placeholder { color: var(--tx3, rgba(255,255,255,.35)); }
#lcInput:disabled { cursor: not-allowed; }

.lc-mic, .lc-send {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; border: none; cursor: pointer;
  font-size: .82rem; transition: all .18s var(--ease, ease);
}
.lc-mic { background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--tx2, rgba(255,255,255,.6)); }
.lc-mic:hover:not(:disabled) { color: var(--tx1, #fff); background: var(--bg-active, rgba(255,255,255,.1)); }
.lc-mic.is-rec {
  background: rgba(244,63,94,.18); color: #fda4af;
  animation: lcMicPulse 1.3s infinite;
}
@keyframes lcMicPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,63,94,.4); }
  50% { box-shadow: 0 0 0 7px rgba(244,63,94,0); }
}
.lc-mic.is-busy { opacity: .55; cursor: progress; }
.lc-mic:disabled, .lc-send:disabled { opacity: .4; cursor: not-allowed; }

.lc-send { background: linear-gradient(135deg, var(--brand, #8A3FFC), #6D28D9); color: #fff; }
.lc-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.lc-send.is-busy { opacity: .55; cursor: progress; }

.lc-composer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 1.1rem; padding: .3rem .35rem 0;
  font-family: var(--font-mono, monospace); font-size: .62rem;
  color: var(--tx3, rgba(255,255,255,.35)); letter-spacing: .03em;
}
.lc-mic-status { color: #fda4af; }

/* ---------- attachments ---------- */
.lc-attach {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px; border: none; cursor: pointer;
  background: var(--bg-hover, rgba(255,255,255,.06));
  color: var(--tx2, rgba(255,255,255,.6));
  font-size: .8rem; transition: all .18s var(--ease, ease);
}
.lc-attach:hover:not(:disabled) { color: var(--tx1, #fff); background: var(--bg-active, rgba(255,255,255,.1)); }
.lc-attach:disabled { opacity: .4; cursor: not-allowed; }

.lc-tray { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 0 .55rem; }
.lc-tray[hidden] { display: none; }
.lc-tray-item {
  position: relative; display: flex; align-items: center; gap: .45rem;
  max-width: 230px; padding: .3rem 1.5rem .3rem .35rem;
  background: var(--bg-card, rgba(33,33,33,.6));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 10px;
}
.lc-tray-item.has-err { border-color: rgba(244,63,94,.5); }
.lc-tray-thumb {
  position: relative; width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 7px; background: rgba(255,255,255,.06);
  color: var(--tx3, rgba(255,255,255,.4)); font-size: .82rem;
}
.lc-tray-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-tray-name { font-size: .72rem; color: var(--tx2, rgba(255,255,255,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-tray-msg {
  position: absolute; left: .35rem; right: 1.5rem; bottom: 3px;
  font-size: .58rem; line-height: 1.2; color: #fda4af;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-tray-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 40%;
  background: var(--brand, #8A3FFC); border-radius: 99px;
  animation: lcBar 1.1s ease-in-out infinite;
}
@keyframes lcBar { 0% { left: -40%; } 50% { left: 30%; width: 60%; } 100% { left: 100%; } }
.lc-tray-err { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; }
.lc-tray-x {
  position: absolute; top: 50%; right: .3rem; transform: translateY(-50%);
  width: 18px; height: 18px; display: grid; place-items: center;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--tx2, rgba(255,255,255,.6));
  font-size: .6rem; transition: all .15s var(--ease, ease);
}
.lc-tray-x:hover { background: rgba(244,63,94,.25); color: #fda4af; }

.lc-log.is-drop { outline: 2px dashed rgba(138,63,252,.55); outline-offset: -8px; background: rgba(138,63,252,.06); }

.lc-msg-user .lc-msg-text { display: block; white-space: pre-wrap; word-wrap: break-word; }
.lc-atts { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .4rem; white-space: normal; }
.lc-atts:last-child { margin-bottom: 0; }
.lc-att {
  display: flex; align-items: center; gap: .5rem;
  max-width: 250px; padding: .4rem .6rem;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px; color: #fff; text-decoration: none;
  transition: background .15s var(--ease, ease);
}
a.lc-att:hover { background: rgba(255,255,255,.3); }
.lc-att > i { font-size: 1.15rem; opacity: .9; }
.lc-att-body { display: flex; flex-direction: column; min-width: 0; }
.lc-att-body b { font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; }
.lc-att-body small { font-size: .62rem; opacity: .72; }
.lc-att.is-image { padding: 4px; }
.lc-att.is-image img { display: block; width: 156px; height: 112px; object-fit: cover; border-radius: 9px; }
.lc-att.is-audio { flex-direction: column; align-items: stretch; gap: .3rem; padding: .45rem; max-width: 268px; }
.lc-att.is-audio audio { width: 100%; height: 34px; display: block; }
.lc-att-cap { font-size: .64rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- history drawer ---------- */
.lc-drawer { position: fixed; inset: 0; z-index: 999; display: flex; justify-content: flex-end; background: rgba(0,0,0,.55); }
.lc-drawer[hidden] { display: none; }
.lc-drawer-panel {
  width: min(380px, 90vw); height: 100%;
  background: var(--bg-elevated, #141414);
  border-left: 1px solid var(--border, rgba(255,255,255,.08));
  display: flex; flex-direction: column;
  animation: lcSlideIn .22s var(--ease, ease);
}
@keyframes lcSlideIn { from { transform: translateX(20px); opacity: .4; } to { transform: none; opacity: 1; } }
.lc-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.lc-drawer-head h3 { margin: 0; font-size: .98rem; color: var(--tx1, #fff); }
.lc-drawer-body { flex: 1; overflow-y: auto; padding: .6rem; }
.lc-drawer-foot { padding: .8rem; border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
.lc-drawer-foot .lc-btn { width: 100%; justify-content: center; }

.lc-conv {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem; border-radius: var(--r-md, 12px);
  cursor: pointer; transition: background .15s var(--ease, ease);
}
.lc-conv:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }
.lc-conv.is-active { background: var(--brand-light, rgba(138,63,252,.12)); }
.lc-conv-av {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; overflow: hidden; position: relative;
  background: var(--bg-card, rgba(33,33,33,.5)); font-size: 15px;
}
.lc-conv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-conv-av .lc-emoji { position: relative; font-style: normal; }
.lc-conv-body { flex: 1; min-width: 0; }
.lc-conv-body h4 { margin: 0 0 .12rem; font-size: .82rem; font-weight: 600; color: var(--tx1, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-conv-body p { margin: 0; font-size: .68rem; color: var(--tx3, rgba(255,255,255,.35)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-conv-del { flex: none; background: none; border: none; color: var(--tx3, rgba(255,255,255,.35)); cursor: pointer; font-size: .72rem; padding: .3rem; }
.lc-conv-del:hover { color: #fda4af; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .lc-layout { grid-template-columns: 1fr; }
  .lc-chat { position: relative; top: 0; height: 74vh; min-height: 460px; }
  .lc-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 640px) {
  .lc-page { padding: 1.2rem .85rem 3.5rem; }
  .lc-grid { grid-template-columns: 1fr; }
  .lc-msg { max-width: 94%; }
}