/* Основные переменные и глобальные стили */
:root {
  --Accent: #836161;
  --Clickable-Accent: #ACA862;
  --Text: #BCC0C5;
  --Description: #848484;
  --Background: #151515;
  --Background-Card: #212326;
  --Border: #2F3236;
}

html {
  height: 100%;
}

body {
  background-color: var(--Background);
  color: var(--Text);
  font-family: 'IBM Plex Mono', monospace;
}

/* Шрифты */
.font-heading {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}

.font-body {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 16px;
}

/* Лейаут */
#posts-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Dragbar */
#dragbar {
  height: 3px;
  background-color: var(--Border);
  cursor: row-resize;
  border-radius: 2px;
  flex-shrink: 0;
  margin: 5px 0;
}

/* Скроллбар */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--Description) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--Description);
  border-radius: 2px;
}

/* Элементы постов */
.post-item {
  display: flex;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  align-items: flex-start;
}

.post-item:hover {
  background-color: var(--Border);
}

.post-item.active {
  background-color: var(--Border);
}

.post-content {
  display: flex;
  gap: 8px;
  flex-grow: 1;
  min-width: 0;
  align-items: flex-start;
}

.pin-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.post-title {
  flex-grow: 1;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--Description);
  line-height: 1.4;
  text-align: left;
}

.post-date {
  flex-shrink: 0;
  color: var(--Accent);
  margin-left: 12px;
  white-space: nowrap;
  padding-top: 2px;
}

.hidden-content {
  display: none;
}

/* Переключатель языка */
.lang-switcher {
  cursor: pointer;
  transition: opacity 0.3s;
}

.lang-switcher:hover {
  opacity: 0.8;
}

/* Адаптив */
@media (max-width: 1023px) {
  main {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  aside {
    height: auto !important;
    margin-bottom: 1rem;
  }
  
  #posts-chat-container {
    height: auto !important;
    display: block !important;
  }
  
  #posts-block,
  #chat-block {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 1rem;
  }
  
  section {
    height: auto !important;
    overflow: visible !important;
  }
  
  .post-content-container {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (min-width: 1024px) {
  main {
    flex: 1;
    overflow: auto;
  }
  
  #posts-chat-container {
    height: 100%;
  }
  
  section {
    flex: 1;
    overflow: auto;
  }
}

.markdown-body {
  font-family: 'IBM Plex Mono', monospace;
  display: block;
  color: var(--Text);
  word-break: break-word;
  /* Больше не задаём white-space тут! */
}

.markdown-body p + p,
.markdown-body p + ul,
.markdown-body ul + p,
.markdown-body p + blockquote,
.markdown-body .callout + p,
.markdown-body p + .callout,
.markdown-body .callout + .callout {
  margin-top: 0.75rem; /* или сколько нужно */
}


.markdown-body p,
.markdown-body li {
  white-space: pre-line; /* ← сохраняем переносы строк */
  margin: 0; /* если нужно */
  padding: 0;
  line-height: 1.7;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0;
  padding-left: 1.25em; /* стандартный отступ */
}


/* Заголовки */
.markdown-body h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--Accent);
}

.markdown-body h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--Accent);
}

.markdown-body h3 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--Accent);
}

.markdown-body h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--Text);
}

.markdown-body h5 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--Text);
}

.markdown-body h6 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--Description);
}


.markdown-body h1[id],
.markdown-body h2[id],
.markdown-body h3[id],
.markdown-body h4[id],
.markdown-body h5[id],
.markdown-body h6[id] {
  scroll-margin-top: 6rem; /* гибкая прокрутка */
}


.markdown-body a {
  color: var(--Clickable-Accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--Clickable-Accent);
}

.markdown-body a:hover {
  text-decoration: none;
  border-bottom-style: solid;
}



/* Якорные ссылки */
.markdown-body h1:hover .anchor-link,
.markdown-body h2:hover .anchor-link,
.markdown-body h3:hover .anchor-link,
.markdown-body h4:hover .anchor-link,
.markdown-body h5:hover .anchor-link,
.markdown-body h6:hover .anchor-link {
  opacity: 1;
}

