/* ═══ Panel toggle buttons ═══ */
.panel-edge-toggle {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(30,30,40,0.95);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.panel-edge-toggle:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 12px rgba(139,92,246,0.4);
}
.panel-mode-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 6px;
    margin-left: auto;
    transition: all 0.25s ease;
}
.panel-mode-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.panel-restore-btn {
    position: fixed;
    z-index: 100;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(30,30,40,0.95);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.panel-restore-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(139,92,246,0.4);
}
.panel-restore-right { right: 12px; top: 50%; transform: translateY(-50%); }
.panel-restore-left { left: 12px; top: 50%; transform: translateY(-50%); }
.panel-feed { position: relative; }
.panel-feed.expanded { width: 55vw !important; min-width: 55vw !important; }
.panel-feed.fullscreen { position: fixed !important; top: 0; left: 0; width: 100vw !important; height: 100vh; z-index: 1005; min-width: 100vw !important; background: var(--bg-main); overflow-y: auto; }
.panel-feed-hidden { display: none !important; }
.panel-agents { position: relative; transition: width 0.3s ease; }
#agentsEdgeToggleBtn { left: auto; right: -14px; }
.panel-agents-hidden { display: none !important; }
.panel-agents.expanded { width: 55vw !important; min-width: 55vw !important; }
.panel-agents.fullscreen {
    position: fixed !important; top: 0; left: 0;
    width: 100vw !important; height: 100vh;
    z-index: 1005; min-width: 100vw !important;
    background: var(--bg-main); overflow: hidden;
    display: flex !important; flex-direction: column;
}

/* ═══ Fullscreen agents: grid layout, ancho completo ═══ */
.panel-agents.fullscreen #agentsView {
    width: 100%; max-width: none; margin: 0;
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.panel-agents.fullscreen #meetingView {
    width: 100%; max-width: none; margin: 0;
    /* no cambia display: hereda el none/flex de meetings.css */
}
.panel-agents.fullscreen .panel-header {
    padding: 16px 40px; flex-shrink: 0;
}
.panel-agents.fullscreen .agents-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 10px;
    padding: 20px 40px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}
.panel-agents.fullscreen .agent-item {
    padding: 18px 22px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}
.panel-agents.fullscreen .agent-item:hover {
    background: rgba(255,255,255,0.07);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.panel-agents.fullscreen .agent-avatar { width: 52px; height: 52px; font-size: 20px; flex-shrink: 0; }
.panel-agents.fullscreen .agent-name { font-size: 15px; }
.panel-agents.fullscreen .agent-role { font-size: 13px; }
.panel-agents.fullscreen .agent-bottom-row { margin-top: 5px; }
/* Botón salir fullscreen: inline en el panel-header (margin-left: auto lo empuja al final) */
.panel-agents.fullscreen #agentsExpandBtn {
    position: static;
    margin-left: auto;
    z-index: auto;
    width: auto; height: auto;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 5px;
}
.panel-agents.fullscreen #agentsExpandBtn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
/* Ocultar botón de borde en fullscreen */
.panel-agents.fullscreen #agentsEdgeToggleBtn { display: none; }

/* Fullscreen: meeting chat más cómodo */
.panel-agents.fullscreen .meeting-messages { padding: 20px 16px; gap: 14px; }
.panel-agents.fullscreen .meeting-msg-bubble { max-width: 70%; font-size: 13px; }
.panel-agents.fullscreen .meeting-input { font-size: 13px; padding: 10px 14px; }
.panel-agents.fullscreen .meeting-send-btn { padding: 10px 18px; font-size: 13px; }
.panel-agents.fullscreen .meeting-quick-replies { padding: 10px 16px; gap: 7px; }
.panel-agents.fullscreen .meeting-quick-reply { font-size: 12px; padding: 5px 12px; }

/* ═══ Fullscreen: tabs ═══ */
.panel-feed.fullscreen .panel-tabs {
    justify-content: center; gap: 0; max-width: 700px; margin: 0 auto; padding: 20px 0 0; border-bottom: none;
}
.panel-feed.fullscreen .panel-tab {
    padding: 10px 28px; font-size: 13px; letter-spacing: 1px; border-bottom: 2px solid transparent; transition: all 0.2s;
}
.panel-feed.fullscreen .panel-tab.active { border-bottom: 2px solid var(--accent); }

