/* ======================================================================
   Tailwind-only Lexxy overrides (no daisyUI variables for bg/text)
   BUT keep toolbar buttons using daisyUI classes you already had working
   ====================================================================== */

/* ---------- helpers ---------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- layout guards ---------- */
lexxy-editor, lexxy-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
lexxy-editor { min-width: 0 !important; }
lexxy-editor img, lexxy-editor video { max-width: 100% !important; height: auto !important; }
lexxy-editor pre {
    width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; box-sizing: border-box !important;
}
/* Keep the host safe, but don't force extreme wrapping inside CE */
lexxy-editor { overflow-wrap: break-word; word-break: normal; }

/* Inside the editable region, use the conservative pair */
lexxy-editor .lexxy-editor__content[contenteditable="true"] {
    overflow-wrap: break-word;   /* prefer wrapping at word boundaries */
    word-break: normal;          /* let the browser handle CJK/long tokens */
}

/* If you ever need extra safety for ultra-long tokens:
   add only for code/pre, not for all text nodes */
lexxy-editor .lexxy-editor__content pre,
lexxy-editor .lexxy-editor__content code {
    overflow-wrap: anywhere;     /* OK here; doesn’t affect normal text backspace */
    word-break: normal;
}


/* ======================================================================
   EDITOR HOST (textarea-like)
   ====================================================================== */

/* Light */
:root[data-theme="corporate"] lexxy-editor {
    @apply bg-white text-neutral-900 border border-neutral-200 rounded-lg;
}
/* Dark */
:root[data-theme="business"] lexxy-editor {
    @apply bg-neutral-900 text-neutral-200 border border-neutral-700 rounded-lg;
}

lexxy-editor {
    overflow: hidden !important; /* clip inner corners */
    padding: 0 !important;
}

/* Focus ring */
lexxy-editor:focus-within {
    outline: 2px solid theme('colors.blue.500') !important;
    outline-offset: 0 !important;
    border-color: theme('colors.blue.500') !important;
}

/* ======================================================================
   TOOLBAR (keep your daisyUI buttons)
   ====================================================================== */
lexxy-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    overflow-x: hidden !important;
    padding: .5rem !important;
    @apply bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700;
}

lexxy-toolbar button {
    @apply btn btn-sm btn-primary btn-outline;
    flex: 0 0 auto !important;
    line-height: 1 !important;
    gap: .375rem !important;
}
lexxy-toolbar button svg {
    width: 1rem; height: 1rem;
    fill: currentColor !important; stroke: currentColor !important;
}
lexxy-toolbar button.is-active {
    @apply btn btn-sm btn-primary;
    background-color: theme('colors.blue.600') !important;
    color: white !important;
    border-color: theme('colors.blue.600') !important;
}
lexxy-toolbar button:disabled {
    opacity: .5 !important; cursor: not-allowed !important;
}

/* ======================================================================
   EDITABLE REGION
   ====================================================================== */
lexxy-editor .lexxy-editor__content[contenteditable="true"] {
    @apply bg-transparent text-inherit px-4 py-3 text-base leading-relaxed;
    min-height: 12rem !important;      /* ~8–10 lines */
    border: 0 !important; margin: 0 !important; box-shadow: none !important;
    caret-color: currentColor !important;
}

/* ensure children inherit theme text color */
lexxy-editor .lexxy-editor__content[contenteditable="true"] :where(*) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* ======================================================================
   EDITOR CONTENT STYLING (match rendered content)
   ====================================================================== */

/* Lists in editor - match rendered content */
lexxy-editor .lexxy-editor__content[contenteditable="true"] ul {
    @apply list-disc pl-6;
}

lexxy-editor .lexxy-editor__content[contenteditable="true"] ol {
    @apply list-decimal pl-6;
}

/* Links in editor - match rendered content */
lexxy-editor .lexxy-editor__content[contenteditable="true"] a {
    @apply underline;
}

:root[data-theme="corporate"] lexxy-editor .lexxy-editor__content[contenteditable="true"] a {
    @apply text-blue-600;
}

:root[data-theme="business"] lexxy-editor .lexxy-editor__content[contenteditable="true"] a {
    @apply text-blue-400;
}

/* Code blocks inside editor */
:root[data-theme="corporate"] lexxy-editor .lexxy-editor__content pre {
    @apply bg-neutral-100 border border-neutral-200 rounded-md px-3 py-2 text-sm;
}
:root[data-theme="business"] lexxy-editor .lexxy-editor__content pre {
    @apply bg-neutral-800 border border-neutral-700 rounded-md px-3 py-2 text-sm;
}
lexxy-editor .lexxy-editor__content code {
    @apply rounded px-1 text-sm;
}
:root[data-theme="corporate"] lexxy-editor .lexxy-editor__content code { @apply bg-neutral-100; }
:root[data-theme="business"]  lexxy-editor .lexxy-editor__content code { @apply bg-neutral-800; }

/* Hide attachment captions in editor */
lexxy-editor .lexxy-editor__content .attachment__caption {
    display: none !important;
}

/* Editor blockquote = same as rendered */
lexxy-editor .lexxy-editor__content blockquote {
    @apply italic my-4 py-2 pl-4 rounded-s-md;
}

