/* ==========================================================================
   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);
}

/* v1.6: the animated "aurora" glow, ambient sparkles and send-button burst
   were REMOVED (owner: they looked gimmicky, hurt trust, and added load).
   The theme is now a clean, professional skin — no decorative motion. */

/* --------------------------------------------------------------------------
   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%);
}

/* --------------------------------------------------------------------------
   7b. Declutter the AI Chat Pro page (v1.5).
   This stylesheet is injected ONLY on chat pages, so anything hidden here is
   hidden on the chat page and stays visible on every other page — exactly
   "gone on AI Chat Pro, kept elsewhere". Each rule is a no-op if that addon
   isn't installed.
     #sds-share-cluster = SecureDocumentShare's floating WhatsApp/Telegram/
       email share buttons (owner: clutters the chat, keep it on other pages).
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 #sds-share-cluster {
    display: none !important;
}

/* --------------------------------------------------------------------------
   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. Motion / print respect. (v1.6: the sparkle + burst effects were
   removed entirely — nothing decorative animates any more.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.lqd-chat-v2 .lqd-marquee-cell,
    body.lqd-chat-v2 .lqd-chat-send-btn,
    .dlct-fab {
        transition: none;
    }
}

@media print {
    .dlct-fab-wrap,
    .dlct-pop {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   11. (v1.6.1) Chat-rail triggers follow the theme colour. Owner 2026-07-26:
   the core buttons (collapse, New Chat) show the brand colour but the Task
   Navigator compass and the Share trigger sat plain grey. Colour them from
   the SAME token (--primary), so they track every theme and light/dark
   automatically. The Task Navigator button itself was also fixed at source
   (v1.5.2 uses hsl(var(--primary)) + a currentColor SVG); these rules are
   the belt-and-braces for older cached JS.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-chat-share-modal-trigger {
    color: hsl(var(--primary));
}
body.lqd-chat-v2 .lqd-chat-share-modal-trigger:hover {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.12);
}
body.lqd-chat-v2 #tn-open-side {
    border-color: hsl(var(--primary) / 0.35) !important;
    background: hsl(var(--primary) / 0.10) !important;
    color: hsl(var(--primary)) !important;
}
body.lqd-chat-v2 #tn-open-side:hover {
    background: hsl(var(--primary) / 0.18) !important;
}

/* --------------------------------------------------------------------------
   12. (2026-07-29) Persona-card descriptions clamp to 3 lines. Owner:
   "all the ai lawyer persona descriptions must reduce 2-3 lines max". The
   text itself was shortened at source the same day (50 of 65 rows in
   openai_chat_category, longest 692 -> 130 chars), which gives 2-3 lines at
   normal card widths. This rule is what holds the promise at NARROW widths
   (the owner's own screenshot column fits ~25 characters per line, where even
   120 characters wraps to five). Cutting the text further would have cost the
   legal and business terms the owner asked to keep, so the last two lines are
   clamped visually instead.

   Card search is unaffected: the filter reads the data-description attribute
   on the wrapping div, not the rendered text of this <p>.
   -------------------------------------------------------------------------- */
body.lqd-chat-v2 .lqd-chat-item-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    /* Reserve the three lines so cards in a row keep a common baseline even
       when one description is a single line. */
    min-height: calc(3 * 1.5em);
    line-height: 1.5;
    overflow-wrap: anywhere;
}