/* PRDGY CRM v3 — Apple-inspired design system */

/* ── Base Reset ──────────────────────────────────────────────── */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { -webkit-tap-highlight-color: transparent; }

/* ── Scrollbar ───────────────────────────────────────────────── */
@media (min-width: 1024px) {
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #404040; }
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}
@keyframes slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Page enter animation */
main { animation: fadeUp 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ── Glass Header ────────────────────────────────────────────── */
.prdgy-header,
.nav-blur {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(10, 10, 10, 0.72);
}
html.light .prdgy-header,
html.light .nav-blur {
    background: rgba(245, 245, 245, 0.72);
}

/* ── Icon Buttons (header) ───────────────────────────────────── */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: var(--prdgy-muted);
    transition: all 0.15s ease;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
}
.icon-btn:hover {
    color: var(--prdgy-accent);
    background: rgba(255, 255, 255, 0.05);
}
.icon-btn:active {
    transform: scale(0.95);
}

/* ── Badge Dots ──────────────────────────────────────────────── */
.badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 15px;
    height: 15px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
}
.notif-dot {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Dropdown Panels ─────────────────────────────────────────── */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    background: var(--prdgy-surface);
    border: 1px solid var(--prdgy-border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
    z-index: 50;
    animation: scaleIn 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: top right;
}
.dropdown-enter {
    animation: scaleIn 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    color: var(--prdgy-muted);
    transition: all 0.1s ease;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: none;
    width: 100%;
    text-align: left;
}
.dropdown-item:hover {
    color: var(--prdgy-accent);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Dashboard Cards ─────────────────────────────────────────── */
.dash-card {
    border: 1px solid var(--prdgy-border);
    border-radius: 16px;
    background: var(--prdgy-surface);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: inherit;
}
.dash-card:hover {
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.dash-card:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Quick Action Cards (dashboard) ──────────────────────────── */
.qa-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--prdgy-surface);
    border: 1px solid var(--prdgy-border);
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.qa-card:hover {
    border-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.qa-card:active {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
}
.qa-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.qa-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--prdgy-accent);
    letter-spacing: 0.01em;
}
.qa-desc {
    font-size: 0.65rem;
    color: var(--prdgy-muted);
    line-height: 1.3;
}

/* Quick Action Card variant with icon circle */
.quick-action-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--prdgy-surface);
    border: 1px solid var(--prdgy-border);
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.quick-action-card:hover {
    border-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.quick-action-card:active {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
}
.qa-icon-circle,
.quick-action-card .qa-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ── Upload Zone ─────────────────────────────────────────────── */
#upload-zone.drag-over {
    border-color: #e5e5e5;
    background: rgba(229, 229, 229, 0.05);
}

