/* ======================================================================
   GodsKids.ai — LibreChat Custom Theme
   ======================================================================
   ALL customizations use CSS only (no JS DOM manipulation).
   CSS rules survive React re-renders permanently.
   This file is mounted via Docker volume at /app/client/dist/custom.css
   ====================================================================== */

/* ===== BRAND LOGO in sidebar (pure CSS — permanent) ===== */
#chat-history-nav {
    padding-top: 56px !important;
    position: relative;
}
#chat-history-nav::before {
    cursor: pointer;
    content: 'GodsKids.ai';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: url('/assets/logo.png') 16px center / 28px 28px no-repeat;
    padding-left: 54px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #2563eb;
    z-index: 10;
}

/* ===== HIDE: "grok" endpoint from model selector dropdown ===== */
#endpoint-grok-menu {
    display: none !important;
}

/* ===== HIDE: Model search input in picker dropdown =====
   Kids don't need free-form search — they pick from the curated tutor list.
   Hides the input AND its sticky-bar wrapper so no empty strip remains at top of dropdown.
   Server-side modelSpecs.enforce already blocks bypass; this removes the surface. */
#model-search,
.sticky:has(#model-search) {
    display: none !important;
}

/* ===== HIDE: Web search config popup (should never show — configured server-side) ===== */
/* WHY: LibreChat may show a config dialog asking for API keys when the web search
   toggle is clicked. This happens if LibreChat thinks scraper/reranker aren't configured.
   We use dummy keys ("not_used") in .env which satisfy the auth check, but this CSS
   is a safety net in case the dialog ever appears. It matches dialogs containing
   input fields for any of the search provider names. */
div[role="dialog"]:has(input[placeholder*="SearXNG"]),
div[role="dialog"]:has(input[placeholder*="Firecrawl"]),
div[role="dialog"]:has(input[placeholder*="Jina"]),
div[role="dialog"]:has(input[placeholder*="Serper"]) {
    display: none !important;
}

/* ===== BRAND: Login button gradient ===== */
button[data-testid="login-button"],
button[aria-label="Continue"] {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
}
button[data-testid="login-button"]:hover,
button[aria-label="Continue"]:hover {
    background: linear-gradient(135deg, #1e3a5f, #2563eb) !important;
}

/* ===== Dropdown chevron on model selector ===== */
button[aria-label="Select a model"]::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s;
}
button[aria-label="Select a model"][aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* ======================================================================
   HIDE: Elements that must never be visible to children
   All use display:none !important for permanence
   ====================================================================== */

/* --- Fork button on messages --- */
button[aria-label="Open Fork Menu"],
button[aria-label="Fork"],
button:has(.lucide-git-fork) {
    display: none !important;
}

/* --- Artifacts: hide everywhere --- */
[class*="artifact"],
[class*="Artifact"],
button[aria-label*="rtifact"],
button[aria-label*="Artifact"],
label:has(input[id*="artifact"]),
div:has(> label:has(input[id*="artifact"])),
div[class*="artifact"],
button[class*="artifact"],
label[class*="amber"],
div:has(> label[class*="amber"]),
div:has(label[class*="border-amber"]),
/* Artifacts menu item: role=menuitem containing wand-sparkles icon */
[role="menuitem"]:has(.lucide-wand-sparkles) {
    display: none !important;
}

/* --- Balance display --- */
.account-settings-popover div[role="note"] {
    display: none !important;
}

/* --- Menu separators (cleanup after hiding items) --- */
[role="separator"][data-slot="dropdown-menu-separator"] {
    display: none !important;
}

/* --- Conversation delete buttons ONLY (parental control) --- */
/* Keep: Duplicate, Archive, Rename, Share */
/* Hide: Delete, Delete All (only parents can delete from dashboard) */
[role="menuitem"]:has(.lucide-trash),
[role="menuitem"]:has(.lucide-trash-2),
[role="menuitem"]:has(svg[class*="trash"]),
button[aria-label="Delete"],
button[aria-label="Delete conversation"] {
    display: none !important;
}

/* --- Chat input: hide Prompts + Attach Files buttons (parental control) --- */
/* Kids shouldn't manage prompt library or upload arbitrary files */
button[aria-label="Prompts"],
button[aria-label="Attach Files"] {
    display: none !important;
}

/* --- User profile popup: hide My Files, Help & FAQ, Settings --- */
/* Only Log out and theme toggle stay visible */
.account-settings-popover .select-item:not(:last-of-type) {
    display: none !important;
}
.account-settings-popover [role="separator"] {
    display: none !important;
}
/* Force-show theme toggle in popup */
#gk-theme-toggle {
    display: flex !important;
}

/* --- "GodsKids AI" endpoint label in model selector dropdown --- */
/* Appears as a non-selectable group header/divider when all models share one endpoint */
/* Target by: it's a div/span inside the dropdown that contains just the endpoint name */
/* Also catch in conversation header and preset displays */
/* Removed: broad .popover-ui group/label/header hide rules were breaking conversation menus */

/* ======================================================================
   WIDGETS: Sidebar logout + theme selector in profile popup
   ====================================================================== */

/* --- Logout widget in sidebar --- */
#gk-logout-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: Nunito, sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
#gk-logout-widget:hover {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
}
#gk-logout-widget .gk-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
}
#gk-logout-widget .gk-divider {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,0.4);
    flex-shrink: 0;
}
#gk-logout-widget .gk-logout-label {
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Theme toggle in sidebar --- */
#gk-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-secondary, #9ca3af);
    font-family: Nunito, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
#gk-theme-btn:hover {
    background: var(--surface-active-alt, rgba(255,255,255,0.05));
}

/* --- Theme selector in profile popup --- */
#gk-theme-selector {
    border-top: 1px solid var(--border-medium, #e5e7eb);
    border-bottom: 1px solid var(--border-medium, #e5e7eb);
    margin: 4px 0;
}
.gk-theme-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.gk-theme-opt:hover {
    background: var(--surface-hover, #f3f4f6);
}
.gk-theme-opt.active {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
}
.gk-theme-opt span {
    font-size: 11px;
}