/* ============================================
   Lean Hospitals AI Chat -- v8.2
   ============================================
   Color system: Six CSS custom properties drive variant theming.

   Light mode:
   --lh-primary : main UI chrome (buttons, links, toggles, borders)
   --lh-hover   : darker shade for hover/active states
   --lh-accent  : secondary highlight (coach border, switch-facts btn)

   Dark mode:
   --lh-dark-primary : main UI chrome in dark mode
   --lh-dark-hover   : hover/active states in dark mode
   --lh-dark-accent  : secondary highlight in dark mode

   Values are injected per-variant via wp_add_inline_style in PHP.
   Dark mode variables are set inside @media (prefers-color-scheme: dark).

   Derived colors (tinted backgrounds, lighter shades, shadow tints)
   now use color-mix(in srgb, var(--lh-primary) XX%, transparent)
   so they follow admin color settings automatically.
   ============================================ */

.lh-chat {
    max-width: 800px;
    margin: 40px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1c1c1e;
    border-radius: 12px;
    padding: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-top: 3px solid var(--lh-primary);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Message area */
.lh-messages {
    height: 563px;
    min-height: 200px;
    max-height: 80vh;
    overflow-y: auto;
    resize: vertical;
    padding: 20px;
    background: linear-gradient(180deg, #eef7f7 0%, #f2f2f7 60px);
    border-radius: 9px 9px 0 0;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* ---- Fade-in animation ---- */
@keyframes lh-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lh-fade-in {
    animation: lh-fade-in 0.3s ease-out forwards;
}

/* ---- Bubble styles ---- */
.lh-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 18px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}
.lh-bubble.lh-user {
    align-self: flex-end;
    background: var(--lh-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.lh-bubble.lh-assistant {
    align-self: flex-start;
    background: #fff;
    color: #1c1c1e;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 85%;
}

/* ---- Book mode cover icon ---- */
.lh-bubble.lh-assistant[data-mode="book"],
.lh-bubble.lh-typing[data-mode="book"],
.lh-bubble.lh-assistant[data-mode="general"],
.lh-bubble.lh-typing[data-mode="general"] {
    padding-left: 38px;
    position: relative;
}
.lh-bubble.lh-assistant[data-mode="book"]::before,
.lh-bubble.lh-typing[data-mode="book"]::before,
.lh-bubble.lh-assistant[data-mode="general"]::before,
.lh-bubble.lh-typing[data-mode="general"]::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 16px;
    height: 24px;
    background: url("https://www.leanhospitalsbook.com/wp-content/uploads/2026/03/Lean-Hospitals-3rd-Edition-Cover-icon.jpg") center/contain no-repeat;
}
.lh-bubble.lh-typing[data-mode="book"]::before,
.lh-bubble.lh-typing[data-mode="general"]::before {
    animation: lh-pulse 1.2s ease-in-out infinite;
}
/* Plus badge for Book Plus (general) mode */
.lh-bubble.lh-assistant[data-mode="general"]::after,
.lh-bubble.lh-typing[data-mode="general"]::after {
    content: '+';
    position: absolute;
    left: 21px;
    top: 7px;
    width: 12px;
    height: 12px;
    background: #e08800;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    border-radius: 50%;
}
@keyframes lh-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.lh-bubble.lh-typing {
    align-self: flex-start;
    background: #f7f7f8;
    color: #8e8e93;
    font-style: italic;
    border-bottom-left-radius: 4px;
}
.lh-bubble.lh-typing::after {
    content: '';
    animation: lh-dots 1.5s steps(3, end) infinite;
}
@keyframes lh-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* ---- Streaming cursor ---- */
@keyframes lh-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
.lh-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--lh-primary);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: lh-blink 0.8s ease-in-out infinite;
}

.lh-bubble.lh-error {
    align-self: flex-start;
    background: #ffe0e0;
    color: #c00;
    border-bottom-left-radius: 4px;
}

.lh-phi-nudge {
    align-self: center !important;
    background: #fff8e1 !important;
    color: #7a6100 !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    border: 1px solid #ffe082 !important;
    max-width: 90% !important;
    text-align: center;
    margin: 4px auto !important;
}

/* ---- Markdown inside bubbles ---- */
.lh-bubble.lh-assistant { line-height: 1.7; }
.lh-bubble.lh-assistant p { margin: 4px 0; }
.lh-bubble.lh-assistant p:last-child { margin-bottom: 0; }
.lh-bubble.lh-assistant h1,
.lh-bubble.lh-assistant h2,
.lh-bubble.lh-assistant h3,
.lh-bubble.lh-assistant h4 { margin: 12px 0 2px; line-height: 1.3; }
.lh-bubble.lh-assistant h1 { font-size: 1.3em; }
.lh-bubble.lh-assistant h2 { font-size: 1.15em; color: var(--lh-primary); }
.lh-bubble.lh-assistant h3 { font-size: 1.05em; color: var(--lh-primary); }
.lh-bubble.lh-assistant h4 { font-size: 1em; color: var(--lh-primary); }
.lh-bubble.lh-assistant h2:first-child,
.lh-bubble.lh-assistant h3:first-child,
.lh-bubble.lh-assistant h4:first-child { margin-top: 0; }
.lh-bubble.lh-assistant ul,
.lh-bubble.lh-assistant ol { margin: 6px 0; padding-left: 20px; list-style-type: decimal; }
.lh-bubble.lh-assistant ul { list-style-type: disc; }
.lh-bubble.lh-assistant blockquote {
    margin: 6px 0; padding: 4px 12px;
    border-left: 3px solid #d1d5db; color: #555;
}
.lh-bubble.lh-assistant strong { font-weight: 600; }

/* ---- Coach closing question callout ---- */
.lh-bubble.lh-assistant .lh-coach-closing-wrap {
    border-left: 2px solid color-mix(in srgb, var(--lh-primary) 65%, transparent) !important;
    padding-left: 10px !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
}
.lh-bubble.lh-assistant .lh-coach-closing-wrap h3,
.lh-bubble.lh-assistant .lh-coach-closing-wrap h4 {
    color: var(--lh-primary) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
    padding-bottom: 0 !important;
}
.lh-bubble.lh-assistant .lh-coach-closing-wrap p {
    margin-top: 2px !important;
}
/* Fallback: per-element rules if wrapper was not applied */
.lh-bubble.lh-assistant h3.lh-coach-closing,
.lh-bubble.lh-assistant h4.lh-coach-closing {
    color: var(--lh-primary) !important;
    border-left: 2px solid color-mix(in srgb, var(--lh-primary) 65%, transparent) !important;
    padding-left: 10px !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.lh-bubble.lh-assistant p.lh-coach-closing {
    border-left: 2px solid color-mix(in srgb, var(--lh-primary) 65%, transparent) !important;
    padding-left: 10px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tables in assistant bubbles */
.lh-md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.4;
}
.lh-md-table th,
.lh-md-table td {
    border: 1px solid rgba(0,0,0,0.12);
    padding: 6px 10px;
    text-align: left;
}
.lh-md-table th {
    background: rgba(0,0,0,0.05);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lh-md-table tr:nth-child(even) td {
    background: rgba(0,0,0,0.02);
}

/* ---- Source tag (Book mode) ---- */
.lh-source-tag {
    font-size: 11px;
    color: #888;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-style: italic;
}
.lh-book-badge {
    font-style: normal;
    font-weight: 600;
    color: var(--lh-primary);
    margin-right: 4px;
}

/* ---- Mode indicators on assistant bubbles ---- */
.lh-bubble.lh-assistant[data-mode="book"] {
    border-left: 3px solid var(--lh-primary);
}
/* ---- Coach mode warm accent (overrides mode border) ---- */
.lh-bubble.lh-assistant[data-style="coach"],
.lh-bubble.lh-typing[data-style="coach"] {
    border-left: 3px solid var(--lh-accent) !important;
}
/* ---- Lists in assistant bubbles ---- */
.lh-bubble.lh-assistant ol,
.lh-bubble.lh-assistant ul {
    margin: 6px 0;
    padding-left: 24px;
}
.lh-bubble.lh-assistant ol {
    list-style-type: decimal !important;
    counter-reset: lh-ol-counter !important;
}
.lh-bubble.lh-assistant ul {
    list-style-type: disc !important;
}
.lh-bubble.lh-assistant li {
    margin-bottom: 4px;
    display: list-item !important;
    list-style: inherit !important;
}
.lh-bubble.lh-assistant ol > li {
    list-style-type: decimal !important;
    counter-increment: lh-ol-counter !important;
}
.lh-bubble.lh-assistant ol > li::before {
    content: none !important;
}
.lh-bubble.lh-assistant ol > li::marker {
    content: counter(lh-ol-counter) ". " !important;
    font-weight: 600;
}
.lh-bubble.lh-assistant ul > li::before {
    content: none !important;
}
/* Nested lists */
.lh-bubble.lh-assistant ol ul,
.lh-bubble.lh-assistant ul ul,
.lh-bubble.lh-assistant ol ol,
.lh-bubble.lh-assistant ul ol {
    margin: 2px 0 2px !important;
    padding-left: 20px !important;
}
/* Remove extra spacing when a list item contains a nested list */
.lh-bubble.lh-assistant li > ul,
.lh-bubble.lh-assistant li > ol {
    margin-top: 2px;
    margin-bottom: 0;
}
.lh-bubble.lh-assistant li > p {
    margin: 0;
    line-height: 1.5;
}
.lh-bubble.lh-assistant li > p + ul,
.lh-bubble.lh-assistant li > p + ol {
    margin-top: 2px;
}
/* Tighten nested list items */
.lh-bubble.lh-assistant ul ul > li,
.lh-bubble.lh-assistant ol ul > li,
.lh-bubble.lh-assistant ul ol > li,
.lh-bubble.lh-assistant ol ol > li {
    margin-bottom: 2px;
}

/* ---- Stopped tag ---- */
.lh-stopped-tag {
    font-size: 11px;
    color: #e08800;
    margin-top: 6px;
    font-style: italic;
}

/* ---- Bubble actions (copy + feedback) ---- */
.lh-bubble-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.lh-bubble-actions button {
    background: none;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    color: #666;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.lh-bubble-actions button:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.2);
}
.lh-bubble-actions button.lh-voted {
    border-color: var(--lh-primary);
    color: var(--lh-primary);
    background: color-mix(in srgb, var(--lh-primary) 6%, transparent);
}

/* ---- Thumbs-down feedback dropdown ---- */
.lh-feedback-dropdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
    align-items: center;
}
.lh-feedback-prompt {
    font-size: 11px;
    color: #888;
    margin-right: 4px;
}
.lh-feedback-reason {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
    color: #555;
    transition: background 0.15s;
}
.lh-feedback-reason:hover {
    background: #e8e8e8;
    border-color: #ccc;
}
.lh-feedback-thanks {
    font-size: 11px;
    color: var(--lh-primary);
    font-style: italic;
}
.lh-feedback-positive .lh-feedback-reason:hover {
    background: #e8f5e9;
    border-color: #a5d6a7;
}
.lh-feedback-other-wrap {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}
.lh-feedback-other-input {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    min-width: 0;
}
.lh-feedback-other-input:focus {
    border-color: var(--lh-primary);
}
.lh-feedback-other-send {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.lh-feedback-other-send:hover {
    background: #1f6060;
}

/* ---- Suggested follow-up chips ---- */
.lh-follow-ups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    align-self: flex-start;
}
.lh-follow-chip {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid color-mix(in srgb, var(--lh-primary) 25%, transparent);
    border-radius: 16px;
    padding: 7px 16px 7px 14px;
    font-size: 13px;
    color: var(--lh-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    text-align: left;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--lh-primary) 6%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.lh-follow-chip::after {
    content: ' \2192';
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
.lh-follow-chip:hover {
    background: var(--lh-primary);
    color: #fff;
    border-color: var(--lh-primary);
    transform: translateY(-1px);
    box-shadow:
        0 3px 8px color-mix(in srgb, var(--lh-primary) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.lh-follow-chip:hover::after {
    opacity: 1;
}

/* ---- Personalized chip dismiss ---- */
.lh-pchip-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.lh-pchip {
    padding-right: 28px !important;
}
.lh-pchip-dismiss {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--lh-primary);
    opacity: 0.35;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.lh-pchip-dismiss:hover {
    opacity: 0.8;
    background: color-mix(in srgb, var(--lh-primary) 10%, transparent);
}
.lh-pchip-wrap:hover .lh-pchip-dismiss {
    color: #fff;
    opacity: 0.6;
}
.lh-pchip-wrap:hover .lh-pchip-dismiss:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* Inline name prompt */
.lh-name-prompt {
    padding: 10px 16px;
    margin: 4px 0;
    font-size: 13px;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.lh-name-prompt-text {
    font-size: 13px;
}
.lh-name-prompt-btn {
    background: #fff;
    border: 1px solid var(--lh-primary);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--lh-primary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.lh-name-prompt-btn:hover {
    background: var(--lh-primary);
    color: #fff;
}
.lh-name-prompt-skip {
    border-color: #ccc;
    color: #999;
}
.lh-name-prompt-skip:hover {
    background: #eee;
    color: #666;
}
.lh-name-prompt-input {
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    width: 140px;
    font-family: inherit;
}
.lh-name-prompt-input:focus {
    border-color: var(--lh-primary);
}

/* ---- Context usage bar ---- */
/* ---- Conversation tip nudge ---- */
.lh-system-tip {
    text-align: left;
    font-size: 13px;
    color: #6b5200;
    background: #fff8e6;
    border-left: 3px solid #e8a800;
    padding: 10px 14px;
    margin: 12px 8px;
    border-radius: 6px;
    line-height: 1.5;
}

.lh-reflection-tip {
    text-align: left;
    font-size: 13px;
    color: #1a5c54;
    background: #eef7f5;
    border-left: 3px solid var(--lh-primary);
    padding: 10px 14px;
    margin: 12px 8px;
    border-radius: 6px;
    line-height: 1.5;
    font-style: italic;
}

/* Mode-switch divider -- visible in chat, print, and copy */
.lh-mode-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #888;
    margin: 8px 0;
    line-height: 1;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.lh-mode-divider::before,
.lh-mode-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

/* ---- Welcome back prompt ---- */
.lh-welcome-back p {
    margin: 0 0 8px;
    font-size: 14px;
}
.lh-wb-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 8px;
    transition: background 0.15s;
}
.lh-wb-continue {
    background: var(--lh-primary);
    color: #fff;
}
.lh-wb-continue:hover { background: #236868; }
.lh-wb-fresh {
    background: #e8e8e8;
    color: #555;
}
.lh-wb-fresh:hover { background: #ddd; }

/* ---- Role selector ---- */
.lh-role-selector p {
    margin: 0 0 10px;
    font-size: 14px;
}
.lh-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lh-role-chip {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid color-mix(in srgb, var(--lh-primary) 30%, transparent);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--lh-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0.5px 2px rgba(0, 0, 0, 0.04);
}
.lh-role-chip:hover {
    background: var(--lh-primary);
    color: #fff;
    border-color: var(--lh-primary);
    box-shadow:
        0 2px 6px color-mix(in srgb, var(--lh-primary) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ---- Controls row ---- */
.lh-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 4px;
    padding: 0 12px;
    gap: 8px;
}
.lh-toggles-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-shrink: 0;
}
.lh-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
}

/* Segmented control with sliding highlight */
.lh-seg {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--lh-primary) 30%, transparent);
    border-radius: 10px;
    position: relative;
    background: rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        0 0.5px 0 rgba(255, 255, 255, 0.7);
}
.lh-seg-style {
    border-color: rgba(192, 120, 0, 0.3);
}
.lh-seg input {
    display: none;
}
.lh-seg label {
    padding: 4px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    user-select: none;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    color: #aaa;
    background: transparent;
    transition: color 0.25s ease;
}
.lh-seg input:checked + label {
    color: #fff;
}
/* Sliding highlight pill */
.lh-seg-highlight {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 8px;
    transition: left 0.25s ease, width 0.25s ease;
    z-index: 0;
}
.lh-seg > .lh-seg-highlight {
    background: linear-gradient(180deg, color-mix(in srgb, var(--lh-primary) 80%, white) 0%, var(--lh-primary) 100%);
    box-shadow:
        0 1px 3px color-mix(in srgb, var(--lh-primary) 25%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.lh-seg-style > .lh-seg-highlight {
    background: linear-gradient(180deg, #d48a00 0%, #c07800 100%);
    box-shadow:
        0 1px 3px rgba(192, 120, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* Short labels for mobile -- hidden on desktop */
.lh-label-short { display: none; }

/* Pulse animation on mode/style switch */
@keyframes lh-seg-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lh-primary) 60%, transparent); }
    20%  { transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--lh-primary) 15%, transparent); }
    40%  { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lh-primary) 0%, transparent); }
    60%  { transform: scale(1.06); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lh-primary) 10%, transparent); }
    80%  { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lh-primary) 0%, transparent); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lh-primary) 0%, transparent); }
}
@keyframes lh-seg-pulse-style {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 154, 0, 0.6); }
    20%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(212, 154, 0, 0.15); }
    40%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 154, 0, 0); }
    60%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(212, 154, 0, 0.1); }
    80%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 154, 0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 154, 0, 0); }
}
.lh-seg-highlight.lh-seg-pulse {
    animation: lh-seg-pulse 0.7s ease-out !important;
}
.lh-seg-style .lh-seg-highlight.lh-seg-pulse {
    animation: lh-seg-pulse-style 0.7s ease-out !important;
}
/* Tap tooltip for mobile (title attrs don't work on touch) */
.lh-tap-tip {
    background: #333;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    z-index: 100000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.lh-tap-tip.lh-tip-visible {
    opacity: 1;
}
.lh-tap-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}
.lh-tools-wrap {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}
.lh-tools-toggle {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #777;
    letter-spacing: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0.5px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, color 0.15s ease;
}
.lh-tools-toggle:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    color: var(--lh-primary);
}
.lh-tools-toggle.lh-tools-open {
    background: var(--lh-primary) !important;
    color: #fff;
    border-color: var(--lh-primary) !important;
}
.lh-tools-nudge {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #c07800;
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 200;
    animation: lhNudgeFadeIn 0.3s ease;
}
.lh-tools-nudge-arrow {
    position: absolute;
    bottom: -5px;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #c07800;
}
.lh-tools-nudge-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}
@keyframes lhNudgeFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.lh-controls-right {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: 6px;
    display: flex;
    gap: 5px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 100;
    flex-wrap: nowrap;
}
.lh-ctrl-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
    padding: 5px 16px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    text-transform: none;
    letter-spacing: normal;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0.5px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.lh-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 4px rgba(0, 0, 0, 0.08);
}
.lh-size-controls {
    display: none;
}
@media (max-width: 600px) {
    .lh-size-controls {
        display: inline-flex;
        gap: 4px;
    }
}

