/*
 * Evoke Audit Audio Version 7 — Public CSS  v7.0.0
 * Author: EVOKE (Janelle Mason & Twanna Finch)
 * Navy: #001f3f  |  Gold: #B59410  |  All buttons: white text always
 */

:root {
    --ear-navy:        #001f3f;
    --ear-navy-dark:   #00152a;
    --ear-gold:        #B59410;
    --ear-gold-dark:   #9a7d0a;
    --ear-text:        #1a1a2e;
    --ear-muted:       #5a5a72;
    --ear-border:      #d8dceb;
    --ear-bg:          #f4f6fc;
    --ear-card-bg:     #ffffff;
    --ear-shadow:      0 2px 12px rgba(0,31,63,.10);
    --ear-shadow-lg:   0 6px 24px rgba(0,31,63,.20);
    --ear-radius:      10px;
    --ear-radius-sm:   6px;
    --ear-transition:  all .22s ease;
}

/* ── Wrapper ────────────────────────────────────────────────────── */
.ear-wrap {
    color: var(--ear-text);
    padding-bottom: 6rem; /* room for sticky bar */
}

/* ── Filters ────────────────────────────────────────────────────── */
.ear-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background: var(--ear-bg);
    border: 1px solid var(--ear-border);
    border-radius: var(--ear-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}
.ear-filter-group { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.ear-filter-group label { font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ear-muted); }
.ear-search-group { flex:1 1 260px; }
.ear-search-input-wrap { position:relative; display:flex; align-items:center; }
.ear-search-icon { position:absolute; left:.75rem; color:var(--ear-muted); pointer-events:none; display:flex; align-items:center; }
.ear-search-input { width:100%; padding:.6rem 2.5rem .6rem 2.4rem; border:1px solid var(--ear-border); border-radius:var(--ear-radius-sm); font-size:.95rem; background:#fff; transition:var(--ear-transition); box-sizing:border-box; }
.ear-search-input:focus { outline:none; border-color:var(--ear-navy); box-shadow:0 0 0 3px rgba(0,31,63,.15); }
.ear-clear-search { position:absolute; right:.6rem; font-size:1.2rem; color:var(--ear-muted); text-decoration:none; padding:.1rem .3rem; border-radius:50%; transition:var(--ear-transition); }
.ear-clear-search:hover { background:var(--ear-border); color:var(--ear-text); }
.ear-select { padding:.6rem 2rem .6rem .75rem; border:1px solid var(--ear-border); border-radius:var(--ear-radius-sm); font-size:.95rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A72' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .75rem center; -webkit-appearance:none; appearance:none; cursor:pointer; }
.ear-select:focus { outline:none; border-color:var(--ear-navy); box-shadow:0 0 0 3px rgba(0,31,63,.15); }
.ear-filter-actions { flex-direction:row; align-items:center; gap:.5rem; margin-top:.5rem; }

/* ── Base button ────────────────────────────────────────────────── */
.ear-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.6rem 1rem;
    border:2px solid transparent;
    border-radius:var(--ear-radius-sm);
    font-size:.875rem; font-weight:600; cursor:pointer;
    text-decoration:none !important;
    transition:var(--ear-transition);
    white-space:nowrap; line-height:1.4;
    box-sizing:border-box;
}
.ear-btn-sm { padding:.35rem .75rem; font-size:.78rem; }

.ear-btn-primary {
    background:var(--ear-navy) !important;
    color:#fff !important;
    border-color:var(--ear-navy) !important;
}
.ear-btn-primary:hover, .ear-btn-primary:focus {
    background:var(--ear-navy-dark) !important;
    border-color:var(--ear-navy-dark) !important;
    color:#fff !important; outline:none;
}
.ear-btn-outline {
    background:transparent; color:var(--ear-navy); border-color:var(--ear-navy);
}
.ear-btn-outline:hover, .ear-btn-outline:focus {
    background:var(--ear-navy); color:#fff !important; outline:none;
}
.ear-btn-outline-white {
    background:transparent; color:#fff !important; border-color:rgba(255,255,255,.6);
}
.ear-btn-outline-white:hover, .ear-btn-outline-white:focus {
    background:rgba(255,255,255,.15); border-color:#fff; color:#fff !important; outline:none;
}

/* ── Result count ───────────────────────────────────────────────── */
.ear-result-count { font-size:.875rem; color:var(--ear-muted); margin-bottom:1.25rem; }

/* ── Grid ───────────────────────────────────────────────────────── */
.ear-grid { display:grid; gap:1.5rem; grid-template-columns:1fr; }
.ear-cols-2 { grid-template-columns:repeat(2,1fr); }
.ear-cols-3 { grid-template-columns:repeat(3,1fr); }

/* ── Card ───────────────────────────────────────────────────────── */
.ear-card {
    background:var(--ear-card-bg);
    border:1px solid var(--ear-border);
    border-radius:var(--ear-radius);
    box-shadow:var(--ear-shadow);
    display:flex; flex-direction:column;
    transition:var(--ear-transition);
    overflow:hidden;
}
.ear-card:hover { box-shadow:var(--ear-shadow-lg); transform:translateY(-2px); }

/* Card header: badges left, Listen icon right */
.ear-card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1.25rem .5rem;
    gap:.5rem;
}
.ear-card-badges { display:flex; flex-wrap:wrap; gap:.4rem; flex:1; }

