/* Unvarnished Chat Widget Styles */

/* Widget Container */
.unvarnished-chat-widget {
    position: fixed;
    z-index: 10000;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        Cantarell, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #333 !important;
    box-sizing: border-box;
    pointer-events: none; /* Allow clicks to pass through container */
}

/* Force font inheritance for all chat elements */
.unvarnished-chat-widget,
.unvarnished-chat-widget * {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        Cantarell, sans-serif !important;
}

/* Reset CSS custom properties that might override fonts */
.unvarnished-chat-widget {
    --font-size-base: 14px;
    --font-size-1: 14px;
    --font-size-2: 14px;
    --font-size-3: 14px;
    --font-size-4: 14px;
    --font-size-5: 14px;
    --font-size-6: 14px;
}

/* Explicitly set font sizes on all text elements */
.unvarnished-chat-widget p,
.unvarnished-chat-widget span,
.unvarnished-chat-widget div,
.unvarnished-chat-widget li,
.unvarnished-chat-widget a,
.unvarnished-chat-widget button,
.unvarnished-chat-widget input,
.unvarnished-chat-widget textarea {
    font-size: inherit !important;
}

/* Make only interactive elements clickable */
.unvarnished-chat-toggle,
.unvarnished-chat-window {
    pointer-events: auto;
}

.unvarnished-chat-widget *,
.unvarnished-chat-widget *:before,
.unvarnished-chat-widget *:after {
    box-sizing: inherit;
}

/* Widget Positions */
.unvarnished-chat-widget--bottom-right {
    bottom: 20px;
    right: 20px;
}

.unvarnished-chat-widget--bottom-left {
    bottom: 20px;
    left: 20px;
}

.unvarnished-chat-widget--top-right {
    top: 20px;
    right: 20px;
}

.unvarnished-chat-widget--top-left {
    top: 20px;
    left: 20px;
}

/* Widget Toggle Button */
.unvarnished-chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #32cbff 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.unvarnished-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.unvarnished-chat-toggle svg {
    width: 24px;
    height: 24px;
    fill: white;
    transition: opacity 0.2s ease;
}

.unvarnished-chat-toggle--close svg:first-child {
    opacity: 0;
}

.unvarnished-chat-toggle.unvarnished-chat-toggle--close svg:last-child {
    opacity: 1;
}

.unvarnished-chat-toggle svg:last-child {
    position: absolute;
    opacity: 0;
}

/* Chat Window */
.unvarnished-chat-window {
    width: 420px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e1e5e9;
    display: flex;
    flex-direction: column;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: bottom right;
    right: 0; /* Align with chat button */
}

.unvarnished-chat-widget--bottom-left .unvarnished-chat-window {
    transform-origin: bottom left;
    left: 0;
    right: auto;
}

.unvarnished-chat-widget--top-right .unvarnished-chat-window {
    transform-origin: top right;
    top: 70px;
    bottom: auto;
    right: 0;
}

.unvarnished-chat-widget--top-left .unvarnished-chat-window {
    transform-origin: top left;
    top: 70px;
    bottom: auto;
    left: 0;
    right: auto;
}

.unvarnished-chat-widget--bottom-right .unvarnished-chat-window,
.unvarnished-chat-widget--bottom-left .unvarnished-chat-window {
    bottom: 70px;
}

/* Never taller than the browser window: 70px for the toggle button plus the
   widget's own 20px offset, and 20px of air at the far edge. Short desktop
   windows (laptops, split screens, zoomed pages) otherwise push the header
   and close button off the screen. */
.unvarnished-chat-window {
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    max-width: calc(100vw - 40px);
}

.unvarnished-chat-messages {
    min-height: 0;
}

.unvarnished-chat-window--open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

/* Chat Header */
.unvarnished-chat-header {
    background: linear-gradient(135deg, #667eea 0%, #32cbff 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.unvarnished-chat-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.unvarnished-chat-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.unvarnished-chat-new,
.unvarnished-chat-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
}

.unvarnished-chat-new:hover,
.unvarnished-chat-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.unvarnished-chat-new svg,
.unvarnished-chat-close svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.unvarnished-chat-close.unvarnished-chat-toggle svg:last-child {
    position: absolute;
    opacity: 0;
}

/* Where the conversation goes: an info button in the header opens a panel
   that overlays the top of the log, so the log never moves. The header is
   the panel's positioning box and sits above the log. */
.unvarnished-chat-header {
    position: relative;
    z-index: 2;
}

.unvarnished-chat-title {
    min-width: 0;
}

.unvarnished-chat-info {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    opacity: 0.85;
    transition: opacity 0.2s ease, background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.unvarnished-chat-info:hover,
.unvarnished-chat-info[aria-expanded="true"] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.unvarnished-chat-info svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* White ring with a dark halo: visible on any header colour */
.unvarnished-chat-widget .unvarnished-chat-info:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55);
}