/* ---- Form row with textarea ---- */
.lh-input-wrap {
    margin-bottom: 4px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lh-input-wrap.lh-input-focused {
    border-color: color-mix(in srgb, var(--lh-primary) 40%, transparent);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 2px color-mix(in srgb, var(--lh-primary) 12%, transparent);
}
.lh-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.lh-input {
    flex: 1;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px;
    outline: none;
    resize: none;
    overflow-y: hidden;
    min-height: 62px;
    max-height: 120px;
    line-height: 1.4;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
        0 0.5px 0 rgba(255, 255, 255, 0.8) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lh-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}
.lh-input:focus {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: color-mix(in srgb, var(--lh-primary) 45%, transparent) !important;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 0 0 3px color-mix(in srgb, var(--lh-primary) 12%, transparent),
        0 0 12px color-mix(in srgb, var(--lh-primary) 8%, transparent) !important;
}
.lh-form button[type="submit"] {
    background: var(--lh-primary) !important;
    color: #fff !important;
    border: none !important;
    width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--lh-primary) 30%, transparent) !important;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lh-form button[type="submit"]:hover {
    background: var(--lh-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--lh-primary) 35%, transparent) !important;
}
.lh-form button[type="submit"]:active {
    transform: scale(0.92);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--lh-primary) 25%, transparent) !important;
}
.lh-form button[type="submit"]:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* Ripple ring on input bar when message sent */
.lh-input-wrap.lh-send-ripple {
    animation: lh-ripple-ring 0.45s ease-out;
    transition: none !important;
}
@keyframes lh-ripple-ring {
    0%   { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 0 color-mix(in srgb, var(--lh-primary) 35%, transparent); }
    100% { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 8px color-mix(in srgb, var(--lh-primary) 0%, transparent); }
}
@keyframes lh-ripple-ring-dark {
    0%   { box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 0 color-mix(in srgb, var(--lh-dark-primary) 40%, transparent); }
    100% { box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 8px color-mix(in srgb, var(--lh-dark-primary) 0%, transparent); }
}

