/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
*/

/* Compact markdown styling for assistant chat messages */
.chat-markdown {
  line-height: 1.45;
}
.chat-markdown p { margin: 0.35rem 0; }
.chat-markdown p:first-child { margin-top: 0.15rem; }
.chat-markdown p:last-child { margin-bottom: 0.15rem; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3, .chat-markdown h4 {
  margin: 0.4rem 0 0.3rem;
  line-height: 1.25;
}
.chat-markdown h1 { font-size: 1.0rem; }
.chat-markdown h2 { font-size: 0.95rem; }
.chat-markdown h3 { font-size: 0.9rem; }
.chat-markdown h4 { font-size: 0.85rem; }
.chat-markdown ul, .chat-markdown ol {
  margin: 0.3rem 0 0.4rem;
  padding-left: 1.25rem;
}
.chat-markdown li { margin: 0.2rem 0; }
.chat-markdown code { background: rgba(0,0,0,0.06); padding: 0 0.2rem; border-radius: 0.2rem; }
.chat-markdown pre { margin: 0.4rem 0; padding: 0.5rem; background: rgba(0,0,0,0.06); border-radius: 0.4rem; overflow: auto; }
.chat-markdown a { text-decoration: underline; }

/* Notes / Trix editor styling */
.notes-card trix-toolbar {
  display: none; /* hidden by default, shows on focus */
  margin-bottom: 0.5rem;
}
.notes-card:focus-within trix-toolbar { display: block; }

trix-toolbar {
  background: transparent;
  border: 0;
}
trix-toolbar .trix-button-group {
  border-color: #e5e7eb; /* zinc-200 */
  background: #f3f4f6;   /* zinc-100 for better contrast */
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
trix-toolbar .trix-button {
  border-color: transparent;
}

.trix-content {
  min-height: 220px; /* bigger note area */
  background: rgba(255, 247, 203, 0.6);
  border: 1px solid rgba(0,0,0,0.12);
}

.dark trix-toolbar .trix-button-group {
  border-color: rgba(255,255,255,0.18);
  background: rgba(24,24,27,0.6); /* zinc-900-ish with transparency */
}
.dark trix-toolbar .trix-button-group .trix-button {
  border-color: rgba(255,255,255,0.14); /* soften inner button borders */
  background: transparent;
  color: #e5e7eb; /* zinc-200 */
}
.dark trix-toolbar .trix-button-group .trix-button:not(:first-child) {
  border-left-color: rgba(255,255,255,0.12);
}
.dark trix-toolbar .trix-button:hover {
  background: rgba(255,255,255,0.06);
}
.dark trix-toolbar .trix-button.trix-active {
  background: rgba(16,185,129,0.18); /* emerald tint */
  color: #34d399;
  border-color: transparent;
}
.dark trix-toolbar .trix-button::before {
  /* Ensure icons are visible in dark mode (Trix uses masked SVGs) */
  background-color: #e5e7eb !important; /* icon color */
  opacity: 0.95;
}
.dark trix-toolbar .trix-button[disabled]::before {
  background-color: #9ca3af !important; /* zinc-400 for disabled */
  opacity: 0.7;
}
.dark trix-toolbar .trix-button--icon-attach, 
.dark trix-toolbar .trix-button--icon-undo, 
.dark trix-toolbar .trix-button--icon-redo {
  color: #d1d5db; /* zinc-300 */
}
.dark .trix-content {
  background: rgba(39, 39, 42, 0.6); /* zinc-800-ish */
  border-color: rgba(255,255,255,0.18);
}

/* Light mode fine-tuning to match dark tweaks */
trix-toolbar .trix-button-group .trix-button {
  border-color: rgba(0,0,0,0.08);
  background: transparent;
  color: #374151; /* zinc-700 for readable icons */
}
trix-toolbar .trix-button-group .trix-button[disabled] { color: #94a3b8; } /* slate-400 */
trix-toolbar .trix-button-group .trix-button:not(:first-child) {
  border-left-color: rgba(0,0,0,0.08);
}
trix-toolbar .trix-button:hover { background: rgba(0,0,0,0.06); }
trix-toolbar .trix-button.trix-active { background: rgba(16,185,129,0.14); color: #059669; border-color: transparent; }
trix-toolbar .trix-button::before { background-color: currentColor !important; } /* icons follow text color */
trix-toolbar .trix-button[disabled]::before { background-color: currentColor !important; opacity: 0.9; }

/* Notes card: yellow toolbar with white icons in light mode */
.notes-card trix-toolbar .trix-button-group {
  background: #f59e0b; /* amber-500 */
  border-color: #f59e0b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.notes-card trix-toolbar .trix-button-group .trix-button {
  color: #ffffff; /* white icons */
  border-color: rgba(255,255,255,0.18);
}
.notes-card trix-toolbar .trix-button-group .trix-button:not(:first-child) {
  border-left-color: rgba(255,255,255,0.22);
}
.notes-card trix-toolbar .trix-button:hover { background: rgba(255,255,255,0.16); }
.notes-card trix-toolbar .trix-button.trix-active { background: rgba(255,255,255,0.28); color: #ffffff; }
.notes-card trix-toolbar .trix-button::before { background-color: currentColor !important; }
.notes-card trix-toolbar .trix-button[disabled] { opacity: 0.6; }
.notes-card trix-toolbar .trix-button[disabled]::before { opacity: 0.9; }

/* Notes editor surface: slightly warmer yellow to match */
.notes-card .trix-content {
  background: #fff7d6; /* warm sticky-note */
  border-color: #fde68a; /* amber-200 */
  color: #1f2937; /* zinc-800 text */
}