/* The help assistant's chat window. Used on the website, the Help Center and the dashboard.
   Navy Mirage by default; follows the dashboard's light theme when it is on. */
.lchat { --lc-bg: #162238; --lc-bg2: #1B2A44; --lc-text: #DCE6F2; --lc-mute: #9DB0C9; --lc-line: rgba(200, 218, 240, .16); --lc-line2: rgba(200, 218, 240, .38);
  --lc-well: rgba(10, 16, 28, .42); --lc-user: linear-gradient(100deg, #223654, #35577D); --lc-user-text: #fff; --lc-bot: rgba(200, 218, 240, .07);
  --lc-main: linear-gradient(180deg, #F3F7FC, #C3D2E4); --lc-main-text: #141E30; --lc-shadow: 18px 26px 60px rgba(7, 12, 22, .6);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.lchat[data-theme="light"] { --lc-bg: #FFFFFF; --lc-bg2: #F3F6FA; --lc-text: #141E30; --lc-mute: #55657D; --lc-line: #DDE4EE; --lc-line2: #B9C6D8;
  --lc-well: #F3F6FA; --lc-user: linear-gradient(100deg, #24395A, #35577D); --lc-bot: #F0F4F9;
  --lc-main: linear-gradient(180deg, #24395A, #1B2A44); --lc-main-text: #fff; --lc-shadow: 0 24px 60px rgba(20, 30, 48, .22); }

.lchat-launch { position: fixed; right: 22px; bottom: 22px; z-index: 99990; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px;
  border: 0; border-radius: 10px; cursor: pointer; font: 600 15px "Inter", system-ui, sans-serif; color: #141E30;
  background: linear-gradient(180deg, #F3F7FC, #C3D2E4); box-shadow: 8px 12px 28px rgba(7, 12, 22, .55), inset 0 1px 0 #fff; transition: transform .2s; }
.lchat-launch:hover { transform: translateY(-2px); }
.lchat-launch svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lchat-launch:focus-visible { outline: 2px solid #DCE6F2; outline-offset: 3px; }
.lchat-launch[hidden] { display: none; }

.lchat { position: fixed; right: 22px; bottom: 22px; z-index: 100400; width: min(400px, calc(100vw - 24px)); height: min(620px, calc(100vh - 44px)); height: min(620px, calc(100dvh - 44px));
  display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; padding: 0; color: var(--lc-text); background: var(--lc-bg);
  border: 1px solid var(--lc-line2); box-shadow: var(--lc-shadow); animation: lchatIn .22s ease both; }
.lchat[hidden] { display: none; }
@keyframes lchatIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.lchat-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--lc-line); background: var(--lc-bg2); }
.lchat-head h2 { margin: 0; font: 500 17px "Jost", "Inter", sans-serif; letter-spacing: .03em; color: var(--lc-text); text-transform: none; }
.lchat-head h2::after { content: none; }
.lchat-head p { margin: 1px 0 0; font-size: 12.5px; color: var(--lc-mute); }
.lchat-head a { color: var(--lc-mute); }
.lchat-head .lchat-x { margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--lc-mute); cursor: pointer; }
.lchat-head .lchat-x:hover { background: var(--lc-bot); color: var(--lc-text); }
.lchat-head svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

.lchat-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.lchat-msg { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.lchat-msg.bot { align-self: flex-start; background: var(--lc-bot); border: 1px solid var(--lc-line); border-bottom-left-radius: 6px; }
.lchat-msg.user { align-self: flex-end; background: var(--lc-user); color: var(--lc-user-text); border-bottom-right-radius: 6px; }
.lchat-src { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.lchat-src span { font-size: 12px; color: var(--lc-mute); padding-left: 4px; }
.lchat-src a { display: block; padding: 8px 14px; border-radius: 14px; font-size: 13.5px; text-decoration: none; color: var(--lc-text); border: 1px solid var(--lc-line); }
.lchat-src a:hover { border-color: var(--lc-line2); }
.lchat-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: var(--lc-bot); border: 1px solid var(--lc-line); }
.lchat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--lc-mute); animation: lchatDot 1.1s ease-in-out infinite; }
.lchat-typing i:nth-child(2) { animation-delay: .15s; } .lchat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lchatDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.lchat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lchat-chips button { padding: 8px 14px; border-radius: 10px; font: 500 13.5px "Inter", system-ui, sans-serif; cursor: pointer; text-align: left;
  color: var(--lc-text); background: none; border: 1px solid var(--lc-line2); }
.lchat-chips button:hover { background: var(--lc-bot); }

.lchat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 8px; border-top: 1px solid var(--lc-line); }
.lchat-form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 11px 16px; border-radius: 22px; outline: none;
  font: 14.5px/1.45 "Inter", system-ui, sans-serif; color: var(--lc-text); background: var(--lc-well); border: 1px solid var(--lc-line); }
.lchat-form textarea::placeholder { color: var(--lc-mute); }
.lchat-form textarea:focus { border-color: var(--lc-line2); }
.lchat-form button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--lc-main-text); background: var(--lc-main); }
.lchat-form button:disabled { opacity: .45; cursor: not-allowed; }
.lchat-form button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lchat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lchat-note { margin: 0; padding: 0 18px 12px; font-size: 11.5px; line-height: 1.45; color: var(--lc-mute); }

@media (max-width: 520px) {
  .lchat { right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
  .lchat-launch { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lchat, .lchat-typing i, .lchat-launch { animation: none; transition: none; } }