/* Light */
:root[data-theme="corporate"] lexxy-editor .lexxy-editor__content blockquote {
    @apply bg-neutral-100 border-l-4 border-blue-600;
}

/* Dark */
:root[data-theme="business"] lexxy-editor .lexxy-editor__content blockquote {
    @apply bg-neutral-800 border-l-4 border-blue-400;
}

/* ======================================================================
   RENDERED CONTENT (.lexxy-content wrapper)
   ====================================================================== */
:root[data-theme="corporate"] .lexxy-content,
:root[data-theme="corporate"] .lexxy-content :where(*) {
    @apply text-neutral-900;
}
:root[data-theme="business"] .lexxy-content,
:root[data-theme="business"] .lexxy-content :where(*) {
    @apply text-neutral-200;
}

.lexxy-content a { @apply underline; }
:root[data-theme="corporate"] .lexxy-content a { @apply text-blue-600; }
:root[data-theme="business"]  .lexxy-content a { @apply text-blue-400; }

.lexxy-content img {
    @apply rounded-lg my-4 max-w-full h-auto;
}

/* Hide attachment captions (filename/size) under images */
.lexxy-content .attachment__caption {
    display: none !important;
}

.lexxy-content blockquote {
    @apply italic my-4 py-2 pl-4 rounded-s-md;
}
:root[data-theme="corporate"] .lexxy-content blockquote {
    @apply bg-neutral-100 border-l-4 border-blue-600;
}
:root[data-theme="business"]  .lexxy-content blockquote {
    @apply bg-neutral-800 border-l-4 border-blue-400;
}

.lexxy-content ul { @apply list-disc pl-6; }
.lexxy-content ol { @apply list-decimal pl-6; }

.lexxy-content pre {
    @apply rounded-md px-3 py-2 text-sm overflow-x-auto;
}
:root[data-theme="corporate"] .lexxy-content pre { @apply bg-neutral-100; }
:root[data-theme="business"]  .lexxy-content pre { @apply bg-neutral-800; }

.lexxy-content code { @apply rounded px-1 text-sm; }
:root[data-theme="corporate"] .lexxy-content code { @apply bg-neutral-100; }
:root[data-theme="business"]  .lexxy-content code { @apply bg-neutral-800; }

/* 1) Make deletion reliable on Android Chrome */
lexxy-editor .lexxy-editor__content[contenteditable="true"] {
    /* conservative wrapping for CE (Android-safe) */
    white-space: pre-wrap;            /* preserves soft breaks */
    word-break: break-word;           /* break long words if needed */
    overflow-wrap: break-word;        /* same intent; Android-friendly */
    -webkit-user-select: text;
    user-select: text;
}

/* 2) Remove the usual culprit on mobile: ancestor overflow clipping.
      We were clipping inner corners with overflow:hidden on the host.
      Turn that off on touch devices; keep the radius visually by rounding children. */
@media (pointer: coarse) {
    lexxy-editor {
        overflow: visible !important;   /* was: hidden */
    }
    /* keep the visual rounding by putting radii on children instead */
    lexxy-toolbar { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
    lexxy-editor .lexxy-editor__content[contenteditable="true"] {
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }
}

/* 3) If your toolbar is sticky, some Android builds + keyboards can glitch caret/backspace.
      Disable sticky on small screens only. */
@media (max-width: 640px) {
    lexxy-toolbar {
        position: static !important;   /* was: sticky */
        top: auto !important;
    }
}

/* 4) Ensure blockquote styling also applies while editing (you said visual match is good;
      keep it here so it can’t regress) */
lexxy-editor .lexxy-editor__content blockquote {
    @apply italic my-4 py-2 pl-4 rounded-s-md;
}
:root[data-theme="corporate"] lexxy-editor .lexxy-editor__content blockquote {
    @apply bg-neutral-100 border-l-4 border-blue-600;
}
:root[data-theme="business"] lexxy-editor .lexxy-editor__content blockquote {
    @apply bg-neutral-800 border-l-4 border-blue-400;
}

/* Android Chrome targeting */
@supports (-webkit-touch-callout: none) {
    @media (pointer: coarse) {

        /* 1) Make CE behave like a normal editable block for IME */
        lexxy-editor .lexxy-editor__content[contenteditable="true"] {
            white-space: pre-wrap;          /* friendly to IME */
            word-break: break-word;
            overflow-wrap: break-word;
            -webkit-user-select: text;
            user-select: text;
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0,0,0,0);

            /* transparent 1px border trick prevents selection glitches */
            border: 1px solid transparent !important;
            background-clip: padding-box;
            position: relative; z-index: 0; /* create a new stacking context */
        }

        /* 2) Avoid ancestor overflow/position edge cases on touch */
        lexxy-editor { overflow: visible !important; }
        lexxy-toolbar { position: static !important; top: auto !important; }

        /* keep rounded corners visually */
        lexxy-toolbar { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
        lexxy-editor .lexxy-editor__content[contenteditable="true"] {
            border-bottom-left-radius: .5rem;
            border-bottom-right-radius: .5rem;
        }
    }
}

/* page guard */
html, body { overflow-x: hidden; }