/*
 * spotlight-more.css — Spotlight "More" Panel
 *
 * Z-index stack:
 *   body::before scrim        600
 *   #box-icon-companion-wrap  601
 *   #box-modal                1000
 *   .spotlight-more-panel     1050
 *   .spotlight-more-btn       1100
 */


/* ── More / Less button ───────────────────────────────────────────────────── */

.spotlight-more-btn {
    position: fixed;
    bottom: 28px; right: 24px;
    z-index: 1100;
    background: rgba(255,255,255,0.13);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 20px; padding: 8px 18px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
    cursor: pointer;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-btn:hover  { background: rgba(255,255,255,0.22); }
.spotlight-more-btn:active { transform: scale(0.97); }


/* ── Panel ────────────────────────────────────────────────────────────────── */

.spotlight-more-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background: var(--bg-panel, #1c1c1e);
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px 16px 0 0;
    padding: 20px 20px 80px;
    max-height: 65dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight-more-panel--open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .spotlight-more-panel { transition: none; } }


/* ── Header ───────────────────────────────────────────────────────────────── */

.spotlight-more-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.spotlight-more-label { font-size: 1.1rem; font-weight: 700; color: var(--text-main, #fff); }
.spotlight-more-close-btn {
    background: none; border: none;
    color: var(--text-muted, rgba(255,255,255,0.5));
    font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-close-btn:hover { color: var(--text-main, #fff); }


/* ── Sections ─────────────────────────────────────────────────────────────── */

.spotlight-more-section { margin-bottom: 22px; }
.spotlight-more-section--log { margin-bottom: 0; }
.spotlight-more-section-title {
    display: block;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--text-muted, rgba(255,255,255,0.5));
    margin-bottom: 8px;
}


/* ── Set pills ────────────────────────────────────────────────────────────── */

.spotlight-more-set-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px; align-items: center;
}

/* Pill text bumped from 0.78rem to 0.9rem for readability */
.spotlight-more-set-pill {
    display: inline-flex; align-items: center;
    background: color-mix(in srgb, var(--accent-color, #46a5ce) 18%, transparent);
    border: 1px solid var(--accent-color, #46a5ce);
    color: var(--accent-color, #46a5ce);
    border-radius: 20px; padding: 6px 14px;
    font-size: 0.9rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s;
}
.spotlight-more-set-pill:hover {
    background: color-mix(in srgb, var(--accent-color, #46a5ce) 28%, transparent);
}
.spotlight-more-set-pill--default {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-muted, rgba(255,255,255,0.5));
    font-style: italic;
}
.spotlight-more-set-pill--default:hover { background: rgba(255,255,255,0.10); }

.spotlight-more-last-session {
    font-size: 0.7rem; color: var(--text-muted, rgba(255,255,255,0.35));
    font-style: italic; white-space: nowrap;
}


/* ── Set quick-entry buttons ─────────────────────────────────────────────── */

.spotlight-more-set-btns { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.spotlight-more-set-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-main, #fff);
    border-radius: 8px; padding: 6px 13px;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-set-btn:hover { background: rgba(255,255,255,0.13); }
.spotlight-more-set-btn--filled {
    background: color-mix(in srgb, var(--accent-color, #46a5ce) 15%, transparent);
    border-color: var(--accent-color, #46a5ce);
    color: var(--accent-color, #46a5ce);
}
.spotlight-more-set-btn--custom { border-style: dashed; opacity: 0.8; }
.spotlight-more-set-btn--custom:hover { opacity: 1; }


/* ── Set inline editor ───────────────────────────────────────────────────── */

.spotlight-more-set-editor {
    margin-top: 6px; padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
}
.spotlight-more-set-name {
    display: block;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-color, #46a5ce); margin-bottom: 8px;
}

.spotlight-more-structured-inputs {
    display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}

/* CRITICAL: CSS display:flex overrides browser [hidden]{display:none} */
.spotlight-more-structured-inputs[hidden],
.spotlight-more-custom-inputs[hidden] {
    display: none !important;
}

.spotlight-more-val-input {
    width: 52px; flex-shrink: 0;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    color: var(--text-main, #fff); font-size: 0.9rem; font-family: inherit;
    text-align: center; padding: 7px 6px; transition: border-color 0.15s;
}
.spotlight-more-val-input:focus { outline: none; border-color: var(--accent-color, #46a5ce); }
.spotlight-more-val-input::placeholder { color: rgba(255,255,255,0.3); }

.spotlight-more-unit-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-muted, rgba(255,255,255,0.4));
    border-radius: 6px; padding: 5px 8px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-unit-btn--on {
    background: color-mix(in srgb, var(--accent-color, #46a5ce) 20%, transparent);
    border-color: var(--accent-color, #46a5ce);
    color: var(--accent-color, #46a5ce);
}
.spotlight-more-set-x {
    color: var(--text-muted, rgba(255,255,255,0.4));
    font-size: 0.9rem; font-weight: 600; flex-shrink: 0; user-select: none;
}

.spotlight-more-custom-inputs { margin-top: 2px; }
.spotlight-more-custom-val {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    color: var(--text-main, #fff); font-size: 0.88rem; font-family: inherit;
    padding: 8px 10px; transition: border-color 0.15s;
}
.spotlight-more-custom-val:focus { outline: none; border-color: var(--accent-color, #46a5ce); }
.spotlight-more-custom-val::placeholder { color: rgba(255,255,255,0.3); }

.spotlight-more-editor-actions { display: flex; gap: 8px; margin-top: 10px; }
.spotlight-more-set-confirm {
    flex: 1; background: var(--accent-color, #46a5ce); color: #fff;
    border: none; border-radius: 8px; padding: 8px 0;
    font-size: 0.85rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-set-confirm:hover { opacity: 0.88; }
.spotlight-more-set-cancel {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted, rgba(255,255,255,0.5));
    border-radius: 8px; width: 40px; font-size: 0.9rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-set-cancel:hover { background: rgba(255,255,255,0.13); }


/* ── Change confirm bar ───────────────────────────────────────────────────── */

.spotlight-more-change-confirm {
    margin-top: 10px; padding: 10px;
    background: rgba(255,200,50,0.08);
    border: 1px solid rgba(255,200,50,0.25);
    border-radius: 8px;
}
.spotlight-more-change-msg { font-size: 0.8rem; color: var(--text-main, #fff); margin: 0 0 8px; line-height: 1.4; }
.spotlight-more-change-old { color: var(--text-muted, rgba(255,255,255,0.5)); text-decoration: line-through; font-size: 0.78rem; }
.spotlight-more-change-new { color: var(--accent-color, #46a5ce); font-weight: 600; font-size: 0.78rem; }
.spotlight-more-change-actions { display: flex; gap: 8px; }
.spotlight-more-change-yes {
    flex: 1; background: var(--accent-color, #46a5ce); color: #fff;
    border: none; border-radius: 7px; padding: 7px 0;
    font-size: 0.82rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.spotlight-more-change-no {
    flex: 1; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-muted, rgba(255,255,255,0.5));
    border-radius: 7px; padding: 7px 0; font-size: 0.82rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


/* ── Activity controls — stars LEFT · emojis + [+] RIGHT ─────────────────── */

.spotlight-more-activity-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.spotlight-more-stars-row { display: flex; gap: 4px; flex-shrink: 0; }
.spotlight-more-star {
    font-size: 1.2rem; line-height: 1; opacity: 0.25;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    padding: 4px 1px; transition: opacity 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-star:hover { opacity: 0.6; }

.spotlight-more-emoji-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.spotlight-more-emoji-row { display: flex; gap: 6px; }
.spotlight-more-emoji-quick {
    display: block; width: 28px; height: 28px;
    image-rendering: pixelated;
    filter: none !important;
    opacity: 0.5; cursor: pointer; border-radius: 50%;
    transition: opacity 0.12s; -webkit-tap-highlight-color: transparent;
}
.spotlight-more-emoji-quick:hover { opacity: 0.8; }

.spotlight-more-emoji-expand-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--accent-color, #46a5ce);
    background: transparent; color: var(--accent-color, #46a5ce);
    font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.spotlight-more-emoji-expand-btn:hover {
    background: color-mix(in srgb, var(--accent-color, #46a5ce) 15%, transparent);
}

#spotlight-more-emoji-picker-wrap { margin-bottom: 6px; }
#spotlight-more-emoji-picker-wrap .emoji-picker-grid { max-height: 180px; overflow-y: auto; }


/* ── Note row ─────────────────────────────────────────────────────────────── */

.spotlight-more-note-row { display: flex; flex-direction: column; gap: 6px; }
.spotlight-more-note-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted, rgba(255,255,255,0.5)); }
.spotlight-more-input-row { display: flex; gap: 8px; align-items: center; }
.spotlight-more-activity-input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; color: var(--text-main, #fff); font-size: 0.88rem; font-family: inherit;
    padding: 9px 11px; transition: border-color 0.15s;
}
.spotlight-more-activity-input::placeholder { color: rgba(255,255,255,0.35); }
.spotlight-more-activity-input:focus { outline: none; border-color: var(--accent-color, #46a5ce); }
.spotlight-more-log-btn {
    flex-shrink: 0; background: var(--accent-color, #46a5ce); color: #fff;
    border: none; border-radius: 8px; padding: 9px 18px;
    font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;
}
.spotlight-more-log-btn:disabled { cursor: default; }
.spotlight-more-log-btn:not(:disabled):hover { opacity: 0.88; }


/* ── Activity Log list ────────────────────────────────────────────────────── */

.spotlight-more-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.spotlight-more-log-empty { font-size: 0.82rem; color: var(--text-muted, rgba(255,255,255,0.4)); font-style: italic; }
.spotlight-more-log-entry { display: flex; flex-direction: column; gap: 2px; }
.spotlight-more-log-content { font-size: 0.88rem; color: var(--text-main, #fff); line-height: 1.4; }
.spotlight-more-log-time { font-size: 0.72rem; color: var(--text-muted, rgba(255,255,255,0.45)); }
.spotlight-more-log-stars { color: var(--accent-color, #46a5ce); font-size: 0.78rem; letter-spacing: 1px; }
.spotlight-more-log-text { color: var(--text-main, #fff); }


/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .spotlight-more-btn { bottom: 20px; right: 16px; padding: 8px 16px; }
    .spotlight-more-panel { max-height: 72dvh; padding: 18px 16px 88px; }
    .spotlight-more-star { font-size: 1.3rem; padding: 5px 1px; }
    .spotlight-more-val-input { width: 44px; }
    .spotlight-more-set-btn { padding: 6px 11px; }
    /* Pill text stays at 0.9rem on mobile — readable on small screens */
    .spotlight-more-set-pill { padding: 5px 12px; }
}