/* ---- File upload ---- */
.lh-upload-btn {
    background: none !important;
    border: none !important;
    font-size: 20px;
    cursor: pointer;
    padding: 8px 2px 8px 6px;
    color: #888;
    transition: color 0.15s ease, transform 0.1s ease;
    line-height: 1;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: normal;
    outline: none;
}
.lh-upload-btn:hover {
    color: var(--lh-primary);
}
.lh-upload-btn:focus {
    color: var(--lh-primary);
    outline: none;
}
.lh-upload-btn:active {
    color: #236868;
    transform: scale(0.92);
}
.lh-file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 4px;
    background: #f0f9f9;
    border: 1px solid var(--lh-primary);
    border-radius: 10px;
    font-size: 13px;
    color: var(--lh-primary);
}
.lh-file-preview-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.lh-file-preview-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lh-file-preview-remove {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
}
.lh-file-preview-remove:hover {
    color: #ff3b30;
}
.lh-file-attachment {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}

/* Stop button - matches send button shape */
.lh-stop-btn {
    background: #8e8e93 !important;
    color: #fff !important;
    border: none !important;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    transition: background 0.15s ease, transform 0.1s ease;
}
.lh-stop-btn:hover {
    background: #6e6e73 !important;
}
.lh-stop-btn:active {
    transform: scale(0.95);
}

/* ---- Character counter ---- */
.lh-char-count {
    font-size: 11px;
    color: #999;
    text-align: right;
    padding: 2px 14px 0;
    transition: opacity 0.2s ease;
}
.lh-char-count.lh-char-hidden {
    opacity: 0;
    height: 0;
    padding: 0 14px;
    overflow: hidden;
}
.lh-char-count.lh-char-warn {
    color: #e08800;
}
.lh-char-count.lh-char-danger {
    color: #ff3b30;
    font-weight: 600;
}
.lh-input-hint {
    display: none;
    font-size: 11px;
    color: #b0b0b0;
    text-align: center;
    padding: 2px 0 0;
}
/* ---- Send button: arrow icon on all sizes ---- */

/* ---- Notes panel ---- */
/* Locked state in demo mode before email entry */
.lh-demo-locked .lh-explore-toggle {
    opacity: 0.5;
    cursor: pointer;
}
.lh-demo-locked .lh-explore-toggle:hover {
    opacity: 0.7;
}

/* ---- Explore Topics & Prompt Packs ---- */
.lh-explore-section {
    padding: 8px 16px 0;
    text-align: center;
}
.lh-explore-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--lh-primary);
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: normal;
}
.lh-explore-toggle:hover { color: #1f6060; }
.lh-explore-toggle:focus,
.lh-explore-toggle:active {
    outline: none !important;
    background: none !important;
    color: var(--lh-primary) !important;
    box-shadow: none !important;
}
.lh-explore-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
.lh-explore-panel {
    margin-top: 8px;
    padding-bottom: 8px;
}
.lh-explore-heading {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.lh-topic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lh-topic-chip {
    background: #f5fafa;
    border: 1px solid #c8e0e0;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--lh-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.lh-topic-chip:hover {
    background: var(--lh-primary);
    border-color: var(--lh-primary);
    color: #fff;
}
.lh-pack-search-wrap {
    margin-bottom: 8px;
}
.lh-pack-search {
    width: 100%;
    max-width: 300px;
    padding: 6px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.lh-pack-search:focus {
    border-color: var(--lh-primary);
}
.lh-pack-more {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #888;
    padding: 6px 0;
    font-style: italic;
}
.lh-pack-nav {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 2px;
}
.lh-pack-nav-btn {
    background: none;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--lh-primary);
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}
.lh-pack-nav-btn:hover:not(.lh-pack-nav-disabled) {
    background: #f0f7f7;
    border-color: var(--lh-primary);
}
.lh-pack-nav-disabled {
    color: #ccc;
    border-color: #e8e8e8;
    cursor: default;
}
.lh-pack-nav-label {
    font-size: 12px;
    color: #888;
}
.lh-pack-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.lh-pack-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}
.lh-pack-card:hover {
    border-color: var(--lh-primary);
    box-shadow: 0 2px 8px rgba(42,125,125,0.12);
}
.lh-pack-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
.lh-pack-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.lh-pack-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.lh-pack-chip {
    border-color: var(--lh-primary) !important;
    background: #f5fafa !important;
    text-align: left;
    white-space: normal;
    line-height: 1.4;
}
.lh-pack-skip {
    border-color: #ccc !important;
    color: #999 !important;
    font-size: 12px !important;
}
.lh-pack-skip:hover {
    color: #666 !important;
    border-color: #999 !important;
}
.lh-role-bar {
    text-align: center;
    padding: 4px 16px;
    font-size: 12px;
    display: none;
}
.lh-current-role {
    color: var(--lh-primary);
    font-weight: 600;
    font-size: 13px;
}
.lh-change-role-btn {
    background: #f0f7f7;
    border: 1.5px solid var(--lh-primary);
    color: var(--lh-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 3px 10px;
    margin-left: 8px;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: normal;
    transition: background 0.15s, color 0.15s;
}
.lh-change-role-btn:hover {
    background: var(--lh-primary);
    color: #fff;
}

/* Founding member visual treatment */
.lh-founder-wrap {
    max-width: 800px;
    margin: 40px auto 0;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}
.lh-founder-wrap .lh-chat {
    margin-top: 0;
    border-radius: 0 12px 12px 12px;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08);
}
.lh-founder-wrap .lh-messages {
    border-radius: 0 9px 0 0;
}
.lh-founder-border {
    border-top: 5px solid #c89700 !important;
}
.lh-founder-wrap:has(.lh-founder-border) {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08);
}
.lh-founder-border .lh-messages {
    border-left: 2px solid rgba(200, 151, 0, 0.2);
    border-right: 2px solid rgba(200, 151, 0, 0.2);
}
/* Founder banner tab above chat */
.lh-banner-row {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 0;
    padding: 8px 12px 0;
}
.lh-brand-banner {
    display: inline-block;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lh-primary) 85%, black), color-mix(in srgb, var(--lh-primary) 70%, white));
    color: #fff;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
    line-height: 1.2;
    box-shadow: 0 -1px 4px rgba(10, 126, 140, 0.15);
}
.lh-brand-author {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.85;
    margin-left: 4px;
}
.lh-banner-row .lh-founder-banner {
    display: inline-block !important;
    background: linear-gradient(135deg, #c89700, #e8b100) !important;
    color: #fff !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: 8px 8px 0 0 !important;
    margin-left: 0;
    margin-bottom: 0;
    line-height: 1.2 !important;
    box-shadow: 0 -2px 6px rgba(200, 151, 0, 0.25);
    min-height: 0 !important;
    text-transform: none !important;
}
/* Demo access badge */
.lh-banner-row .lh-demo-banner {
    display: inline-block !important;
    background: linear-gradient(135deg, #7b1a2c, #a52340) !important;
    color: #fff !important;
    padding: 5px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    border-radius: 8px 8px 0 0 !important;
    margin-left: 0;
    margin-bottom: 0;
    line-height: 1.2 !important;
    box-shadow: 0 -2px 6px rgba(123, 26, 44, 0.25);
    min-height: 0 !important;
    text-transform: none !important;
}

/* ---- Founder reveal animations ---- */
.lh-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}
.lh-confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: lh-confetti-fall 2.2s ease-out forwards;
}
.lh-confetti-piece:nth-child(odd) { border-radius: 50%; }
.lh-confetti-piece:nth-child(even) { border-radius: 2px; transform: rotate(45deg); }

@keyframes lh-confetti-fall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

/* Badge morph: demo banner -> founder banner */
.lh-badge-morph {
    animation: lh-badge-morph 0.8s ease-in-out forwards;
}
@keyframes lh-badge-morph {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.lh-badge-shimmer {
    position: relative;
    overflow: hidden;
}
.lh-badge-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: lh-shimmer 1s ease-in-out 0.3s forwards;
}
@keyframes lh-shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}
.lh-badge-pulse {
    animation: lh-badge-pulse 0.8s ease-in-out 3;
}
@keyframes lh-badge-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); box-shadow: 0 0 12px rgba(200, 151, 0, 0.5); }
    100% { transform: scale(1); }
}