.ear-badge { display:inline-block; padding:.2em .65em; border-radius:20px; font-size:.75rem; font-weight:700; letter-spacing:.03em; }
.ear-badge-year { background:var(--ear-navy); color:#fff; }
.ear-badge-cat  { background:rgba(181,148,16,.12); color:#7a5f00; border:1px solid rgba(181,148,16,.35); }

/* Listen icon button (card header, top-right) */
.ear-btn-listen-icon {
    display:inline-flex; align-items:center; gap:.3rem;
    background:transparent;
    border:1.5px solid var(--ear-gold);
    border-radius:20px;
    padding:.25rem .65rem;
    color:var(--ear-gold);
    font-size:.72rem; font-weight:600;
    cursor:pointer;
    transition:var(--ear-transition);
    flex-shrink:0;
    white-space:nowrap;
}
.ear-btn-listen-icon:hover, .ear-btn-listen-icon:focus {
    background:var(--ear-gold);
    color:#fff !important;
    outline:none;
}
.ear-btn-listen-icon svg { flex-shrink:0; }
.ear-btn-listen-icon.ear-listening {
    background:var(--ear-gold);
    color:#fff !important;
}

/* Card body */
.ear-card-body { flex:1; padding:.75rem 1.25rem 1rem; }
.ear-card-title { margin:0 0 .5rem; font-size:1rem; font-weight:700; line-height:1.35; color:var(--ear-navy-dark); }
.ear-card-desc  { margin:0; font-size:.875rem; color:var(--ear-muted); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── THREE EQUAL ACTION BUTTONS ─────────────────────────────────── */
.ear-wrap .ear-card-actions {
    display:grid !important;
    grid-template-columns:1fr 1fr 1fr !important; /* perfectly equal widths */
    gap:0 !important;
    border-top:1px solid var(--ear-border);
    width:100% !important;
    box-sizing:border-box;
}

/* shared styles for all three */
.ear-btn-view,
.ear-btn-download,
.ear-btn-summarize {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.35rem !important;
    padding:.65rem .5rem !important;
    font-size:.82rem !important;
    font-weight:600 !important;
    border-radius:0 !important;
    border:none !important;
    border-right:1px solid var(--ear-border) !important;
    cursor:pointer !important;
    text-decoration:none !important;
    transition:var(--ear-transition) !important;
    white-space:nowrap;
    line-height:1.4;
    box-sizing:border-box;
}

/* VIEW — navy */
.ear-btn-view {
    background:var(--ear-navy) !important;
    color:#fff !important;
}
.ear-btn-view:hover, .ear-btn-view:focus {
    background:var(--ear-navy-dark) !important;
    color:#fff !important;
    outline:none;
}

/* DOWNLOAD — navy */
.ear-btn-download {
    background:var(--ear-navy) !important;
    color:#fff !important;
}
.ear-btn-download:hover,
.ear-btn-download:focus,
.ear-btn-download:visited,
.ear-btn-download:active {
    background:var(--ear-navy-dark) !important;
    color:#fff !important;
    outline:none;
}

/* SUMMARIZE — gold, no right border (last item) */
.ear-btn-summarize {
    background:var(--ear-gold) !important;
    color:#fff !important;
    border-right:none !important;
}
.ear-btn-summarize:hover, .ear-btn-summarize:focus {
    background:var(--ear-gold-dark) !important;
    color:#fff !important;
    outline:none;
}

/* bottom corners follow card radius */
.ear-card-actions .ear-btn-view      { border-bottom-left-radius:calc(var(--ear-radius) - 1px) !important; }
.ear-card-actions .ear-btn-summarize { border-bottom-right-radius:calc(var(--ear-radius) - 1px) !important; }

.ear-no-pdf { font-size:.8rem; color:var(--ear-muted); font-style:italic; padding:.75rem 1rem; }

/* ── STICKY BOTTOM AUDIO PLAYER BAR ─────────────────────────────
   Deep navy background · Gold Play + Stop buttons · ONE player only
───────────────────────────────────────────────────────────────── */
.ear-sticky-bar {
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:999999;
    background:var(--ear-navy);
    border-top:3px solid var(--ear-gold);
    box-shadow:0 -4px 20px rgba(0,0,0,.35);
    padding:.7rem 1.5rem;
}
.ear-sticky-bar[hidden] { display:none !important; }

.ear-sticky-inner {
    display:flex; align-items:center; gap:1.25rem;
    max-width:1200px; margin:0 auto;
}

/* Audio icon + title */
.ear-sticky-meta { display:flex; align-items:center; gap:.65rem; flex:1; min-width:0; }
.ear-sticky-wave { flex-shrink:0; color:var(--ear-gold); }
.ear-sticky-text { display:flex; flex-direction:column; min-width:0; }
.ear-sticky-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.55); line-height:1; margin-bottom:.15rem; }
.ear-sticky-title { font-size:.85rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Controls */
.ear-sticky-controls { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }

/* Play + Stop — same pill style as the card Listen button */
.ear-sticky-btn {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.28rem .85rem;
    border-radius:20px;                        /* pill */
    font-size:.78rem; font-weight:600;
    cursor:pointer;
    transition:var(--ear-transition); white-space:nowrap;
    line-height:1.4;
}
.ear-sticky-btn svg { flex-shrink:0; }

/* Play — gold outline, fills on hover */
.ear-sticky-btn-play {
    background:transparent;
    color:var(--ear-gold) !important;
    border:1.5px solid var(--ear-gold);
    min-width:5rem; justify-content:center;
}
.ear-sticky-btn-play:hover, .ear-sticky-btn-play:focus,
.ear-sticky-btn-play.ear-playing {
    background:var(--ear-gold) !important;
    color:#fff !important;
    border-color:var(--ear-gold) !important;
    outline:none;
}

/* Stop — gold outline, fills on hover */
.ear-sticky-btn-stop {
    background:transparent;
    color:var(--ear-gold) !important;
    border:1.5px solid var(--ear-gold);
}
.ear-sticky-btn-stop:hover, .ear-sticky-btn-stop:focus {
    background:var(--ear-gold) !important;
    color:#fff !important;
    border-color:var(--ear-gold) !important;
    outline:none;
}

/* Speed selector */
.ear-sticky-speed { display:flex; align-items:center; gap:.35rem; }
.ear-sticky-speed label { font-size:.72rem; color:rgba(255,255,255,.7); white-space:nowrap; }
.ear-sticky-speed select {
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.3);
    color:#fff; border-radius:var(--ear-radius-sm);
    padding:.2rem .45rem; font-size:.75rem; cursor:pointer;
}

/* ── PDF VIEWER MODAL ───────────────────────────────────────────── */
.ear-modal { position:fixed; inset:0; z-index:999998; display:flex; align-items:center; justify-content:center; }
.ear-modal[hidden] { display:none !important; }
.ear-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); cursor:pointer; }
.ear-modal-container { position:relative; z-index:1; background:#fff; border-radius:var(--ear-radius); box-shadow:0 16px 64px rgba(0,0,0,.35); width:min(94vw,900px); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }
.ear-modal-header { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.25rem; background:var(--ear-navy); border-bottom:3px solid var(--ear-gold); gap:1rem; flex-wrap:wrap; }
.ear-modal-title { margin:0; font-size:1rem; font-weight:700; color:#fff; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ear-modal-controls { display:flex; align-items:center; gap:.5rem; }
.ear-modal-close { background:transparent; border:none; font-size:1.6rem; cursor:pointer; color:rgba(255,255,255,.8); width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:var(--ear-transition); padding:0; line-height:1; }
.ear-modal-close:hover { background:rgba(255,255,255,.2); color:#fff; }
.ear-modal-body { flex:1; position:relative; min-height:70vh; background:#525659; }
.ear-pdf-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:#fff; padding:3rem; position:absolute; inset:0; z-index:2; background:#525659; }
.ear-pdf-loading[hidden] { display:none !important; }
.ear-spinner { width:40px; height:40px; border:4px solid rgba(255,255,255,.3); border-top-color:var(--ear-gold); border-radius:50%; animation:ear-spin .8s linear infinite; }
@keyframes ear-spin { to { transform:rotate(360deg); } }
#ear-pdf-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:block; background:#fff; }

/* ── AI PANEL ───────────────────────────────────────────────────── */
.ear-ai-panel { position:fixed; inset:0; z-index:999997; pointer-events:none; }
.ear-ai-panel[hidden] { display:none !important; }
.ear-ai-panel:not([hidden]) { pointer-events:all; }
.ear-ai-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .3s ease; }
.ear-ai-panel.ear-ai-open .ear-ai-backdrop { opacity:1; }
.ear-ai-inner { position:absolute; top:0; right:0; bottom:0; width:min(100vw,440px); background:#fff; display:flex; flex-direction:column; box-shadow:-8px 0 32px rgba(0,0,0,.22); transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); }
.ear-ai-panel.ear-ai-open .ear-ai-inner { transform:translateX(0); }
.ear-ai-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; background:var(--ear-navy); color:#fff; flex-shrink:0; border-bottom:3px solid var(--ear-gold); gap:.75rem; }
.ear-ai-header-left { display:flex; align-items:center; gap:.75rem; min-width:0; }
.ear-ai-title { margin:0; font-size:1rem; font-weight:700; color:#fff; }
.ear-ai-subtitle { margin:.1rem 0 0; font-size:.75rem; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.ear-ai-close { background:transparent; border:none; font-size:1.6rem; color:rgba(255,255,255,.8); cursor:pointer; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:var(--ear-transition); padding:0; line-height:1; }
.ear-ai-close:hover { background:rgba(255,255,255,.2); color:#fff; }
.ear-ai-presets { padding:1rem 1.25rem .5rem; border-bottom:1px solid var(--ear-border); flex-shrink:0; }
.ear-ai-presets-label { margin:0 0 .6rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ear-muted); }
.ear-ai-preset-btns { display:flex; flex-wrap:wrap; gap:.4rem; }
.ear-ai-preset-btn { background:var(--ear-bg); border:1px solid var(--ear-border); border-radius:20px; padding:.3em .75em; font-size:.78rem; font-weight:500; color:var(--ear-navy); cursor:pointer; transition:var(--ear-transition); }
.ear-ai-preset-btn:hover { background:var(--ear-navy); border-color:var(--ear-navy); color:#fff; }
.ear-ai-chat { flex:1; overflow-y:auto; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:1rem; }
.ear-ai-welcome p { font-size:.875rem; color:var(--ear-muted); line-height:1.6; text-align:center; padding:1rem 0; }
.ear-ai-msg { display:flex; flex-direction:column; gap:.3rem; }
.ear-ai-msg-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ear-muted); }
.ear-ai-msg-user .ear-ai-msg-label { text-align:right; color:var(--ear-navy); }
.ear-ai-msg-bubble { padding:.7rem 1rem; border-radius:var(--ear-radius-sm); font-size:.875rem; line-height:1.6; max-width:90%; }
.ear-ai-msg-user .ear-ai-msg-bubble { background:var(--ear-navy); color:#fff; align-self:flex-end; border-bottom-right-radius:3px; }
.ear-ai-msg-ai   .ear-ai-msg-bubble { background:var(--ear-bg); color:var(--ear-text); border:1px solid var(--ear-border); align-self:flex-start; border-bottom-left-radius:3px; }
.ear-ai-msg-bubble p { margin:0 0 .5em; } .ear-ai-msg-bubble p:last-child { margin:0; }
.ear-ai-msg-bubble h2,.ear-ai-msg-bubble h3 { margin:.75em 0 .35em; font-size:.9em; color:var(--ear-navy); }
.ear-ai-msg-bubble ul,.ear-ai-msg-bubble ol { margin:.35em 0; padding-left:1.25em; } .ear-ai-msg-bubble li { margin-bottom:.2em; }
.ear-ai-thinking { display:flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem; flex-shrink:0; }
.ear-ai-thinking[hidden] { display:none !important; }
.ear-ai-thinking span { width:7px; height:7px; border-radius:50%; background:var(--ear-navy); animation:ear-bounce 1.2s infinite ease-in-out; }
.ear-ai-thinking span:nth-child(2){animation-delay:.2s;} .ear-ai-thinking span:nth-child(3){animation-delay:.4s;}
@keyframes ear-bounce { 0%,80%,100%{transform:scale(.6);opacity:.5;} 40%{transform:scale(1);opacity:1;} }
.ear-ai-thinking small { font-size:.78rem; color:var(--ear-muted); font-style:italic; margin-left:.2rem; }
.ear-ai-followups { padding:.5rem 1.25rem 0; flex-shrink:0; }
.ear-ai-followups[hidden] { display:none !important; }
.ear-ai-followups-label { margin:0 0 .4rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ear-muted); }
.ear-ai-followup-btn { background:transparent; border:1px solid var(--ear-border); border-radius:var(--ear-radius-sm); padding:.45rem .75rem; font-size:.82rem; color:var(--ear-navy); cursor:pointer; margin-bottom:.35rem; transition:var(--ear-transition); display:block; width:100%; text-align:left; }
.ear-ai-followup-btn:hover { background:var(--ear-bg); border-color:var(--ear-navy); }
.ear-ai-input-wrap { display:flex; gap:.5rem; align-items:flex-end; padding:.75rem 1.25rem; border-top:1px solid var(--ear-border); background:var(--ear-bg); flex-shrink:0; }
.ear-ai-input { flex:1; resize:none; border:1px solid var(--ear-border); border-radius:var(--ear-radius-sm); padding:.55rem .75rem; font-size:.875rem; line-height:1.45; transition:var(--ear-transition); background:#fff; }
.ear-ai-input:focus { outline:none; border-color:var(--ear-navy); box-shadow:0 0 0 3px rgba(0,31,63,.12); }
.ear-ai-send-btn { flex-shrink:0; padding:.55rem .9rem; border-radius:var(--ear-radius-sm); }
.ear-ai-disclaimer { margin:0; padding:.4rem 1.25rem .65rem; font-size:.7rem; color:var(--ear-muted); text-align:center; flex-shrink:0; line-height:1.4; background:var(--ear-bg); border-top:1px solid var(--ear-border); }

/* ── No results ─────────────────────────────────────────────────── */
.ear-no-results { text-align:center; padding:3.5rem 1.5rem; color:var(--ear-muted); }
.ear-no-results svg { margin-bottom:1rem; opacity:.4; }
.ear-no-results p   { font-size:1rem; margin-bottom:1.25rem; }

/* ── Pagination ─────────────────────────────────────────────────── */
.ear-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem; margin-top:2rem; }
.ear-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 .6rem; border:1px solid var(--ear-border); border-radius:var(--ear-radius-sm); font-size:.875rem; color:var(--ear-navy); text-decoration:none; transition:var(--ear-transition); }
.ear-pagination .page-numbers:hover,.ear-pagination .page-numbers.current { background:var(--ear-navy); border-color:var(--ear-navy); color:#fff; }

/* ── Misc ───────────────────────────────────────────────────────── */
.ear-icon { flex-shrink:0; vertical-align:middle; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:768px) {
    .ear-cols-2,.ear-cols-3 { grid-template-columns:1fr; }
    .ear-filters { flex-direction:column; }
    .ear-modal-container { width:100vw; max-height:100vh; border-radius:0; }
    .ear-ai-inner { width:100vw; }
    .ear-sticky-inner { flex-wrap:wrap; gap:.6rem; }
    .ear-sticky-meta { flex:1 1 100%; }
    .ear-sticky-speed { display:none; } /* hide speed on small screens */
}
@media (max-width:480px) {
    .ear-btn-view span, .ear-btn-download span, .ear-btn-summarize span { display:none; } /* icon only on very small */
    .ear-btn-view, .ear-btn-download, .ear-btn-summarize { padding:.65rem .35rem !important; }
}