/* ======================================================================
   1. Font-face & Reset
   ====================================================================== */
@font-face{
  font-family:"Font MonoLine_Bold";
  src:url("fonts/FontMonoLine-Bold.otf") format("opentype");
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ======================================================================
   2. Базовые стили страницы
   ====================================================================== */
body{
  background:#1c1c1c;
  font-family:sans-serif;
  color:#dcddde;
  line-height:1.5;
}

/* ======================================================================
   3. Центровщик-контейнер
   ====================================================================== */
.container{
  max-width:1120px;
  margin:0 auto;
  padding:80px 20px 20px;          /* запас под фикс-хедер */
}

/* ======================================================================
   4. Site Header (fixed)
   ====================================================================== */
header.site-header{
  position:fixed;
  inset:0 0 auto 0;
  height:60px;
  background:#1c1c1c;
  z-index:2000;

  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}

.site-header__brand,
.site-header__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.site-header__logo,
.site-header__avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
}

.site-header__title{
  font-family:"Font MonoLine_Bold",sans-serif;
  font-size:1.5rem;
  color:#fff;
  text-decoration:none;
}

.site-header__nickname{
  font-family:Calibri,sans-serif;
  color:#fff;
  font-size:1rem;
  line-height:40px;
}

.site-header__login-btn,
.site-header__logout-btn{
  width:32px;
  height:32px;
  color:#fff;
  cursor:pointer;
}

/* ======================================================================
   5. Форма создания поста
   ====================================================================== */
.create-post-container{
  background:#36393f;
  border-radius:8px;
  padding:20px;
  width:100%;
  margin:20px 0;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
  margin-top: 80px;
}

.create-post-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.create-post-text{
  width:100%;
  resize:vertical;
  padding:10px;
  border-radius:4px;
  border:none;
  background:#202225;
  color:#dcddde;
  font-size:14px;
}

.create-post-text:focus{
  outline:2px solid #7289da;
  background:transparent;
}

.create-post-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.attach-btn{
  background:none;
  border:none;
  width:32px;
  height:32px;
  cursor:pointer;
}

.attach-btn img{
  width:100%;
  height:100%;
}

.file-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}

.file-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#202225;
  padding:4px 8px;
  border-radius:4px;
}

.file-type-icon{
  width:20px;
  height:20px;
  object-fit:contain;
}

.file-name{
  font-size:0.85rem;
  color:#ddd;
}

.file-remove-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}

.file-remove-btn img{
  width:16px;
  height:16px;
  object-fit:contain;
}

.textarea-wrapper{
  position:relative;
}

.textarea-wrapper.dragover{
  background:rgba(255,255,255,.05);
  border:2px dashed #7289da;
}

.drop-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.5);
  border:2px dashed #7289da;
  color:#fff;
  font-size:1.1rem;
  pointer-events:none;
  border-radius:4px;
}

.textarea-wrapper.dragover .drop-overlay{
  display:flex;
}

.create-post-submit{
  background:#7289da;
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
}

.create-post-submit:hover{
  background:#5b6eae;
}

/* ======================================================================
   6. Main content (лента постов + сайдбар)
   ====================================================================== */
.main-content{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.posts-container{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
:root{
  --post-bg: #232427;          /* как пример фона карточки */
  --separator: #3d3d3d;        /* <- линия на тон светлее */
}
/* ---------- Post card ---------- */
.post-item{
  background: var(--post-bg);
  border-radius:10px;
  padding:16px;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:transform .2s, box-shadow .2s;
}

.post-item:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,.8);
}

.post-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.post-logo{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}

.post-username{
  font-family:"Font MonoLine_Bold",sans-serif;
  font-size:14px;
  color:#fff;
}

.post-timestamp{
  margin-left:auto;
  font-size:12px;
  color:#72767d;
}

