/* Цветовые переменные */
.tc-chat-container {
--tc-bg-app: #f0f2f5; --tc-bg-box: #ffffff; --tc-bg-header: #ffffff; --tc-bg-chat: #f0f2f5;
--tc-text-main: #333333; --tc-text-muted: #777777; --tc-border: #dddddd;
--tc-input-bg: #ffffff; --tc-msg-bg: #ffffff; --tc-msg-mine: #e1f5fe;
--tc-hover: #f9f9f9; --tc-accent: #007cba; --tc-accent-hover: #006799; --tc-danger: #d63638;
}
.tc-chat-container.tc-dark-theme {
--tc-bg-app: #121212; --tc-bg-box: #1e1e1e; --tc-bg-header: #2d2d2d; --tc-bg-chat: #121212;
--tc-text-main: #e0e0e0; --tc-text-muted: #aaaaaa; --tc-border: #444444;
--tc-input-bg: #2d2d2d; --tc-msg-bg: #383838; --tc-msg-mine: #004c70; --tc-hover: #333333;
}
/* Общий каркас */
.tc-chat-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--tc-bg-app); color: var(--tc-text-main); display: flex; justify-content: center; align-items: center; z-index: 99999; }
/* Авторизация */
.tc-auth-box { background: var(--tc-bg-box); padding: 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 400px; width: 100%; text-align: center; }
.tc-auth-header h2 { margin: 0 0 10px; font-size: 24px; color: var(--tc-text-main); }
.tc-auth-header p { color: var(--tc-text-muted); font-size: 14px; margin-bottom: 25px; }
.tc-form-group { text-align: left; margin-bottom: 15px; }
.tc-form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; color: var(--tc-text-main); }
.tc-input { width: 100%; padding: 12px; border: 1px solid var(--tc-border); border-radius: 6px; font-size: 16px; background: var(--tc-input-bg); color: var(--tc-text-main); }
select.tc-input { height: 48px; line-height: normal; padding: 10px 12px; appearance: auto; }
.tc-divider { display: flex; align-items: center; margin: 20px 0; color: var(--tc-text-muted); }
.tc-divider::before, .tc-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--tc-border); }
.tc-divider span { padding: 0 10px; font-size: 12px; text-transform: uppercase; }
.tc-btn-login { width: 100%; padding: 14px; background: var(--tc-accent); color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.tc-btn-login:hover { background: var(--tc-accent-hover); }
.tc-error-msg { color: var(--tc-danger); padding: 10px; font-size: 14px; }
/* Чат: ИСПРАВЛЕНИЕ ДЛЯ МОБИЛОК (ВМЕСТО 100VH) */
.tc-chat-fullscreen {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
background: var(--tc-bg-box);
}
.tc-chat-layout { display: flex; width: 100%; height: 100%; overflow: hidden; }
.tc-chat-main { flex: 1; display: flex; flex-direction: column; background: var(--tc-bg-chat); position: relative; min-width: 0; }
.tc-chat-header, .tc-sidebar-header { height: 65px; box-sizing: border-box; padding: 0 20px; background: var(--tc-bg-header); border-bottom: 1px solid var(--tc-border); display: flex; justify-content: space-between; align-items: center; }
.tc-chat-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
.tc-message { margin-bottom: 15px; max-width: 80%; display: flex; flex-direction: column; }
.tc-message-meta { margin-bottom: 5px; font-size: 13px; }
.tc-sender { font-weight: bold; color: var(--tc-accent); cursor: pointer; }
.tc-time { color: var(--tc-text-muted); margin-left: 10px; font-size: 11px; }
.tc-message-bubble { display: inline-block; background: var(--tc-msg-bg); color: var(--tc-text-main); padding: 10px 15px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); word-break: break-word; }
/* Вложения файлов */
.tc-file-attachment { display: inline-flex; align-items: center; gap: 8px; color: var(--tc-accent); text-decoration: none; font-weight: 500; }
.tc-file-attachment:hover { text-decoration: underline; }
.tc-file-icon { font-size: 18px; text-decoration: none !important; }
/* Тумблер */
.tc-theme-switch-wrapper { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.tc-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.tc-switch input { opacity: 0; width: 0; height: 0; }
.tc-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e5ea; transition: .4s; border-radius: 26px; }
.tc-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: #ffffff; transition: .4s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.tc-chat-container.tc-dark-theme .tc-slider { background-color: #24252b; border: 1px solid #363740; bottom: -1px; right: -1px; left: -1px; top: -1px; }
.tc-chat-container.tc-dark-theme .tc-slider:before { background-color: #8b8e9f; transform: translateX(22px); box-shadow: none; }
/* Зона ввода */
.tc-chat-layout p { margin: 0 !important; padding: 0 !important; }
.tc-chat-input-area > p, .tc-chat-header > p, .tc-sidebar-header > p { display: contents !important; }
.tc-chat-input-area {
padding: 15px; background: var(--tc-bg-box); border-top: 1px solid var(--tc-border);
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
}
.tc-icon-btn { background: none; border: none; font-size: 20px; cursor: pointer; padding: 5px; color: var(--tc-text-main); display: inline-block; flex-shrink: 0; }
.tc-emoji-wrapper { position: relative; flex-shrink: 0; }
.tc-emoji-picker { position: absolute; bottom: 100%; left: -50px; background: var(--tc-bg-box); border: 1px solid var(--tc-border); border-radius: 8px; padding: 10px; display: flex; gap: 5px; flex-wrap: wrap; width: 200px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 100; margin-bottom: 10px; }
.tc-emoji-picker span { cursor: pointer; font-size: 20px; padding: 5px; border-radius: 4px; transition: 0.2s; }
.tc-emoji-picker span:hover { background: var(--tc-hover); }
#tc-message-input {
flex: 1 1 auto; width: 100% !important; resize: none; padding: 12px;
border: 1px solid var(--tc-border); border-radius: 20px; font-family: inherit;
outline: none; max-height: 120px; overflow-y: auto; background: var(--tc-input-bg); color: var(--tc-text-main);
}
.tc-btn-send { background: var(--tc-accent); color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-weight: bold; cursor: pointer; margin-bottom: 2px; flex-shrink: 0; }
/* Боковая панель */
.tc-chat-sidebar { position: relative; width: 250px; background: var(--tc-bg-box); display: flex; flex-direction: column; transition: width 0.3s ease; border-left: 1px solid var(--tc-border); flex-shrink: 0; }
.tc-sidebar-content { width: 250px; flex: 1; display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.2s; }
.tc-chat-sidebar.collapsed { width: 0; }
.tc-chat-sidebar.collapsed .tc-sidebar-content { opacity: 0; pointer-events: none; }
.tc-sidebar-handle { position: absolute; left: -28px; top: 50%; transform: translateY(-50%); width: 28px; height: 50px; background: var(--tc-bg-box); border: 1px solid var(--tc-border); border-right: none; border-radius: 8px 0 0 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; color: var(--tc-text-muted); box-shadow: -2px 0 5px rgba(0,0,0,0.02); }
.tc-handle-icon { transition: transform 0.3s ease; }
.tc-chat-sidebar.collapsed .tc-handle-icon { transform: rotate(180deg); }
.tc-sidebar-header h3 { margin: 0; font-size: 16px; color: var(--tc-text-main); }
.tc-online-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.tc-online-item { padding: 12px 15px; border-bottom: 1px solid var(--tc-border); cursor: pointer; display: flex; align-items: center; color: var(--tc-text-main); }
.tc-online-item:hover { background: var(--tc-hover); }
.tc-status-dot { width: 8px; height: 8px; background: #4caf50; border-radius: 50%; margin-right: 10px; display: inline-block; }
.tc-admin-user { font-weight: bold; color: var(--tc-danger); }
.tc-btn-outline { background: transparent; border: 1px solid var(--tc-danger); color: var(--tc-danger); border-radius: 4px; cursor: pointer; }
/* Фикс для мобильных телефонов: прячем боковую панель по умолчанию */
@media (max-width: 768px) {
.tc-chat-sidebar { position: absolute; right: 0; height: 100%; z-index: 50; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
.tc-chat-sidebar.collapsed { width: 0; border-left: none; }
}
/* ── Кнопка выхода (только иконка) ────────────────────────────────────── */
.tc-logout-icon { padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; }
/* ── Меню пользователя ─────────────────────────────────────────────────── */
.tc-header-info { display: flex; align-items: center; gap: 8px; }
.tc-user-menu-wrapper { position: relative; }
.tc-user-menu-trigger {
background: none; border: 1px solid transparent; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; font-size: 14px; color: var(--tc-text-main);
padding: 5px 10px; border-radius: 6px;
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.tc-user-menu-trigger:hover { background: var(--tc-hover); border-color: var(--tc-border); }
.tc-user-menu-trigger.open  { background: var(--tc-hover); border-color: var(--tc-border); }
.tc-chevron { flex-shrink: 0; transition: transform 0.2s ease; }
.tc-user-menu-trigger.open .tc-chevron { transform: rotate(180deg); }
/* ── Выпадающий список ─────────────────────────────────────────────────── */
.tc-user-dropdown {
position: absolute;
top: calc(100% + 6px); left: 0;
background: var(--tc-bg-box);
border: 1px solid var(--tc-border);
border-radius: 10px;
box-shadow: 0 8px 28px rgba(0,0,0,.13);
min-width: 190px;
z-index: 10000;
overflow: hidden;
padding: 5px 0;
}
.tc-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
color: var(--tc-text-main); text-decoration: none;
font-size: 14px; width: 100%; text-align: left;
background: none; border: none; cursor: pointer;
transition: background 0.13s;
box-sizing: border-box;
}
.tc-dropdown-item:hover { background: var(--tc-hover); }
.tc-dropdown-item svg   { flex-shrink: 0; opacity: 0.7; }
/* Заблокированный пункт (PWA ещё не готов) — ТЕПЕРЬ КЛИКАБЕЛЬНЫЙ */
.tc-dropdown-item--disabled { opacity: 0.5; cursor: pointer; }
.tc-dropdown-divider {
border: none; border-top: 1px solid var(--tc-border);
margin: 4px 0;
}
/* ── Кнопка удаления сообщения ─────────────────────────────────────────── */
.tc-message-meta { position: relative; display: flex; align-items: center; gap: 4px; }
.tc-msg-delete {
background: none; border: none; cursor: pointer;
color: var(--tc-text-muted); padding: 2px 4px; border-radius: 4px;
opacity: 0; transition: opacity 0.15s, color 0.15s;
line-height: 1; display: inline-flex; align-items: center;
flex-shrink: 0; margin-left: 4px;
}
.tc-message:hover .tc-msg-delete { opacity: 1; }
.tc-msg-delete:hover { color: var(--tc-danger); }
/* ── Превью изображения в сообщении ────────────────────────────────────── */
.tc-img-attachment {
display: inline-flex; flex-direction: column; align-items: flex-start;
gap: 5px; text-decoration: none; color: var(--tc-text-main);
max-width: 220px;
}
.tc-img-thumb {
display: block; max-width: 220px; max-height: 160px;
width: auto; height: auto;
border-radius: 8px; object-fit: cover;
border: 1px solid var(--tc-border);
cursor: pointer; transition: opacity 0.15s;
}
.tc-img-thumb:hover { opacity: 0.88; }
.tc-img-name {
font-size: 11px; color: var(--tc-text-muted);
word-break: break-all; max-width: 220px;
text-align: left;
}
/* ── Системные уведомления (вход/выход) ────────────────────────────────── */
.tc-message--system {
align-self: center;
display: flex; align-items: center; gap: 8px;
margin: 6px auto;
max-width: 90%;
}
.tc-system-text {
font-size: 12px; color: var(--tc-text-muted);
background: var(--tc-hover);
border: 1px solid var(--tc-border);
border-radius: 20px;
padding: 3px 12px;
white-space: nowrap;
}
.tc-system-time {
font-size: 11px; color: var(--tc-text-muted);
flex-shrink: 0;
}