/* Лоадер */
.loader {
  border: 3px solid var(--Description);
  border-top: 3px solid var(--Accent);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Чат */
.ai-message {
  background-color: var(--Background);
  border: 1px solid var(--Border);
  padding: 10px;
  border-radius: 4px;
  color: var(--Description);
}

.user-message {
  background-color: var(--Background);
  border: 1px solid var(--Border);
  padding: 10px;
  border-radius: 4px;
  color: var(--Description);
  align-self: flex-end;
}


/* Callout */
.callout {
  border-left: 3px solid var(--Border);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 6px;
  background-color: var(--Background-Card);
  color: var(--Text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  line-height: 1.6;
}

.callout-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
  color: var(--Clickable-Accent);
}

.callout-body {
  color: var(--Text);
}

/* Типы callout'ов — под твой стиль */
.callout-info {
  border-color: #607d8b; /* тусклый синий/серый */
  background-color: color-mix(in srgb, var(--Background-Card) 92%, #607d8b);
}

.callout-warning {
  border-color: #f59e0b;
  background-color: color-mix(in srgb, var(--Background-Card) 92%, #f59e0b);
}

.callout-danger {
  border-color: #ef4444;
  background-color: color-mix(in srgb, var(--Background-Card) 92%, #ef4444);
}

.callout-success {
  border-color: #10b981;
  background-color: color-mix(in srgb, var(--Background-Card) 92%, #10b981);
}

/* Стили только для inline code внутри параграфов, list, callout и пр. */
.markdown-body p code,
.markdown-body li code,
.markdown-body td code,
.markdown-body span code {
  background-color: var(--Background);
  color: var(--Text);
  border: 1px solid var(--Border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.95em;
  font-family: 'IBM Plex Mono', monospace;
  white-space: break-spaces;
}

/* === Минималистичные блоки кода (стиль Discord) === */
.markdown-body pre {
  background-color: var(--Background)!important;
  border: 1px solid var(--Border);
  border-radius: 4px;
  padding: 0.75rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Код внутри pre */
.markdown-body pre code {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--Text);
  white-space: pre;
}

/* Убираем дополнительные отступы для inline code внутри pre */
.markdown-body pre code::before,
.markdown-body pre code::after {
  content: "";
  display: none;
}


/* Стили для ul li */
/* === Контейнер списка === */
.markdown-body ul {
  list-style: none;       /* убираем стандартные маркеры */
  margin: 0.75rem 0;      /* отступ сверху/снизу */
  padding-left: 1.5rem;   /* место под наши маркеры */
}

/* === Элемент списка === */
.markdown-body ul li {
  position: relative;
  margin-bottom: 0.5rem;          /* расстояние до следующей li */
  padding-left: 1.25rem;          /* отступ под «точку» */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;                /* совпадает с .font-body */
  line-height: 1.5;
  color: var(--Text);
}

/* Убираем отступ у последнего элемента */
.markdown-body ul li:last-child {
  margin-bottom: 0;
}

/* === Наш кастомный маркер === */
.markdown-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;                     /* примерно на середине строки */
  width: 0.4em;
  height: 0.4em;
  background-color: var(--Clickable-Accent);
  border-radius: 50%;             /* маленькая круглая точка */
}

/* === Вложенные списки === */
.markdown-body ul ul {
  margin-top: 0.5rem;             /* чуть меньше отступа сверху */
  margin-bottom: 0;               /* убираем лишний снизу */
  padding-left: 1.25rem;          /* чуть меньше отступ, чем для корневого */
}

.markdown-body ul ul li {
  margin-bottom: 0.4rem;          /* меньшее расстояние между вложенными пунктами */
  padding-left: 1rem;             /* маркеры ещё чуть левее */
}

.markdown-body ul ul li::before {
  width: 0.3em;
  height: 0.3em;
  background-color: var(--Accent); /* чуть более приглушённый цвет */
  top: 0.55em;
}


.markdown-body hr {
  border: none;
  border-top: 1px solid var(--Border);
  margin: 1rem 0;
  height: 0;
  background: none;
  opacity: 1; /* можно варьировать, если хочется слабее/сильнее */
}