.unvarnished-chat-info-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: min(240px, 50vh);
    overflow-y: auto;
    padding: 12px 20px;
    background: #fff;
    color: #4b5563;
    border-top: 3px solid var(--brand-color, #667eea);
    border-bottom: 1px solid #e1e5e9;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.unvarnished-chat-info-panel[hidden] {
    display: none;
}

.unvarnished-chat-widget .unvarnished-chat-info-panel .unvarnished-chat-privacy {
    margin: 0;
    font-size: 13px !important;
    line-height: 1.5;
    font-weight: 400;
    color: inherit;
}

.unvarnished-chat-widget--dark .unvarnished-chat-info-panel {
    background: #2d3748;
    color: #e2e8f0;
    border-bottom-color: #4a5568;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
    .unvarnished-chat-info-panel {
        padding: 12px 16px;
    }
}

@media (prefers-contrast: high) {
    .unvarnished-chat-info-panel {
        background: #fff;
        color: #000;
        border-bottom: 2px solid #000;
    }
}

/* Messages Container */
.unvarnished-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unvarnished-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.unvarnished-chat-messages::-webkit-scrollbar-track {
    background: #f1f3f4;
}

.unvarnished-chat-messages::-webkit-scrollbar-thumb {
    background: #c1c7cd;
    border-radius: 3px;
}

/* Message Bubbles */
.unvarnished-message {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    animation: messageSlideIn 0.3s ease-out;
}

.unvarnished-message--user {
    background: linear-gradient(135deg, #667eea 0%, #32cbff 100%);
    color: white;
    align-self: flex-end;
    margin-left: auto;
    border-bottom-right-radius: 6px;
}

.unvarnished-message--assistant {
    background: #f1f3f4;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 6px;
    position: relative;
}

.unvarnished-message--system {
    background: #fff3cd;
    color: #856404;
    align-self: center;
    font-size: 12px;
    border-radius: 12px;
    max-width: 90%;
    text-align: center;
}

/* Progress Messages */
.unvarnished-progress {
    background: #e7f3ff;
    color: #0066cc;
    align-self: flex-start;
    font-size: 13px;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    max-width: 80%;
    padding: 12px 16px;
    position: relative;
    animation: pulseGlow 2s infinite;
}

.unvarnished-progress::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid #0066cc;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Word Animation Enhancement */
.unvarnished-message--assistant .unvarnished-message-content {
    min-height: 1em;
    display: block;
}

/* Message Content Wrapper */
.unvarnished-message-content {
    display: inline-block;
    width: 100%;
}

/* Markdown Formatting Styles */
.unvarnished-message-content h1,
.unvarnished-message-content h2,
.unvarnished-message-content h3,
.unvarnished-message-content h4,
.unvarnished-message-content h5,
.unvarnished-message-content h6 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    line-height: 1.3;
}

.unvarnished-message-content h1 {
    font-size: 1.5em;
}
.unvarnished-message-content h2 {
    font-size: 1.3em;
}
.unvarnished-message-content h3 {
    font-size: 1.15em;
}
.unvarnished-message-content h4 {
    font-size: 1.05em;
}
.unvarnished-message-content h5 {
    font-size: 0.95em;
}
.unvarnished-message-content h6 {
    font-size: 0.9em;
}

.unvarnished-message-content p {
    margin: 0.5em 0;
}

.unvarnished-message-content ul,
.unvarnished-message-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.unvarnished-message-content li {
    margin: 0.25em 0;
}

.unvarnished-message-content code {
    background: rgba(0, 0, 0, 0.08);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
}

.unvarnished-message-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5em 0;
}

.unvarnished-message-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.unvarnished-message-content blockquote {
    border-left: 3px solid #667eea;
    padding-left: 1em;
    margin: 0.5em 0;
    color: #666;
    font-style: italic;
}

.unvarnished-message-content strong {
    font-weight: 600;
}

.unvarnished-message-content em {
    font-style: italic;
}

.unvarnished-message-content a {
    color: #667eea;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.unvarnished-message-content a:hover {
    border-bottom-color: #667eea;
}

.unvarnished-message-content sup {
    font-size: 0.75em;
    vertical-align: super;
}

.unvarnished-message-content sup a {
    color: #667eea;
    font-weight: 600;
}

/* Magisterium Validation Indicator */
.unvarnished-magisterium-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
}

.unvarnished-magisterium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-align: center;
    line-height: 1;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.unvarnished-magisterium-badge.approved {
    background: #22c55e;
}

.unvarnished-magisterium-badge.modified {
    background: #f59e0b;
}