.lh-demo-border {
    border-top: 5px solid #a52340 !important;
    box-shadow: 0 1px 0 0 rgba(165, 35, 64, 0.15), 0 2px 12px rgba(165, 35, 64, 0.10);
}
.lh-demo-border .lh-messages {
    border-left: 2px solid rgba(165, 35, 64, 0.2);
    border-right: 2px solid rgba(165, 35, 64, 0.2);
}
.lh-founder-badge {
    display: inline-block;
    background: linear-gradient(135deg, #c89700, #e8b100);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    margin-right: 8px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}
.lh-name-sep {
    color: #999;
    margin: 0 2px;
}
.lh-current-name {
    color: var(--lh-primary);
    font-weight: 600;
    font-size: 13px;
}
.lh-change-name-btn {
    background: #f0f7f7;
    border: 1.5px solid var(--lh-primary);
    color: var(--lh-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 3px 10px;
    margin-left: 8px;
    border-radius: 12px;
    text-transform: none;
    letter-spacing: normal;
    transition: background 0.15s, color 0.15s;
}
.lh-change-name-btn:hover {
    background: var(--lh-primary);
    color: #fff;
}

/* ---- Switch to General mode button ---- */
.lh-switch-general-btn {
    display: block;
    margin: 10px 0 4px;
    padding: 7px 16px;
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: none;
    letter-spacing: normal;
}
.lh-switch-general-btn:hover {
    background: #1f6060;
}
.lh-switch-facts-btn {
    display: block;
    margin: 10px 0 4px;
    padding: 7px 16px;
    background: var(--lh-accent);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: none;
    letter-spacing: normal;
}
.lh-switch-facts-btn:hover {
    background: #b07800;
}

/* ---- Feedback panel ---- */
.lh-feedback-section {
    margin: 8px 0;
}
.lh-feedback-panel {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px 16px;
}
.lh-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.lh-feedback-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.lh-feedback-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
}
.lh-feedback-close:hover {
    color: #333;
}
.lh-feedback-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    margin-bottom: 8px;
    background: #fff;
}
.lh-feedback-text {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    max-height: 150px;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.lh-feedback-email {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.lh-feedback-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lh-feedback-send-btn {
    padding: 8px 20px;
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: none;
    letter-spacing: normal;
}
.lh-feedback-send-btn:hover {
    background: #1f6060;
}
.lh-feedback-send-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.lh-feedback-status {
    font-size: 12px;
}

/* ---- Demo email gate ---- */
.lh-demo-gate {
    text-align: center;
    padding: 8px 0;
}
.lh-demo-gate-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.lh-demo-gate-desc {
    font-size: 14px;
    color: #666;
    margin: 0 0 14px;
    line-height: 1.5;
}
.lh-demo-gate-field {
    margin-bottom: 12px;
}
.lh-demo-email-input {
    width: 100%;
    max-width: 320px;
    padding: 10px 14px;
    font-size: 15px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    text-align: center;
}
.lh-demo-email-input:focus {
    border-color: var(--lh-primary);
    box-shadow: 0 0 0 2px rgba(42,125,125,0.15);
}
.lh-demo-gate-role {
    margin-bottom: 14px;
}
.lh-demo-gate-challenge {
    margin-bottom: 14px;
}
.lh-demo-challenge-input {
    width: 100%;
    max-width: 380px;
    padding: 10px 14px;
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    text-align: center;
}
.lh-demo-challenge-input:focus {
    border-color: var(--lh-primary);
    box-shadow: 0 0 0 2px rgba(42,125,125,0.15);
}
.lh-demo-gate-role-label {
    font-size: 13px;
    color: #555;
    margin: 0 0 8px;
}
.lh-demo-role-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.lh-demo-role-chip {
    background: #f5fafa;
    border: 1.5px solid #c8e0e0;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--lh-primary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.lh-demo-role-chip:hover {
    background: #e0f0f0;
    border-color: var(--lh-primary);
}
.lh-demo-role-chip.lh-demo-role-selected {
    background: var(--lh-primary);
    border-color: var(--lh-primary);
    color: #fff;
}
.lh-demo-start-btn {
    display: inline-block;
    padding: 10px 28px;
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: none;
    letter-spacing: normal;
}
.lh-demo-start-btn:hover {
    background: #1f6060;
}
.lh-demo-gate-privacy {
    font-size: 11px;
    color: #999;
    margin: 8px 0 0;
}

/* ---- Disclaimer ---- */
/* Admin tools (owner only) */
.lh-admin-tools {
    text-align: center;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
}
.lh-admin-tools .lh-admin-demo-btn {
    background: #f5f5f5 !important;
    border: 1px dashed #ccc !important;
    color: #888 !important;
    font-size: 11px !important;
    padding: 4px 14px !important;
    border-radius: 4px !important;
    cursor: pointer;
    line-height: 1.3 !important;
    margin: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    box-shadow: none !important;
}
.lh-admin-tools .lh-admin-demo-btn:hover {
    background: #eee !important;
    color: #555 !important;
    border-color: #aaa !important;
}
.lh-admin-tools .lh-admin-demo-btn[id*="anim"] {
    background: linear-gradient(135deg, #c89700, #d4a800) !important;
    color: #fff !important;
    border: 1px solid #b08600 !important;
}
.lh-admin-tools .lh-admin-demo-btn[id*="anim"]:hover {
    background: linear-gradient(135deg, #b08600, #c89700) !important;
    color: #fff !important;
}
.lh-admin-tools .lh-admin-btn-active {
    background: #e8e8e8 !important;
    border-color: #999 !important;
    color: #333 !important;
    border-style: solid !important;
}
.lh-admin-tools .lh-admin-label {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}
/* Coach memory indicator */
.lh-memory-indicator {
    text-align: center;
    padding: 2px 12px;
}
.lh-memory-btn {
    background: none;
    border: none;
    color: var(--lh-primary);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.7;
    padding: 2px 6px;
}
.lh-memory-btn:hover {
    opacity: 1;
    text-decoration: underline;
}
/* Coach memory panel */
.lh-memory-panel {
    position: absolute;
    bottom: 60px;
    left: 12px;
    right: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 300px;
    display: flex;
    flex-direction: column;
}
.lh-memory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    color: var(--lh-primary);
}
.lh-memory-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}
.lh-memory-content {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    overflow-y: auto;
    flex: 1;
    color: #333;
}
.lh-memory-text {
    white-space: pre-line;
}
.lh-memory-updated {
    margin-top: 8px;
    font-size: 11px;
    color: #999;
}
.lh-memory-footer {
    padding: 8px 14px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lh-memory-clear-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #888;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.lh-memory-clear-btn:hover {
    background: #fee;
    border-color: #c66;
    color: #c33;
}
.lh-memory-note {
    font-size: 10px;
    color: #aaa;
    line-height: 1.3;
}
/* Individual memory items */
.lh-memory-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lh-memory-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.lh-memory-item:last-child {
    border-bottom: none;
}
.lh-memory-item-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}
.lh-memory-item-text::before {
    content: '\2022  ';
    color: #999;
}
.lh-memory-item-delete {
    background: none;
    border: none;
    color: #bbb;
    font-size: 15px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.lh-memory-item-delete:hover {
    color: #c33;
}
.lh-disclaimer {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}
.lh-updated {
    text-align: center;
    font-size: 10px;
    color: #bbb;
    margin-top: 2px;
}

/* ---- Keyboard shortcut hints ---- */
.lh-keyboard-hints {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    padding: 6px 0 2px;
    transition: opacity 1s ease-out;
}
.lh-keyboard-hints span {
    display: inline-block;
    background: #e8e8e8;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: -apple-system, BlinkMacSystemFont, monospace;
    font-size: 10px;
    color: #666;
    margin-right: 3px;
}
.lh-hint-fade {
    opacity: 0;
}

/* ---- Conversation History Panel ---- */
.lh-history-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #fff;
    z-index: 200;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}
.lh-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--lh-primary);
    border-bottom: 1px solid #eee;
}
.lh-history-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.lh-history-close:hover { color: #333; }
.lh-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.lh-history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
    position: relative;
}
.lh-history-item:hover {
    background: #f5fafa;
}
.lh-history-title {
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}
.lh-history-meta {
    width: 100%;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.lh-history-delete {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.lh-history-delete:hover { color: #ff3b30; }
.lh-history-search-wrap {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}
.lh-history-search {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
}
.lh-history-search:focus {
    border-color: var(--lh-primary);
    box-shadow: 0 0 0 2px rgba(42,125,125,0.15);
}
.lh-history-search::placeholder {
    color: #999;
}
.lh-history-snippet {
    width: 100%;
    font-size: 12px;
    color: #666;
    margin-top: 3px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lh-history-snippet mark {
    background: #fff3cd;
    color: #333;
    padding: 0 1px;
    border-radius: 2px;
}

/* ---- History panel tabs ---- */
.lh-history-tabs {
    display: flex;
    gap: 0;
    flex: 1;
}
.lh-history-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 14px 6px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.lh-history-tab:hover {
    color: #555;
}
.lh-history-tab-active {
    color: var(--lh-primary);
    border-bottom-color: var(--lh-primary);
    font-weight: 600;
}
.lh-history-tab-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ---- Bookmark button in bubble actions ---- */
.lh-bookmark-btn {
    font-size: 14px !important;
    letter-spacing: 0;
}
.lh-bookmark-btn.lh-bookmarked {
    color: var(--lh-accent) !important;
    border-color: var(--lh-accent) !important;
    background: rgba(212, 147, 13, 0.06) !important;
}

/* ---- Bookmark inline label input ---- */
.lh-bookmark-input-wrap {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.06);
    align-items: center;
}
.lh-bookmark-label {
    flex: 1;
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    font-family: inherit;
    min-width: 0;
}
.lh-bookmark-label:focus {
    border-color: var(--lh-primary);
}
.lh-bookmark-save {
    font-size: 11px;
    padding: 5px 12px;
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    font-weight: 600;
}
.lh-bookmark-save:hover {
    background: #1f6060;
}
.lh-bookmark-confirm {
    font-size: 12px;
    color: var(--lh-primary);
    font-weight: 600;
}
.lh-bookmark-err {
    color: #c00;
    font-weight: 400;
}

/* ---- Bookmark list (inside History panel) ---- */
.lh-bookmark-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.lh-bookmark-empty {
    text-align: center;
    padding: 48px 24px;
    color: #999;
}
.lh-bookmark-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.4;
}
.lh-bookmark-empty-text {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}
.lh-bookmark-empty-hint {
    font-size: 13px;
    color: #999;
}
.lh-bookmark-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.1s;
    position: relative;
}
.lh-bookmark-item:hover {
    background: #f5fafa;
}
.lh-bookmark-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lh-bookmark-star-icon {
    color: var(--lh-accent);
    font-size: 14px;
    flex-shrink: 0;
}
.lh-bookmark-item-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 24px;
}
.lh-bookmark-snippet {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lh-bookmark-item-meta {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}
.lh-bookmark-delete {
    position: absolute;
    right: 12px;
    top: 12px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.lh-bookmark-delete:hover { color: #ff3b30; }

/* ---- Bookmark expanded detail ---- */
.lh-bookmark-expanded {
    background: #f9fcfc;
}
.lh-bookmark-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.lh-bookmark-detail-q {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--lh-primary) 4%, transparent);
    border-radius: 6px;
    line-height: 1.5;
}
.lh-bookmark-detail-r {
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}
.lh-bookmark-detail-r p { margin: 4px 0; }
.lh-bookmark-detail-r h1,
.lh-bookmark-detail-r h2,
.lh-bookmark-detail-r h3,
.lh-bookmark-detail-r h4 { margin: 8px 0 2px; font-size: 1.05em; color: var(--lh-primary); }
.lh-bookmark-detail-r ul,
.lh-bookmark-detail-r ol { margin: 4px 0; padding-left: 20px; }
.lh-bookmark-detail-r ul { list-style-type: disc; }
.lh-bookmark-detail-r ol { list-style-type: decimal; }
.lh-bookmark-detail-r blockquote {
    margin: 4px 0; padding: 4px 10px;
    border-left: 3px solid #d1d5db; color: #555; font-size: 13px;
}
.lh-bookmark-copy {
    margin-top: 8px;
    background: none;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    font-family: inherit;
}
.lh-bookmark-copy:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.2);
}

/* ---- Free tier / Demo mode ---- */
.lh-free-counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--lh-primary);
    text-align: center;
    padding: 6px 12px;
    margin: 4px 0;
    background: #e8f5f5;
    border-radius: 6px;
    border: 1px solid #b8dede;
}
.lh-free-counter.lh-free-warn {
    color: #c07000;
    background: #fff3e0;
    border-color: #f0c878;
}
.lh-free-counter.lh-free-owner {
    color: var(--lh-primary);
    font-weight: 500;
    font-style: italic;
}
.lh-upgrade-prompt {
    text-align: center;
    padding: 20px !important;
}
.lh-upgrade-prompt p {
    margin: 0 0 10px;
}
.lh-upgrade-btn {
    display: inline-block;
    background: var(--lh-primary);
    color: #fff !important;
    text-decoration: none;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.15s;
    margin: 8px 0;
}
.lh-upgrade-btn:hover {
    background: #1f6060;
    color: #fff !important;
    text-decoration: none;
}
.lh-upgrade-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin-top: 6px !important;
}

/* ---- Print header (hidden on screen) ---- */
.lh-print-header {
    display: none;
}