/* ── Chip Radio ──────────────────────────────────────────────── */
.chip-radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 0.75rem;
    border: 1px solid var(--prdgy-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #a3a3a3;
    text-align: center;
    user-select: none;
}
.chip-radio:hover { border-color: #525252; color: #e5e5e5; }
.chip-radio.active, .chip-radio:has(input:checked) {
    background: #fff; color: #000; border-color: #fff;
}

/* ── Chip Toggle ─────────────────────────────────────────────── */
.chip-toggle {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 0.7rem;
    border: 1px solid var(--prdgy-border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #a3a3a3;
    background: transparent;
    white-space: nowrap;
}
.chip-toggle:hover { border-color: #525252; color: #e5e5e5; }
.chip-toggle.active { background: #fff; color: #000; border-color: #fff; }

.chip-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    font-size: 0.8rem;
    border: 1px dashed #404040;
    border-radius: 20px;
    cursor: pointer;
    color: #737373;
    transition: all 0.15s ease;
    background: transparent;
}
.chip-add:hover { border-color: #737373; color: #e5e5e5; }

/* ── Folder Cards ────────────────────────────────────────────── */
.folder-card { border: 1px solid var(--prdgy-border); border-radius: 12px; overflow: hidden; background: var(--prdgy-surface); }
.folder-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; width: 100%; text-align: left; cursor: pointer; transition: background 0.15s; background: transparent; }
.folder-header:hover { background: #1a1a1a; }
.folder-body { border-top: 1px solid var(--prdgy-border); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.folder-body.hidden { display: none; }
.folder-emoji { font-size: 0.9rem; flex-shrink: 0; }
.folder-name { font-size: 0.75rem; font-weight: 600; color: #e5e5e5; flex: 1; }
.folder-count { font-size: 0.62rem; padding: 1px 6px; background: #262626; border-radius: 10px; color: #737373; }
.folder-chevron { font-size: 0.65rem; color: #737373; transition: transform 0.2s; display: inline-block; }
.folder-chevron.open { transform: rotate(180deg); }
.folder-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; flex-shrink: 0; }

/* ── Template Cards ──────────────────────────────────────────── */
.template-inner-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: all 0.15s; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; }
.template-inner-card:hover { background: #1d1d1d; border-color: #333; }
.template-inner-card.active { background: #1f1f1f; border-color: #fff; }
.template-inner-emoji { font-size: 0.875rem; flex-shrink: 0; }
.template-inner-info { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.template-inner-name { font-size: 0.72rem; font-weight: 600; color: #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template-inner-vibe { font-size: 0.6rem; color: #737373; text-transform: uppercase; letter-spacing: 0.05em; }
.template-check { font-size: 0.7rem; color: #fff; flex-shrink: 0; }

.template-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--prdgy-border); border-radius: 12px; cursor: pointer; transition: all 0.15s; background: var(--prdgy-surface); width: 100%; text-align: left; }
.template-card:hover { border-color: #525252; }
.template-card.active { border-color: #fff; background: #1a1a1a; }
.template-accent { width: 4px; height: 28px; border-radius: 2px; flex-shrink: 0; }
.template-emoji { font-size: 1rem; flex-shrink: 0; }
.template-info { display: flex; flex-direction: column; overflow: hidden; }
.template-name { font-size: 0.75rem; font-weight: 600; color: #e5e5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template-vibe { font-size: 0.65rem; color: #737373; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Modal Template Cards ────────────────────────────────────── */
.modal-template-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 10px; border: 1px solid var(--prdgy-border); border-radius: 12px; cursor: pointer; transition: all 0.15s; background: #0f0f0f; text-align: left; overflow: hidden; }
.modal-template-card:hover { border-color: #525252; background: #171717; }
.modal-template-card.active { border-color: #fff; background: #1a1a1a; }
.modal-tmpl-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.modal-check { position: absolute; top: 8px; right: 10px; font-size: 0.75rem; color: #fff; }

.model-badge { font-size: 0.6rem; padding: 1px 6px; background: #262626; border-radius: 6px; color: #a3a3a3; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Prompt & Progress ───────────────────────────────────────── */
.prompt-card { background: var(--prdgy-surface); border: 1px solid var(--prdgy-border); border-radius: 12px; padding: 0.875rem; transition: border-color 0.2s; }
.prompt-card:hover { border-color: #333; }
.progress-bar { height: 3px; background: #1e1e1e; border-radius: 2px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: #e5e5e5; border-radius: 2px; transition: width 0.3s ease; }

/* ── Result Card ─────────────────────────────────────────────── */
.result-card img.result-img { transition: transform 0.3s ease; }
.result-card:hover img.result-img { transform: scale(1.02); }

/* ── Edit Toolbar ────────────────────────────────────────────── */
.edit-toolbar { border-top: 1px solid var(--prdgy-border); padding-top: 8px; margin-top: 8px; }
.edit-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.edit-tool-btn { font-size: 0.65rem; padding: 4px 8px; border: 1px solid #333; border-radius: 6px; cursor: pointer; transition: all 0.15s; color: #a3a3a3; background: transparent; text-transform: uppercase; letter-spacing: 0.03em; }
.edit-tool-btn:hover { border-color: #666; color: #fff; }
.edit-options-panel { margin-top: 4px; }
.edit-option-chip { font-size: 0.65rem; padding: 4px 10px; border: 1px solid #333; border-radius: 12px; cursor: pointer; transition: all 0.15s; color: #a3a3a3; background: transparent; }
.edit-option-chip:hover { background: #fff; color: #000; border-color: #fff; }

/* ── Generating Spinner ──────────────────────────────────────── */
@keyframes pulse-border { 0%, 100% { border-color: var(--prdgy-border); } 50% { border-color: #525252; } }
.generating { animation: pulse-border 2s ease-in-out infinite; }

/* ── Skeleton Loading ────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Toast ────────────────────────────────────────────────────── */
#global-toast > div,
#toast {
    animation: slide-up 0.2s ease-out;
}

/* ── Staggered card animation ────────────────────────────────── */
.qa-card:nth-child(1) { animation: fadeUp 0.2s ease-out 0.05s both; }
.qa-card:nth-child(2) { animation: fadeUp 0.2s ease-out 0.08s both; }
.qa-card:nth-child(3) { animation: fadeUp 0.2s ease-out 0.11s both; }
.qa-card:nth-child(4) { animation: fadeUp 0.2s ease-out 0.14s both; }
.qa-card:nth-child(5) { animation: fadeUp 0.2s ease-out 0.17s both; }
.qa-card:nth-child(6) { animation: fadeUp 0.2s ease-out 0.20s both; }
.qa-card:nth-child(7) { animation: fadeUp 0.2s ease-out 0.23s both; }
.qa-card:nth-child(8) { animation: fadeUp 0.2s ease-out 0.26s both; }
.qa-card:nth-child(9) { animation: fadeUp 0.2s ease-out 0.29s both; }
.qa-card:nth-child(10) { animation: fadeUp 0.2s ease-out 0.32s both; }
.qa-card:nth-child(11) { animation: fadeUp 0.2s ease-out 0.35s both; }
.qa-card:nth-child(12) { animation: fadeUp 0.2s ease-out 0.38s both; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    select, input[type="text"], textarea { font-size: 16px !important; min-height: 44px; }
    button:not(.icon-btn) { min-height: 44px; }
    .chip-radio { min-height: 36px; padding: 8px 12px; font-size: 0.8rem; }
    .chip-toggle { min-height: 32px; padding: 6px 12px; font-size: 0.75rem; }
    .edit-tool-btn { min-height: 36px; padding: 6px 10px; font-size: 0.7rem; }
    .edit-option-chip { min-height: 32px; padding: 6px 12px; font-size: 0.7rem; }
    .template-card { min-height: 44px; }
    .qa-card { padding: 14px; }
    .suggestion-category button { min-height: 44px; }
    .suggestion-category label { min-height: 40px; display: flex; align-items: flex-start; }
    .suggestion-check { width: 18px; height: 18px; min-width: 18px; }
}

/* ── Desktop sidebar ─────────────────────────────────────────── */
@media (min-width: 1024px) {
    aside { max-height: calc(100vh - 49px); }
}