/* K4L FLOW - Custom styles beyond Tailwind */

/* Hide scrollbar on bottom nav */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe area for mobile bottom nav (notch devices) */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Smooth transitions */
* { transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms; }

/* Form focus rings */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════
   Prose styles for rendered rich text content
   ═══════════════════════════════════════════════ */
.prose h1 { font-size: 2em; font-weight: 700; margin: 0.5em 0; }
.prose h2 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0; }
.prose h3 { font-size: 1.25em; font-weight: 700; margin: 0.5em 0; }
.prose p { margin: 0.5em 0; }
.prose ul, .prose ol { margin: 0.5em 0; padding-left: 1.5em; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { display: list-item; margin: 0.25em 0; }
.prose a { color: #3b82f6; text-decoration: underline; }
.prose a:hover { color: #2563eb; }
.prose blockquote { border-left: 4px solid #d1d5db; padding-left: 1em; margin: 0.5em 0; color: #6b7280; font-style: italic; }
.prose hr { border: none; border-top: 2px solid #e5e7eb; margin: 1em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; }

/* Dark mode prose */
.dark .prose h1, .dark .prose h2, .dark .prose h3 { color: #f3f4f6; }
.dark .prose p, .dark .prose li { color: #d1d5db; }
.dark .prose a { color: #60a5fa; }
.dark .prose a:hover { color: #93c5fd; }
.dark .prose blockquote { border-left-color: #4b5563; color: #9ca3af; }
.dark .prose hr { border-top-color: #374151; }

/* Definition tooltips in rendered content */
.prose .editor-definition {
    text-decoration: underline dotted #2563eb;
    text-underline-offset: 3px;
    cursor: help;
    position: relative;
}
.dark .prose .editor-definition { text-decoration-color: #60a5fa; }
.prose .editor-definition:hover::after {
    content: attr(data-definition);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    max-width: 300px;
    white-space: normal;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 1;
}
.prose .editor-definition:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    z-index: 50;
    pointer-events: none;
}

/* Anchor links in rendered content */
.prose .editor-anchor-link {
    color: #d97706;
    text-decoration: underline dashed #d97706;
    text-underline-offset: 3px;
}
.dark .prose .editor-anchor-link { color: #fbbf24; text-decoration-color: #fbbf24; }
.prose .editor-anchor { scroll-margin-top: 1em; }

/* Anchor highlight flash */
@keyframes anchor-flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(251, 191, 36, 0.3); }
}
.anchor-highlight { animation: anchor-flash 1.5s ease-in-out; }

/* RTE drag-over feedback */
.rte-dragover {
    outline: 2px dashed #ef4444 !important;
    outline-offset: -2px;
    background-color: rgba(239, 68, 68, 0.05) !important;
}
.dark .rte-dragover {
    background-color: rgba(239, 68, 68, 0.1) !important;
}