.post-content{ padding-left:8px;  font-size:14px; color:#dcddde; }

.post-media{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.post-media img{
  max-width:100%;
  border-radius:4px;
  object-fit:contain;
}

.post-media video,
.post-media audio{
  width:100%;
  margin-top:4px;
  background:#202225;
  border-radius:4px;
}

.post-reactions{
  display:flex;
  align-items:center;
  gap:6px;

  margin-bottom:12px;
  padding-bottom:10px;
  width:100%;                  /* гарантируем, что тянется на всю ширину */
  border-bottom:1px solid var(--separator);
  margin-top: 8px;
}

.reaction-btn{
  display:inline-block;
  background:none;
  border:none;
  margin:0 4px;
  cursor:pointer;
  font-size:1.2em;
  line-height:1;
}

.reaction-btn img.react-img{
  width:24px;
  height:24px;
}

.reaction-btn.reacted{ opacity:.6; }

.emoji-add-btn{
  display:inline-block;
  margin-left:8px;
  font-size:1.2em;
  line-height:1;
  color:#7289da;
  cursor:pointer;
}

/* ---------- Drop-down для поста / привилегии ---------- */
.post-dropdown,
.priv-dropdown{
  position:relative;
}

.dropdown-icon{
  width:24px;
  height:24px;
  cursor:pointer;
}

.dropdown-menu{
  position:absolute;
  top:28px;
  right:0;
  min-width:160px;
  background:#202225;
  border:1px solid #40444b;
  border-radius:4px;
  list-style:none;
  padding:4px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  display:none;
  z-index:1000;
}

.dropdown-menu li{ margin:0; }

.dropdown-menu a,
.dropdown-menu .dropdown-delete{
  display:block;
  width:100%;
  padding:8px 12px;
  font-size:14px;
  color:#dcddde;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-delete:hover{
  background:rgba(255,255,255,.1);
}

/* ======================================================================
   7. Privileges sidebar
   ====================================================================== */
.privileges-sidebar{
  flex:0 0 300px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
}

.privileges-sidebar::-webkit-scrollbar{
  width:8px;
}
.privileges-sidebar::-webkit-scrollbar-thumb{
  background:#202225;
  border-radius:4px;
}

/* карточка привилегии (коротко) */
.privilege-card{
  background:#40444b;
  padding:10px;
  border-radius:10px;
  color:#fff;
}

.privilege-card img{
  max-width:100%;
  border-radius:8px;
  margin-bottom:8px;
}

.privilege-card h4{
  margin:0 0 5px;
  font-size:16px;
}

.privilege-card p{
  margin:0;
  font-size:14px;
  color:#ccc;
}

.privilege-card .price{
  margin-top:6px;
  font-weight:700;
  color:#00ff88;
}

.donate-button,
#add-privilege-btn{
  display:block;     /* растягиваем */
  width:100%;
  text-align:center; /* ровно посередине */
  background:#7289da;
  color:#fff;
  border:none;
  padding:10px 0;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

.donate-button:hover,
#add-privilege-btn:hover{
  background:#5b6eae;
}

/* ======================================================================
   8. Контекст-меню для реакций
   ====================================================================== */
.dropdown-menu.reaction-menu{
  position:fixed;
  display:none;
  background:#202225;
  border:1px solid #40444b;
  border-radius:4px;
  min-width:160px;
  padding:4px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  z-index:2000;
  width:max-content;
}

.dropdown-menu.reaction-menu.show{ display:block; }

.dropdown-menu.reaction-menu button{
  width:auto;
  white-space:nowrap;
  background:none;
  border:none;
  padding:8px 12px;
  text-align:left;
  color:#dcddde;
  font-size:14px;
  cursor:pointer;
}

.dropdown-menu.reaction-menu button:hover{
  background:rgba(255,255,255,.1);
}

/* ======================================================================
   9. Комментарии
   ====================================================================== */
.comments-section{ margin-top:12px; }

/* форма */
.comment-form{
  display:flex;
  gap:8px;
}

.comment-form textarea{
  flex:1;
  padding:8px;
  border-radius:4px;
  border:none;
  background:#202225;
  color:#dcddde;
  font-size:14px;
  resize:vertical;
}

.comment-form button{
  background:#7289da;
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:4px;
  cursor:pointer;
}

.comments-list{
  list-style:none;
  margin-top:12px;
  padding:0;
}

/* -------- отдельный комментарий -------- */
.comment-item{
  display:flex;
  gap:10px;
  padding:10px 0;
  font-size:14px;
  color:#d0d0d0;
  align-items:flex-start;     /* аватар по верхнему краю */
}

/* аватар */
.comment-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}

