/* ==========================================================================
   AI Chat Pro — Signature Theme v1.3 (DogetlawyerChatTheme)
   --------------------------------------------------------------------------
   v1.3 (owner feedback round 3, 2026-07-20):
   1. Main background = pure WHITE by default.
   2. Per-user appearance controls: two floating buttons on the chat (style
      + light). Users pick background family (White / Soft / Warm), shadow
      strength, light level (min→max), or apply one of the preset looks —
      stored in their own browser (localStorage), never on the server.
   3. THE EDGE FIX: message text renders inside an inner element
      (pre/div.chat-content) that paints its own background with square
      corners inside the rounded container — both roles now forced
      transparent, and container borders that amplified the rim are gone.

   All rules scoped under body.lqd-chat-v2. Colour tokens come from the
   injected #dlct-tokens block. User-panel variables (set by chat-theme.js
   from localStorage): --dlct-user-bg (background), --dlct-shadow-mult
   (0–2 shadow multiplier).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Background — white by default; the user panel can swap it.
   Light mode only; dark mode keeps the app's charcoal.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2:not(.theme-dark) .conversation-area {
    background: var(--dlct-user-bg, #ffffff);
}

/* Optional aurora (admin toggle, default OFF). */
body.lqd-chat-v2::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    display: var(--dlct-aurora-display, none);
    pointer-events: none;
    opacity: calc(0.07 * var(--dlct-fx, 1));
    mix-blend-mode: soft-light;
    background-image:
        radial-gradient(46% 46% at 16% 18%, hsl(var(--dlct-glow-a) / 80%), transparent 68%),
        radial-gradient(40% 40% at 84% 26%, hsl(var(--dlct-glow-b) / 70%), transparent 68%),
        radial-gradient(50% 50% at 50% 90%, hsl(var(--dlct-glow-c) / 65%), transparent 68%);
    background-size: 130% 130%, 140% 140%, 150% 150%;
    background-position: 0% 0%, 100% 0%, 50% 100%;
    background-repeat: no-repeat;
    animation: dlct-aurora 38s ease-in-out infinite alternate;
}

body.lqd-chat-v2.theme-dark::after {
    mix-blend-mode: screen;
    opacity: calc(0.10 * var(--dlct-fx, 1));
}

@keyframes dlct-aurora {
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50%  { background-position: 30% 25%, 65% 30%, 30% 70%; }
    100% { background-position: 10% 45%, 90% 55%, 70% 85%; }
}

/* --------------------------------------------------------------------------
   2. Hero — homepage gradient-headline treatment.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 h2.mb-8.text-center {
    background-image: linear-gradient(
        92deg,
        hsl(var(--gradient-from)),
        hsl(var(--gradient-via)) 55%,
        hsl(var(--gradient-to))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   3. Suggestion pills — white, warm hairline, quiet lift on hover.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-marquee-cell {
    background: #ffffff;
    border: 1px solid #e7e2d9;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgb(11 18 32 / calc(4% * var(--dlct-shadow-mult, 1)));
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.lqd-chat-v2.theme-dark .lqd-marquee-cell {
    background: hsl(var(--heading-foreground) / 6%);
    border-color: hsl(var(--heading-foreground) / 14%);
}

body.lqd-chat-v2 .lqd-marquee-cell:hover {
    transform: translateY(-2px);
    border-color: hsl(var(--dlct-gold) / 55%);
    box-shadow: 0 8px 20px rgb(11 18 32 / 8%);
}

/* --------------------------------------------------------------------------
   4. Composer — white, warm hairline, soft dock shadow, brand ring while
   typing.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-chat-form-inputs-container {
    background: #ffffff !important;
    border: 1px solid #e7e2d9 !important;
    box-shadow: 0 18px 45px rgb(11 18 32 / calc(9% * var(--dlct-shadow-mult, 1)));
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.lqd-chat-v2.theme-dark .lqd-chat-form-inputs-container {
    background: hsl(var(--heading-foreground) / 7%) !important;
    border-color: hsl(var(--heading-foreground) / 14%) !important;
}

body.lqd-chat-v2 .lqd-chat-form-inputs-container:focus-within {
    border-color: hsl(var(--primary) / 55%) !important;
    box-shadow:
        0 0 0 4px hsl(var(--primary) / 9%),
        0 18px 45px rgb(11 18 32 / 11%);
}

/* --------------------------------------------------------------------------
   5. Send button — brand CTA gradient, white glyph.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-chat-send-btn {
    background-color: transparent !important;
    background-image: linear-gradient(135deg,
        hsl(var(--dlct-bubble-from)),
        hsl(var(--dlct-bubble-to))) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: 0 4px 14px hsl(var(--dlct-bubble-from) / 35%);
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}

body.lqd-chat-v2 .lqd-chat-send-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 20px hsl(var(--dlct-bubble-from) / 45%);
}

/* --------------------------------------------------------------------------
   6. Bubbles — premium single-surface look (v1.4).
   ONE painted surface per bubble (the container) with a DEFINED, colour-
   matched border, generous padding and a single soft shadow — no thin/near-
   invisible rim, no double-layer. Colour combo: warm peach user bubble +
   clean white AI card, both tied to the brand orange.
   All inner content layers are forced transparent so no square-cornered
   strip can sit inside the rounded card.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content-container {
    background: #fff4ec !important;                 /* soft peach — brand-tied */
    color: #2c1a10 !important;
    border: 1.5px solid #f6d9c6 !important;         /* defined warm edge */
    border-radius: 22px 22px 8px 22px !important;
    box-shadow: 0 8px 22px rgb(232 83 31 / calc(9% * var(--dlct-shadow-mult, 1)));
}