/* ============================================
   DARK MODE
   ============================================ */
/* ============================================
   GUIDED TOUR
   ============================================ */
.lh-tour-chip {
    background: color-mix(in srgb, var(--lh-primary) 8%, white) !important;
    color: color-mix(in srgb, var(--lh-primary) 80%, black) !important;
    border: 1px dashed var(--lh-primary) !important;
    font-style: italic;
}
.lh-tour-chip:hover {
    background: color-mix(in srgb, var(--lh-primary) 15%, white) !important;
}

.lh-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
}

.lh-tour-highlighted {
    position: relative;
    z-index: 10001 !important;
    box-shadow: 0 0 0 4px var(--lh-primary, #2a7d7d), 0 0 0 8px color-mix(in srgb, var(--lh-primary, #2a7d7d) 25%, transparent);
    border-radius: 8px;
}

.lh-tour-tooltip {
    position: absolute;
    z-index: 10002;
    background: #fff;
    border: 1px solid #d0d0d4;
    border-radius: 10px;
    padding: 16px 18px 12px;
    max-width: 320px;
    width: 90vw;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    line-height: 1.5;
    color: #1c1c1e;
}

/* Arrow for tooltip */
.lh-tour-tooltip.lh-tour-pos-below::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    filter: drop-shadow(0 -1px 0 #d0d0d4);
}
.lh-tour-tooltip.lh-tour-pos-above::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    filter: drop-shadow(0 1px 0 #d0d0d4);
}

.lh-tour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.lh-tour-step-num {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lh-primary, #2a7d7d);
    font-weight: 600;
}
.lh-tour-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
}
.lh-tour-close:hover { color: #333; }

.lh-tour-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
    color: #1c1c1e;
}
.lh-tour-text {
    color: #555;
    margin-bottom: 14px;
}
.lh-tour-text strong { color: #1c1c1e; }

.lh-tour-nav {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.lh-tour-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #d0d0d4;
    background: #f5f5f5;
    color: #333;
    transition: background 0.15s;
}
.lh-tour-btn:hover { background: #e8e8e8; }
.lh-tour-btn.lh-tour-next,
.lh-tour-btn.lh-tour-done {
    background: var(--lh-primary, #2a7d7d);
    color: #fff;
    border-color: var(--lh-primary, #2a7d7d);
}
.lh-tour-btn.lh-tour-next:hover,
.lh-tour-btn.lh-tour-done:hover {
    background: var(--lh-hover, #246c6c);
}
.lh-tour-btn.lh-tour-skip {
    background: transparent;
    border-color: transparent;
    color: #999;
    font-weight: 500;
}
.lh-tour-btn.lh-tour-skip:hover { color: #666; }

@media (prefers-color-scheme: dark) {
    /* Guided tour — dark mode */
    .lh-tour-chip { background: #1a3a3a !important; color: #7fd4d4 !important; border-color: var(--lh-dark-primary) !important; }
    .lh-tour-chip:hover { background: #1f4a4a !important; }
    .lh-tour-overlay { background: rgba(0, 0, 0, 0.6); }
    .lh-tour-tooltip { background: #2c2c2e; border-color: #3a3a3c; color: #e5e5e5; }
    .lh-tour-tooltip.lh-tour-pos-below::before { border-bottom-color: #2c2c2e; filter: drop-shadow(0 -1px 0 #3a3a3c); }
    .lh-tour-tooltip.lh-tour-pos-above::after { border-top-color: #2c2c2e; filter: drop-shadow(0 1px 0 #3a3a3c); }
    .lh-tour-title { color: #f0f0f0; }
    .lh-tour-text { color: #aaa; }
    .lh-tour-text strong { color: #f0f0f0; }
    .lh-tour-close { color: #777; }
    .lh-tour-close:hover { color: #ccc; }
    .lh-tour-btn { background: #3a3a3c; color: #e5e5e5; border-color: #555; }
    .lh-tour-btn:hover { background: #4a4a4c; }
    .lh-tour-btn.lh-tour-next,
    .lh-tour-btn.lh-tour-done { background: var(--lh-dark-primary, #3a8a8a); color: #fff; border-color: var(--lh-dark-primary, #3a8a8a); }
    .lh-tour-btn.lh-tour-next:hover,
    .lh-tour-btn.lh-tour-done:hover { background: var(--lh-dark-hover, #2f7a7a); }
    .lh-tour-btn.lh-tour-skip { color: #777; }
    .lh-tour-btn.lh-tour-skip:hover { color: #aaa; }

    .lh-chat {
        color: #e5e5e5;
        border-top-color: var(--lh-dark-primary);
        background: rgba(28, 28, 30, 0.55);
        border-color: rgba(255, 255, 255, 0.08);
        border-top-color: var(--lh-dark-primary);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .lh-founder-wrap {
        background: rgba(28, 28, 30, 0.55);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .lh-messages { background: linear-gradient(180deg, #1a2e2e 0%, #1c1c1e 60px); }
    .lh-bubble.lh-assistant { background: #2c2c2e; color: #e5e5e5; border-color: #3a3a3c; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
    .lh-bubble.lh-assistant h1,
    .lh-bubble.lh-assistant h2,
    .lh-bubble.lh-assistant h3,
    .lh-bubble.lh-assistant h4 { color: var(--lh-dark-primary); }
    .lh-bubble.lh-assistant strong { color: #f0f0f0; }
    .lh-bubble.lh-assistant blockquote { color: #aaa; border-left-color: #555; }
    .lh-bubble.lh-assistant .lh-coach-closing-wrap { border-left-color: var(--lh-dark-primary) !important; }
    .lh-bubble.lh-assistant .lh-coach-closing-wrap h3,
    .lh-bubble.lh-assistant .lh-coach-closing-wrap h4 { color: var(--lh-dark-primary) !important; }
    .lh-bubble.lh-assistant h3.lh-coach-closing,
    .lh-bubble.lh-assistant h4.lh-coach-closing { color: var(--lh-dark-primary) !important; border-left-color: var(--lh-dark-primary) !important; }
    .lh-bubble.lh-assistant p.lh-coach-closing { border-left-color: var(--lh-dark-primary) !important; }
    .lh-bubble.lh-user { background: var(--lh-dark-primary); }
    .lh-bubble.lh-typing { background: #2c2c2e; color: #8e8e93; }
    .lh-bubble.lh-error { background: #3a1a1a; color: #ff6b6b; }
    .lh-phi-nudge { background: #3a3520 !important; color: #e0c860 !important; border-color: #5a4a10 !important; }

    .lh-cursor { background: var(--lh-dark-primary); }

    .lh-source-tag { color: #777; border-top-color: rgba(255,255,255,0.08); }
    .lh-book-badge { color: var(--lh-dark-primary); }
    .lh-bubble.lh-assistant[data-mode="book"] { border-left-color: var(--lh-dark-primary); }
    .lh-bubble.lh-assistant[data-style="coach"],
    .lh-bubble.lh-typing[data-style="coach"] { border-left-color: var(--lh-dark-accent) !important; }
    .lh-stopped-tag { color: var(--lh-dark-accent); }

    .lh-md-table th,
    .lh-md-table td { border-color: rgba(255,255,255,0.1); }
    .lh-md-table th { background: rgba(255,255,255,0.06); }
    .lh-md-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

    .lh-bubble-actions { border-top-color: rgba(255,255,255,0.08); }
    .lh-bubble-actions button { color: #aaa; border-color: rgba(255,255,255,0.12); }
    .lh-bubble-actions button:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
    .lh-bubble-actions button.lh-voted { color: var(--lh-dark-primary); border-color: var(--lh-dark-primary); background: color-mix(in srgb, var(--lh-dark-primary) 10%, transparent); }

    .lh-feedback-dropdown { border-top-color: rgba(255,255,255,0.08); }
    .lh-feedback-prompt { color: #777; }
    .lh-feedback-reason { background: #333; border-color: #444; color: #aaa; }
    .lh-feedback-reason:hover { background: #3a3a3a; border-color: #555; }
    .lh-feedback-positive .lh-feedback-reason:hover { background: #1b3a1b; border-color: #2e5a2e; }
    .lh-feedback-other-input { background: #2a2a2a; border-color: #444; color: #ddd; }
    .lh-feedback-other-input:focus { border-color: var(--lh-dark-primary); }
    .lh-feedback-other-send { background: var(--lh-dark-primary); }
    .lh-feedback-other-send:hover { background: #2d7a7a; }
    .lh-feedback-thanks { color: var(--lh-dark-primary); }

    .lh-follow-chip {
        background: rgba(44, 44, 46, 0.5);
        border-color: color-mix(in srgb, var(--lh-dark-primary) 30%, transparent);
        color: var(--lh-dark-primary);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0.5px 2px rgba(0, 0, 0, 0.15);
    }
    .lh-follow-chip:hover { background: var(--lh-dark-primary); color: #fff; border-color: var(--lh-dark-primary); }
    .lh-pchip-dismiss { color: var(--lh-dark-primary); }
    .lh-pchip-dismiss:hover { background: color-mix(in srgb, var(--lh-dark-primary) 15%, transparent); }
    .lh-pchip-wrap:hover .lh-pchip-dismiss { color: #fff; }
    .lh-pchip-wrap:hover .lh-pchip-dismiss:hover { background: rgba(255, 255, 255, 0.15); }

    .lh-name-prompt { color: #aaa; }
    .lh-name-prompt-btn { background: #2c2c2e; border-color: var(--lh-dark-primary); color: var(--lh-dark-primary); }
    .lh-name-prompt-btn:hover { background: var(--lh-dark-primary); color: #fff; }
    .lh-name-prompt-skip { border-color: #555; color: #666; }
    .lh-name-prompt-skip:hover { background: #333; color: #aaa; }
    .lh-name-prompt-input { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-name-prompt-input:focus { border-color: var(--lh-dark-primary); }

    .lh-system-tip { color: #e8c44a; background: #2a2517; border-left-color: #b8860b; }
    .lh-reflection-tip { color: #5ec4b8; background: #1a2a27; border-left-color: var(--lh-dark-primary); }

    .lh-mode-divider { color: #888; }
    .lh-mode-divider::before,
    .lh-mode-divider::after { background: rgba(255, 255, 255, 0.12); }

    .lh-wb-continue { background: var(--lh-dark-primary); }
    .lh-wb-continue:hover { background: var(--lh-dark-hover); }
    .lh-wb-fresh { background: #333; color: #aaa; }
    .lh-wb-fresh:hover { background: #3a3a3a; }

    .lh-role-chip { background: #2c2c2e; border-color: var(--lh-dark-primary); color: var(--lh-dark-primary); }
    .lh-role-chip:hover { background: var(--lh-dark-primary); color: #fff; }

    .lh-history-panel { background: #1c1c1e; }
    .lh-history-header { color: var(--lh-dark-primary); border-bottom-color: #333; }
    .lh-history-close { color: #666; }
    .lh-history-close:hover { color: #ccc; }
    .lh-history-item { border-bottom-color: #2c2c2e; }
    .lh-history-item:hover { background: #2c2c2e; }
    .lh-history-title { color: #e5e5e5; }
    .lh-history-meta { color: #666; }
    .lh-history-delete { color: #555; }
    .lh-history-search-wrap { border-bottom-color: #333; }
    .lh-history-search { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-history-search:focus { border-color: var(--lh-dark-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lh-dark-primary) 20%, transparent); }
    .lh-history-search::placeholder { color: #666; }
    .lh-history-snippet { color: #888; }
    .lh-history-snippet mark { background: #3a3a1a; color: #e5e5e5; }
    .lh-history-delete:hover { color: #ff453a; }
    .lh-history-tab { color: #666; }
    .lh-history-tab:hover { color: #aaa; }
    .lh-history-tab-active { color: var(--lh-dark-primary); border-bottom-color: var(--lh-dark-primary); }
    .lh-bookmark-list { }
    .lh-bookmark-item { border-bottom-color: #2c2c2e; }
    .lh-bookmark-item:hover { background: #2c2c2e; }
    .lh-bookmark-item-label { color: #e5e5e5; }
    .lh-bookmark-snippet { color: #777; }
    .lh-bookmark-item-meta { color: #555; }
    .lh-bookmark-delete { color: #555; }
    .lh-bookmark-delete:hover { color: #ff453a; }
    .lh-bookmark-expanded { background: #1a2a2a; }
    .lh-bookmark-detail { border-top-color: #333; }
    .lh-bookmark-detail-q { background: color-mix(in srgb, var(--lh-dark-primary) 8%, transparent); color: #bbb; }
    .lh-bookmark-detail-r { color: #ccc; }
    .lh-bookmark-detail-r h2,
    .lh-bookmark-detail-r h3,
    .lh-bookmark-detail-r h4 { color: var(--lh-dark-primary); }
    .lh-bookmark-detail-r blockquote { border-left-color: #444; color: #999; }
    .lh-bookmark-copy { color: #aaa; border-color: rgba(255,255,255,0.12); }
    .lh-bookmark-copy:hover { background: rgba(255,255,255,0.06); }
    .lh-bookmark-empty-text { color: #aaa; }
    .lh-bookmark-empty-hint { color: #666; }
    .lh-bookmark-input-wrap { border-top-color: rgba(255,255,255,0.08); }
    .lh-bookmark-label { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-bookmark-label:focus { border-color: var(--lh-dark-primary); }
    .lh-bookmark-btn.lh-bookmarked { color: var(--lh-dark-accent) !important; border-color: var(--lh-dark-accent) !important; background: rgba(224,160,48,0.1) !important; }

    .lh-input-wrap {
        background: rgba(28, 28, 30, 0.6);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .lh-input-wrap.lh-input-focused {
        border-color: color-mix(in srgb, var(--lh-dark-primary) 45%, transparent);
        box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.15),
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 2px color-mix(in srgb, var(--lh-dark-primary) 15%, transparent);
    }
    .lh-input {
        background: rgba(44, 44, 46, 0.6) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #e5e5e5;
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.2),
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
            0 0.5px 0 rgba(255, 255, 255, 0.04) !important;
    }
    .lh-input::placeholder { color: rgba(255, 255, 255, 0.3); }
    .lh-input:focus {
        background: rgba(44, 44, 46, 0.8) !important;
        border-color: color-mix(in srgb, var(--lh-dark-primary) 50%, transparent) !important;
        box-shadow:
            inset 0 1px 3px rgba(0, 0, 0, 0.15),
            0 0 0 3px color-mix(in srgb, var(--lh-dark-primary) 15%, transparent),
            0 0 12px color-mix(in srgb, var(--lh-dark-primary) 10%, transparent) !important;
    }

    .lh-form button[type="submit"] {
        background: var(--lh-dark-primary) !important;
        box-shadow: 0 1px 3px color-mix(in srgb, var(--lh-dark-primary) 30%, transparent) !important;
    }
    .lh-form button[type="submit"]:hover {
        background: var(--lh-dark-hover) !important;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--lh-dark-primary) 35%, transparent) !important;
    }
    .lh-form button[type="submit"]:active {
        box-shadow: 0 1px 2px color-mix(in srgb, var(--lh-dark-primary) 25%, transparent) !important;
    }
    .lh-input-wrap.lh-send-ripple {
        animation: lh-ripple-ring-dark 0.45s ease-out;
        transition: none !important;
    }

    .lh-seg {
        background: rgba(44, 44, 46, 0.45);
        border-color: color-mix(in srgb, var(--lh-dark-primary) 25%, transparent);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.15),
            0 0.5px 0 rgba(255, 255, 255, 0.04);
    }
    .lh-seg-style { border-color: rgba(212, 154, 0, 0.25); }
    .lh-seg label { color: #666; }
    .lh-seg input:checked + label { color: #fff; }
    .lh-seg > .lh-seg-highlight {
        background: linear-gradient(180deg, color-mix(in srgb, var(--lh-dark-primary) 80%, white) 0%, var(--lh-dark-primary) 100%);
        box-shadow: 0 1px 3px color-mix(in srgb, var(--lh-dark-primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .lh-seg-style > .lh-seg-highlight {
        background: linear-gradient(180deg, #e0a400 0%, #d49a00 100%);
        box-shadow: 0 1px 3px rgba(212, 154, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .lh-tap-tip { background: #4a4a4c; }
    .lh-tap-tip::after { border-top-color: #4a4a4c; }

    .lh-ctrl-btn {
        color: #aaa;
        background: rgba(44, 44, 46, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0.5px 2px rgba(0, 0, 0, 0.15);
    }
    .lh-ctrl-btn:hover { background: rgba(60, 60, 62, 0.6) !important; }

    .lh-tools-toggle {
        background: rgba(44, 44, 46, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #888;
    }
    .lh-tools-toggle:hover { background: rgba(60, 60, 62, 0.6) !important; color: var(--lh-dark-primary); }
    .lh-tools-toggle.lh-tools-open { background: var(--lh-dark-primary) !important; color: #fff; border-color: var(--lh-dark-primary) !important; }
    .lh-tools-nudge { background: #d48a00; }
    .lh-tools-nudge-arrow { border-top-color: #d48a00; }
    .lh-controls-right {
        background: #2c2c2e;
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
    .lh-input-hint { color: #555; }

    .lh-upload-btn { color: #666; outline: none; }
    .lh-upload-btn:hover, .lh-upload-btn:focus { color: var(--lh-dark-primary); }
    .lh-upload-btn:active { color: var(--lh-dark-hover); }
    .lh-file-preview { background: #1a2e2e; border-color: var(--lh-dark-primary); color: var(--lh-dark-primary); }
    .lh-file-preview-remove { color: #555; }
    .lh-file-preview-remove:hover { color: #ff453a; }
    .lh-file-attachment { color: #666; }

    .lh-char-count { color: #666; }
    .lh-char-count.lh-char-warn { color: var(--lh-dark-accent); }
    .lh-char-count.lh-char-danger { color: #ff453a; }

    .lh-disclaimer { color: #666; }
    .lh-updated { color: #555; }

    .lh-explore-toggle { color: var(--lh-dark-primary); }
    .lh-explore-toggle:hover { color: #4bb5b5; }
    .lh-explore-heading { color: #888; }
    .lh-topic-chip { background: #2c2c2e; border-color: #3a6b6b; color: var(--lh-dark-primary); }
    .lh-topic-chip:hover { background: var(--lh-dark-primary); border-color: var(--lh-dark-primary); color: #fff; }
    .lh-pack-card { background: #2c2c2e; border-color: #444; }
    .lh-pack-card:hover { border-color: var(--lh-dark-primary); box-shadow: 0 2px 8px rgba(58,158,158,0.15); }
    .lh-pack-title { color: #e5e5e5; }
    .lh-pack-desc { color: #777; }
    .lh-pack-search { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-pack-search:focus { border-color: var(--lh-dark-primary); }
    .lh-pack-more { color: #666; }
    .lh-pack-nav-btn { border-color: #555; color: var(--lh-dark-primary); }
    .lh-pack-nav-btn:hover:not(.lh-pack-nav-disabled) { background: #333; border-color: var(--lh-dark-primary); }
    .lh-pack-nav-disabled { color: #555; border-color: #444; }
    .lh-pack-nav-label { color: #666; }
    .lh-pack-chip { background: #2c2c2e !important; border-color: var(--lh-dark-primary) !important; }
    .lh-pack-skip { color: #666 !important; border-color: #444 !important; }
    .lh-pack-skip:hover { color: #999 !important; border-color: #666 !important; }

    .lh-change-role { border-top-color: #333; }
    .lh-role-bar .lh-current-role { color: #aaa; }
    .lh-change-role-btn { background: #2c2c2e; border-color: var(--lh-dark-primary); color: var(--lh-dark-primary); }
    .lh-change-role-btn:hover { background: var(--lh-dark-primary); color: #1a1a1a; }
    .lh-current-name { color: #aaa; }
    .lh-name-sep { color: #555; }
    .lh-change-name-btn { background: #2c2c2e; border-color: var(--lh-dark-primary); color: var(--lh-dark-primary); }
    .lh-change-name-btn:hover { background: var(--lh-dark-primary); color: #1a1a1a; }

    .lh-switch-general-btn { background: var(--lh-dark-primary); }
    .lh-switch-general-btn:hover { background: var(--lh-dark-hover); }
    .lh-switch-facts-btn { background: var(--lh-dark-accent); }
    .lh-switch-facts-btn:hover { background: #c88a00; }

    .lh-demo-gate-title { color: #e5e5e5; }

    .lh-feedback-panel { background: #1c1c1e; border-color: #333; }
    .lh-feedback-title { color: #e5e5e5; }
    .lh-feedback-select { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-feedback-text { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-feedback-email { background: #2c2c2e; border-color: #444; color: #e5e5e5; }
    .lh-feedback-send-btn { background: var(--lh-dark-primary); }
    .lh-feedback-send-btn:hover { background: var(--lh-dark-hover); }
    .lh-demo-gate-desc { color: #999; }
    .lh-demo-email-input { background: #1c1c1e; border-color: #444; color: #e5e5e5; }
    .lh-demo-email-input:focus { border-color: var(--lh-dark-primary); }
    .lh-demo-challenge-input { background: #1c1c1e; border-color: #444; color: #e5e5e5; }
    .lh-demo-challenge-input:focus { border-color: var(--lh-dark-primary); }
    .lh-demo-gate-role-label { color: #888; }
    .lh-demo-role-chip { background: #2c2c2e; border-color: #3a6b6b; color: var(--lh-dark-primary); }
    .lh-demo-role-chip:hover { background: #333; border-color: var(--lh-dark-primary); }
    .lh-demo-role-chip.lh-demo-role-selected { background: var(--lh-dark-primary); border-color: var(--lh-dark-primary); color: #fff; }
    .lh-demo-start-btn { background: var(--lh-dark-primary); }
    .lh-demo-start-btn:hover { background: var(--lh-dark-hover); }

    .lh-keyboard-hints { color: #555; }
    .lh-keyboard-hints span { background: #333; border-color: #444; color: #888; }

    .lh-free-counter { color: var(--lh-dark-primary); background: color-mix(in srgb, var(--lh-dark-primary) 12%, black); border-color: color-mix(in srgb, var(--lh-dark-primary) 25%, black); }
    .lh-free-counter.lh-free-warn { color: var(--lh-dark-accent); background: #3a2a10; border-color: #5a4020; }
    .lh-upgrade-btn { background: var(--lh-dark-primary); }
    .lh-upgrade-btn:hover { background: var(--lh-dark-hover); }
    .lh-upgrade-note { color: #bbb; }

    .lh-founder-border { border-top: 5px solid #d4a800 !important; }
    .lh-founder-border .lh-messages { border-left-color: rgba(212, 168, 0, 0.15); border-right-color: rgba(212, 168, 0, 0.15); }
    .lh-founder-wrap .lh-chat {
        background: rgba(28, 28, 30, 0.55);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.2),
            0 8px 32px rgba(0, 0, 0, 0.25);
    }
    .lh-founder-badge { background: linear-gradient(135deg, #b08600, #d4a800); }
    .lh-brand-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--lh-dark-primary) 85%, black), color-mix(in srgb, var(--lh-dark-primary) 70%, white)); }
    .lh-banner-row .lh-demo-banner { background: linear-gradient(135deg, #6b1525, #922038) !important; }
    .lh-demo-border { border-top-color: #922038 !important; box-shadow: 0 1px 0 0 rgba(146, 32, 56, 0.2), 0 2px 12px rgba(146, 32, 56, 0.08); }
    .lh-demo-border .lh-messages { border-left-color: rgba(146, 32, 56, 0.15); border-right-color: rgba(146, 32, 56, 0.15); }
    .lh-memory-panel { background: #2a2a2a; border-color: #444; }
    .lh-memory-header { border-bottom-color: #444; color: #4db8c4; }
    .lh-memory-content { color: #ccc; }
    .lh-memory-footer { border-top-color: #444; }
    .lh-memory-clear-btn { background: #333; border-color: #555; color: #aaa; }
    .lh-memory-btn { color: #4db8c4; }
    .lh-memory-item { border-bottom-color: #444; }
    .lh-memory-item-delete { color: #666; }
    .lh-memory-item-delete:hover { color: #e55; }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 600px) {
    .lh-chat {
        margin: 0;
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        max-width: 100%;
        border-radius: 0;
    }
    .lh-messages {
        flex: 0 0 auto;
        height: calc(100vh - var(--lh-msg-offset, 160px));
        height: calc(100dvh - var(--lh-msg-offset, 160px));
        min-height: 150px;
        max-height: none;
        overflow-y: auto;
        resize: none;
        border-radius: 0;
        margin-bottom: 0;
        padding: 12px;
    }
    .lh-bubble { max-width: 90%; }
    .lh-bubble.lh-assistant { max-width: 95%; }
    .lh-controls {
        padding: 6px 12px;
        margin-bottom: 0;
        gap: 4px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap !important;
        justify-content: center !important;
        position: relative;
    }
    .lh-tools-wrap {
        position: static !important;
        transform: none !important;
        order: 2;
        width: 100%;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
        gap: 6px;
    }
    .lh-toggles-row {
        gap: 6px;
        order: 1;
        width: 100%;
        justify-content: center;
        flex: unset;
        min-width: unset;
    }
    .lh-controls-right {
        flex-wrap: wrap;
        gap: 3px;
    }
    .lh-ctrl-btn {
        font-size: 11px;
        padding: 4px 8px;
    }
    .lh-seg {
        flex: 1;
        min-width: 0;
        max-width: 48%;
    }
    .lh-seg label {
        padding: 4px 8px;
        font-size: 11px;
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lh-label-full { display: none; }
    .lh-label-short { display: inline; }
    .lh-input-wrap { padding: 8px 12px; }
    .lh-input-hint { display: none; }
    .lh-form { gap: 6px; }
    .lh-input {
        font-size: 16px;
        min-height: 80px !important;
        max-height: 160px;
    }
    /* Mobile send: circle with arrow icon */
    .lh-disclaimer {
        padding: 4px 12px 8px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }
    .lh-updated {
        padding: 0 12px 4px;
    }
    .lh-follow-chip {
        font-size: 12px;
        padding: 6px 12px;
        text-transform: none;
    }
    .lh-explore-section { padding: 8px 12px 0; }
    .lh-pack-list { grid-template-columns: 1fr; }
    .lh-topic-chip { font-size: 11px; padding: 4px 10px; }
    .lh-brand-banner { font-size: 12px; padding: 4px 12px; }
    .lh-brand-author { font-size: 10px; }
    .lh-banner-row .lh-founder-banner { font-size: 10px !important; padding: 4px 10px !important; }
    .lh-banner-row .lh-demo-banner { font-size: 10px !important; padding: 4px 10px !important; }
    .lh-banner-row { flex-wrap: nowrap; }
    .lh-founder-wrap { width: 100%; margin: 0; border-radius: 0; border-left: none; border-right: none; }
    .lh-founder-wrap .lh-chat { margin: 0; border-radius: 0; }
    .lh-role-bar {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
    }
    .lh-role-bar[style*="block"] {
        display: flex !important;
    }
    .lh-name-sep { display: none !important; }
    .lh-pwa-account-nav { white-space: nowrap; }
}

/* Extra-small phones (iPhone SE, older Android, <400px) */
@media (max-width: 400px) {
    .lh-seg label {
        padding: 4px 6px;
        font-size: 10px;
    }
    .lh-seg {
        max-width: 49%;
    }
    .lh-ctrl-btn {
        font-size: 10px;
        padding: 3px 5px;
    }
    .lh-controls-right {
        gap: 2px;
    }
    .lh-input {
        min-height: 80px !important;
        max-height: 160px;
    }
}

/* ============================================
   FEATURE NOTIFICATION POPUP
   ============================================ */

/* Dark overlay covers the chat widget only */
.lh-notif-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 22%;
    border-radius: 12px;
    animation: lh-fade-in 0.2s ease-out forwards;
}

/* Popup card */
.lh-notif-popup {
    background: #fff;
    border-radius: 10px;
    padding: 24px 28px;
    max-width: 420px;
    width: 88%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
    text-align: center;
    border-top: 4px solid var(--lh-primary);
}

.lh-notif-popup-text {
    font-size: 15px;
    line-height: 1.6;
    color: #1c1c1e;
    margin: 0 0 18px;
}

.lh-notif-popup-btn {
    background: var(--lh-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
}

.lh-notif-popup-btn:hover {
    background: #1f5f5f;
}

@media (prefers-color-scheme: dark) {
    .lh-notif-overlay { background: rgba(0, 0, 0, 0.7); }
    .lh-notif-popup { background: #1e2e2e; border-top-color: #4db8c4; }
    .lh-notif-popup-text { color: #e5e5e5; }
    .lh-notif-popup-btn { background: #4db8c4; color: #0a1a1a; }
    .lh-notif-popup-btn:hover { background: #3aa8b4; }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    body * { visibility: hidden !important; }
    .lh-chat,
    .lh-chat .lh-print-header,
    .lh-chat .lh-messages,
    .lh-chat .lh-print-header *,
    .lh-chat .lh-messages * { visibility: visible !important; }
    .lh-chat {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 !important;
    }
    .lh-print-header {
        display: block !important;
        font-size: 18px; font-weight: 600;
        padding: 16px 20px 8px;
        border-bottom: 2px solid #333;
        margin-bottom: 12px;
    }
    .lh-print-header small {
        display: block; font-size: 13px;
        font-weight: 400; color: #666; margin-top: 2px;
    }
    .lh-messages {
        position: relative !important;
        height: auto !important; max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        padding: 10px 20px !important;
        border-radius: 0 !important; margin: 0 !important;
        /* Reset flex — flex containers prevent page-break-inside on children */
        display: block !important;
    }
    .lh-bubble {
        /* Switch from inline-flex to block so browsers can split across pages */
        display: block !important;
        page-break-inside: auto !important;
        break-inside: auto !important;
        overflow: visible !important;
        /* Remove border-radius so it doesn't look odd when split */
        border-radius: 6px !important;
        max-width: 85% !important;
        margin-bottom: 12px !important;
    }
    .lh-bubble.lh-user {
        background: #d0e4ff !important; color: #000 !important;
        margin-left: auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .lh-bubble.lh-assistant {
        background: #eee !important; color: #000 !important;
        margin-right: auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* Keep bubble content flowing naturally for page breaks */
    .lh-bubble p,
    .lh-bubble li,
    .lh-bubble h1,
    .lh-bubble h2,
    .lh-bubble h3,
    .lh-bubble blockquote {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }
    /* Avoid orphaned labels — keep "You" / "Assistant" with first line */
    .lh-source-tag {
        page-break-before: avoid !important;
        break-before: avoid !important;
    }
    .lh-mode-divider {
        display: flex !important;
        color: #666 !important;
        margin: 10px 0 !important;
    }
    .lh-mode-divider::before,
    .lh-mode-divider::after {
        background: #999 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .lh-controls, .lh-input-wrap, .lh-form, .lh-disclaimer, .lh-updated,
    .lh-bubble.lh-typing, .lh-bubble-actions,
    .lh-stopped-tag, .lh-char-count, .lh-toggles-row,
    .lh-follow-ups, .lh-system-tip, .lh-reflection-tip, .lh-feedback-dropdown,
    .lh-keyboard-hints, .lh-welcome-back,
    .lh-free-counter, .lh-upgrade-prompt, .lh-history-panel, .lh-explore-section, .lh-role-bar, .lh-feedback-section,
    .lh-tour-overlay, .lh-tour-tooltip, .lh-tour-chip,
    .lh-notif-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   PWA Standalone Mode -- hide theme chrome, go full-screen
   .lh-pwa-standalone is added to <html> by JS when running as installed PWA.
   Works on iOS Safari (navigator.standalone) and Android Chrome (display-mode).
   ========================================================================== */

/* Remove top margin WordPress adds for admin bar */
.lh-pwa-standalone body,
.lh-pwa-standalone html {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hide admin bar */
.lh-pwa-standalone #wpadminbar {
    display: none !important;
}

/* Hide page text content above the shortcode */
.lh-pwa-standalone .entry-title,
.lh-pwa-standalone .entry-content > p,
.lh-pwa-standalone .entry-content > h1,
.lh-pwa-standalone .entry-content > h2,
.lh-pwa-standalone .entry-content > h3,
.lh-pwa-standalone .entry-content > figure,
.lh-pwa-standalone .entry-content > img,
.lh-pwa-standalone .entry-content > ul,
.lh-pwa-standalone .entry-content > ol {
    display: none !important;
}

/* Hide theme header, nav, footer */
.lh-pwa-standalone .site-branding,
.lh-pwa-standalone .site-branding-wrapper,
.lh-pwa-standalone .main-navigation,
.lh-pwa-standalone .responsive-menu-wrapper,
.lh-pwa-standalone header.site-header,
.lh-pwa-standalone #masthead,
.lh-pwa-standalone #site-navigation,
.lh-pwa-standalone footer.site-footer,
.lh-pwa-standalone #colophon,
.lh-pwa-standalone .site-footer,
.lh-pwa-standalone .site-info {
    display: none !important;
}

/* Chat wrapper: fixed full-screen overlay -- sits on top of everything */
.lh-pwa-standalone .lh-chat-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    /* Extend behind the iOS status bar */
    padding-top: env(safe-area-inset-top) !important;
    box-sizing: border-box !important;
}

/* Ensure the viewport meta covers the full screen including status bar */
.lh-pwa-standalone .lh-chat-header {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
}

/* PWA account nav -- My Account and Log Out links */
.lh-pwa-account-nav {
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
    color: #888;
}

/* PWA mobile: maximize messages area, push controls below fold */
@media (max-width: 600px) {
    .lh-pwa-standalone .lh-chat,
    .lh-pwa-standalone .lh-founder-wrap .lh-chat {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    .lh-pwa-standalone .lh-messages,
    .lh-pwa-standalone .lh-founder-wrap .lh-messages {
        flex: 0 0 auto !important;
        height: calc(100vh - var(--lh-msg-offset, 160px)) !important;
        height: calc(100dvh - var(--lh-msg-offset, 160px)) !important;
        min-height: 150px !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
}
.lh-pwa-account-link {
    color: var(--lh-primary) !important;
    text-decoration: none !important;
}
.lh-pwa-account-link:hover {
    text-decoration: underline !important;
}

/* PWA keyboard open: constrain to visible viewport, hide chrome, pin input at bottom */
@media (max-width: 600px) {
    .lh-pwa-standalone .lh-chat.lh-kb-open,
    .lh-pwa-standalone .lh-founder-wrap .lh-chat.lh-kb-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--lh-visual-h, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--lh-visual-h, 100dvh) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 999999 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding-top: env(safe-area-inset-top) !important;
        box-sizing: border-box !important;
    }
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-messages,
    .lh-pwa-standalone .lh-founder-wrap .lh-chat.lh-kb-open .lh-messages {
        flex: 1 1 0% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-input-wrap {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
    }
    /* Hide everything below the input when keyboard is open */
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-controls,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-disclaimer,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-updated,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-explore-section,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-role-bar,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-feedback-section,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-pwa-account-nav,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-free-counter,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-upgrade-prompt {
        display: none !important;
    }
    /* Also hide banner row above messages when keyboard is open */
    .lh-pwa-standalone .lh-kb-open ~ .lh-banner-row,
    .lh-pwa-standalone .lh-chat.lh-kb-open .lh-notif-overlay {
        display: none !important;
    }
    /* Prevent the founder-wrap from interfering */
    .lh-pwa-standalone .lh-founder-wrap:has(.lh-kb-open) {
        overflow: visible !important;
    }
}


/* ================================================================
 * VARIANT: GENERAL -- non-default overrides only
 * Colors are now driven by CSS custom properties (--lh-primary,
 * --lh-hover, --lh-accent) injected via wp_add_inline_style.
 * Rules below cover structural/design differences from the hospitals
 * variant that go beyond a simple color swap.
 * ================================================================ */

/* Brand banner -- accent color flat fill (hospitals uses teal gradient) */
.lh-variant-general .lh-brand-banner { background: var(--lh-accent); }

/* Send button -- accent for primary CTA (hospitals uses primary) */
.lh-variant-general .lh-form button[type="submit"] { background: var(--lh-accent) !important; border-color: var(--lh-accent) !important; box-shadow: 0 1px 3px rgba(166, 78, 90, 0.3) !important; /* shadow derives from accent */ }
.lh-variant-general .lh-form button[type="submit"]:hover { background: #923a46 !important; border-color: #923a46 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(166, 78, 90, 0.35) !important; /* derives from accent */ }
.lh-variant-general .lh-form button[type="submit"]:active { box-shadow: 0 1px 2px rgba(166, 78, 90, 0.25) !important; }
.lh-variant-general .lh-input-wrap.lh-send-ripple {
    animation: lh-ripple-ring-general 0.45s ease-out;
    transition: none !important;
}
@keyframes lh-ripple-ring-general {
    0%   { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 0 rgba(166, 78, 90, 0.35); }
    100% { box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 8px rgba(166, 78, 90, 0); }
}

/* Seg highlight -- flat fill (hospitals uses gradient) */
.lh-variant-general .lh-seg > .lh-seg-highlight { background: var(--lh-primary); box-shadow: 0 1px 3px rgba(75, 95, 145, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15); /* shadow derives from primary */ }

/* Smart switch chips -- outline style (hospitals uses filled) */
.lh-variant-general .lh-switch-facts-btn,
.lh-variant-general .lh-switch-general-btn { background: transparent !important; border: 1px solid var(--lh-primary) !important; color: var(--lh-primary); }
.lh-variant-general .lh-switch-facts-btn:hover,
.lh-variant-general .lh-switch-general-btn:hover { background: var(--lh-primary) !important; color: #fff !important; }

/* Prompt pack chip -- derived light background */
.lh-variant-general .lh-pack-chip { color: var(--lh-primary); border-color: var(--lh-primary) !important; background: #f0f2f7 !important; /* derives from primary */ }
.lh-variant-general .lh-pack-nav-btn:hover:not(.lh-pack-nav-disabled) { background: var(--lh-primary); }

/* History header -- adds background fill (hospitals uses text color only) */
.lh-variant-general .lh-history-header { background: var(--lh-primary); color: #fff; }

/* Free counter / demo access bar -- derived palette backgrounds */
.lh-variant-general .lh-free-counter { background: #eef0f5; color: var(--lh-primary); border-color: #b8c4dc; /* derives from primary */ }
.lh-variant-general .lh-free-counter.lh-free-owner { background: #e4e8f2; color: var(--lh-hover); /* derives from primary */ }

/* Demo banner gradient -- derived from primary */
.lh-variant-general .lh-demo-banner { background: linear-gradient(135deg, #3d4f7d, var(--lh-primary)) !important; box-shadow: 0 -2px 6px rgba(75, 95, 145, 0.25); /* derives from primary */ }

/* Demo border -- primary with derived shadows */
.lh-variant-general.lh-demo-border { border-top-color: var(--lh-primary) !important; box-shadow: 0 1px 0 0 rgba(75, 95, 145, 0.15), 0 2px 12px rgba(75, 95, 145, 0.10); /* derives from primary */ }
.lh-variant-general.lh-demo-border .lh-messages,
.lh-demo-border .lh-variant-general .lh-messages { border-left-color: rgba(75, 95, 145, 0.2); border-right-color: rgba(75, 95, 145, 0.2); /* derives from primary */ }

/* Upgrade / subscribe button gradient -- derived lighter shade */
.lh-variant-general .lh-upgrade-btn { background: linear-gradient(180deg, #6478aa 0%, var(--lh-primary) 100%); /* #6478aa derives from primary */ }
.lh-variant-general .lh-upgrade-btn:hover { background: var(--lh-hover) !important; }

/* --- Accent color: maroon for founding member badge and special highlights --- */
/* The founding member badge and admin founder reveal button stay gold/green
   from the base styles -- those are identity elements, not brand chrome.
   If you want them maroon instead, uncomment below: */
/* .lh-variant-general .lh-founder-badge { background: var(--lh-accent); } */
/* .lh-variant-general #lh-admin-anim-ba { background: var(--lh-accent); border-color: var(--lh-accent); } */

/* Dark mode overrides for general variant */
@media (prefers-color-scheme: dark) {
    .lh-variant-general .lh-seg input:checked + label { background: var(--lh-dark-primary) !important; border-color: var(--lh-dark-primary) !important; }
    .lh-variant-general .lh-bubble.lh-user { background: var(--lh-dark-primary) !important; }
    .lh-variant-general .lh-demo-banner { background: linear-gradient(135deg, #3d4f7d, var(--lh-dark-primary)) !important; }
    .lh-variant-general.lh-demo-border { border-top-color: var(--lh-dark-primary) !important; box-shadow: 0 1px 0 0 rgba(75, 95, 145, 0.2), 0 2px 12px rgba(75, 95, 145, 0.08); }
    .lh-variant-general.lh-demo-border .lh-messages { border-left-color: rgba(75, 95, 145, 0.15); border-right-color: rgba(75, 95, 145, 0.15); }
    .lh-variant-general .lh-history-header { background: var(--lh-dark-primary); }
}

/* Hide book cover icon on assistant/typing bubbles for general variant */
.lh-variant-general .lh-bubble.lh-assistant[data-mode="book"]::before,
.lh-variant-general .lh-bubble.lh-typing[data-mode="book"]::before,
.lh-variant-general .lh-bubble.lh-assistant[data-mode="general"]::before,
.lh-variant-general .lh-bubble.lh-typing[data-mode="general"]::before {
    display: none !important;
}
.lh-variant-general .lh-bubble.lh-assistant[data-mode="general"]::after,
.lh-variant-general .lh-bubble.lh-typing[data-mode="general"]::after {
    display: none !important;
}
/* Remove left padding that was making room for the icon */
.lh-variant-general .lh-bubble.lh-assistant[data-mode="book"],
.lh-variant-general .lh-bubble.lh-typing[data-mode="book"],
.lh-variant-general .lh-bubble.lh-assistant[data-mode="general"],
.lh-variant-general .lh-bubble.lh-typing[data-mode="general"] {
    padding-left: 14px !important;
}