/*
 * Lexxy editor and content dark mode styles.
 * The Lexxy gem provides base editor styles via the "lexxy" stylesheet.
 * These styles add dark mode support and custom content display styles.
 */

/* ==========================================================================
   Lexxy Editor Dark Mode - CSS Variables
   ========================================================================== */

/* Light mode (default) */
:root {
  --lexxy-bg: #ffffff;
  --lexxy-text: #1f2937;
  --lexxy-border: #e5e7eb;
  --lexxy-toolbar-bg: transparent;
  --lexxy-toolbar-border: transparent;
  --lexxy-button-hover: rgba(0, 0, 0, 0.05);
  --lexxy-button-active: #e5e7eb;
  --lexxy-placeholder: #9ca3af;
  --lexxy-link: #14b8a6;
  --lexxy-code-bg: #f5f5f5;
  --lexxy-blockquote-border: #d1d5db;
  --lexxy-prompt-bg: #ffffff;
  --lexxy-prompt-border: #e5e7eb;
  --lexxy-prompt-hover: #f3f4f6;
  --lexxy-prompt-selected: #e0f2fe;
}

/* Dark mode via class (Tailwind approach) */
.dark {
  --lexxy-bg: #27272a;
  --lexxy-text: #d4d4d8;
  --lexxy-border: #3f3f46;
  --lexxy-toolbar-bg: transparent;
  --lexxy-toolbar-border: transparent;
  --lexxy-button-hover: rgba(255, 255, 255, 0.08);
  --lexxy-button-active: #52525b;
  --lexxy-placeholder: #71717a;
  --lexxy-link: #2dd4bf;
  --lexxy-code-bg: #3f3f46;
  --lexxy-blockquote-border: #52525b;
  --lexxy-prompt-bg: #27272a;
  --lexxy-prompt-border: #3f3f46;
  --lexxy-prompt-hover: #3f3f46;
  --lexxy-prompt-selected: #164e63;
}

/* Dark mode via media query (system preference) */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --lexxy-bg: #27272a;
    --lexxy-text: #d4d4d8;
    --lexxy-border: #3f3f46;
    --lexxy-toolbar-bg: transparent;
    --lexxy-toolbar-border: transparent;
    --lexxy-button-hover: rgba(255, 255, 255, 0.08);
    --lexxy-button-active: #52525b;
    --lexxy-placeholder: #71717a;
    --lexxy-link: #2dd4bf;
    --lexxy-code-bg: #3f3f46;
    --lexxy-blockquote-border: #52525b;
    --lexxy-prompt-bg: #27272a;
    --lexxy-prompt-border: #3f3f46;
    --lexxy-prompt-hover: #3f3f46;
    --lexxy-prompt-selected: #164e63;
  }
}

/* ==========================================================================
   Lexxy Editor Styles
   ========================================================================== */

lexxy-editor {
  background-color: transparent !important;
  color: var(--lexxy-text);
  border-color: var(--lexxy-border);
}

lexxy-editor [data-lexxy-editor],
lexxy-editor .lexxy-editor,
lexxy-editor .ProseMirror,
lexxy-editor [contenteditable],
lexxy-editor .lexxy-content-wrapper,
lexxy-editor > div {
  background-color: transparent !important;
  color: var(--lexxy-text);
  caret-color: var(--lexxy-text);
}

/* Ensure no inner elements have light backgrounds */
lexxy-editor * {
  background-color: inherit;
}

/* Fix toolbar spacer background */
.lexxy-editor__toolbar-spacer,
lexxy-editor .lexxy-editor__toolbar-spacer {
  background-color: transparent !important;
}

lexxy-editor [data-lexxy-placeholder]::before,
lexxy-editor .lexxy-placeholder::before,
lexxy-editor [data-placeholder]::before {
  color: var(--lexxy-placeholder) !important;
}

/* Toolbar - multiple selector patterns for compatibility */
lexxy-editor [data-lexxy-toolbar],
lexxy-editor .lexxy-toolbar,
lexxy-toolbar,
.lexxy-toolbar {
  background-color: transparent !important;
  border: none !important;
}

/* Toolbar buttons */
lexxy-editor [data-lexxy-toolbar] button,
lexxy-editor .lexxy-toolbar button,
lexxy-toolbar button,
.lexxy-toolbar button,
lexxy-editor button[data-lexxy-action],
lexxy-editor .lexxy-button {
  color: var(--lexxy-text) !important;
  background-color: transparent;
}

