/* ===== KingdomAI Suite Nav — App Switcher ===== */
/* Desktop-only (768px+). Hidden on mobile. */

/* Hide everything below 768px */
@media (max-width: 767px) {
    .suite-trigger,
    .suite-panel { display: none !important; }
}

/* ---- Trigger Button ---- */
.suite-trigger {
    position: fixed;
    top: 10px;
    right: 24px;
    z-index: 10000;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(3, 6px);
    grid-template-rows: repeat(3, 6px);
    gap: 3px;
    align-content: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    padding: 0;
}

.suite-trigger .dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    transition: background 0.2s, filter 0.2s;
}

/* Colored dots — each matches an app icon gradient */
.suite-trigger .dot:nth-child(1) { background: #667eea; } /* AI Images */
.suite-trigger .dot:nth-child(2) { background: #f5576c; } /* AI Writer */
.suite-trigger .dot:nth-child(3) { background: #4facfe; } /* AI Video */
.suite-trigger .dot:nth-child(4) { background: #43e97b; } /* AI Music */
.suite-trigger .dot:nth-child(5) { background: #fa709a; } /* Photo Editor */
.suite-trigger .dot:nth-child(6) { background: #a18cd1; } /* Video Editor */
.suite-trigger .dot:nth-child(7) { background: #fccb90; } /* Video Trimmer */
.suite-trigger .dot:nth-child(8) { background: #ff9a9e; } /* Video Recorder */
.suite-trigger .dot:nth-child(9) { background: #a1c4fd; } /* Audio Editor */

/* Light theme (AI tools) */
[data-suite-theme="light"] .suite-trigger {
    background: rgba(0, 0, 0, 0.06);
}
[data-suite-theme="light"] .suite-trigger:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Dark theme (editors) */
[data-suite-theme="dark"] .suite-trigger {
    background: rgba(255, 255, 255, 0.1);
}
[data-suite-theme="dark"] .suite-trigger:hover {
    background: rgba(255, 255, 255, 0.18);
}

.suite-trigger:active {
    transform: scale(0.92);
}

/* ---- Backdrop ---- */
.suite-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}
.suite-backdrop.open {
    display: block;
}

/* ---- Panel (always dark, Adobe-style) ---- */
.suite-panel {
    position: fixed;
    top: 54px;
    right: 24px;
    z-index: 9999;
    width: 320px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.suite-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.suite-panel-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #aaa;
    margin: 0 0 12px 4px;
}

/* ---- Section Dividers ---- */
.suite-section {
    margin-bottom: 12px;
}
.suite-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 6px 4px;
}

/* AI Tools section — light mode feel */
.suite-section-ai {
    background: #f5f5f7;
    margin: 0 -16px 12px;
    padding: 12px 16px;
    border-radius: 8px;
}
.suite-section-ai .suite-section-label {
    color: #666;
}
.suite-section-ai .suite-item {
    color: #333;
}
.suite-section-ai .suite-item:hover {
    background: rgba(0,0,0,0.06);
    color: #111;
}
.suite-section-ai .suite-item.active {
    background: rgba(0,0,0,0.10);
    color: #111;
}

/* ---- App Items ---- */
.suite-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.suite-item:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
    text-decoration: none;
}
.suite-item.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.suite-item.active::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4fc3f7;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---- Icon Badges ---- */
.suite-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

/* AI Tool gradients */
.suite-icon-ai-images   { background: linear-gradient(135deg, #667eea, #764ba2); }
.suite-icon-ai-writer   { background: linear-gradient(135deg, #f093fb, #f5576c); }
.suite-icon-ai-video    { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.suite-icon-ai-music    { background: linear-gradient(135deg, #43e97b, #38f9d7); }

/* Editor gradients */
.suite-icon-photo-editor   { background: linear-gradient(135deg, #fa709a, #fee140); }
.suite-icon-video-editor   { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.suite-icon-video-trimmer  { background: linear-gradient(135deg, #fccb90, #d57eeb); }
.suite-icon-video-recorder { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
.suite-icon-audio-editor   { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

/* ---- Lock icon for auth-gated AI tools ---- */
.suite-lock {
    font-size: 10px;
    color: #666;
    margin-left: auto;
    flex-shrink: 0;
}
.suite-item:hover .suite-lock {
    color: #999;
}

/* ---- Separator ---- */
.suite-separator {
    height: 1px;
    background: #333;
    margin: 8px 0;
}