/* ==========================================================================
   Головний файл стилів - імпорт модулів
   ========================================================================== */

@import url('base.css');
@import url('index.css');
@import url('category.css');
@import url('product.css');
@import url('articles.css');
@import url('article.css');
@import url('marginalia.css');
@import url('oracle.css');
/* =========================================================
   ГЛОБАЛЬНА АДАПТИВНІСТЬ КОМЕНТАРІВ (Статті + Маргіналії)
   ========================================================= */

/* 1. Контейнери та форми завжди на 100% доступної ширини */
.comments-block, .m-comments-container,
.comment-form, .m-form {
   width: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 10px; /* Акуратний відступ між елементами форми */
}

/* 2. Поля вводу (input, textarea) адаптуються під будь-який екран */
.comment-form input, .comment-form textarea,
.m-form input, .m-form textarea {
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
   font-size: 16px; /* Запобігає автоматичному зуму на iPhone (iOS) */
   padding: 10px;
   border-radius: 6px;
   border: 1px solid #cbd5e1;
   resize: vertical; /* Дозволяє тягнути textarea тільки вниз */
}

/* 3. Адаптивні блоки самих коментарів (щоб довгі слова не ламали верстку) */
.comment-bubble {
   width: 100%;
   box-sizing: border-box;
   word-wrap: break-word; /* Переносить довгі посилання/слова */
   overflow-wrap: break-word;
   background: #f8fafc;
   padding: 12px;
   border-radius: 8px;
   margin-bottom: 10px;
}

.cb-header {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap; /* Дата з'їде вниз на дуже вузьких екранах, а не вилізе за край */
   gap: 5px;
   margin-bottom: 6px;
}

/* =========================================================
   АДАПТИВНІ ЕМОДЗІ (Статичні в статтях + Випадаючі в Маргіналіях)
   ========================================================= */

/* Стандартна панель (для статей) */
.emoji-bar {
   display: flex;
   flex-wrap: wrap; /* Емодзі переносяться на новий рядок, якщо не влазять */
   gap: 6px;
   padding: 5px 0;
}

.emoji-btn {
   flex: 1 1 auto; /* Кнопки рівномірно заповнюють простір */
   min-width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   background: #f1f5f9;
   border: 1px solid transparent;
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.2s;
}

.emoji-btn:hover {
   background: #e2e8f0;
}

/* Обгортка для поля з кнопкою-тригером у Маргіналіях */
.m-emoji-wrapper {
    position: relative !important; /* База для випадаючого вікна */
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Кнопка відкриття емодзі поверх textarea */
.m-emoji-trigger {
   position: absolute;
   right: 8px;
   bottom: 12px; /* Прив'язка до низу текстового поля */
   background: none;
   border: none;
   font-size: 1.2rem;
   cursor: pointer;
   z-index: 2;
   padding: 4px;
}

/* Випадаюче вікно емодзі (Dropdown) для Маргіналій */
.m-emoji-dropdown.emoji-bar {
    position: absolute !important;
    bottom: 100% !important; /* Завжди над полем */
    top: auto !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.15) !important; /* Тінь вгору */
    padding: 8px !important;
    border-radius: 12px !important;
    z-index: 9999 !important; /* Щоб було поверх усього */
    margin-bottom: 8px; /* Відступ від textarea */
}

/* На мобільних екранах випадаюче вікно емодзі займає всю ширину */
@media (max-width: 480px) {
   .m-emoji-dropdown.emoji-bar {
      width: 100%; /* Займає 100% ширини контейнера */
      right: 0;
      left: 0;
      justify-content: center; /* Центрує емодзі */
   }
}

/* Utility class to hide elements via CSS instead of inline styles */
.is-hidden { display: none !important; }

/* Universal comment bubble (works for articles and marginalia) */
.comment-bubble {
   display: block;
   width: 100%;
   box-sizing: border-box;
   background: #fff;
   border: 1px solid #eef2ff;
   padding: 10px 12px;
   border-radius: 12px;
   margin-bottom: 10px;
}
.comment-bubble .cb-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap; /* keep name and date responsive */
}
.comment-bubble .cb-name { font-weight: 700; color: var(--color-text-main); }
.comment-bubble .cb-date { color: var(--color-text-muted); font-size: 0.85rem; }
.comment-bubble .cb-text { color: var(--color-text-main); line-height: 1.4; margin-top:6px; }