/* Admonition Styles - Default Theme */

@layer components {

/* Base admonition styles */
.admonition {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-left: 4px solid var(--admonition-color, var(--color-primary));
  background: var(--admonition-bg, var(--color-surface));
  border-radius: 0 var(--radius) var(--radius) 0;
}

.admonition-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--admonition-color, var(--color-primary));
}

.admonition-title::before {
  content: var(--admonition-icon, "");
  font-size: 1.25em;
}

.admonition > *:last-child {
  margin-bottom: 0;
}

/* Type-specific styles - using palette CSS variables with fallbacks */
.admonition.note {
  --admonition-color: var(--admonition-note-border, #3b82f6);
  --admonition-bg: var(--admonition-note-bg, #eff6ff);
  --admonition-icon: "i";
}

.admonition.info {
  --admonition-color: var(--admonition-info-border, #3b82f6);
  --admonition-bg: var(--admonition-info-bg, #eff6ff);
  --admonition-icon: "i";
}

.admonition.tip {
  --admonition-color: var(--admonition-tip-border, #10b981);
  --admonition-bg: var(--admonition-tip-bg, #ecfdf5);
  --admonition-icon: "*";
}

.admonition.hint {
  --admonition-color: var(--admonition-hint-border, #10b981);
  --admonition-bg: var(--admonition-hint-bg, #ecfdf5);
  --admonition-icon: "*";
}

.admonition.success {
  --admonition-color: var(--admonition-success-border, #10b981);
  --admonition-bg: var(--admonition-success-bg, #ecfdf5);
  --admonition-icon: "v";
}

.admonition.warning {
  --admonition-color: var(--admonition-warn-border, #f59e0b);
  --admonition-bg: var(--admonition-warn-bg, #fffbeb);
  --admonition-icon: "!";
}

.admonition.caution {
  --admonition-color: var(--admonition-caution-border, #f59e0b);
  --admonition-bg: var(--admonition-caution-bg, #fffbeb);
  --admonition-icon: "!";
}

.admonition.important {
  --admonition-color: var(--admonition-important-border, #8b5cf6);
  --admonition-bg: var(--admonition-important-bg, #f5f3ff);
  --admonition-icon: "!";
}

.admonition.danger {
  --admonition-color: var(--admonition-danger-border, #ef4444);
  --admonition-bg: var(--admonition-danger-bg, #fef2f2);
  --admonition-icon: "!!";
}

.admonition.error {
  --admonition-color: var(--admonition-error-border, #ef4444);
  --admonition-bg: var(--admonition-error-bg, #fef2f2);
  --admonition-icon: "x";
}

.admonition.bug {
  --admonition-color: var(--admonition-bug-border, #ef4444);
  --admonition-bg: var(--admonition-bug-bg, #fef2f2);
  --admonition-icon: "@";
}

.admonition.example {
  --admonition-color: var(--admonition-example-border, #8b5cf6);
  --admonition-bg: var(--admonition-example-bg, #f5f3ff);
  --admonition-icon: ">";
}

.admonition.quote {
  --admonition-color: var(--admonition-quote-border, #6b7280);
  --admonition-bg: var(--admonition-quote-bg, #f9fafb);
  --admonition-icon: "\"";
}

.admonition.abstract {
  --admonition-color: var(--admonition-abstract-border, #06b6d4);
  --admonition-bg: var(--admonition-abstract-bg, #ecfeff);
  --admonition-icon: "#";
}

/* Aside - Sidebar/Marginal Note (Tufte-style) */
/* Asides are positioned in the margin of the article, outside the main content flow */

aside.admonition.aside {
  --admonition-color: #6b7280;
  --admonition-bg: #f9fafb;
  position: relative;
  border-left: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  width: 250px;
  padding: var(--space-3);
  margin: 0;
}

/* Right margin positioning (default, Tufte-style) */
aside.admonition.aside.aside-right {
  float: right;
  clear: right;
  margin-right: -280px; /* Push into right margin */
  margin-left: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Left margin positioning */
aside.admonition.aside.aside-left {
  float: left;
  clear: left;
  margin-left: -280px; /* Push into left margin */
  margin-right: var(--space-4);
  margin-bottom: var(--space-3);
}

/* Aside title styling */
aside.admonition.aside .admonition-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

aside.admonition.aside .admonition-title::before {
  content: none; /* No icon for asides */
}

/* Medium screens: float beside content instead of margin */
@media (max-width: 1400px) {
  aside.admonition.aside.aside-right {
    margin-right: 0;
    margin-left: var(--space-4);
  }

  aside.admonition.aside.aside-left {
    margin-left: 0;
    margin-right: var(--space-4);
  }
}

/* Small screens: full width, inline */
@media (max-width: 768px) {
  aside.admonition.aside,
  aside.admonition.aside.aside-left,
  aside.admonition.aside.aside-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: var(--space-4) 0;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  aside.admonition.aside {
    --admonition-bg: #1f2937;
  }
}

/* VSplit - Side-by-side comparison layout */
/* Parent vsplit contains child vsplits arranged in columns */

.admonition.vsplit {
  --admonition-color: var(--admonition-vsplit-border, #6b7280);
  --admonition-bg: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: var(--space-4) 0;
  border-left: none;
  background: transparent;
}

/* On larger screens, arrange child vsplits side by side */
@media (min-width: 768px) {
  .admonition.vsplit {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* VSplit title spans full width */
.admonition.vsplit > .admonition-title {
  grid-column: 1 / -1;
  margin: 0 var(--space-4) var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border, #e5e7eb);
}

/* Nested vsplits (the actual split columns) */
/* These should NOT be grids - only the parent is a grid */
.admonition.vsplit > .admonition.vsplit {
  display: block;
  margin: 0;
  padding: var(--space-4);
  border: none;
  border-top: 2px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #f9fafb);
}

/* On larger screens, use vertical divider instead of horizontal */
@media (min-width: 768px) {
  .admonition.vsplit > .admonition.vsplit {
    border-top: none;
  }

  /* First child - right border */
  .admonition.vsplit > .admonition.vsplit:first-of-type {
    border-right: 2px solid var(--color-border, #e5e7eb);
  }

  /* Last child - left border (if more than 2) */
  .admonition.vsplit > .admonition.vsplit:last-of-type {
    border-left: none;
  }
}

/* On mobile, stack with top borders */
@media (max-width: 767px) {
  .admonition.vsplit > .admonition.vsplit:first-of-type {
    border-top: none;
  }
}

/* Nested vsplit title */
.admonition.vsplit > .admonition.vsplit > .admonition-title {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* Remove icon from vsplit titles */
.admonition.vsplit .admonition-title::before {
  content: none;
}

/* Dark mode for vsplit */
@media (prefers-color-scheme: dark) {
  .admonition.vsplit > .admonition.vsplit {
    background: var(--color-surface, #1f2937);
  }
}

/* Collapsible admonitions use <details>/<summary> */
details.admonition {
  border-left: 4px solid var(--admonition-color, var(--color-primary));
}

details.admonition > summary {
  cursor: pointer;
  list-style: none;
}

details.admonition > summary::-webkit-details-marker {
  display: none;
}

details.admonition > summary::before {
  content: "\25b6";
  display: inline-block;
  margin-right: var(--space-2);
  transition: transform 0.2s;
  font-size: 0.8em;
}

details.admonition[open] > summary::before {
  transform: rotate(90deg);
}

/* Chat Admonitions - conversation flow styling */
/* !!! chat and !!! chat-reply create a back-and-forth conversation */

.admonition.chat,
.admonition.chat-reply {
  border-radius: var(--radius-lg);
  max-width: 85%;
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
}

/* Chat (incoming message) - left-aligned with left border */
.admonition.chat {
  --admonition-color: var(--admonition-chat-border, #6b7280);
  --admonition-bg: var(--admonition-chat-bg, #f3f4f6);
  border-left: 4px solid var(--admonition-color);
  border-right: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin-right: auto;
  margin-left: 0;
}

/* Chat-reply (outgoing message) - right-aligned with right border */
.admonition.chat-reply {
  --admonition-color: var(--admonition-chat-reply-border, var(--color-primary, #3b82f6));
  --admonition-bg: var(--admonition-chat-reply-bg, #dbeafe);
  border-left: none;
  border-right: 4px solid var(--admonition-color);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  margin-left: auto;
  margin-right: 0;
}

/* Chat titles (sender names) */
.admonition.chat .admonition-title,
.admonition.chat-reply .admonition-title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.admonition.chat .admonition-title {
  color: var(--admonition-chat-border, #4b5563);
}

.admonition.chat-reply .admonition-title {
  color: var(--admonition-chat-reply-border, var(--color-primary, #2563eb));
  text-align: right;
}

/* No icons for chat admonitions */
.admonition.chat .admonition-title::before,
.admonition.chat-reply .admonition-title::before {
  content: none;
}

/* Chat contact avatar + mention link in admonition title */
.chat-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
}

.chat-contact-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-contact .mention {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.chat-contact-name {
  font-weight: 600;
}

.chat-contact .mention:hover {
  text-decoration: underline;
}

/* Chat content styling */
.admonition.chat > p,
.admonition.chat-reply > p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.admonition.chat > p + p,
.admonition.chat-reply > p + p {
  margin-top: var(--space-2);
}

/* Images in chat messages */
.admonition.chat img,
.admonition.chat-reply img {
  max-width: 100%;
  border-radius: var(--radius);
  margin-top: var(--space-2);
}

/* Dark mode for chat admonitions */
@media (prefers-color-scheme: dark) {
  .admonition.chat {
    --admonition-bg: var(--admonition-chat-bg, #374151);
    --admonition-color: var(--admonition-chat-border, #9ca3af);
  }

  .admonition.chat-reply {
    --admonition-bg: var(--admonition-chat-reply-bg, #1e3a5f);
    --admonition-color: var(--admonition-chat-reply-border, #60a5fa);
  }

  .admonition.chat .admonition-title {
    color: #d1d5db;
  }

  .admonition.chat-reply .admonition-title {
    color: #93c5fd;
  }
}

/* Responsive - full width on small screens */
@media (max-width: 480px) {
  .admonition.chat,
  .admonition.chat-reply {
    max-width: 95%;
  }
}

/* Chat container */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

/* Individual message */
.chat-message {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  max-width: 85%;
}

/* Left-aligned messages */
.chat-message.chat-left {
  align-self: flex-start;
  flex-direction: row;
}

/* Right-aligned messages */
.chat-message.chat-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Avatar */
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Message bubble */
.chat-bubble {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  position: relative;
}

/* Left bubble styling */
.chat-left .chat-bubble {
  background: #e5e7eb;
  color: #1f2937;
  border-bottom-left-radius: var(--radius);
}

/* Right bubble styling */
.chat-right .chat-bubble {
  background: var(--color-primary);
  color: white;
  border-bottom-right-radius: var(--radius);
}

/* Author name */
.chat-author {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-1);
  opacity: 0.8;
}

.chat-left .chat-author {
  color: var(--color-text-muted);
}

.chat-right .chat-author {
  color: rgba(255, 255, 255, 0.8);
}

/* Message content */
.chat-content {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.chat-content p {
  margin: 0;
}

.chat-content p + p {
  margin-top: var(--space-2);
}

/* Timestamp */
.chat-timestamp {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
  opacity: 0.6;
}

.chat-left .chat-timestamp {
  color: var(--color-text-muted);
}

.chat-right .chat-timestamp {
  color: rgba(255, 255, 255, 0.7);
}

/* System messages */
.chat-message.chat-system {
  align-self: center;
  max-width: 100%;
}

.chat-system .chat-content {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: transparent;
  padding: var(--space-2) var(--space-4);
  text-align: center;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .chat-container {
    background: var(--color-surface);
  }

  .chat-left .chat-bubble {
    background: #374151;
    color: #f9fafb;
  }

  .chat-left .chat-author {
    color: #9ca3af;
  }
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .chat-message {
    max-width: 95%;
  }

  .chat-avatar {
    width: 28px;
    height: 28px;
  }
}

}