/* текстовая часть */
.comment-body{
  flex:1;
  min-width:0;
}

/* meta-строка */
.comment-meta{
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.2;
  flex-wrap:wrap;
}

.comment-author{
  font-weight:600;
  color:#fff;
}

.comment-date{
  font-size:12px;
  color:#9c9c9c;
}

.reply-btn{
  background:none;
  border:none;
  font-size:12px;
  color:#c8c8c8;
  cursor:pointer;
  margin-right:8px;          /* небольшой отступ до ⋮ */
}

.reply-btn:hover{ text-decoration:underline; }

/* троеточие + меню */
.comment-options{
  margin-left:auto;          /* ← заменили margin у reply-btn */
  position:relative;
}

.options-btn{
  position:relative;
  width:22px;           /* фиксируем область клика */
  height:22px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:#c8c8c8;        /* на случай, если фолбэк-шрифт всё-таки найдётся */
}

.options-btn::before{
  content:'⋯';          /* горизонтальное многоточие — в любом шрифте есть */
  position:absolute;
  inset:0;
  display:flex;         /* выравниваем внутри области */
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  pointer-events:none;  /* кликаем по самой кнопке */
}

.options-menu{
  position:absolute;
  top:22px;
  right:0;
  background:#212121;
  border:1px solid #2d2d2d;
  border-radius:4px;
  min-width:140px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  z-index:50;
}

.options-menu button{
  width:100%;
  padding:6px 10px;
  background:none;
  border:none;
  color:#cfcfcf;
  text-align:left;
  cursor:pointer;
  font-size:13px;
}

.options-menu button:hover{
  background:#2a2a2a;
  color:#fff;
}

/* текст комментария */
.comment-text{
  margin:2px 0 0 0;
  white-space:pre-wrap;
  word-break:break-word;
}

/* блок реакций под комментом (если используешь) */
.comment-reactions{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
}

/* вложенные ответы */
.replies{
  margin: 0 0 0 44px;                     /* сдвиг вправо = 42 px аватар + 2 px зазор */
  padding-left: 12px;                     /* чуть отодвигаем текст от линии */
  list-style: none;
  border-left: 2px solid rgba(255,255,255,.08);   /* ← сама вертикальная полоска */
}

.comments-list > .comment-item:not(:last-child){
  border-bottom:1px solid #2c2c2c;
}
.reaction-menu {
  position: absolute;     /* вырываем из потока, будем ставить по координатам */
  display: none;          /* по умолчанию скрыто */
  list-style: none;
  margin: 0;
  padding: 6px 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 1000;          /* поверх всего поста */
}

.reaction-menu li {
  padding: 4px 14px;
  cursor: pointer;
}

.reaction-menu li:hover {
  background: #f5f5f5;
}

.donate-form{ margin-top:12px; }
input[type=file]{
  display:none !important;
}

.privileges-sidebar .post-media img{
  display:block;          /* убираем inline-зазоры */
  width:100%;             /* ровно по ширине карточки */
  height:auto;            /* сохраняем пропорции */
  object-fit:cover;       /* обрезать «лишнее», если пропорции гуляют */
  border:0;               /* убираем белую рамку, если не нужна */
  border-radius:8px;      /* такой же радиус, как у самой карточки */
  margin-bottom:12px;     /* небольшой отступ до кнопки */
}

/* =================== 9. Привилегированный пост ============== */

.post-locked{
  position:relative;
  overflow:hidden;
  /* ↓ подберите высоту под свой шрифт: */
  min-height:140px;            /* было мало – сделаем выше */
  /* вместо min-height можно так:
     padding-top:50px;
     padding-bottom:50px;
     (но min-height проще)                               */
}

.locked-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px 20px;
  color:#fff;
  border-radius:inherit;
  gap:8px;
}

.locked-overlay a{
  color:#00aff4;          /* тот же голубой, что в постах */
  text-decoration:none;
}

.locked-overlay a:hover{
  color:#6fc3ff;          /* чуть светлее при наведении */
  text-decoration:underline;
}

