/* =============================================================
   history_search.css  —  In-chat history search + date jump
   Shared by gpt.html and gemini.html.

   The two pages use different accent variables (--accent-1 on GPT,
   --accent-blue on Gemini), so everything here resolves through one
   local --hs-accent with a chained fallback. Nothing else is themed
   per page, and neither existing stylesheet is modified.
   ============================================================= */

.hs-bar,
.hs-latest {
    --hs-accent: var(--accent-1, var(--accent-blue, #4285f4));
}

/* The "jump to latest" pill floats over the thread. */
.chat-container { position: relative; }

/* ── Search bar (sits above the messages, inside the chat) ──── */
.hs-bar {
    background: var(--white, #fff);
    border-bottom: 1px solid var(--light-gray, #e9ecef);
    padding: 10px 12px;
    animation: hs-slide-down 0.18s ease-out;
}
@keyframes hs-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hs-row { display: flex; align-items: center; gap: 8px; }

.hs-row > .hs-ico { color: var(--text-secondary, #6c757d); font-size: 13px; }

.hs-bar input[type="search"] {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--light-gray, #e9ecef);
    border-radius: var(--radius-sm, 8px);
    font-size: 14px; outline: none;
    background: var(--soft-gray, #f8f9fa);
}
.hs-bar input[type="search"]:focus {
    border-color: var(--hs-accent);
    background: var(--white, #fff);
}

.hs-count {
    font-size: 12px; color: var(--text-secondary, #6c757d);
    min-width: 52px; text-align: center; white-space: nowrap;
}
.hs-count.none { color: var(--accent-red, #ea4335); }

.hs-bar button {
    border: 1px solid var(--light-gray, #e9ecef);
    background: var(--white, #fff);
    color: var(--dark-gray, #495057);
    width: 30px; height: 30px; border-radius: var(--radius-sm, 8px);
    cursor: pointer; display: grid; place-items: center; font-size: 13px;
    flex: 0 0 auto;
}
.hs-bar button:hover:not(:disabled) {
    background: var(--hs-accent); color: #fff; border-color: var(--hs-accent);
}
.hs-bar button:disabled { opacity: 0.4; cursor: default; }

.hs-sep {
    width: 1px; height: 22px; background: var(--light-gray, #e9ecef); flex: 0 0 auto;
}

/* Calendar: a real date input, visually reduced to its icon. */
.hs-cal {
    position: relative; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--light-gray, #e9ecef);
    color: var(--dark-gray, #495057); cursor: pointer; flex: 0 0 auto;
}
.hs-cal:hover { background: var(--hs-accent); color: #fff; border-color: var(--hs-accent); }
.hs-cal.active { background: var(--hs-accent); color: #fff; border-color: var(--hs-accent); }
.hs-cal input[type="date"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
    width: 100%; height: 100%; border: none; padding: 0;
}

.hs-note {
    margin-top: 8px; font-size: 12px; padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
.hs-note.err { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.hs-note button {
    all: unset; cursor: pointer; text-decoration: underline; font-weight: 600; margin-left: 6px;
}

/* ── Match highlighting inside real chat bubbles ─────────────── */
.message-content mark.hs-term {
    background: #fde68a; color: inherit; padding: 0 2px; border-radius: 3px;
}
.message.hs-anchor .message-content {
    box-shadow: 0 0 0 2px var(--hs-accent);
}
.message.hs-anchor .message-content mark.hs-term {
    background: #f59e0b; color: #fff;
}
@keyframes hs-flash {
    0%   { background-color: rgba(245, 158, 11, 0.35); }
    100% { background-color: transparent; }
}
.message.hs-flash .message-content { animation: hs-flash 1.1s ease-out; }

/* ── Window paging controls (older / newer) ──────────────────── */
.hs-page-btn {
    display: block; margin: 8px auto; padding: 6px 16px;
    border: 1px solid var(--light-gray, #e9ecef); background: var(--white, #fff);
    color: var(--text-secondary, #6c757d);
    border-radius: 999px; cursor: pointer; font-size: 12px;
}
.hs-page-btn:hover:not(:disabled) { border-color: var(--hs-accent); color: var(--hs-accent); }
.hs-page-btn:disabled { opacity: 0.5; cursor: default; }

.hs-window-note {
    text-align: center; font-size: 11px; color: var(--text-secondary, #6c757d);
    padding: 6px 0; text-transform: uppercase; letter-spacing: .4px;
}

/* ── "Jump to latest" pill ───────────────────────────────────── */
.hs-latest {
    position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
    z-index: 5;
    padding: 8px 16px; border: none; border-radius: 999px;
    background: var(--hs-accent); color: #fff; cursor: pointer;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    display: inline-flex; align-items: center; gap: 7px;
}
.hs-latest:hover { filter: brightness(1.08); }

/* ── Trigger button in the tab bar ───────────────────────────── */
.search-toggle-btn {
    flex: 0 0 auto;
    padding: 16px 22px;
    border: none; border-radius: 14px;
    background: #f0f2f5;
    color: var(--text-secondary, #6c757d);
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: all 0.25s;
    display: inline-flex; align-items: center; gap: 8px;
}
.search-toggle-btn:hover,
.search-toggle-btn.active {
    background: var(--accent-1, var(--accent-blue, #4285f4));
    color: #fff;
}