/* ==========================================================================
   In-Chat — «олдскульний» стиль 2000-х у сучасній адаптивній оболонці
   ========================================================================== */

:root {
    --ic-bg: #dbe6ef;
    --ic-page: #ffffff;
    --ic-border: #a9bfd3;
    --ic-border-soft: #d3e0eb;
    --ic-text: #222;
    --ic-muted: #7a8794;
    --ic-link: #1a5aa0;
    --ic-head-from: #f5faff;
    --ic-head-to: #d9e8f5;
    --ic-head-text: #2a5885;
    --ic-green-from: #9ee15f;
    --ic-green-to: #4c9e17;
    --ic-green-border: #3f8a12;
    --ic-orange-from: #ffc05a;
    --ic-orange-to: #f07c00;
    --ic-orange-border: #cc6a00;
    --ic-mention: #fff6bf;
    --ic-radius: 3px;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--ic-bg) repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .35) 6px 7px);
    color: var(--ic-text);
    font: 13px/1.45 Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
}

a { color: var(--ic-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1:focus { outline: none; }

code {
    background: #eef3f8;
    border: 1px solid var(--ic-border-soft);
    padding: 0 3px;
    font-size: 12px;
}

/* ---------- Завантаження ---------- */

.ic-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ic-head-text);
    font-weight: bold;
}
.ic-boot img { width: 210px; height: auto; animation: ic-boot-pulse 1.6s ease-in-out infinite; }
.ic-boot h1 { margin: 0; font-size: 20px; color: #2b7cc8; }
.ic-boot p { max-width: 520px; margin: 0; padding: 0 16px; color: var(--ic-text); font-weight: normal; text-align: center; line-height: 1.5; }
.ic-boot nav { font-weight: normal; }
.ic-boot-status { color: var(--ic-muted); font-size: 12px; }
@keyframes ic-boot-pulse { 50% { transform: scale(1.04); } }

.ic-loading {
    padding: 14px;
    color: var(--ic-muted);
    text-align: center;
}

/* ---------- Сторінка ---------- */

.ic-page {
    max-width: 1000px;
    margin: 10px auto;
    background: var(--ic-page);
    border: 1px solid var(--ic-border);
    box-shadow: 0 0 12px rgba(40, 80, 120, .25);
}

.ic-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: linear-gradient(#ffffff, #eef5fb);
    border-bottom: 1px solid var(--ic-border-soft);
}

.ic-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
}

/* Логотип (img/logo.png, 210×120 з прозорим фоном) — показуємо вдвічі меншим: чітко на Retina. */
.ic-logo-img { display: block; width: 126px; height: auto; }

.ic-slogan {
    color: var(--ic-muted);
    font-style: italic;
}

