/* ============================================================
   ATTACH & STICKER BUTTONS (input row)
   ============================================================ */

   .attach-btn,
   .sticker-btn {
       background: none;
       border: none;
       color: var(--text-secondary, #888);
       cursor: pointer;
       padding: 0;
       width: 36px;
       height: 36px;
       min-width: 36px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       transition: color 0.15s, background 0.15s;
       flex-shrink: 0;
   }
   
   .attach-btn:hover,
   .sticker-btn:hover {
       color: var(--accent, #7c6aef);
       background: var(--hover-bg, rgba(255, 255, 255, 0.08));
   }
   
   .attach-btn:active,
   .sticker-btn:active {
       transform: scale(0.92);
   }
   
   .attach-btn .icon,
   .sticker-btn .icon {
       width: 20px;
       height: 20px;
   }
   
   /* ============================================================
      FILE MESSAGES
      ============================================================ */
   
   .message-file {
       max-width: 320px;
   }
   
   .file-label {
       margin-bottom: 6px;
       font-size: 0.9em;
       color: var(--text-main, #e4e4e7);
       line-height: 1.4;
   }
   
   .file-image-preview {
       margin-bottom: 6px;
       border-radius: 8px;
       overflow: hidden;
   }
   
   .file-preview-img {
       border-radius: 8px;
       max-width: 100%;
       max-height: 300px;
       object-fit: contain;
       cursor: pointer;
       transition: opacity 0.2s;
   }
   
   .file-preview-img:hover {
       opacity: 0.85;
   }
   
   .file-info-row {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 8px 12px;
       background: rgba(255, 255, 255, 0.04);
       border-radius: 8px;
       cursor: pointer;
       transition: background 0.15s;
       min-width: 0;
   }
   
   .file-info-row:hover {
       background: rgba(255, 255, 255, 0.08);
   }
   
   .file-icon {
       font-size: 1.5em;
       flex-shrink: 0;
       line-height: 1;
   }
   
   .file-details {
       flex: 1;
       min-width: 0;
   }
   
   .file-name {
       font-size: 0.85em;
       font-weight: 500;
       color: var(--accent, #7c6aef);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       line-height: 1.3;
   }
   
   .file-size {
       font-size: 0.72em;
       color: var(--text-dim, #666);
       margin-top: 1px;
   }
   
   .file-download-btn {
       font-size: 1.1em;
       flex-shrink: 0;
       opacity: 0.5;
       transition: opacity 0.15s;
       line-height: 1;
   }
   
   .file-info-row:hover .file-download-btn {
       opacity: 1;
   }
   
   /* ============================================================
      STICKER MESSAGES
      ============================================================ */
   
   .message-sticker {
       font-size: 3.5em;
       text-align: center;
       padding: 4px 0;
       user-select: none;
       line-height: 1.2;
   }
   
   .message-sticker.unknown-sticker {
       font-size: 2em;
       opacity: 0.5;
   }
   
   .sticker-id {
       font-size: 0.3em;
       display: block;
       color: var(--text-dim, #666);
       margin-top: 2px;
   }
   
   /* ============================================================
      STICKER PICKER
      ============================================================ */
   
   .sticker-picker {
       position: absolute;
       bottom: calc(100% + 8px);
       right: 8px;
       width: 300px;
       max-height: 380px;
       background: var(--bg-secondary, #1a1a2e);
       border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
       border-radius: 16px;
       padding: 12px;
       overflow-y: auto;
       z-index: 200;
       opacity: 0;
       transform: translateY(8px) scale(0.97);
       transition: opacity 0.2s, transform 0.2s;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
       pointer-events: none;
   }
   
   .sticker-picker.visible {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
   }
   
   .sticker-picker-header {
       font-weight: 600;
       font-size: 0.9em;
       margin-bottom: 10px;
       color: var(--text-main, #e4e4e7);
       padding: 0 2px;
   }
   
   .sticker-pack-name {
       font-size: 0.7em;
       color: var(--text-dim, #666);
       margin: 10px 0 6px;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       font-weight: 600;
       font-family: 'JetBrains Mono', monospace;
       padding: 0 2px;
   }
   
   .sticker-pack-name:first-of-type {
       margin-top: 0;
   }
   
   .sticker-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 4px;
   }
   
   .sticker-item {
       font-size: 1.8em;
       text-align: center;
       padding: 8px 4px;
       border-radius: 10px;
       cursor: pointer;
       transition: background 0.12s, transform 0.12s;
       user-select: none;
       line-height: 1.2;
   }
   
   .sticker-item:hover {
       background: rgba(255, 255, 255, 0.08);
       transform: scale(1.15);
   }
   
   .sticker-item:active {
       transform: scale(0.95);
   }
   
   /* ============================================================
      UPLOAD PROGRESS OVERLAY (future use)
      ============================================================ */
   
   .upload-progress {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 6px 12px;
       background: rgba(124, 106, 239, 0.1);
       border-radius: 8px;
       font-size: 0.85em;
       color: var(--text-secondary, #888);
   }
   
   .upload-progress-bar {
       flex: 1;
       height: 3px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
       overflow: hidden;
   }
   
   .upload-progress-fill {
       height: 100%;
       background: var(--accent, #7c6aef);
       border-radius: 2px;
       transition: width 0.3s;
   }
   
   /* ============================================================
      STICKER PICKER SCROLLBAR
      ============================================================ */
   
   .sticker-picker::-webkit-scrollbar {
       width: 4px;
   }
   
   .sticker-picker::-webkit-scrollbar-track {
       background: transparent;
   }
   
   .sticker-picker::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
   }
   
   .sticker-picker::-webkit-scrollbar-thumb:hover {
       background: rgba(255, 255, 255, 0.2);
   }
   
   /* ============================================================
      RESPONSIVE — mobile adjustments
      ============================================================ */
   
   @media (max-width: 768px) {
       .sticker-picker {
           width: calc(100vw - 32px);
           right: 4px;
           max-height: 320px;
       }
   
       .sticker-grid {
           grid-template-columns: repeat(5, 1fr);
       }
   
       .sticker-item {
           font-size: 1.6em;
           padding: 6px 2px;
       }
   
       .message-sticker {
           font-size: 3em;
       }
   
       .file-info-row {
           padding: 6px 10px;
       }
   
       .attach-btn,
       .sticker-btn {
           width: 32px;
           height: 32px;
           min-width: 32px;
       }
   
       .attach-btn .icon,
       .sticker-btn .icon {
           width: 18px;
           height: 18px;
       }
   }
/* ============================================================
   AUDIO PLAYER
   ============================================================ */

   .file-audio-player {
    padding: 8px 0;
    max-width: 320px;
    min-width: 240px;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audio-play-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #7c6aef);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    flex-shrink: 0;
}

.audio-play-btn:hover {
    background: var(--accent-hover, #6b5ce7);
    transform: scale(1.05);
}

.audio-play-btn:active {
    transform: scale(0.95);
}

.audio-play-btn svg {
    width: 16px;
    height: 16px;
}

.audio-icon-play {
    margin-left: 2px;
}

.audio-track {
    flex: 1;
    min-width: 0;
}

.audio-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    margin-bottom: 4px;
    transition: height 0.1s;
}

.audio-progress-bar:hover {
    height: 6px;
}

.audio-progress-fill {
    height: 100%;
    background: var(--accent, #7c6aef);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.audio-progress-fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent, #7c6aef);
    opacity: 0;
    transition: opacity 0.15s;
}

.file-audio-player.playing .audio-progress-fill::after,
.audio-progress-bar:hover .audio-progress-fill::after {
    opacity: 1;
}

.audio-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.7em;
    color: var(--text-dim, #666);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}

.audio-current-time,
.audio-duration {
    user-select: none;
}

/* Playing state glow */
.file-audio-player.playing .audio-play-btn {
    box-shadow: 0 0 12px rgba(124, 106, 239, 0.4);
}

/* ============================================================
   VIDEO PLAYER
   ============================================================ */

.file-video-player {
    max-width: 320px;
    position: relative;
    margin-bottom: 4px;
}

.file-preview-video {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

.video-load-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.video-load-overlay:hover {
    background: rgba(0, 0, 0, 0.5);
}

.video-play-icon {
    font-size: 2em;
    opacity: 0.8;
}

.video-load-text {
    font-size: 0.8em;
    color: var(--text-dim, #888);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .file-audio-player {
        min-width: 200px;
    }

    .audio-play-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .audio-play-btn svg {
        width: 14px;
        height: 14px;
    }

    .file-video-player {
        max-width: 100%;
    }
}

/* ============================================================
   IMAGE VIEWER OVERLAY
   ============================================================ */

   .image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-viewer-overlay.active {
    display: flex;
    opacity: 1;
}

.image-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    flex-shrink: 0;
    z-index: 2;
}

.image-viewer-filename {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.image-viewer-actions {
    display: flex;
    gap: 8px;
}

.image-viewer-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.image-viewer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.image-viewer-btn svg {
    width: 20px;
    height: 20px;
}

.image-viewer-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}

#image-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

#image-viewer-img.dragging {
    cursor: grabbing;
    transition: none;
}

/* Zoom hint */
.image-viewer-container::after {
    content: 'Двойное нажатие — приблизить';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75em;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s;
}

.image-viewer-overlay.zoomed .image-viewer-container::after {
    opacity: 0;
}

@media (max-width: 768px) {
    .image-viewer-header {
        padding: 8px 12px;
    }

    .image-viewer-btn {
        width: 36px;
        height: 36px;
    }

    .image-viewer-btn svg {
        width: 18px;
        height: 18px;
    }
}