lexxy-editor [data-lexxy-toolbar] button:hover,
lexxy-editor .lexxy-toolbar button:hover,
lexxy-toolbar button:hover,
.lexxy-toolbar button:hover,
lexxy-editor button[data-lexxy-action]:hover,
lexxy-editor .lexxy-button:hover {
  background-color: var(--lexxy-button-hover) !important;
}

lexxy-editor [data-lexxy-toolbar] button[data-active="true"],
lexxy-editor [data-lexxy-toolbar] button.active,
lexxy-editor [data-lexxy-toolbar] button[aria-pressed="true"],
lexxy-editor .lexxy-toolbar button[data-active="true"],
lexxy-editor .lexxy-toolbar button.active,
lexxy-toolbar button[data-active="true"],
lexxy-toolbar button.active,
lexxy-toolbar button[aria-pressed="true"],
.lexxy-toolbar button[data-active="true"],
.lexxy-toolbar button.active {
  background-color: var(--lexxy-button-active) !important;
}

/* Toolbar button SVG icons */
lexxy-editor [data-lexxy-toolbar] button svg,
lexxy-editor .lexxy-toolbar button svg,
lexxy-toolbar button svg,
.lexxy-toolbar button svg {
  fill: currentColor;
  stroke: currentColor;
  color: var(--lexxy-text);
}

/* Toolbar dividers/separators */
lexxy-editor [data-lexxy-toolbar] [role="separator"],
lexxy-editor .lexxy-toolbar-divider,
lexxy-toolbar [role="separator"],
.lexxy-toolbar [role="separator"] {
  background-color: var(--lexxy-toolbar-border);
}

/* Toolbar dropdowns */
lexxy-editor [data-lexxy-toolbar] [role="listbox"],
lexxy-editor [data-lexxy-toolbar] [role="menu"],
lexxy-editor .lexxy-dropdown {
  background-color: var(--lexxy-prompt-bg) !important;
  border-color: var(--lexxy-prompt-border) !important;
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-toolbar] [role="option"],
lexxy-editor [data-lexxy-toolbar] [role="menuitem"] {
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-toolbar] [role="option"]:hover,
lexxy-editor [data-lexxy-toolbar] [role="menuitem"]:hover {
  background-color: var(--lexxy-button-hover) !important;
}

/* Code blocks in editor */
lexxy-editor pre,
lexxy-editor code {
  background-color: var(--lexxy-code-bg) !important;
  color: var(--lexxy-text) !important;
}

/* Blockquotes in editor */
lexxy-editor blockquote {
  border-left-color: var(--lexxy-blockquote-border) !important;
  color: var(--lexxy-placeholder);
}

/* Headings in editor */
lexxy-editor h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.5em 0;
}

lexxy-editor h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0.5em 0;
}

lexxy-editor h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0.5em 0;
}

/* Lists in editor */
lexxy-editor ul,
lexxy-editor ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

lexxy-editor ul {
  list-style-type: disc;
}

lexxy-editor ol {
  list-style-type: decimal;
}

lexxy-editor li {
  margin: 0.25em 0;
}

/* Nested list wrapper - hide bullet on wrapper li */
lexxy-editor .lexxy-nested-listitem,
.lexxy-content .lexxy-nested-listitem {
  list-style-type: none;
}

/* Nested lists in editor */
lexxy-editor ul ul,
lexxy-editor ol ul {
  list-style-type: circle;
  margin: 0.25em 0;
}

lexxy-editor ul ul ul,
lexxy-editor ol ul ul,
lexxy-editor ul ol ul,
lexxy-editor ol ol ul {
  list-style-type: square;
}

lexxy-editor ol ol,
lexxy-editor ul ol {
  list-style-type: lower-alpha;
  margin: 0.25em 0;
}

lexxy-editor ol ol ol,
lexxy-editor ul ol ol,
lexxy-editor ol ul ol,
lexxy-editor ul ul ol {
  list-style-type: lower-roman;
}

/* Links in editor */
lexxy-editor a {
  color: var(--lexxy-link);
}

/* Link dialog/popup */
lexxy-editor [data-lexxy-link-popup],
lexxy-editor .lexxy-link-popup,
lexxy-editor [role="dialog"] {
  background-color: var(--lexxy-prompt-bg) !important;
  border-color: var(--lexxy-prompt-border) !important;
  color: var(--lexxy-text) !important;
}

lexxy-editor [data-lexxy-link-popup] input,
lexxy-editor .lexxy-link-popup input {
  background-color: var(--lexxy-bg) !important;
  border-color: var(--lexxy-border) !important;
  color: var(--lexxy-text) !important;
}

/* ==========================================================================
   Lexxy Prompt (Mentions) Dark Mode
   ========================================================================== */