body.lqd-chat-v2.theme-dark .lqd-chat-user-bubble .chat-content-container {
    background: hsl(18 30% 18%) !important;
    color: hsl(24 40% 92%) !important;
    border-color: hsl(18 40% 30%) !important;
    box-shadow: 0 8px 22px rgb(0 0 0 / calc(30% * var(--dlct-shadow-mult, 1)));
}

body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content-container {
    background: #ffffff !important;
    color: #1b2330 !important;
    border: 1.5px solid #ececf1 !important;         /* defined neutral edge */
    border-radius: 22px 22px 22px 8px !important;
    box-shadow: 0 10px 26px rgb(11 18 32 / calc(7% * var(--dlct-shadow-mult, 1)));
}

body.lqd-chat-v2.theme-dark .lqd-chat-ai-bubble .chat-content-container {
    background: hsl(220 14% 16%) !important;
    color: hsl(210 20% 92%) !important;
    border-color: hsl(220 12% 26%) !important;
    box-shadow: 0 10px 26px rgb(0 0 0 / calc(28% * var(--dlct-shadow-mult, 1)));
}

/* Padding lives on the CONTAINER, not the inner text element.
   Why: AI replies are markdown that the chat's own JS re-renders into
   nested <p>/<ul>/<div> at runtime, so padding on the inner .chat-content
   got shifted/lost (the "reply portion still same" bug — the wide padding
   showed on user messages, which are plain text, but not on AI replies).
   Padding the container guarantees the WHOLE reply is inset 28px no matter
   how the markdown nests. Trimmed on phones. */
body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content-container,
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content-container {
    padding: 18px 28px !important;
}

@media (max-width: 767px) {
    body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content-container,
    body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content-container {
        padding: 14px 18px !important;
    }
}

/* Inner text element (and any wrapper the renderer inserts): NO padding of
   its own (avoids double-inset), and NO background/border/shadow/margin so
   no inner box or narrow rim can appear inside the rounded bubble. Code
   blocks and entity chips are deeper/have their own classes and keep theirs. */