/* ═══ Fullscreen: feed content ═══ */
.panel-feed.fullscreen .right-tab-content { max-width: 1300px; margin: 0 auto; padding: 24px 0; }
/* Ideas en fullscreen: anula el max-width genérico para que el grid de 2 columnas use todo el ancho */
.panel-feed.fullscreen #ideasContent { max-width: none; padding: 0; }
.panel-feed.fullscreen .feed-filters {
    max-width: 1300px; margin: 0 auto; padding: 16px 0 0; border-bottom: none;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.panel-feed.fullscreen .filter-row { display: contents; }
.panel-feed.fullscreen .filter-btn { font-size: 11px; padding: 5px 14px; }
.panel-feed.fullscreen .agent-pills { max-width: 1300px; margin: 0 auto; padding: 10px 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

/* ═══ Fullscreen: feed items ═══ */
.panel-feed.fullscreen .feed-item {
    padding: 18px 24px; margin-bottom: 6px; border-radius: 12px;
    background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05);
    border-left: 3px solid var(--accent); transition: all 0.2s ease;
}
.panel-feed.fullscreen .feed-item:hover {
    background: rgba(255,255,255,0.035); transform: translateX(2px); box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.panel-feed.fullscreen .feed-item .feed-content { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.85); }
.panel-feed.fullscreen .feed-item .feed-title { font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.95); margin-bottom: 4px; }
.panel-feed.fullscreen .feed-item .feed-meta { font-size: 11.5px; margin-top: 10px; color: rgba(255,255,255,0.35); }
.panel-feed.fullscreen .panel-mode-btn {
    position: fixed; top: 20px; right: 24px; z-index: 1006; width: 36px; height: 36px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 0;
}

/* ═══ Fullscreen: ideas ═══ */
.panel-feed.fullscreen .ideas-filters {
    max-width: 1300px; margin: 0 auto; padding: 16px 40px; border-bottom: none; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.panel-feed.fullscreen .ideas-filter-btn { font-size: 11px; padding: 5px 14px; border-radius: 16px; }
.panel-feed.fullscreen .ideas-category-filters {
    max-width: 1300px; margin: 0 auto; padding: 0 40px 12px;
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.panel-feed.fullscreen #ideaBulkBar {
    max-width: 1300px; margin: 0 auto; padding: 7px 40px;
}
.panel-feed.fullscreen .btn-new-proposal { position: fixed; top: 20px; right: 80px; z-index: 1006; }
.panel-feed.fullscreen .ideas-list {
    max-width: 1300px; margin: 0 auto; padding: 16px 40px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
    gap: 12px;
    align-content: start;
}
.panel-feed.fullscreen .idea-card {
    padding: 20px 24px; margin-bottom: 0; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border-light); transition: all 0.2s ease;
}
.panel-feed.fullscreen .idea-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.panel-feed.fullscreen .idea-card.idea-status-approved { border-left: 3px solid #4CAF50; }
.panel-feed.fullscreen .idea-card.idea-status-rejected { border-left: 3px solid #f44336; }
.panel-feed.fullscreen .idea-card.idea-status-postponed { border-left: 3px solid #FF9800; }
.panel-feed.fullscreen .idea-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.panel-feed.fullscreen .idea-desc { font-size: 13px; line-height: 1.65; }
.panel-feed.fullscreen .idea-footer { margin-top: 12px; font-size: 12px; }
.panel-feed.fullscreen .category-badge { font-size: 10px; padding: 3px 10px; }

/* ═══ Costs button amber ═══ */
.btn-costs {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none;
    padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s;
}
.btn-costs:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 2px 8px rgba(245,158,11,0.4); }

/* ═══ Queue header siempre visible encima de secciones fullscreen ═══ */
.queue-header {
    position: sticky;
    top: 81px;
    z-index: 1002;
    background: var(--bg-main);
}
/* Ocultar barra cuando hay sección fullscreen abierta */
.queue-header-hidden { display: none !important; }

/* ═══════════════════════════════════════════
   Vertical Section Nav
   ═══════════════════════════════════════════ */
.section-nav {
    width: 48px;
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 6px;
    border-right: 1px solid var(--border-light);
    background: var(--bg-main);
    overflow: visible;
    position: relative;
    z-index: 10;
}

/* Base: botones con fondo de color propio, consistentes */
.section-nav button {
    all: unset;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s, opacity 0.18s;
    position: relative;
    flex-shrink: 0;
    opacity: 0.55;
}

.section-nav button:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* Color individual en estado normal (sutil) */
.section-nav .btn-agents      { background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.20); }
.section-nav .btn-analytics   { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.20); }
.section-nav .btn-intelligence { background: rgba(99,202,183,0.10); border-color: rgba(99,202,183,0.20); }
.section-nav .btn-publisher   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); }
.section-nav .btn-memory      { background: rgba(244,114,182,0.10); border-color: rgba(244,114,182,0.20); }
.section-nav .btn-infloww     { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.20); }
.section-nav .btn-twitter     { background: rgba(29,161,242,0.10); border-color: rgba(29,161,242,0.20); }
.section-nav .btn-costs       { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); }
.section-nav .btn-office      { background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.20); }
.section-nav .btn-drive       { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.20); }

