/* === CHAT.CSS ===
 * assets/css/chat.css
 * НАЗНАЧЕНИЕ: Стили чатов Telegram Mirror - список, сообщения, ввод
 * ЭСТЕТИКА: Industrial/Utilitarian - messenger pattern
 * РАЗМЕР: ~300 строк
 */

/* ============================================
   CHAT LAYOUT (LIST + DETAIL)
   ============================================ */
.tgm-chat-layout {
    display: flex;
    height: 100%;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

/* ============================================
   CHAT LIST (LEFT PANEL)
   ============================================ */
.tgm-chat-list {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-secondary);
}

.tgm-chat-list-header {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tgm-chat-list-header .tgm-input {
    flex: 1;
    font-size: 11px;
    padding: 5px 8px;
}

.tgm-chat-list-items {
    flex: 1;
    overflow-y: auto;
}

/* Chat item in list */
.tgm-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    position: relative;
}

.tgm-chat-item:hover {
    background: var(--bg-tertiary);
}

.tgm-chat-item.active {
    background: var(--bg-tertiary);
    border-left: 2px solid var(--color-primary);
    padding-left: 8px;
}

.tgm-chat-item-body {
    flex: 1;
    min-width: 0;
}

.tgm-chat-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.tgm-chat-item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgm-chat-item-time {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.tgm-chat-item-preview {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Unread indicator */
.tgm-chat-item-unread {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    border-radius: 9px;
}

/* ============================================
   AVATAR
   ============================================ */
.tgm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--gradient-primary);
    overflow: hidden;
    text-transform: uppercase;
}

.tgm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.tgm-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.tgm-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

/* ============================================
   CHAT HEADER
   ============================================ */
.tgm-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}

.tgm-chat-header-info {
    flex: 1;
    min-width: 0;
}

.tgm-chat-header-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tgm-chat-header-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tgm-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tgm-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    display: inline-block;
}

/* ============================================
   CHAT DETAIL (RIGHT PANEL)
   ============================================ */
.tgm-chat-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary);
}

.tgm-chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ============================================
   MESSAGES CONTAINER
   ============================================ */
.tgm-messages-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

.tgm-chat-input-area {
    flex-shrink: 0;
}

/* ============================================
   MESSAGES - MESSENGER PATTERN
   ============================================ */
.tgm-msg {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    align-self: flex-start;
}

.tgm-msg.outgoing {
    align-self: flex-end;
}

.tgm-msg-bubble {
    padding: 6px 10px;
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tgm-msg.outgoing .tgm-msg-bubble {
    background: hsla(217, 91%, 60%, 0.12);
    border-color: hsla(217, 91%, 60%, 0.2);
}

html.light-theme .tgm-msg.outgoing .tgm-msg-bubble {
    background: hsla(217, 91%, 60%, 0.08);
    border-color: hsla(217, 91%, 60%, 0.15);
}

.tgm-msg-sender {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 3px;
    letter-spacing: 0.02em;
}

.tgm-msg.outgoing .tgm-msg-sender {
    color: hsl(217, 80%, 65%);
}

.tgm-msg-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
}

.tgm-msg-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 3px;
}

.tgm-msg-time {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tgm-msg-edited {
    font-size: 9px;
    color: var(--text-muted);
    font-style: italic;
}

/* Deleted message */
.tgm-msg-deleted .tgm-msg-text {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Pinned indicator */
.tgm-msg-pinned {
    font-size: 9px;
    color: var(--color-warning);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

/* ============================================
   MESSAGE MEDIA
   ============================================ */
.tgm-msg-media {
    margin: 4px 0;
}

.tgm-media-thumb {
    max-width: 280px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}

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

.tgm-media-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-secondary);
}

.tgm-media-file svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* ============================================
   MESSAGE REACTIONS
   ============================================ */
.tgm-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tgm-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 11px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: default;
}