.unvarnished-magisterium-badge.prescreened {
    background: #6b7280;
    font-size: 8px;
}

.unvarnished-magisterium-indicator:hover::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    right: 0;
    background: #1f2937;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    z-index: 10;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Typing Indicator */
.unvarnished-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f1f3f4;
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    align-self: flex-start;
    max-width: 80px;
}

.unvarnished-typing-dots {
    display: flex;
    gap: 3px;
}

.unvarnished-typing-dot {
    width: 6px;
    height: 6px;
    background: #8a9ba8;
    border-radius: 50%;
    animation: typingDot 1.4s infinite;
}

.unvarnished-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.unvarnished-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Input Area */
.unvarnished-chat-input-area {
    padding: 16px 20px;
    border-top: 1px solid #e1e5e9;
    flex-shrink: 0;
}

.unvarnished-chat-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.unvarnished-chat-input {
    flex: 1;
    border: 1px solid #e1e5e9;
    border-radius: 20px;
    padding: 10px 16px;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
    line-height: 1.4;
    max-height: 100px;
    min-height: 40px;
    transition: border-color 0.2s ease;
    touch-action: manipulation; /* Prevent iOS zoom on double-tap */
    -webkit-text-size-adjust: 100%; /* Prevent text scaling */
}

.unvarnished-chat-input:focus {
    border-color: #667eea;
}

.unvarnished-chat-input::placeholder {
    color: #8a9ba8;
}

.unvarnished-chat-send {
    background: linear-gradient(135deg, #667eea 0%, #32cbff 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
    flex-shrink: 0;
}

.unvarnished-chat-send:hover:not(:disabled) {
    transform: scale(1.05);
}

.unvarnished-chat-send:disabled {
    /*opacity: 0.6;*/
    cursor: not-allowed;
}

.unvarnished-chat-send svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Error States */
.unvarnished-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
    font-size: 13px;
}

/* Loading State */
.unvarnished-loading {
    /*opacity: 0.6;*/
    pointer-events: none;
}

/* Dark Theme */
.unvarnished-chat-widget--dark .unvarnished-chat-window {
    background: #2d3748;
    border-color: #4a5568;
}

.unvarnished-chat-widget--dark .unvarnished-chat-messages {
    background: #2d3748;
}

.unvarnished-chat-widget--dark .unvarnished-message--assistant {
    background: #4a5568;
    color: #e2e8f0;
}