lexxy-prompt {
  --lexxy-prompt-background: var(--lexxy-prompt-bg);
  --lexxy-prompt-border-color: var(--lexxy-prompt-border);
  --lexxy-prompt-text: var(--lexxy-text);
}

[data-lexxy-prompt-menu] {
  background-color: var(--lexxy-prompt-bg);
  border-color: var(--lexxy-prompt-border);
  color: var(--lexxy-text);
}

[data-lexxy-prompt-menu] [data-lexxy-prompt-item]:hover,
[data-lexxy-prompt-menu] [data-lexxy-prompt-item][data-selected="true"] {
  background-color: var(--lexxy-prompt-hover);
}

lexxy-prompt-item {
  color: var(--lexxy-text);
}

/* ==========================================================================
   Lexxy Content Display Styles
   ========================================================================== */

.lexxy-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
  color: var(--lexxy-text);
}

.lexxy-content * {
  box-sizing: border-box;
}

.lexxy-content h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.5em 0;
}

.lexxy-content h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0.5em 0;
}

.lexxy-content h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 0.5em 0;
}

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

.lexxy-content blockquote {
  border-left: 3px solid var(--lexxy-blockquote-border);
  margin-left: 0.3em;
  padding-left: 0.6em;
  color: var(--lexxy-placeholder);
}

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

.lexxy-content ul {
  list-style-type: disc;
}

.lexxy-content ol {
  list-style-type: decimal;
}

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

/* Nested lists in content */
.lexxy-content ul ul,
.lexxy-content ol ul {
  list-style-type: circle;
  margin: 0.25em 0;
}

.lexxy-content ul ul ul,
.lexxy-content ol ul ul,
.lexxy-content ul ol ul,
.lexxy-content ol ol ul {
  list-style-type: square;
}

.lexxy-content ol ol,
.lexxy-content ul ol {
  list-style-type: lower-alpha;
  margin: 0.25em 0;
}

.lexxy-content ol ol ol,
.lexxy-content ul ol ol,
.lexxy-content ol ul ol,
.lexxy-content ul ul ol {
  list-style-type: lower-roman;
}

.lexxy-content pre {
  background-color: var(--lexxy-code-bg);
  padding: 0.75em;
  border-radius: 6px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.lexxy-content code {
  background-color: var(--lexxy-code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.lexxy-content pre code {
  background-color: transparent;
  padding: 0;
}

.lexxy-content a {
  color: var(--lexxy-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lexxy-content a:hover {
  opacity: 0.8;
}

.lexxy-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Attachment styles */
.lexxy-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.lexxy-content .attachment__caption {
  text-align: center;
  font-size: 0.875em;
  color: var(--lexxy-placeholder);
  margin-top: 0.25em;
}

/* Mention styles */
.lexxy-content .mention {
  color: var(--lexxy-link);
  font-weight: 500;
}

/* Horizontal rule */
.lexxy-content hr {
  border: none;
  border-top: 1px solid var(--lexxy-border);
  margin: 1em 0;
}

/* Tables (if supported) */
.lexxy-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5em 0;
}

.lexxy-content th,
.lexxy-content td {
  border: 1px solid var(--lexxy-border);
  padding: 0.5em;
  text-align: left;
}

.lexxy-content th {
  background-color: var(--lexxy-code-bg);
  font-weight: 600;
}

/* ==========================================================================
   Toolbar Toggle - Hidden State
   ========================================================================== */

lexxy-editor.toolbar-hidden lexxy-toolbar {
  display: none !important;
}

/* ==========================================================================
   Compact Editor for Chat Forms
   ========================================================================== */

.chat-message-form lexxy-editor .ProseMirror,
.chat-message-form lexxy-editor [contenteditable] {
  min-height: 56px;
  padding: 14px 16px;
  padding-right: 80px; /* Space for send button */
}

.chat-message-form lexxy-editor {
  min-height: auto;
}

/* Remove border from lexxy editor when inside chat message form */
.chat-message-form lexxy-editor,
.chat-message-form lexxy-editor *,
.chat-message-form [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   Feed Comment Form - Borderless Editor
   ========================================================================== */

/* Remove border from lexxy editor when inside feed comment form */
.feed-comment-form lexxy-editor,
.feed-comment-form lexxy-editor *,
.feed-comment-form [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   Post Edit Form - Borderless Editor
   ========================================================================== */

/* Remove border from lexxy editor when inside post edit content area */
.post-edit-content lexxy-editor,
.post-edit-content lexxy-editor *,
.post-edit-content [data-controller="lexxy"] {
  --lexxy-border: transparent !important;
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}