body, html {
    margin: 0; padding: 0; width: 100%; height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #99b1cb; overflow: hidden;
}
.box { display: flex; width: 100vw; height: 100dvh; background-color: #ffffff; overflow: hidden; position: relative; }
.side { width: 340px; min-width: 320px; height: 100%; display: flex; flex-direction: column; background-color: #ffffff; border-right: 1px solid #efeff1; z-index: 10; }
.side-header { padding: 16px 16px 8px 16px; display: flex; align-items: center; gap: 12px; }
.profile-info { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 10px; width: fit-content; background-color: #e4e6eb; color: #707579; }
.badge.on { background-color: #40a7e3; color: #ffffff; }
.side-header input { width: 100%; padding: 8px 12px; border: 1px solid #dfe1e5; border-radius: 8px; font-size: 14px; outline: none; box-sizing: border-box; transition: border-color 0.2s; }
.side-header input:focus { border-color: #3390ec; }
.side-actions { padding: 0 16px 12px 16px; }
.tg-btn-primary { background-color: #3390ec; color: #ffffff; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; transition: background-color 0.15s; }
.tg-btn-primary:hover { background-color: #2b7ecc; }
.tg-btn-action { width: 100%; background-color: #f4f4f5; color: #3390ec; border: none; padding: 10px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tg-btn-action:disabled { color: #a2b0c4; cursor: not-allowed; }
.dialogs-container { flex-grow: 1; overflow-y: auto; }
.list { list-style: none; padding: 0; margin: 0; }
.dialog-item { display: flex; align-items: center; padding: 10px 16px; gap: 12px; cursor: pointer; border-bottom: 1px solid #f4f4f5; transition: background-color 0.15s; }
.dialog-item:hover { background-color: #f4f4f5; }
.dialog-item.sel { background-color: #f0f7ff !important; }
.dialog-avatar { width: 46px; height: 46px; border-radius: 50%; background-color: #64b5f6; color: white; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.item-type-group .dialog-avatar { background-color: #81c784; }
.dialog-item span:last-child { font-size: 15px; font-weight: 500; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-item.bold span:last-child { font-weight: 700; color: #3390ec; }
.main { flex-grow: 1; height: 100%; display: flex; flex-direction: column; background-color: #f4f4f5; overflow: hidden; }
.chat-header { height: 60px; background-color: #ffffff; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #efeff1; flex-shrink: 0; }
.chat-header h4 { font-size: 16px; font-weight: 500; color: #000000; }
.back-btn { display: none; align-items: center; justify-content: center; background: none; border: none; font-size: 22px; color: #3390ec; cursor: pointer; padding: 4px 8px; margin-right: 8px; border-radius: 50%; }
.sq-btn { width: 34px; height: 34px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.btn-info { background-color: #e3f2fd; color: #1e88e5; }
.btn-del { background-color: #ffebee; color: #e53e3e; }
.window { flex-grow: 1; overflow-y: auto; padding: 16px 40px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.msg { max-width: 480px; padding: 8px 14px; font-size: 15px; line-height: 20px; border-radius: 12px; position: relative; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.07); }
.msg.in { background-color: #ffffff; align-self: flex-start; border-bottom-left-radius: 3px; color: #000000; }
.msg.out { background-color: #eeffde; align-self: flex-end; border-bottom-right-radius: 3px; color: #000000; }
.msg.sys { background-color: rgba(112, 117, 121, 0.4); color: #ffffff; font-size: 13px; font-weight: 500; align-self: center; border-radius: 10px; box-shadow: none; max-width: 80%; text-align: center; }
.input-area-container { padding: 0px 40px 16px 40px; background: transparent; flex-shrink: 0; }
.input-area { background-color: #ffffff; border-radius: 12px; padding: 6px 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
.input-area input[type="text"] { flex-grow: 1; border: none; outline: none; font-size: 16px; padding: 8px 0; }
.file-btn { background: none; border: none; font-size: 22px; color: #707579; cursor: pointer; padding: 0; }
.send-btn { background: none; border: none; font-size: 20px; color: #3390ec; cursor: pointer; padding: 0 4px; }
.send-btn:disabled { color: #a2b0c4; cursor: not-allowed; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.modal-box { background: #ffffff; padding: 24px; border-radius: 14px; width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.modal-box h3 { margin-top: 0; color: #212121; font-weight: 500; }
.modal-box input[type="text"] { padding: 10px 14px; border: 1px solid #dfe1e5; border-radius: 8px; font-size: 15px; outline: none; width:100%; box-sizing:border-box; margin-bottom:12px;}
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-btn { border: none; padding: 10px 18px; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; }
.btn-cancel { background-color: transparent; color: #707579; }
.btn-confirm { background-color: #3390ec; color: #ffffff; }
.file-bubble { display: inline-flex; align-items: center; gap: 6px; background-color: #f4f4f5; padding: 4px 10px; border-radius: 8px; font-size: 13px; color: #333333; max-width: 200px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.file-bubble-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-bubble-remove { cursor: pointer; color: #707579; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.file-bubble-remove:hover { color: #e53e3e; }
.message-attachments-wrapper { margin-top: 6px; width: 100%; }
.message-media-gallery { display: flex; gap: 4px; }
.media-item-box { max-width: 100%; }
.media-img-preview { max-width: 150px; max-height: 150px; border-radius: 6px; cursor: pointer; }
.media-video-preview { max-width: 200px; border-radius: 6px; }
.message-doc-list { display: flex; flex-direction: column; gap: 4px; }
.doc-attachment-item { display: flex; align-items: center; gap: 8px; text-decoration: none; background: #f4f4f5; padding: 6px; border-radius: 6px; color: #333; }
.doc-meta { display: flex; flex-direction: column; }
.doc-name { font-size: 13px; font-weight: 500; }
.doc-action { font-size: 11px; color: #707579; }

@media (max-width: 768px) {
    body, html, .box { height: 100dvh !important; }
    .box { position: relative; width: 100vw; }
    .side, .main { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; min-width: 0 !important; transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); }
    .side { z-index: 2; transform: translateX(0); border-right: none; }
    .main { z-index: 3; transform: translateX(100%); }
    .box.show-chat .side { transform: translateX(-20%); }
    .box.show-chat .main { transform: translateX(0); }
    .back-btn { display: flex !important; }
    .chat-header { padding: 0 16px; justify-content: flex-start; gap: 12px; }
    #group_action_buttons { margin-left: auto; }
    .window { padding: 12px 16px; }
    .msg { max-width: 85%; }
    .input-area-container { padding: 0 12px 12px 12px; }
    .input-area { margin-bottom: 0; padding: 8px 12px; }
}


/* ==========================================================================
   TELEGRAM WEB STYLE: ОЧЕРЕДЬ ПРЕДПРОСМОТРА ВЛОЖЕНИЙ (НАД СТРОКОЙ ВВОДА)
   ========================================================================== */
#attachments_preview_container {
    display: none;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid #dfe1e5;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
}

.tg-preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dfe1e5;
    background: #ffffff;
}

/* Картинка в очереди отправки */
.tg-preview-item.img-bubble {
    width: 60px;
    height: 60px;
}
.tg-preview-item.img-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Документ в очереди отправки */
.tg-preview-item.doc-bubble {
    display: flex;
    align-items: center;
    padding: 6px 30px 6px 10px;
    gap: 8px;
    height: 46px;
    box-sizing: border-box;
}
.tg-doc-icon {
    font-size: 20px;
}
.tg-doc-name {
    font-size: 13px;
    color: #333333;
    font-weight: 500;
}

/* Кнопка удаления (крестик) на превью */
.tg-preview-remove {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: rgba(112, 117, 121, 0.7);
    color: #ffffff;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}
.tg-preview-remove:hover {
    background: rgba(229, 62, 62, 0.9);
}

/* ==========================================================================
   TELEGRAM WEB STYLE: ГРУППИРОВКА ВЛОЖЕНИЙ В БАББЛАХ СООБЩЕНИЙ (АЛЬБОМЫ)
   ========================================================================== */
.tg-msg-attachments-container {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
    width: 320px; /* Ограничение ширины сетки альбома как в Telegram */
}

/* Сетка альбома */
.tg-media-grid {
    display: grid;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.tg-grid-item {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
}

.tg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tg-grid-item img:hover {
    opacity: 0.85;
}

/* Стили сеток под разное количество изображений */
.tg-media-grid.grid-1 {
    grid-template-columns: 1fr;
}
.tg-media-grid.grid-1 .tg-grid-item img {
    object-fit: contain;
    max-height: 240px;
    background: transparent;
}

.tg-media-grid.grid-2 {
    grid-template-columns: 1fr 1fr;
    height: 160px;
}

.tg-media-grid.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
    height: 110px;
}

.tg-media-grid.grid-multi {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    grid-auto-rows: 90px;
}

/* Документы и файлы внутри сообщений */
.tg-docs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.tg-doc-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.04);
    padding: 8px 12px;
    border-radius: 8px;
    box-sizing: border-box;
}
.msg.out .tg-doc-item-row {
    background: rgba(0, 0, 0, 0.05); /* Чуть темнее для исходящих */
}
.tg-doc-circle-icon {
    width: 36px;
    height: 36px;
    background: #3390ec;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tg-doc-row-meta {
    overflow: hidden;
}
.tg-doc-row-link {
    color: #2481cc;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    word-break: break-all;
}
.tg-doc-row-link:hover {
    text-decoration: underline;
}
.vid-row video {
    max-width: 100%;
    border-radius: 6px;
    display: block;
}

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО ПРОСМОТРА ИЗОБРАЖЕНИЙ (MEDIA VIEWER OVERLAY)
   ========================================================================== */
.media-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(16, 24, 30, 0.96);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.viewer-content {
    max-width: 85%;
    max-height: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.viewer-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.7);
}

/* Кнопки перелистывания и закрытия */
.viewer-btn {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s, transform 0.1s;
}
.viewer-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}
.viewer-btn:active {
    transform: scale(0.95);
}

.viewer-close-btn {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    font-size: 28px;
}

.viewer-prev-btn, .viewer-next-btn {
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    font-size: 36px;
}
.viewer-prev-btn { left: 20px; }
.viewer-next-btn { right: 20px; }