/* Hover: color más intenso + glow */
.section-nav .btn-agents:hover      { background: rgba(34,197,94,0.20) !important;  border-color: rgba(34,197,94,0.5) !important;  box-shadow: 0 0 10px rgba(34,197,94,0.25) !important; }
.section-nav .btn-analytics:hover   { background: rgba(139,92,246,0.20) !important; border-color: rgba(139,92,246,0.5) !important; box-shadow: 0 0 10px rgba(139,92,246,0.25) !important; }
.section-nav .btn-intelligence:hover { background: rgba(99,202,183,0.20) !important; border-color: rgba(99,202,183,0.5) !important; box-shadow: 0 0 10px rgba(99,202,183,0.25) !important; }
.section-nav .btn-publisher:hover   { background: rgba(245,158,11,0.20) !important; border-color: rgba(245,158,11,0.5) !important; box-shadow: 0 0 10px rgba(245,158,11,0.25) !important; }
.section-nav .btn-memory:hover      { background: rgba(244,114,182,0.20) !important; border-color: rgba(244,114,182,0.5) !important; box-shadow: 0 0 10px rgba(244,114,182,0.25) !important; }
.section-nav .btn-infloww:hover     { background: rgba(59,130,246,0.20) !important; border-color: rgba(59,130,246,0.5) !important; box-shadow: 0 0 10px rgba(59,130,246,0.25) !important; }
.section-nav .btn-twitter:hover     { background: rgba(29,161,242,0.20) !important; border-color: rgba(29,161,242,0.5) !important; box-shadow: 0 0 10px rgba(29,161,242,0.25) !important; }
.section-nav .btn-costs:hover       { background: rgba(245,158,11,0.20) !important; border-color: rgba(245,158,11,0.5) !important; box-shadow: 0 0 10px rgba(245,158,11,0.25) !important; }
.section-nav .btn-office:hover      { background: rgba(249,115,22,0.20) !important; border-color: rgba(249,115,22,0.5) !important; box-shadow: 0 0 10px rgba(249,115,22,0.25) !important; }
.section-nav .btn-drive:hover       { background: rgba(148,163,184,0.20) !important; border-color: rgba(148,163,184,0.5) !important; box-shadow: 0 0 10px rgba(148,163,184,0.25) !important; }

/* Active: totalmente iluminado con glow fuerte */
.section-nav .btn-agents.active      { background: rgba(34,197,94,0.22) !important;  border-color: rgba(34,197,94,0.75) !important;  box-shadow: 0 0 14px rgba(34,197,94,0.35) !important;  opacity: 1 !important; }
.section-nav .btn-analytics.active   { background: rgba(139,92,246,0.22) !important; border-color: rgba(139,92,246,0.75) !important; box-shadow: 0 0 14px rgba(139,92,246,0.35) !important; opacity: 1 !important; }
.section-nav .btn-intelligence.active { background: rgba(99,202,183,0.22) !important; border-color: rgba(99,202,183,0.75) !important; box-shadow: 0 0 14px rgba(99,202,183,0.35) !important; opacity: 1 !important; }
.section-nav .btn-publisher.active   { background: rgba(245,158,11,0.22) !important; border-color: rgba(245,158,11,0.75) !important; box-shadow: 0 0 14px rgba(245,158,11,0.35) !important; opacity: 1 !important; }
.section-nav .btn-memory.active      { background: rgba(244,114,182,0.22) !important; border-color: rgba(244,114,182,0.75) !important; box-shadow: 0 0 14px rgba(244,114,182,0.35) !important; opacity: 1 !important; }
.section-nav .btn-infloww.active     { background: rgba(59,130,246,0.22) !important; border-color: rgba(59,130,246,0.75) !important; box-shadow: 0 0 14px rgba(59,130,246,0.35) !important; opacity: 1 !important; }
.section-nav .btn-twitter.active     { background: rgba(29,161,242,0.22) !important; border-color: rgba(29,161,242,0.75) !important; box-shadow: 0 0 14px rgba(29,161,242,0.35) !important; opacity: 1 !important; }
.section-nav .btn-costs.active       { background: rgba(245,158,11,0.22) !important; border-color: rgba(245,158,11,0.75) !important; box-shadow: 0 0 14px rgba(245,158,11,0.35) !important; opacity: 1 !important; }
.section-nav .btn-drive.active       { background: rgba(148,163,184,0.22) !important; border-color: rgba(148,163,184,0.75) !important; box-shadow: 0 0 14px rgba(148,163,184,0.35) !important; opacity: 1 !important; }
.section-nav .btn-office.active      { background: rgba(249,115,22,0.22) !important; border-color: rgba(249,115,22,0.75) !important; box-shadow: 0 0 14px rgba(249,115,22,0.35) !important; opacity: 1 !important; }

/* Tooltip flotante a la derecha */
.section-nav button::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(12,12,18,0.97);
    color: rgba(255,255,255,0.92);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s 0.05s;
    z-index: 2000;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.section-nav button:hover::after {
    opacity: 1;
}

/* ═══ Secciones en modo pantalla completa ═══ */
.section-fullscreen {
    position: fixed !important;
    top: 81px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 81px) !important;
    z-index: 1000 !important;
    background: #0a0a0f !important;
    overflow-y: auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
/* Botón cerrar: inline en el header-right del header principal */
.section-close-btn {
    background: rgba(255,80,80,0.15);
    border: 1px solid rgba(255,80,80,0.4);
    color: rgba(255,120,120,0.9);
    border-radius: 6px;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.section-close-btn:hover {
    background: rgba(255,80,80,0.3);
    color: #fff;
}
/* Fallback si va al body */
body > .section-close-btn {
    position: fixed;
    top: 20px;
    right: 16px;
    z-index: 1010;
}