.ic-userbox {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ---------- Меню ---------- */

.ic-nav {
    display: flex;
    background: linear-gradient(var(--ic-green-from), var(--ic-green-to));
    border-top: 1px solid #b8ef86;
    border-bottom: 1px solid var(--ic-green-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.ic-nav a {
    position: relative;
    padding: 8px 16px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
    border-right: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 1px 0 0 rgba(0, 0, 0, .12);
    white-space: nowrap;
    text-decoration: none !important;
}

.ic-nav a:hover { background: rgba(255, 255, 255, .18); }

.ic-nav a.active {
    background: linear-gradient(#3f8a12, #5aaa1e);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}

.ic-main { padding: 10px; }

.ic-footer {
    padding: 8px;
    text-align: center;
    color: var(--ic-muted);
    font-size: 11px;
    border-top: 1px solid var(--ic-border-soft);
    background: #f5f8fb;
}

/* ---------- Блоки ---------- */

.ic-box {
    border: 1px solid var(--ic-border);
    margin-bottom: 10px;
    background: #fff;
}

.ic-box-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: linear-gradient(var(--ic-head-from), var(--ic-head-to));
    border-bottom: 1px solid var(--ic-border);
    color: var(--ic-head-text);
    font-weight: bold;
}

.ic-head-link {
    margin-left: auto;
    font-weight: normal;
    font-size: 11px;
}

.ic-head-btn { margin-left: auto; }

.ic-box-body { padding: 8px 10px; }

.ic-narrow {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.ic-muted { color: var(--ic-muted); font-size: 11px; }
.ic-small { font-size: 11px; }
.ic-center { text-align: center; padding: 20px; }

.ic-crumbs {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--ic-muted);
}

.ic-cols {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 10px;
}

/* ---------- Кнопки та поля ---------- */

.ic-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #9a9a9a;
    border-radius: var(--ic-radius);
    background: linear-gradient(#ffffff, #dedede);
    color: #333 !important;
    font: bold 12px Verdana, Tahoma, sans-serif;
    cursor: pointer;
    text-decoration: none !important;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

.ic-btn:hover { background: linear-gradient(#ffffff, #eaeaea); }
.ic-btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.ic-btn:disabled { opacity: .55; cursor: default; }

.ic-btn-green {
    background: linear-gradient(var(--ic-green-from), var(--ic-green-to));
    border-color: var(--ic-green-border);
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.ic-btn-green:hover { background: linear-gradient(#b0ec78, #58b01f); }

.ic-btn-orange {
    background: linear-gradient(var(--ic-orange-from), var(--ic-orange-to));
    border-color: var(--ic-orange-border);
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.ic-btn-orange:hover { background: linear-gradient(#ffd07f, #ff8c10); }

.ic-btn-sm { padding: 2px 8px; font-size: 11px; }
.ic-btn-wide { display: block; width: 100%; margin-top: 6px; }

.ic-icon-btn {
    border: 1px solid transparent;
    border-radius: var(--ic-radius);
    background: none;
    padding: 2px 6px;
    font-size: 16px;
    cursor: pointer;
}
.ic-icon-btn:hover { border-color: var(--ic-border); background: #f1f6fb; }

input, textarea, select {
    font: 13px Verdana, Tahoma, sans-serif;
    padding: 4px 6px;
    border: 1px solid #9fb3c8;
    border-radius: 2px;
    background: #fff;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);
    color: var(--ic-text);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #5a9bd5;
    box-shadow: 0 0 0 2px #cfe3f6;
}

textarea { resize: vertical; }

.ic-form { display: flex; flex-direction: column; gap: 8px; }

.ic-form label, .ic-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    font-weight: bold;
    color: #4d5d6c;
}

.ic-form label input, .ic-form label textarea, .ic-form label select { width: 100%; font-weight: normal; }

.ic-hint { font-size: 11px; color: var(--ic-muted); }

/* Фото профілю: кнопка вибору файлу (сам input прихований) і «Видалити» */
.ic-avatar-upload { display: flex; gap: 6px; align-items: center; }
.ic-form .ic-avatar-upload label.ic-btn { display: inline-block; flex-direction: row; font-weight: normal; color: inherit; cursor: pointer; }
.ic-avatar-upload label.ic-btn.disabled { opacity: .55; cursor: default; pointer-events: none; }
.ic-field .ic-hint { font-weight: normal; }
.ic-tg-hint { margin-top: 8px; }

.ic-error {
    color: #b00020;
    background: #fff0f0;
    border: 1px solid #f3b7b7;
    padding: 4px 8px;
    font-size: 12px;
}
.ic-error ul { margin: 0; padding-left: 16px; }

.ic-success {
    color: #2e6b0f;
    background: #f0fbe6;
    border: 1px solid #b5e08e;
    padding: 4px 8px;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.ic-tabs { display: flex; margin-bottom: 8px; border-bottom: 1px solid var(--ic-border); }
.ic-tabs button {
    flex: 1;
    padding: 5px;
    border: 1px solid transparent;
    border-bottom: none;
    background: none;
    font: bold 12px Verdana, sans-serif;
    color: var(--ic-link);
    cursor: pointer;
    margin-bottom: -1px;
}
.ic-tabs button.active {
    border-color: var(--ic-border);
    background: #fff;
    color: var(--ic-text);
    border-radius: 3px 3px 0 0;
}

/* ---------- Користувачі ---------- */

.ic-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border: 1px solid #b9c7d4;
    border-radius: 2px;
    background: #eef3f8;
    vertical-align: middle;
}

.ic-avatar-letter {
    color: #fff;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}

.ic-nick { font-weight: bold; }

.ic-nick-btn {
    border: none;
    background: none;
    padding: 0;
    font: bold 13px Verdana, Tahoma, sans-serif;
    cursor: pointer;
}
.ic-nick-btn:hover { text-decoration: underline; }

.ic-badge-icon { font-size: 11px; margin-right: 2px; }

.ic-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    text-shadow: none;
}

.ic-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background: #4caf50;
}

/* ---------- Смуга «хто онлайн» ---------- */

.ic-strip {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid var(--ic-border);
    background: #f4f8fb;
}

.ic-strip-put {
    flex: none;
    width: 96px;
    padding: 10px 6px;
    background: linear-gradient(var(--ic-green-from), var(--ic-green-to));
    color: #fff;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.ic-strip-put b { display: block; font-size: 26px; }

.ic-strip-list {
    display: flex;
    gap: 6px;
    padding: 6px;
    overflow-x: auto;
}

.ic-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none !important;
}
.ic-strip-item .ic-avatar { border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ic-strip-item span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ic-strip-empty { align-self: center; padding: 20px; color: var(--ic-muted); }

.ic-welcome { display: flex; gap: 10px; }
.ic-links { list-style: none; margin: 6px 0 0; padding: 0; line-height: 1.9; }

/* ---------- Таблиці ---------- */

.ic-table { width: 100%; border-collapse: collapse; }

.ic-table th {
    padding: 4px 8px;
    background: #eef4f9;
    border-bottom: 1px solid var(--ic-border-soft);
    color: #4d5d6c;
    font-size: 11px;
    text-align: left;
}

.ic-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e8eef3;
    vertical-align: middle;
}

.ic-table tbody tr:nth-child(even) { background: #f9fbfd; }
.ic-table tbody tr:hover { background: #f1f7fd; }
.ic-table .num { text-align: center; width: 1%; white-space: nowrap; }

.ic-room-name, .ic-forum-title { font-weight: bold; }
.ic-folder { font-size: 15px; }
.ic-last { width: 34%; }

/* ---------- Чат ---------- */

.ic-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 170px);
    min-height: 380px;
    border: 1px solid var(--ic-border);
    background: #fff;
}

.ic-chat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: linear-gradient(var(--ic-head-from), var(--ic-head-to));
    border-bottom: 1px solid var(--ic-border);
}

.ic-chat-title {
    flex: 1;
    color: var(--ic-head-text);
    font-weight: bold;
    letter-spacing: .5px;
}

.ic-conn { width: 10px; height: 10px; border-radius: 50%; background: #bbb; }
.ic-conn.ok { background: #4caf50; box-shadow: 0 0 4px #4caf50; }
.ic-conn.wait { background: #ffb300; }
.ic-conn.off { background: #e53935; }

.ic-rooms {
    display: flex;
    gap: 2px;
    padding: 4px 6px 0;
    background: #eef4f9;
    border-bottom: 1px solid var(--ic-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.ic-rooms a {
    padding: 3px 10px;
    border: 1px solid var(--ic-border-soft);
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(#fff, #e6eef5);
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none !important;
}

.ic-rooms a.active {
    background: #fff;
    border-color: var(--ic-border);
    color: var(--ic-text);
    font-weight: bold;
    margin-bottom: -1px;
}

.ic-chat-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.ic-messages {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    overflow-wrap: anywhere;
}

.ic-msg {
    padding: 2px 4px;
    border-radius: 2px;
}
.ic-msg:hover { background: #f5f9fc; }

.ic-time {
    color: #99a4ae;
    font-size: 11px;
    margin-right: 4px;
}

.ic-msg-me { background: var(--ic-mention); }
.ic-msg-me:hover { background: #fff1a0; }

.ic-msg-system { color: #8a96a2; font-size: 11px; font-style: italic; }
.ic-msg-action { color: #8e24aa; font-style: italic; }

.ic-mention { font-weight: bold; color: #1a5aa0; }
.ic-mention.me { background: #ffe066; padding: 0 2px; border-radius: 2px; }

.ic-smiley { font-size: 16px; line-height: 1; vertical-align: -1px; }

.ic-users {
    flex: none;
    width: 190px;
    overflow-y: auto;
    border-left: 1px solid var(--ic-border);
    background: #f7fafc;
}

.ic-users-head {
    padding: 4px 8px;
    background: #eef4f9;
    border-bottom: 1px solid var(--ic-border-soft);
    color: #4d5d6c;
    font-size: 11px;
    font-weight: bold;
}

.ic-user-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 8px;
    border: none;
    background: none;
    font: bold 12px Verdana, sans-serif;
    text-align: left;
    cursor: pointer;
}
.ic-user-row:hover { background: #e7f0f8; }

.ic-chat-input {
    padding: 6px;
    border-top: 1px solid var(--ic-border);
    background: #eef4f9;
}

.ic-chat-input form { display: flex; gap: 4px; align-items: center; }
.ic-chat-input input { flex: 1; min-width: 0; }
.ic-chat-input .ic-error { margin-bottom: 4px; }

.ic-smileys {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 4px;
    padding: 4px;
    border: 1px solid var(--ic-border);
    background: #fff;
}
.ic-smileys button {
    border: 1px solid transparent;
    background: none;
    font-size: 20px;
    padding: 2px 4px;
    cursor: pointer;
}
.ic-smileys button:hover { border-color: var(--ic-border); background: #fffbe0; }

/* Панель emoji: вкладки категорій + прокручувана сітка. */
.ic-emoji { margin-bottom: 4px; border: 1px solid var(--ic-border); background: #fff; }
.ic-emoji .ic-emoji-grid {
    margin: 0;
    border: none;
    max-height: 176px;
    overflow-y: auto;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.ic-emoji-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--ic-border-soft);
    background: linear-gradient(var(--ic-head-from), var(--ic-head-to));
}
.ic-emoji-tabs button {
    flex: none;
    min-width: 34px;
    padding: 4px 6px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: 16px "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    cursor: pointer;
}
.ic-emoji-tabs button:first-child { font: bold 12px Verdana, sans-serif; color: var(--ic-link); }
.ic-emoji-tabs button.active { border-bottom-color: var(--ic-link); background: #fff; }

/* Список дій у діалозі (короткий профіль): кнопки й посилання на всю ширину. */
.ic-menu-list button, .ic-menu-list a {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    color: var(--ic-link);
    font: 12px Verdana, sans-serif;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}
.ic-menu-list button:hover, .ic-menu-list a:hover { background: #eef5fc; }

/* ---------- Форум ---------- */

.ic-post {
    display: grid;
    grid-template-columns: 130px 1fr;
    border-bottom: 1px solid var(--ic-border-soft);
}

.ic-post-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: #f5f9fc;
    border-right: 1px solid var(--ic-border-soft);
    text-align: center;
    overflow-wrap: anywhere;
}

.ic-post-content { min-width: 0; }

.ic-post-meta {
    display: flex;
    justify-content: space-between;
    padding: 3px 10px;
    border-bottom: 1px dashed var(--ic-border-soft);
    color: var(--ic-muted);
    font-size: 11px;
}

.ic-post-text {
    padding: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ic-new-topic { border-bottom: 1px solid var(--ic-border-soft); background: #fbfdf7; }

/* ---------- Профіль ---------- */

.ic-profile-body { display: flex; gap: 16px; }

.ic-profile-photo { flex: none; width: 150px; text-align: center; }
.ic-profile-photo .ic-avatar { border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

.ic-online { color: #2e7d32; font-size: 11px; font-weight: bold; margin: 4px 0; }
.ic-offline { color: var(--ic-muted); font-size: 11px; margin: 4px 0; }

.ic-profile-info { flex: 1; min-width: 0; }
.ic-profile-nick { margin: 0 0 4px; font-size: 20px; }
.ic-profile-status { color: #6d5a00; font-style: italic; margin-bottom: 8px; }

.ic-props { border-collapse: collapse; }
.ic-props th {
    padding: 3px 12px 3px 0;
    color: #4d5d6c;
    font-size: 11px;
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
}
.ic-props td { padding: 3px 0; }

.ic-profile-about {
    margin-top: 10px;
    padding: 8px;
    border: 1px dashed var(--ic-border);
    background: #fcfdfe;
    overflow-wrap: anywhere;
}
.ic-profile-about > div { white-space: pre-wrap; }

.ic-edit-preview { display: flex; align-items: center; gap: 10px; }

.ic-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.ic-color, .ic-color-auto {
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    outline: 1px solid #b9c7d4;
    cursor: pointer;
}
.ic-color-auto { width: auto; padding: 0 6px; background: #f3f3f3; font-size: 11px; }
.ic-color.active, .ic-color-auto.active { outline: 2px solid #333; }

/* ---------- Приватні повідомлення ---------- */

.ic-pm {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 10px;
}

.ic-pm .ic-box { margin-bottom: 0; }

.ic-pm-list { overflow-y: auto; max-height: calc(100dvh - 170px); }

.ic-pm-new {
    display: flex;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--ic-border-soft);
}
.ic-pm-new input { flex: 1; min-width: 0; }

.ic-pm-conv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid #e8eef3;
    text-decoration: none !important;
    color: var(--ic-text);
}
.ic-pm-conv:hover { background: #f1f7fd; }

.ic-more-btn {
    display: block;
    width: 100%;
    padding: 6px;
    border: none;
    background: none;
    color: var(--ic-link);
    font-size: 12px;
    cursor: pointer;
}
.ic-more-btn:hover { background: #f1f7fd; }
.ic-more-btn:disabled { color: var(--ic-muted); cursor: default; }
.ic-pm-conv.active { background: #e3eef9; }

.ic-pm-conv-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ic-pm-conv-text .ic-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ic-pm-dialog {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 170px);
    min-height: 380px;
}

.ic-pm-back { display: none; font-size: 18px; text-decoration: none !important; }

.ic-pm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f7fafc;
}

.ic-bubble {
    max-width: 75%;
    padding: 5px 9px;
    border: 1px solid var(--ic-border-soft);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
.ic-bubble.mine { align-self: flex-end; background: #e9f7dc; border-color: #c2e6a2; }
.ic-bubble.theirs { align-self: flex-start; }
.ic-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ic-bubble-time { color: var(--ic-muted); font-size: 10px; text-align: right; }

/* ---------- Сповіщення ---------- */

.ic-toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid #c79200;
    background: linear-gradient(#fffbe0, #ffec99);
    color: var(--ic-text);
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .3);
    text-decoration: none !important;
    animation: ic-pop .25s ease-out;
}
.ic-toast > span { display: flex; flex-direction: column; min-width: 0; }
.ic-toast-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

@keyframes ic-pop {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ---------- Помилки Blazor ---------- */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "Сталася помилка."; }

/* ---------- Мобільні / Telegram ---------- */

@media (max-width: 760px) {
    .ic-page { margin: 0; border: none; box-shadow: none; }
    .ic-slogan { display: none; }
    .ic-logo-img { width: 84px; }
    .ic-main { padding: 6px; }
    .ic-cols { grid-template-columns: 1fr; }
    .ic-col-side { order: 2; }
    .hide-sm { display: none; }

    input, textarea, select { font-size: 16px; }

    .ic-chat { height: calc(100dvh - 120px); }
    .ic-users {
        display: none;
        position: absolute;
        top: 34px;
        right: 0;
        bottom: 48px;
        z-index: 10;
        box-shadow: -3px 0 8px rgba(0, 0, 0, .2);
    }
    .ic-chat.users-open .ic-users { display: block; }

    .ic-post { grid-template-columns: 1fr; }
    .ic-post-author {
        flex-direction: row;
        justify-content: flex-start;
        border-right: none;
        border-bottom: 1px solid var(--ic-border-soft);
    }
    .ic-post-author .ic-avatar { width: 32px !important; height: 32px !important; font-size: 16px !important; }

    .ic-profile-body { flex-direction: column; align-items: center; }
    .ic-profile-info { width: 100%; }

    .ic-pm { grid-template-columns: 1fr; }
    .ic-pm.has-dialog .ic-pm-list { display: none; }
    .ic-pm:not(.has-dialog) .ic-pm-dialog { display: none; }
    .ic-pm-back { display: inline; }
    .ic-pm-dialog { height: calc(100dvh - 120px); }
    .ic-footer { display: none; }
}

html.tg .ic-header { padding: 4px 8px; }
html.tg .ic-chat, html.tg .ic-pm-dialog { height: calc(100dvh - 104px); }

/* ---------- Ролі, друзі, модерація ---------- */

.ic-prof-btn, .ic-del-btn {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 11px;
    cursor: pointer;
    opacity: .45;
    vertical-align: 1px;
}
.ic-prof-btn:hover, .ic-del-btn:hover { opacity: 1; }
.ic-del-btn { visibility: hidden; }
.ic-msg:hover .ic-del-btn, .ic-post-meta .ic-del-btn { visibility: visible; }
@media (hover: none) { .ic-del-btn { visibility: visible; } }

/* Реплай: цитата над повідомленням і панель над полем введення. */
.ic-reply-quote {
    display: block;
    max-width: 100%;
    margin: 0 0 1px 42px;
    padding: 0 6px;
    border: none;
    border-left: 2px solid #c5d6e6;
    background: none;
    color: var(--ic-muted);
    font-size: 11px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.ic-reply-quote:hover { border-left-color: var(--ic-link); color: var(--ic-text); }
.ic-reply-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    padding: 3px 6px;
    border-left: 3px solid var(--ic-link);
    background: #eef5fc;
    font-size: 12px;
}
.ic-reply-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-flash { animation: ic-flash 1.6s ease-out; }
@keyframes ic-flash { from { background: #fff3b0; } to { background: transparent; } }

/* Лайк: без лайків — з'являється при наведенні; з лайками — завжди видно лічильник. */
.ic-like-btn {
    visibility: hidden;
    margin-left: 4px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: #b0b8c0;
    font-size: 11px;
    cursor: pointer;
}
.ic-msg:hover .ic-like-btn, .ic-like-btn.has { visibility: visible; }
@media (hover: none) { .ic-like-btn { visibility: visible; } }
.ic-like-btn.has { border-color: #f3c6cf; background: #fff5f7; color: #c2185b; }
.ic-like-btn.liked { border-color: #e91e63; background: #fde4ec; color: #e91e63; font-weight: bold; }
.ic-like-btn:not(:disabled):hover { color: #e91e63; border-color: #e91e63; }
.ic-like-btn:disabled { cursor: default; }

.ic-user-row .ic-nick-btn { font-size: 12px; }

.ic-sp-head { display: flex; align-items: center; gap: 8px; }
.ic-sp-title { flex: 1; min-width: 0; font-weight: normal; }
.ic-sp-info { padding: 6px 10px; border-bottom: 1px solid var(--ic-border-soft); }
.ic-sp-role { color: #6a1b9a; font-size: 11px; font-weight: bold; }
.ic-menu-disabled {
    display: block;
    padding: 6px 10px;
    color: var(--ic-muted);
    font-size: 12px;
    cursor: not-allowed;
}
.ic-menu-list .ic-error { margin: 4px 8px; }
.ic-menu-list button:disabled { color: var(--ic-muted); cursor: default; }

.ic-page-tabs a {
    flex: 1;
    padding: 5px;
    border: 1px solid transparent;
    border-bottom: none;
    font-weight: bold;
    text-align: center;
    margin-bottom: -1px;
    text-decoration: none !important;
}
.ic-page-tabs a.active {
    border-color: var(--ic-border);
    background: #fff;
    color: var(--ic-text);
    border-radius: 3px 3px 0 0;
}

.ic-friend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-bottom: 1px solid #e8eef3;
}
.ic-friend-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }

.ic-radio {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    font-weight: normal !important;
    font-size: 13px !important;
    color: var(--ic-text) !important;
}
.ic-radio input { width: auto !important; box-shadow: none; }

.ic-admin-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #e0c46c;
    background: #fffbea;
}

.ic-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ic-box-attention { border-color: #e0b84c; }
.ic-box-attention .ic-box-head { background: linear-gradient(#fffbe0, #ffec99); color: #6b4a00; }
.ic-short-profile .ic-error { font-size: 11px; }

/* ---------- Боти, стать, модерація, адмінка ---------- */

.ic-msg-bot {
    margin: 2px 0;
    padding: 3px 6px;
    border-left: 3px solid #80b3d6;
    background: #eef5fb;
    font-size: 12px;
}
.ic-msg-bot:hover { background: #e4eff8; }
.ic-bot-nick { font-weight: bold; }

.ic-users-group {
    display: block;
    width: 100%;
    padding: 3px 8px;
    border: none;
    border-bottom: 1px solid var(--ic-border-soft);
    background: #f1f6fa;
    font: bold 11px Verdana, sans-serif;
    text-align: left;
    cursor: pointer;
}
.ic-users-group.ic-g-male { color: #1565c0; }
.ic-users-group.ic-g-female { color: #ad1457; }
.ic-users-group.ic-g-unknown { color: #6d7a86; }

.ic-mod-panel {
    margin: 6px 8px 8px;
    padding: 6px 8px;
    border: 1px solid #e0a8a8;
    background: #fff6f6;
    font-size: 12px;
}
.ic-profile-info .ic-mod-panel { margin: 10px 0 0; }
.ic-mod-title { font-weight: bold; color: #a33; margin-bottom: 4px; }
.ic-mod-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 3px 0; }
.ic-mod-row > span { min-width: 64px; }
.ic-mod-row input { flex: 1; min-width: 120px; font-size: 12px; }
.ic-mod-active, .ic-restrictions { margin: 4px 0; padding-left: 18px; color: #a33; }
.ic-restrictions { margin-top: 10px; font-weight: bold; }
.ic-menu-list .ic-mod-panel button.ic-btn {
    display: inline-block;
    width: auto;
    padding: 1px 6px;
    color: #333 !important;
    font: bold 11px Verdana, sans-serif;
    text-align: center;
}

.ic-btn-danger {
    background: linear-gradient(#ff8a80, #d32f2f);
    border-color: #b71c1c;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.ic-menu-list .ic-mod-panel .ic-btn-danger { color: #fff !important; }

.ic-banned {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid #d32f2f;
    background: #ffebee;
    color: #b71c1c;
}

.ic-fieldset { border: 1px solid var(--ic-border-soft); padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.ic-fieldset legend { padding: 0 4px; }
.ic-pool-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ic-pool-editor { padding: 4px 0; }
.ic-disabled-row td { opacity: .5; }
.ic-nowrap { white-space: nowrap; }

/* ---------- Підтвердження email ---------- */

.ic-email-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 10px;
    padding: 7px 10px;
    border: 1px solid #e0b84c;
    background: linear-gradient(#fffbe0, #fff1b3);
    color: #5c4300;
}
.ic-email-banner-actions { display: flex; gap: 4px; }
.ic-email-banner-msg { flex-basis: 100%; font-size: 11px; }
.ic-email-state { line-height: 1.8; }
.ic-warn { color: #b26a00; font-weight: bold; }
.ic-readonly {
    padding: 6px 8px;
    border: 1px dashed #e0b84c;
    background: #fffbe8;
    color: #5c4300;
    font-size: 12px;
}


/* ---------- Пошта, шаблони листів, відновлення пароля ---------- */

.ic-forgot { display: block; margin-top: 6px; font-size: 11px; text-align: center; }

.ic-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ic-code { font: 12px/1.4 Consolas, "Courier New", monospace !important; }
.ic-preview-subject { font-weight: normal; font-size: 12px; color: var(--ic-text); margin-bottom: 4px; }
.ic-mail-preview { width: 100%; height: 340px; border: 1px solid var(--ic-border); background: #fff; }
.ic-row-buttons { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
@media (max-width: 760px) { .ic-template-grid { grid-template-columns: 1fr; } }


/* ---------- SecureBot: заборонені слова ---------- */

.ic-rule-type {
    display: inline-block;
    min-width: 44px;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}
.ic-rule-alert { background: #f0a000; }
.ic-rule-ban { background: #c62828; }
.ic-pm-new select { width: auto; }

.ic-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Адмінка: користувачі ---------- */

.ic-user-line { cursor: pointer; }
.ic-user-line.open { background: #e3eef9 !important; }
.ic-user-flags { text-align: right; }
.ic-flag {
    display: inline-block;
    margin: 1px 0 1px 3px;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    color: #fff;
}
.ic-flag-red { background: #c62828; }
.ic-flag-orange { background: #ef6c00; }
.ic-flag-gray { background: #8a96a2; }
.ic-flag-blue { background: #1e88e5; }
.ic-user-details td { background: #f7fafc; padding: 8px 12px; }
.ic-user-details .ic-mod-panel { margin: 8px 0; }
.ic-delete-box { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px; border: 1px dashed #c62828; background: #fff6f6; font-size: 12px; }
@media (max-width: 760px) { .ic-user-flags { text-align: left; } }

/* Сторінки «Правила», «Умови та GDPR» (HTML з Markdown) */
.ic-doc-box { max-width: 860px; margin: 0 auto; }
.ic-doc { font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.ic-doc h1, .ic-doc h2, .ic-doc h3 { color: #2b5a8a; margin: 16px 0 6px; line-height: 1.25; }
.ic-doc h1 { font-size: 20px; }
.ic-doc h2 { font-size: 16px; border-bottom: 1px solid #dde6ef; padding-bottom: 3px; }
.ic-doc h3 { font-size: 14px; }
.ic-doc > :first-child { margin-top: 0; }
.ic-doc p { margin: 6px 0; }
.ic-doc ul, .ic-doc ol { margin: 6px 0; padding-left: 22px; }
.ic-doc li { margin: 2px 0; }
.ic-doc code { background: #eef3f8; padding: 0 3px; border-radius: 3px; }
.ic-doc blockquote { margin: 8px 0; padding: 4px 10px; border-left: 3px solid #9cc3e6; color: #4d5d6c; background: #f5f9fc; }
.ic-doc table { border-collapse: collapse; margin: 8px 0; width: 100%; display: block; overflow-x: auto; }
.ic-doc th, .ic-doc td { border: 1px solid #d5dfe9; padding: 4px 8px; text-align: left; vertical-align: top; }
.ic-doc th { background: #eef3f8; }
.ic-doc-updated { margin-top: 14px; }
.ic-doc-preview { border: 1px solid #d5dfe9; border-radius: 3px; padding: 8px 12px; max-height: 520px; overflow: auto; background: #fff; font-weight: normal; color: #222; }
.ic-footer-links { display: block; margin-top: 3px; }
.ic-more-link { margin-top: 4px; text-align: right; }

/* Форум: кнопки керування розділом (СуперМодератор+) */
.ic-section-tools { margin-left: 6px; white-space: nowrap; }
.ic-section-tools .ic-icon-btn { font-size: 11px; padding: 0 3px; opacity: .6; }
.ic-section-tools .ic-icon-btn:hover { opacity: 1; }
.ic-form label.ic-check { flex-direction: row; align-items: center; gap: 6px; font-weight: normal; color: inherit; }
.ic-form label.ic-check input { width: auto; }

/* Кнопка «Без звуку» в шапці */
.ic-sound-btn { font-size: 15px; opacity: .75; }
.ic-sound-btn:hover { opacity: 1; }

/* Кнопка «Увійти через Telegram» (фірмовий блакитний Telegram) і роздільник «або» */
.ic-btn-tg {
    background: linear-gradient(#4fb6ec, #229ed9);
    border-color: #1c88bb;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
    text-align: center;
    text-decoration: none !important;
    box-sizing: border-box;
}
.ic-btn-tg:hover { background: linear-gradient(#64c2f2, #2aa8e3); }
.ic-or { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; color: var(--ic-muted); font-size: 11px; }
.ic-or::before, .ic-or::after { content: ""; flex: 1; border-top: 1px solid #d5dfe9; }

/* Зміна ніку в «Моя анкета» */
.ic-nick-form { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed #d5dfe9; }
.ic-nick-row { display: flex; gap: 6px; align-items: center; }
.ic-form .ic-nick-row input { flex: 1; width: auto; }
.ic-nick-form .ic-hint { font-weight: normal; }

/* Без JavaScript (пошуковики, старі браузери): короткий опис і посилання */

/* ---------- MudBlazor у стилі сайту (діалоги, таблиці адмінки, дата, підказки) ---------- */

.mud-dialog {
    border: 1px solid var(--ic-border);
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .35);
}
.mud-dialog .mud-dialog-title {
    padding: 8px 40px 8px 12px;
    background: linear-gradient(var(--ic-head-from), var(--ic-head-to));
    border-bottom: 1px solid var(--ic-border);
    color: var(--ic-head-text);
    font: bold 13px Verdana, Tahoma, sans-serif;
}
.mud-dialog .mud-dialog-content { padding: 10px 12px; font-size: 12px; }
.mud-dialog .mud-dialog-actions { padding: 6px 12px 10px; }
.ic-dialog-text { margin: 0 0 8px; }
.mud-dialog.ic-short-profile .mud-dialog-content { padding: 0 0 6px; }

.ic-mud-table { background: transparent; border-top: 1px solid var(--ic-border-soft); }
.ic-mud-table .mud-table-cell { padding: 5px 8px; font-size: 12px; border-bottom-color: var(--ic-border-soft); }
.ic-mud-table .mud-table-head .mud-table-cell {
    background: linear-gradient(var(--ic-head-from), var(--ic-head-to));
    color: var(--ic-head-text);
    font-weight: bold;
}
.ic-mud-table .mud-table-pagination { font-size: 12px; }
.ic-mud-table .mud-table-cell.num { width: 1%; }

.ic-mud-date { max-width: 220px; }
.ic-mud-date input { font-size: 13px; }

.mud-tooltip { font: 11px Verdana, Tahoma, sans-serif; }