.tgm-reaction-count {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================
   MESSAGE ACTIONS (HOVER)
   ============================================ */
.tgm-msg-actions {
    display: none;
    position: absolute;
    top: -4px;
    right: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}

.tgm-msg-bubble:hover .tgm-msg-actions {
    display: flex;
}

.tgm-msg-action-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
}

.tgm-msg-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tgm-msg-action-btn svg {
    width: 13px;
    height: 13px;
}

/* ============================================
   CHAT INPUT
   ============================================ */
.tgm-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
}

.tgm-chat-input-attach {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}

.tgm-chat-input-attach:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.tgm-chat-input-attach svg {
    width: 16px;
    height: 16px;
}

.tgm-chat-input textarea {
    flex: 1;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    resize: none;
    min-height: 32px;
    max-height: 120px;
    outline: none;
    line-height: 1.4;
}

.tgm-chat-input textarea:focus {
    border-color: var(--color-primary);
}

.tgm-chat-input textarea::placeholder {
    color: var(--text-muted);
}

.tgm-chat-input-send {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.tgm-chat-input-send:hover {
    background: hsl(217, 91%, 55%);
}

.tgm-chat-input-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tgm-chat-input-send svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   DATE SEPARATOR
   ============================================ */
.tgm-msg-date {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    align-self: center;
}

.tgm-msg-date span {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* ============================================
   CHAT TYPE FILTERS (TOGGLE BUTTONS)
   ============================================ */
.tgm-chat-type-filters {
    display: flex;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

.tgm-filter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tgm-filter-btn svg {
    width: 12px;
    height: 12px;
}

.tgm-filter-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border-light, var(--border));
}

.tgm-filter-btn.active {
    color: var(--color-primary);
    background: hsla(217, 91%, 60%, 0.1);
    border-color: hsla(217, 91%, 60%, 0.3);
}

html.light-theme .tgm-filter-btn.active {
    background: hsla(217, 91%, 60%, 0.08);
    border-color: hsla(217, 91%, 60%, 0.25);
}

/* ============================================
   CHAT TYPE BADGE (IN LIST ITEM)
   ============================================ */
.tgm-chat-type-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    opacity: 0.5;
}

.tgm-chat-type-badge svg {
    width: 13px;
    height: 13px;
}

/* ============================================
   STAR BUTTON
   ============================================ */
.tgm-msg-star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    opacity: 0.4;
    transition: all 0.15s;
}

.tgm-msg-star-btn:hover {
    opacity: 1;
    color: var(--color-warning, #f59e0b);
}

.tgm-msg-star-btn.tgm-starred {
    opacity: 1;
    color: var(--color-warning, #f59e0b);
}

.tgm-msg-star-btn svg {
    width: 12px;
    height: 12px;
}

/* ============================================
   MESSAGE TAGS
   ============================================ */
.tgm-msg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.tgm-msg-tags .tgm-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
}

/* ============================================
   SENDER FORM (MESSAGE INPUT)
   ============================================ */
.tgm-sender-form {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    padding: 8px 10px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.tgm-sender-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.tgm-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}

.tgm-btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tgm-btn-icon svg,
.tgm-btn-icon i {
    width: 18px;
    height: 18px;
}

.tgm-sender-submit {
    color: var(--color-primary);
}

.tgm-sender-submit:hover {
    background: hsla(217, 91%, 60%, 0.15);
    color: var(--color-primary);
}

.tgm-sender-textarea {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 12px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.15s;
}

.tgm-sender-textarea:focus {
    border-color: var(--color-primary);
}

.tgm-sender-textarea::placeholder {
    color: var(--text-muted);
}

.tgm-sender-file-preview {
    padding: 0;
}

.tgm-sender-file-preview:not(:empty) {
    padding: 6px 0 0;
}

.tgm-sender-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.tgm-sender-file-info .tgm-btn-icon {
    width: 24px;
    height: 24px;
}

.tgm-sender-indicator {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0 0;
}