/**
 * Tags, AI Analysis & Enhanced Quotes — Universal CSS
 * Deploy to: /var/www/html/library/includes/tags_ui.css
 *
 * Include in any Shakespeare reader. Uses CSS custom properties
 * from the parent theme (--red, --gold, --border, etc.)
 * Falls back to sensible defaults if variables not set.
 */

/* ============================================================
   TAG PILLS — clickable subject/device/motif chips
   ============================================================ */
.tag-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem; padding: 0.3rem 0.75rem; border-radius: 20px;
    cursor: pointer; transition: all 0.2s ease;
    border: 1px solid transparent; font-family: inherit;
}
.tag-pill:hover { transform: translateY(-1px); }

.tag-pill-subjects       { background: rgba(139,26,26,0.06); color: var(--red, #8B1A1A); }
.tag-pill-subjects:hover { background: rgba(139,26,26,0.12); border-color: var(--red, #8B1A1A); }

.tag-pill-literary_devices       { background: rgba(184,134,11,0.08); color: var(--gold, #B8860B); }
.tag-pill-literary_devices:hover { background: rgba(184,134,11,0.15); border-color: var(--gold, #B8860B); }

.tag-pill-motifs_and_symbols       { background: rgba(74,26,107,0.08); color: #6b3fa0; }
.tag-pill-motifs_and_symbols:hover { background: rgba(74,26,107,0.15); border-color: #6b3fa0; }

.tag-pill-allusions       { background: rgba(34,139,34,0.08); color: #2d7d2d; }
.tag-pill-allusions:hover { background: rgba(34,139,34,0.15); border-color: #2d7d2d; }

.tag-pill-settings       { background: rgba(100,100,180,0.08); color: #555; }
.tag-pill-settings:hover { background: rgba(100,100,180,0.15); border-color: #888; }

.tag-pill-characters       { background: rgba(59,130,246,0.08); color: #2563eb; }
.tag-pill-characters:hover { background: rgba(59,130,246,0.15); border-color: #2563eb; }

/* ============================================================
   TAG SECTION in the Tags & Themes tab
   ============================================================ */
.tags-section { margin-bottom: 1.25rem; }
.tags-section-label {
    font-weight: 600; font-size: 0.92rem;
    color: var(--ink-light, #555); margin-bottom: 0.4rem;
}
.tags-section-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Thematic Statements — full sentences, styled differently */
.thematic-statements { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border, #e2e0d8); }
.thematic-statements-label {
    font-weight: 700; font-size: 0.85rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--red, #8B1A1A); margin-bottom: 0.6rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.thematic-statement {
    font-size: 0.92rem; line-height: 1.65; color: var(--ink, #2c2417);
    padding: 0.6rem 0.85rem; margin-bottom: 0.5rem;
    background: rgba(139,26,26,0.03); border-left: 3px solid var(--red, #8B1A1A);
    border-radius: 0 6px 6px 0; font-style: italic;
}

/* ============================================================
   ENHANCED QUOTES — structured quote cards
   ============================================================ */
.structured-quote-card {
    background: white; border: 1px solid var(--border, #e2e0d8);
    border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
    transition: all 0.2s ease; position: relative;
}
.structured-quote-card:hover {
    border-color: var(--gold, #B8860B);
    box-shadow: 0 2px 12px rgba(184,134,11,0.08);
}

.sq-quote-text {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.05rem; line-height: 1.6; color: var(--ink, #2c2417);
    font-style: italic; margin-bottom: 0.6rem;
    padding-left: 1rem; border-left: 3px solid var(--gold, #B8860B);
}
.sq-quote-text::before { content: '\201C'; }
.sq-quote-text::after  { content: '\201D'; }

.sq-attribution {
    font-size: 0.85rem; color: var(--ink-light, #6b5e4b);
    margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem;
}
.sq-speaker {
    font-weight: 600; color: var(--red, #8B1A1A);
}
.sq-location {
    font-family: var(--font-mono, monospace); font-size: 0.78rem;
    background: rgba(184,134,11,0.08); padding: 0.15rem 0.5rem;
    border-radius: 4px; color: var(--gold, #B8860B);
}

.sq-context {
    font-size: 0.87rem; line-height: 1.55; color: var(--ink-lighter, #8b7e6a);
    margin-bottom: 0.6rem;
}

.sq-significance {
    font-size: 0.87rem; line-height: 1.55; color: var(--ink, #2c2417);
    padding: 0.5rem 0.75rem; background: rgba(139,26,26,0.03);
    border-radius: 6px; margin-bottom: 0.6rem;
}

.sq-tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem;
}
.sq-tag {
    font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 12px;
    cursor: pointer; transition: all 0.2s ease;
}
.sq-tag-subject { background: rgba(139,26,26,0.06); color: var(--red, #8B1A1A); }
.sq-tag-subject:hover { background: rgba(139,26,26,0.15); }
.sq-tag-device { background: rgba(184,134,11,0.08); color: var(--gold, #B8860B); }
.sq-tag-device:hover { background: rgba(184,134,11,0.15); }

/* Quote card expand/collapse */
.sq-details { display: none; }
.structured-quote-card.expanded .sq-details { display: block; }
.sq-expand-btn {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: none; border: none; cursor: pointer;
    color: var(--ink-lighter, #8b7e6a); font-size: 1.1rem;
    width: 24px; height: 24px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%;
    transition: all 0.2s ease;
}
.sq-expand-btn:hover { background: rgba(0,0,0,0.05); color: var(--ink, #2c2417); }

/* Filter bar above quotes */
.quotes-filter-bar {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0;
    border-bottom: 1px solid var(--border, #e2e0d8); margin-bottom: 1rem;
    flex-wrap: wrap;
}
.quotes-filter-label {
    font-size: 0.82rem; color: var(--ink-lighter, #8b7e6a); white-space: nowrap;
}
.quotes-filter-chip {
    font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 16px;
    border: 1px solid var(--border, #e2e0d8); background: white;
    cursor: pointer; transition: all 0.2s ease; color: var(--ink-light, #6b5e4b);
}
.quotes-filter-chip:hover,
.quotes-filter-chip.active {
    border-color: var(--red, #8B1A1A); color: var(--red, #8B1A1A);
    background: rgba(139,26,26,0.04);
}

/* ============================================================
   AI BADGE on the Tags tab button
   ============================================================ */
.tab-ai { position: relative; }
.ai-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.15rem 0.45rem 0.15rem 0.3rem;
    border-radius: 10px; color: white; margin-left: 0.4rem;
    vertical-align: middle; line-height: 1;
    background: linear-gradient(135deg, var(--red, #8B1A1A), var(--gold, #B8860B));
}
.ai-badge svg { width: 10px; height: 10px; stroke: white; }
.ai-badge.pulse { animation: badgePulse 2s ease-in-out 3; }
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,26,26,0); }
    50% { box-shadow: 0 0 0 6px rgba(139,26,26,0.15); }
}

/* ============================================================
   TAG SEARCH PANEL — slides open below the tags tab
   ============================================================ */
.tag-search-panel {
    display: none; margin-top: 1.5rem; background: white;
    border: 1px solid var(--border, #e2e0d8); border-radius: 10px; overflow: hidden;
}
.tag-search-panel.open { display: block; animation: fadeSlideIn 0.3s ease-out; }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.tag-search-panel-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1.25rem; background: var(--parchment, #faf8f3);
    border-bottom: 1px solid var(--border, #e2e0d8);
}
.tag-search-panel-title { font-weight: 600; font-size: 1.05rem; }
.tag-detail-close {
    background: none; border: none; font-size: 1.4rem; cursor: pointer;
    color: var(--ink-lighter, #8b7e6a); width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.tag-detail-close:hover { background: rgba(0,0,0,0.05); }

/* AI Zone — always visible at top of search panel */
.tag-search-ai-zone {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border, #e2e0d8);
    background: linear-gradient(135deg, rgba(139,26,26,0.03), rgba(184,134,11,0.03));
}
.tag-search-ai-prompt { display: flex; align-items: center; gap: 0.75rem; }
.tag-search-ai-icon {
    flex-shrink: 0; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--red, #8B1A1A); border-radius: 50%; color: white;
}
.tag-search-ai-text { flex: 1; }
.tag-search-ai-text .ai-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--red, #8B1A1A);
    margin-bottom: 0.15rem; display: flex; align-items: center; gap: 0.3rem;
}
.tag-search-ai-text .ai-desc {
    font-size: 0.85rem; color: var(--ink-light, #6b5e4b); line-height: 1.4;
}
.ai-analysis-btn {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.15rem; background: var(--red, #8B1A1A); color: white;
    border: none; border-radius: 20px; font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.ai-analysis-btn:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(139,26,26,0.2); }
.ai-analysis-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* AI result */
.ai-result { padding: 1rem 0 0; }
.ai-result-analysis { font-size: 0.93rem; line-height: 1.7; color: var(--ink, #2c2417); margin-bottom: 1rem; }
.ai-evidence { margin-bottom: 0.75rem; }
.ai-evidence-quote {
    font-style: italic; font-size: 0.95rem; color: var(--ink-light, #6b5e4b);
    padding: 0.5rem 0.75rem; background: var(--parchment, #faf8f3);
    border-left: 2px solid var(--gold, #B8860B); border-radius: 0 4px 4px 0; margin-bottom: 0.25rem;
}
.ai-evidence-explanation { font-size: 0.85rem; color: var(--ink-lighter, #8b7e6a); padding-left: 0.75rem; }
.ai-connection {
    font-size: 0.88rem; color: var(--ink-light, #6b5e4b); font-style: italic;
    padding-top: 0.5rem; border-top: 1px solid var(--border, #e2e0d8); margin-top: 0.75rem;
}

/* Search results */
.tag-search-panel-body { padding: 0; overflow-y: auto; max-height: 400px; }
.tag-search-section { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border, #e2e0d8); }
.tag-search-section:last-child { border-bottom: none; }
.tag-search-section-title {
    font-size: 0.82rem; font-weight: 600; color: var(--ink-lighter, #8b7e6a);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.tag-search-ch-link {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
    font-size: 0.9rem; color: var(--ink, #2c2417); text-decoration: none;
    transition: color 0.2s ease;
}
.tag-search-ch-link:hover { color: var(--red, #8B1A1A); }
.tag-search-ch-link .ch-badge {
    font-weight: 600; color: var(--red, #8B1A1A); min-width: 2rem;
}
.tag-search-ch-link.current { font-weight: 600; color: var(--red, #8B1A1A); }
.tag-search-snippet {
    padding: 0.5rem 0.75rem; margin: 0.35rem 0;
    background: var(--cream, #fdf8ef); border-radius: 4px;
    font-size: 0.85rem; line-height: 1.6; color: var(--ink-light, #6b5e4b);
    border-left: 2px solid var(--border, #e2e0d8);
}
.tag-search-snippet mark {
    background: rgba(184,134,11,0.25); color: var(--ink, #2c2417);
    padding: 0.05em 0.15em; border-radius: 2px;
}

/* ============================================================
   AI CALLOUT — first-time feature discovery
   ============================================================ */
.ai-callout { display: none; position: relative; margin: -0.5rem 0 1.25rem 0; }
.ai-callout.show { display: block; animation: fadeSlideIn 0.4s ease-out; }
.ai-callout-content {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(139,26,26,0.04), rgba(184,134,11,0.04));
    border: 1px solid rgba(139,26,26,0.12); border-radius: 8px; font-size: 0.85rem;
}
.ai-callout-content p { margin: 0.15rem 0 0; color: var(--ink-light, #6b5e4b); font-size: 0.82rem; }
.ai-callout-icon { color: var(--red, #8B1A1A); flex-shrink: 0; }
.ai-callout-dismiss {
    background: none; border: none; cursor: pointer; font-size: 1.2rem;
    color: var(--ink-lighter, #8b7e6a); margin-left: auto; padding: 0.25rem;
}