/* 3. Текст внутри, чтобы не уходил за края */
.locked-overlay p{
  margin:0;
  line-height:1.4;
  overflow-wrap:anywhere;   /* << перенос любых длинных цепочек */
}

.lock-icon{
  width:40px;
  height:40px;
  margin-bottom:12px;
  flex-shrink:0;
}

/* =================== 10. Тумблер «Привилегированный» ======== */

.privilege-toggle {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.priv-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: #dcddde;
}

.priv-switch input {
  display: none;
}

.priv-switch__track {
  width: 36px;
  height: 20px;
  background: #72767d;
  border-radius: 10px;
  margin-right: 8px;
  transition: background .2s;
}

.priv-switch__thumb {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.priv-switch input:checked + .priv-switch__track {
  background: #7289da;
}

.priv-switch input:checked ~ .priv-switch__thumb {
  transform: translateX(16px);
}

/* выпадающий список тарифов */
.priv-select {
  background: #202225;
  border: 1px solid #40444b;
  color: #dcddde;
  padding: 6px 8px;
  border-radius: 4px;
  min-width: 240px;
}

.priv-select:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* =================== 11. Галочка «Автор» ==================== */

.author-badge {
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
  color: #43b581;            /* зелёный из Discord */
  line-height: 1;
}

.post-author-footer{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:8px;
  padding-top:4px;             /* равномернее выглядит */
  border-top:1px solid var(--separator); /* можно сверху, тогда точно видно */
}
.author-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}
.author-name{
  font-size:14px;
  color:#c9ccd1;
}
/* ---------- страница редактирования ---------- */
.edit-title{
  margin-bottom:12px;
  font-size:20px;
  color:#fff;
}

.block-label{
  display:block;
  margin:12px 0 6px;
  font-size:14px;
  color:#cfcfcf;
}

/* сетка вложений */
.edit-media-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* карточка вложения */
.edit-media-item{
  position:relative;
  width:150px;
  height:150px;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
}

.media-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* чек-бокс скрываем */
.edit-media-item input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* крестик-маркер */
.remove-mark{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:14px;
  line-height:22px;
  text-align:center;
  opacity:0;
  transition:.2s;
  pointer-events:none;
}

.edit-media-item:hover .remove-mark,
.edit-media-item input:checked + .remove-mark{
  opacity:1;
  background:#e74c3c;
}

/* загрузка новых файлов */
.upload-box{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:12px;
}

.upload-btn{
  display:inline-block;
  padding:8px 14px;
  background:#40444b;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  color:#dcddde;
}

.upload-btn:hover{ background:#50545c; }

.file-counter{
  font-size:14px;
  color:#9c9c9c;
}

.form-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
}

.cancel-btn{
  background:#6c6c6c;
}

.cancel-btn:hover{
  background:#5a5a5a;
}
.donate-any-btn{
  background:#3ba55d;        /* зелёная Discord-кнопка */
}
.donate-any-btn:hover{
  background:#2e8c4c;
}
/* ссылки внутри текста поста */
.post-content a{
  color:#00aff4;           /* голубой оттенок Discord */
  text-decoration:none;    /* без подчёркивания — как в клиенте */
  transition:color .15s;
}

.post-content a:hover{
  color:#6fc3ff;           /* чуть светлее при наведении */
  text-decoration:underline;
}
/* ===== полноэкранный просмотр изображений ===== */
.fullscreen-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3000;
  cursor:zoom-out;
  animation:fadeIn .2s;
}
.fullscreen-img{
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 4px 18px rgba(0,0,0,.8);
}
@keyframes fadeIn{
  from{opacity:0} to{opacity:1}
}
.post-views{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:#72767d;
  margin-left:12px;       /* отделяем от даты */
}
.eye-icon{
  width:16px;
  height:16px;
  opacity:.7;
}
/* ⇒ PNG-иконка вместо текста */
.author-badge{
  width:24px;          /* или 18-20, если нужна крупнее */
  height: 24px;
  object-fit:contain;
  margin-left:4px;     /* прежний отступ */
  vertical-align:middle;
}