body.lqd-chat-v2 .chat-content-container > .chat-content,
body.lqd-chat-v2 .chat-content-container > pre,
body.lqd-chat-v2 .chat-content-container > .chat-content > pre,
body.lqd-chat-v2 .chat-content-container > .chat-content > div {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* First paragraph of a reply must hug the top (no prose top-margin pushing
   it out of the padded area). */
body.lqd-chat-v2 .chat-content-container > .chat-content > :first-child,
body.lqd-chat-v2 .chat-content-container > .chat-content > pre > :first-child {
    margin-top: 0 !important;
}

body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content [class*='bg-background'],
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content [class*='bg-background'],
body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content [class*='bg-surface'],
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content [class*='bg-surface'] {
    background-color: transparent !important;
}

/* Text colour inside bubbles follows the container. */
body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content,
body.lqd-chat-v2 .lqd-chat-user-bubble .chat-content a,
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content,
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content p,
body.lqd-chat-v2 .lqd-chat-ai-bubble .chat-content li {
    color: inherit;
}

/* --------------------------------------------------------------------------
   6b. Typography — deliberately HANDS OFF.
   AI Chat Pro's admin "Conversations Typography" customizer injects
   `.lqd-chat-v2 .chat-content{font-size;line-height}` (+ h1–h6) into the
   head; this theme sets NO font properties on .chat-content, so those
   settings always win. The ONLY exception is the per-user "Text size"
   slider: chat-theme.js measures the admin's computed base size and, only
   when the visitor moves the slider off 100%, engages this class-gated
   override with a value calculated FROM the admin base (admin px × user %).
   Headings stay 100% admin-controlled.

   v1.4: the override must target the AI reply's TEXT CHILDREN (p/li/etc.),
   not just .chat-content — AI answers render markdown into <p>/<li> that
   carry their own `prose` sizes, so a rule on the .chat-content parent alone
   left them unchanged (the "font slider does nothing on AI replies" bug).
   User messages are raw text directly in .chat-content, so they were fine;
   this now covers both. Headings (h1–h6) are deliberately excluded so the
   admin's heading scale is preserved. Entity chips (spans) are untouched.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2.dlct-fontscale .chat-content,
body.lqd-chat-v2.dlct-fontscale .chat-content p,
body.lqd-chat-v2.dlct-fontscale .chat-content li,
body.lqd-chat-v2.dlct-fontscale .chat-content blockquote,
body.lqd-chat-v2.dlct-fontscale .chat-content td,
body.lqd-chat-v2.dlct-fontscale .chat-content ul,
body.lqd-chat-v2.dlct-fontscale .chat-content ol {
    font-size: var(--dlct-font-px) !important;
}

/* Task Navigator addon ("What do you need help with today?" panel): its
   text uses fixed px inline styles, so the same user Text-size setting
   scales the whole panel proportionally via zoom. No-op when the Task
   Navigator addon is absent or the slider sits at 100%. */
body.lqd-chat-v2.dlct-fontscale .tnav-panel {
    zoom: var(--dlct-font-scale, 1);
}

/* Avatar — quiet ring. */
body.lqd-chat-v2 .lqd-chat-avatar {
    box-shadow:
        0 0 0 2px hsl(var(--background)),
        0 0 0 3px rgb(11 18 32 / 12%);
}

/* --------------------------------------------------------------------------
   7. Entity-highlight buttons — brand-tint chips.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .chat-content .lqd-entity-highlight {
    display: inline;
    padding: 0.08em 0.42em;
    border-radius: 999px;
    background: hsl(var(--primary) / 7%);
    border: 1px solid hsl(var(--primary) / 22%);
    color: hsl(var(--primary));
    text-decoration: none;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.lqd-chat-v2 .chat-content .lqd-entity-highlight:hover {
    background: hsl(var(--primary) / 13%);
    border-color: hsl(var(--primary) / 45%);
}

body.lqd-chat-v2 .chat-content .lqd-entity-highlight:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 1px;
}

body.lqd-chat-v2.theme-dark .chat-content .lqd-entity-highlight {
    background: hsl(var(--primary) / 14%);
    border-color: hsl(var(--primary) / 35%);
}

/* --------------------------------------------------------------------------
   8. Details — selection ink, scrollbar, focus rings.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 ::selection {
    background: hsl(var(--primary) / 15%);
}

body.lqd-chat-v2 .conversation-area::-webkit-scrollbar {
    width: 6px;
}

body.lqd-chat-v2 .conversation-area::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(11 18 32 / 18%);
}

body.lqd-chat-v2 .lqd-chat-form-inputs-container :focus-visible,
body.lqd-chat-v2 .lqd-marquee-cell:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. Per-user appearance controls (built by chat-theme.js).
   A settings (gear) icon in the LEFT icon rail (desktop) — styled to match
   the rail's own round outline buttons (Show Recent / New Chat, size-11 =
   44px) — opening ONE panel. On small screens (where the rail is hidden by
   the theme) a single floating button provides the same panel.
   -------------------------------------------------------------------------- */
.dlct-rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid hsl(var(--button-border, 200 12% 95%));
    background: transparent;
    color: hsl(var(--heading-foreground, 213 13% 14%));
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dlct-rail-btn:hover {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.dlct-rail-btn:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* Panel anchored beside the rail icon (JS sets left/top). */
.dlct-pop--anchored {
    right: auto;
    bottom: auto;
}

.dlct-fab-wrap {
    position: fixed;
    right: 18px;
    bottom: 130px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Desktop with the rail icon present: hide the floating fallback. */
@media (min-width: 1024px) {
    body.dlct-has-rail .dlct-fab-wrap {
        display: none;
    }
}

.dlct-fab {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgb(11 18 32 / 10%);
    background: #ffffff;
    color: #10203a;
    font-size: 17px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(11 18 32 / 10%);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.dlct-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgb(11 18 32 / 15%);
}

body.lqd-chat-v2.theme-dark .dlct-fab {
    background: #22252b;
    color: #fff;
    border-color: rgb(255 255 255 / 12%);
}

.dlct-pop {
    position: fixed;
    right: 68px;
    bottom: 130px;
    z-index: 31;
    width: 244px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgb(255 255 255 / 60%);
    /* frosted glass */
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: #10203a;
    box-shadow:
        0 24px 60px rgb(11 18 32 / 22%),
        0 2px 0 rgb(255 255 255 / 70%) inset;
    font-size: 12.5px;
    animation: dlct-pop-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dlct-pop-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

body.lqd-chat-v2.theme-dark .dlct-pop {
    background: rgba(28, 31, 38, 0.82);
    color: #fff;
    border-color: rgb(255 255 255 / 12%);
    box-shadow:
        0 24px 60px rgb(0 0 0 / 45%),
        0 1px 0 rgb(255 255 255 / 8%) inset;
}

.dlct-pop h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    margin: 10px 0 6px;
}

.dlct-pop h5:first-child { margin-top: 0; }

.dlct-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.dlct-opt {
    flex: 1;
    padding: 6px 4px;
    border-radius: 8px;
    border: 1px solid rgb(11 18 32 / 12%);
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}

.dlct-opt.is-active {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 8%);
    color: hsl(var(--primary));
    font-weight: 600;
}

.dlct-swatch {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.dlct-swatch.is-active {
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 2px #fff inset;
}

.dlct-pop input[type='range'] {
    width: 100%;
    accent-color: hsl(var(--primary));
}

.dlct-reset {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    color: hsl(var(--primary));
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .dlct-fab-wrap { bottom: 150px; right: 12px; }
    .dlct-pop { right: 60px; bottom: 150px; }
}

/* --------------------------------------------------------------------------
   10. Ambient effects (admin toggle, default OFF) + motion/print respect.
   -------------------------------------------------------------------------- */
.dlct-sparkle {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    color: hsl(var(--dlct-gold, 16 81% 48%));
    text-shadow: 0 0 8px hsl(var(--dlct-glow-a, 16 80% 62%) / 45%);
    animation: dlct-float var(--dlct-dur, 7s) linear forwards;
    opacity: 0;
}

@keyframes dlct-float {
    0%   { opacity: 0;    transform: translateY(0)     scale(0.6) rotate(0deg); }
    12%  { opacity: 0.55; }
    80%  { opacity: 0.35; }
    100% { opacity: 0;    transform: translateY(-38vh) scale(1.05) rotate(50deg); }
}

.dlct-burst {
    position: fixed;
    z-index: 20;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    pointer-events: none;
    background: hsl(var(--dlct-gold, 16 81% 48%));
    animation: dlct-burst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dlct-burst {
    0%   { opacity: 0.9; transform: translate(0, 0)                       scale(1); }
    100% { opacity: 0;   transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
    body.lqd-chat-v2::after,
    .dlct-sparkle,
    .dlct-burst {
        animation: none !important;
    }

    body.lqd-chat-v2 .lqd-marquee-cell,
    body.lqd-chat-v2 .lqd-chat-send-btn,
    .dlct-fab {
        transition: none;
    }
}

@media print {
    body.lqd-chat-v2::after,
    .dlct-sparkle,
    .dlct-burst,
    .dlct-fab-wrap,
    .dlct-pop {
        display: none !important;
    }
}