/* Zoom-like virtual classroom */
.zoom-room { --zoom-bg: #0d1117; --zoom-surface: #161b22; --zoom-border: #30363d; --zoom-text: #f0f6fc; --zoom-muted: #8b949e; --zoom-accent: #58a6ff; --zoom-danger: #f85149; --zoom-success: #3fb950; }
.zoom-room { background: var(--zoom-bg); color: var(--zoom-text); min-height: 100vh; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }

.zoom-header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--zoom-surface); border-bottom: 1px solid var(--zoom-border); flex-shrink: 0; }
.zoom-back { color: var(--zoom-muted); text-decoration: none; font-size: 0.9rem; }
.zoom-back:hover { color: var(--zoom-accent); }
.zoom-title { flex: 1; font-size: 1rem; font-weight: 600; margin: 0; }
.zoom-meta { display: flex; align-items: center; gap: 0.75rem; }
.zoom-participants { font-size: 0.85rem; color: var(--zoom-muted); }
.zoom-minimize { background: none; border: 1px solid var(--zoom-border); color: var(--zoom-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1.2rem; line-height: 1; transition: border-color 0.2s, color 0.2s; }
.zoom-minimize:hover { border-color: var(--zoom-accent); color: var(--zoom-accent); }

.zoom-main { display: flex; flex: 1; min-height: 0; }
.zoom-video-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 400px; }
.zoom-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; width: 100%; max-width: 1400px; }
.zoom-tile { position: relative; background: var(--zoom-surface); border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; border: 2px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.zoom-tile:hover { border-color: var(--zoom-border); }
.zoom-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom-tile-local video { transform: scaleX(-1); }
.zoom-tile-name { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; }
.zoom-tile-muted { position: absolute; top: 8px; left: 8px; background: var(--zoom-accent); color: #000; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; }
.zoom-tile-muted.hidden { display: none; }
.zoom-remotes { display: contents; }
.zoom-remotes .zoom-tile { display: block; }

.zoom-sidebar { width: 320px; min-width: 280px; background: var(--zoom-surface); border-left: 1px solid var(--zoom-border); display: flex; flex-direction: column; min-height: 0; }
.zoom-sidebar.collapsed { display: none; }
.zoom-tabs { display: flex; border-bottom: 1px solid var(--zoom-border); flex-shrink: 0; }
.zoom-tab { flex: 1; padding: 0.75rem 0.5rem; background: none; border: none; color: var(--zoom-muted); font-size: 0.85rem; cursor: pointer; transition: color 0.2s; }
.zoom-tab:hover { color: var(--zoom-text); }
.zoom-tab.active { color: var(--zoom-accent); border-bottom: 2px solid var(--zoom-accent); margin-bottom: -1px; }
.zoom-panel { flex: 1; overflow: hidden; display: none; flex-direction: column; padding: 0.75rem; min-height: 0; }
.zoom-panel.active { display: flex; }
.zoom-panel-participants { overflow-y: auto; }
.zoom-participants-list { list-style: none; margin: 0; padding: 0; }
.zoom-participants-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--zoom-border); display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.zoom-participants-list li::before { content: ''; width: 8px; height: 8px; background: var(--zoom-success); border-radius: 50%; flex-shrink: 0; }
.zoom-participants-list li:last-child { border-bottom: none; }
.zoom-panel-chat { padding: 0; flex-direction: column; }
.zoom-chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; min-height: 0; scroll-behavior: smooth; }
.zoom-chat-msg { margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.4; }
.zoom-chat-msg span { display: block; color: var(--zoom-muted); font-size: 0.75rem; margin-bottom: 0.25rem; }
.zoom-chat-send { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--zoom-border); background: var(--zoom-surface); flex-shrink: 0; align-items: center; }
.zoom-chat-send input { flex: 1; padding: 0.6rem 1rem; background: var(--zoom-bg); border: 1px solid var(--zoom-border); border-radius: 10px; color: var(--zoom-text); font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; }
.zoom-chat-send input::placeholder { color: var(--zoom-muted); opacity: 0.8; }
.zoom-chat-send input:focus { outline: none; border-color: var(--zoom-accent); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); }
.zoom-chat-send button { padding: 0.6rem 1.25rem; background: var(--zoom-accent); border: none; border-radius: 10px; color: #0d1117; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: filter 0.2s, transform 0.1s; flex-shrink: 0; }
.zoom-chat-send button:hover { filter: brightness(1.1); }
.zoom-chat-send button:active { transform: scale(0.98); }

.zoom-panel-whiteboard { overflow: auto; }
.zoom-wb-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.zoom-wb-btn { padding: 0.5rem 0.75rem; background: var(--zoom-bg); border: 1px solid var(--zoom-border); border-radius: 8px; color: var(--zoom-text); cursor: pointer; font-size: 1rem; transition: border-color 0.2s, background 0.2s; }
.zoom-wb-btn:hover, .zoom-wb-btn.active { border-color: var(--zoom-accent); background: rgba(88, 166, 255, 0.08); }
.zoom-wb-color { width: 36px; height: 32px; padding: 3px; border-radius: 8px; cursor: pointer; background: var(--zoom-bg); border: 1px solid var(--zoom-border); }
.zoom-wb-size { width: 70px; accent-color: var(--zoom-accent); }
.zoom-panel-whiteboard canvas { width: 100%; max-width: 100%; height: auto; background: #1e293b; border-radius: 8px; cursor: crosshair; touch-action: none; }
.zoom-wb-clear { margin-left: auto; }

.zoom-footer { padding: 0.75rem 1.5rem; background: var(--zoom-surface); border-top: 1px solid var(--zoom-border); flex-shrink: 0; }
.zoom-controls { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.zoom-ctrl { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 1rem; background: var(--zoom-bg); border: 1px solid var(--zoom-border); border-radius: 10px; color: var(--zoom-text); cursor: pointer; font-size: 0.75rem; min-width: 68px; transition: all 0.2s; }
.zoom-ctrl:hover { border-color: var(--zoom-accent); background: rgba(88, 166, 255, 0.1); }
.zoom-ctrl:active { transform: scale(0.97); }
.zoom-ctrl svg { width: 22px; height: 22px; }
.zoom-ctrl-leave { background: var(--zoom-danger); border-color: var(--zoom-danger); color: #fff; }
.zoom-ctrl-leave:hover { filter: brightness(1.1); }
.zoom-ctrl.muted { background: rgba(248, 81, 73, 0.2); border-color: var(--zoom-danger); }
.zoom-ctrl.video-off { background: rgba(248, 81, 73, 0.2); border-color: var(--zoom-danger); }

/* P2P fullscreen mode */
body.train-classroom-p2p .nav { margin-bottom: 0; }
.train-classroom-content-full .zoom-room-wrap { width: 100%; max-width: 100%; padding: 0; }
.train-classroom-content-full .train-classroom-grid { grid-template-columns: 1fr; max-width: 100%; }
.train-classroom-content-full .zoom-room { min-height: calc(100vh - 80px); border-radius: 0; grid-column: 1 / -1; }
.train-classroom-p2p .footer { display: none; }
.zoom-ctrl.active { border-color: var(--zoom-accent); background: rgba(88, 166, 255, 0.15); }

/* Documents panel */
.zoom-panel-documents { padding: 0.75rem; overflow-y: auto; }
.zoom-doc-upload { padding-bottom: 0.75rem; border-bottom: 1px solid var(--zoom-border); margin-bottom: 0.75rem; }
.zoom-doc-btn { padding: 0.5rem 1rem; background: var(--zoom-bg); border: 1px solid var(--zoom-border); border-radius: 8px; color: var(--zoom-text); cursor: pointer; font-size: 0.85rem; text-decoration: none; display: inline-block; transition: border-color 0.2s; }
.zoom-doc-btn:hover { border-color: var(--zoom-accent); }
.zoom-doc-list { list-style: none; margin: 0; padding: 0; }
.zoom-doc-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--zoom-border); cursor: pointer; font-size: 0.9rem; }
.zoom-doc-item:hover { color: var(--zoom-accent); }
.zoom-doc-icon { font-size: 1.1rem; }
.zoom-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-doc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.zoom-doc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.zoom-doc-modal-content { position: relative; z-index: 1; background: var(--zoom-bg); border-radius: 12px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--zoom-border); }
.zoom-doc-modal-header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--zoom-surface); border-bottom: 1px solid var(--zoom-border); flex-shrink: 0; }
.zoom-doc-modal-title { flex: 1; font-size: 0.95rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoom-doc-modal-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.zoom-doc-viewer { flex: 1; overflow: auto; padding: 1rem; min-height: 300px; position: relative; }
.zoom-doc-loading, .zoom-doc-error, .zoom-doc-info { padding: 2rem; text-align: center; color: var(--zoom-muted); }
.zoom-doc-close { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
.zoom-pdf-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-shrink: 0; }
.zoom-pdf-toolbar button { padding: 0.4rem 0.8rem; }
.zoom-pdf-wrap { position: relative; display: inline-block; max-width: 100%; }
#zoomPdfCanvas { display: block; max-width: 100%; }
.zoom-pdf-anno { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: crosshair; }
.zoom-xlsx-wrap { overflow: auto; max-height: 60vh; }
.zoom-xlsx-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
.zoom-xlsx-table td { border: 1px solid var(--zoom-border); padding: 0.4rem 0.6rem; min-width: 80px; }
.zoom-docx-editor { min-height: 300px; padding: 1rem; line-height: 1.6; outline: none; }
.zoom-docx-editor:focus { outline: none; }
.zoom-quill-wrap { min-height: 320px; background: var(--zoom-surface); border-radius: 8px; }
.zoom-quill-wrap .ql-toolbar { border-color: var(--zoom-border); background: var(--zoom-bg); }
.zoom-quill-wrap .ql-container { border-color: var(--zoom-border); font-size: 0.95rem; }
.zoom-quill-wrap .ql-editor { min-height: 280px; color: var(--zoom-text); }
.zoom-xlsx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0; margin-bottom: 0.5rem; border-bottom: 1px solid var(--zoom-border); }
.zoom-xlsx-fbar { display: flex; align-items: center; gap: 0.5rem; }
.zoom-xlsx-fbar input { width: 80px; padding: 0.35rem 0.5rem; background: var(--zoom-bg); border: 1px solid var(--zoom-border); border-radius: 6px; color: var(--zoom-text); font-size: 0.85rem; }
.zoom-xlsx-fmt, .zoom-xlsx-insert { display: flex; gap: 0.35rem; }
.zoom-xlsx-btn { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.zoom-ppt-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0; margin-bottom: 0.75rem; border-bottom: 1px solid var(--zoom-border); }
.zoom-ppt-slides { overflow-y: auto; max-height: 50vh; }
.zoom-ppt-card { background: var(--zoom-surface); border: 1px solid var(--zoom-border); border-radius: 8px; margin-bottom: 0.75rem; overflow: hidden; }
.zoom-ppt-card-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--zoom-bg); border-bottom: 1px solid var(--zoom-border); }
.zoom-ppt-card-n { font-weight: 600; color: var(--zoom-muted); min-width: 1.5rem; }
.zoom-ppt-card-title { flex: 1; padding: 0.35rem 0.5rem; background: var(--zoom-surface); border: 1px solid var(--zoom-border); border-radius: 6px; color: var(--zoom-text); font-size: 0.9rem; }
.zoom-ppt-del { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.zoom-ppt-card-body { padding: 0.75rem; }
.zoom-ppt-card-content { min-height: 80px; padding: 0.5rem; border: 1px solid var(--zoom-border); border-radius: 6px; font-size: 0.9rem; line-height: 1.5; outline: none; }
.zoom-ppt-show { position: absolute; inset: 0; background: var(--zoom-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; z-index: 10; }
.zoom-ppt-slide-view { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 800px; width: 100%; text-align: center; padding: 2rem; }
.zoom-ppt-view-title { font-size: 1.75rem; margin: 0 0 1.5rem; color: var(--zoom-text); }
.zoom-ppt-view-content { font-size: 1.1rem; line-height: 1.6; color: var(--zoom-muted); }
.zoom-ppt-nav { position: absolute; top: 50%; transform: translateY(-50%); padding: 1rem 1.5rem; background: var(--zoom-surface); border: 1px solid var(--zoom-border); border-radius: 8px; color: var(--zoom-text); cursor: pointer; font-size: 1.25rem; }
.zoom-ppt-nav:hover { border-color: var(--zoom-accent); }
.zoom-ppt-nav:first-of-type { left: 1rem; }
.zoom-ppt-nav:nth-of-type(2) { right: 1rem; }
.zoom-ppt-close-show { position: absolute; top: 1rem; right: 1rem; }

@media (max-width: 900px) {
    .zoom-main { flex-direction: column; }
    .zoom-sidebar { width: 100%; min-width: 0; border-left: none; border-top: 1px solid var(--zoom-border); max-height: 320px; min-height: 200px; }
    .zoom-video-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .zoom-chat-send { padding: 0.65rem 1rem; }
    .zoom-chat-send input { padding: 0.55rem 0.9rem; }
    .zoom-chat-send button { padding: 0.55rem 1rem; font-size: 0.85rem; }
}

/* Мобильная версия — без наезжаний */
@media (max-width: 600px) {
    .zoom-room {
        min-height: 100dvh;
        overflow-x: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .zoom-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }
    .zoom-header .zoom-back { font-size: 0.85rem; }
    .zoom-header .zoom-title {
        order: 3;
        flex: 1 1 100%;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 0.5rem;
    }
    .zoom-meta { gap: 0.5rem; }
    .zoom-participants { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
    .zoom-minimize { width: 28px; height: 28px; font-size: 1rem; }
    .zoom-video-area { padding: 0.5rem; min-height: 200px; }
    .zoom-video-grid { grid-template-columns: 1fr; gap: 0.5rem; min-width: 0; }
    .zoom-tile { min-width: 0; }
    .zoom-tile-name { font-size: 0.7rem; padding: 3px 6px; }
    .zoom-tile-muted { font-size: 0.65rem; padding: 2px 4px; }
    .zoom-sidebar { max-height: 40vh; min-height: 180px; }
    .zoom-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .zoom-tab {
        flex: 0 0 auto;
        padding: 0.5rem 0.4rem;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .zoom-panel { padding: 0.5rem; }
    .zoom-chat-send {
        flex-wrap: nowrap;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
    }
    .zoom-chat-send input {
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    .zoom-chat-send button {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    .zoom-chat-messages { padding: 0.5rem 0.75rem; }
    .zoom-chat-msg { font-size: 0.85rem; margin-bottom: 0.75rem; }
    .zoom-footer {
        padding: 0.5rem 0.75rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
    }
    .zoom-controls {
        gap: 0.35rem;
        justify-content: center;
    }
    .zoom-ctrl {
        min-width: 52px;
        padding: 0.45rem 0.5rem;
        font-size: 0.65rem;
    }
    .zoom-ctrl svg { width: 18px; height: 18px; }
    .zoom-ctrl span { max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .zoom-wb-toolbar { gap: 0.35rem; margin-bottom: 0.4rem; }
    .zoom-wb-btn { padding: 0.4rem 0.5rem; font-size: 0.9rem; }
    .zoom-wb-color { width: 28px; height: 26px; }
    .zoom-wb-size { width: 50px; }
    .zoom-panel-whiteboard canvas { max-width: 100%; }
    .zoom-doc-modal { padding: 0.5rem; }
    .zoom-doc-modal-content { max-width: 100%; max-height: 95dvh; }
    .zoom-doc-modal-header { padding: 0.5rem 0.75rem; flex-wrap: wrap; gap: 0.5rem; }
    .zoom-doc-modal-title { font-size: 0.85rem; }
    .zoom-doc-modal-actions { flex-wrap: wrap; }
    .zoom-doc-viewer { padding: 0.5rem; min-height: 200px; }
}

/* Панель диагностики — не наезжает на мобильном */
@media (max-width: 600px) {
    .zoom-debug-panel,
    #zoomDebugPanel {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0)) !important;
        max-width: none !important;
        max-height: 35vh;
        overflow-y: auto;
        font-size: 10px;
    }
}