/**
 * PLUS MENU - Style ChatGPT Exact
 * Menu popup au-dessus du bouton +
 */

/* Overlay transparent */
.plus-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    display: none;
}
.plus-menu-overlay.active {
    display: block;
}

/* ========================================
   MENU PRINCIPAL
   Position: au-dessus du bouton +
   ======================================== */
.plus-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 1000;
    display: none;
}
.plus-menu.active {
    display: block;
}

/* Items du menu */
.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #0d0d0d;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.1s;
}
.plus-menu-item:hover {
    background: #f7f7f8;
}
.plus-menu-item .item-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.plus-menu-item .item-icon svg {
    width: 18px;
    height: 18px;
}
.plus-menu-item .item-label {
    flex: 1;
}
.plus-menu-item .item-chevron {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

/* Divider */
.plus-menu-divider {
    height: 1px;
    background: #e5e5e5;
    margin: 4px 0;
}

/* ========================================
   SOUS-MENUS
   Position fixe, calculée par JS
   ======================================== */
.plus-submenu {
    position: fixed;
    left: -9999px;
    top: -9999px;
    min-width: 220px;
    max-width: 300px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px;
    z-index: 1001;
    display: none;
}
.plus-submenu.active {
    display: block;
}
.plus-submenu.level-2 {
    z-index: 1002;
}

/* Header sous-menu avec bouton retour */
.plus-submenu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 4px;
}
.plus-submenu-header .back-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: #0d0d0d;
}
.plus-submenu-header .back-btn:hover {
    background: #f7f7f8;
}
.plus-submenu-header .submenu-title {
    font-size: 13px;
    font-weight: 600;
    color: #0d0d0d;
}

/* Items sous-menu */
.plus-submenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #0d0d0d;
    font-size: 13px;
    transition: background 0.1s;
}
.plus-submenu-item:hover {
    background: #f7f7f8;
}
.plus-submenu-item .family-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
}
.plus-submenu-item .type-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.plus-submenu-item .calc-label {
    flex: 1;
    font-size: 13px;
    color: #0d0d0d;
}
.plus-submenu-item .type-code {
    font-size: 10px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 5px;
    border-radius: 3px;
}
.plus-submenu-item .item-badge {
    font-size: 11px;
    color: #666;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 8px;
}
.plus-submenu-item .item-chevron {
    width: 14px;
    height: 14px;
    opacity: 0.35;
}
.plus-submenu-item .has-prompt-badge {
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
}

/* Section title */
.submenu-section-title {
    font-size: 10px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px 4px;
}
.submenu-section-title:first-child {
    padding-top: 4px;
}

/* Scrollbar */
.plus-submenu::-webkit-scrollbar {
    width: 5px;
}
.plus-submenu::-webkit-scrollbar-track {
    background: transparent;
}
.plus-submenu::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

/* Input file caché */
#document-file-input {
    display: none;
}

/* Loading indicator */
.file-upload-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
}
.file-upload-indicator .spinning {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.file-name {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* ========================================
   DARK MODE
   ======================================== */
@media (prefers-color-scheme: dark) {
    .plus-menu,
    .plus-submenu {
        background: #2f2f2f;
        border-color: #444;
    }
    .plus-menu-item,
    .plus-submenu-item {
        color: #ececec;
    }
    .plus-menu-item:hover,
    .plus-submenu-item:hover {
        background: #3a3a3a;
    }
    .plus-menu-divider,
    .plus-submenu-header {
        border-color: #444;
    }
    .plus-submenu-header .back-btn,
    .plus-submenu-header .submenu-title {
        color: #ececec;
    }
    .plus-submenu-header .back-btn:hover {
        background: #3a3a3a;
    }
    .plus-submenu-item .type-code,
    .plus-submenu-item .item-badge {
        background: #444;
        color: #aaa;
    }
    .submenu-section-title {
        color: #888;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .plus-menu {
        left: 8px;
        right: 8px;
        min-width: auto;
    }
    .plus-submenu {
        left: 8px !important;
        right: 8px !important;
        bottom: 70px !important;
        top: auto !important;
        max-width: none;
        width: auto;
    }
}