/* Dark mode Markdown styles */
.unvarnished-chat-widget--dark .unvarnished-message-content code {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-message-content pre {
    background: #1a202c;
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-message-content blockquote {
    border-left-color: #9f7aea;
    color: #a0aec0;
}

.unvarnished-chat-widget--dark .unvarnished-message-content a {
    color: #9f7aea;
}

.unvarnished-chat-widget--dark .unvarnished-message-content a:hover {
    border-bottom-color: #9f7aea;
}

.unvarnished-chat-widget--dark .unvarnished-progress {
    background: #2d3748;
    color: #63b3ed;
}

.unvarnished-chat-widget--dark .unvarnished-progress::after {
    border-color: #63b3ed;
    border-top-color: transparent;
}

.unvarnished-chat-widget--dark .unvarnished-magisterium-badge {
    border-color: #2d3748;
}

.unvarnished-chat-widget--dark .unvarnished-magisterium-indicator:hover::after {
    background: #e2e8f0;
    color: #1a202c;
}

.unvarnished-chat-widget--dark .unvarnished-chat-input-area {
    border-top-color: #4a5568;
}

.unvarnished-chat-widget--dark .unvarnished-chat-input {
    background: #4a5568;
    border-color: #4a5568;
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-chat-input::placeholder {
    color: #a0aec0;
}

.unvarnished-chat-widget--dark .unvarnished-typing {
    background: #4a5568;
}

.unvarnished-chat-widget--dark .unvarnished-typing-dot {
    background: #a0aec0;
}

/* Animations */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typingDot {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .unvarnished-chat-widget {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height - adjusts for keyboard */
        z-index: 10001;
        touch-action: manipulation;
    }

    .unvarnished-chat-window {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        position: static !important;
        max-height: none !important;
        max-width: none !important;
    }

    .unvarnished-chat-input {
        font-size: 16px !important; /* Ensure 16px on mobile to prevent iOS zoom */
    }

    .unvarnished-chat-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .unvarnished-chat-widget--open .unvarnished-chat-toggle {
        display: none;
    }
}

/* Print Styles */
@media print {
    .unvarnished-chat-widget {
        display: none !important;
    }
}

/* Accessibility */
.unvarnished-chat-widget button:focus {
    outline: 2px solid #32cbff;
    outline-offset: 2px;
}

.unvarnished-chat-input:focus {
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .unvarnished-chat-toggle {
        background: #000;
        border: 2px solid #fff;
    }

    .unvarnished-chat-window {
        border: 2px solid #000;
    }

    .unvarnished-message--user {
        background: #000;
        color: #fff;
    }

    .unvarnished-message--assistant {
        background: #fff;
        color: #000;
        border: 1px solid #000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .unvarnished-chat-widget *,
    .unvarnished-chat-widget *:before,
    .unvarnished-chat-widget *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Search Results Inline */
.unvarnished-search-results {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 0.9em;
}

.unvarnished-search-results-title {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
}

.unvarnished-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unvarnished-search-results-list li {
    margin-bottom: 6px;
    line-height: 1.4;
}

.unvarnished-search-result-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
    display: block;
}

.unvarnished-search-result-link:hover {
    color: #5a67d8;
}

.unvarnished-search-result-snippet {
    color: #718096;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    line-height: 1.4;
}

.unvarnished-show-more-results {
    background: var(--brand-color, #667eea);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.unvarnished-show-more-results:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

.unvarnished-show-more-results:active {
    transform: translateY(0);
}

/* Dark mode search results */
.unvarnished-chat-widget--dark .unvarnished-search-results {
    background: #2d3748;
}

.unvarnished-chat-widget--dark .unvarnished-search-results-title {
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-search-result-link {
    color: #9f7aea;
}

.unvarnished-chat-widget--dark .unvarnished-search-result-link:hover {
    color: #b794f4;
}

.unvarnished-chat-widget--dark .unvarnished-search-result-snippet {
    color: #a0aec0;
}

.unvarnished-chat-widget--dark .unvarnished-show-more-results {
    background: var(--brand-color, #9f7aea);
}

/* Church teaching sources (via Magisterium AI), under the answer. Same
   palette as the site's own related content, set apart by a rule on the left
   so the two never read as one list. */
.unvarnished-church-teaching {
    background: #f8f9fa;
    border-left: 3px solid var(--brand-color, #667eea);
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 12px;
    font-size: 0.9em;
}

.unvarnished-church-teaching-title {
    font-weight: 600;
    font-size: 12px;
    color: #4a5568;
    margin: 0 0 4px;
}

.unvarnished-church-teaching-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unvarnished-church-teaching-list li {
    margin-bottom: 4px;
    line-height: 1.4;
}

.unvarnished-church-teaching-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: color 0.2s ease;
}

.unvarnished-church-teaching-link:hover {
    color: #5a67d8;
    text-decoration: underline;
}

.unvarnished-church-teaching-link:focus-visible {
    outline: 2px solid var(--brand-color, #667eea);
    outline-offset: 2px;
    border-radius: 2px;
}

.unvarnished-church-teaching-ref {
    display: block;
    color: #718096;
    font-size: 12px;
}

.unvarnished-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.unvarnished-chat-widget--dark .unvarnished-church-teaching {
    background: #2d3748;
    border-left-color: var(--brand-color, #9f7aea);
}

.unvarnished-chat-widget--dark .unvarnished-church-teaching-title {
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-church-teaching-link {
    color: #9f7aea;
}

.unvarnished-chat-widget--dark .unvarnished-church-teaching-link:hover {
    color: #b794f4;
}

.unvarnished-chat-widget--dark .unvarnished-church-teaching-ref {
    color: #a0aec0;
}

/* Typing cursor during markdown rendering */
.unvarnished-typing-cursor {
    opacity: 0.6;
    animation: blink 1s infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 49% { opacity: 0.6; }
    50%, 100% { opacity: 0; }
}

/* Custom Confirm Dialog */
.unvarnished-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.unvarnished-confirm-dialog {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 20px;
    max-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 100000;
}

.unvarnished-confirm-message {
    margin: 0 0 16px 0;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
}

.unvarnished-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.unvarnished-confirm-cancel,
.unvarnished-confirm-ok {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    min-width: 80px;
    touch-action: manipulation;
    position: relative;
    z-index: 100001;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.unvarnished-confirm-cancel {
    background: #e5e7eb;
    color: #374151;
}

.unvarnished-confirm-cancel:hover {
    background: #d1d5db;
}

.unvarnished-confirm-ok {
    background: linear-gradient(135deg, #667eea 0%, #32cbff 100%);
    color: white;
}

.unvarnished-confirm-ok:hover {
    opacity: 0.9;
}

/* Dark mode confirm dialog */
.unvarnished-chat-widget--dark .unvarnished-confirm-dialog {
    background: #2d3748;
}

.unvarnished-chat-widget--dark .unvarnished-confirm-message {
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-confirm-cancel {
    background: #4a5568;
    color: #e2e8f0;
}

.unvarnished-chat-widget--dark .unvarnished-confirm-cancel:hover {
    background: #5a6578;
}