/* First-login onboarding modal + persistent Help icon (bottom-right).
 * Injected into LibreChat's HTML via nginx sub_filter (local + prod).
 * Kept in sync between:
 *   - branding/nginx-local.conf (local dev)
 *   - flux_cd_application/apps/prod/artdai-chat/librechat-ingress.yaml (prod)
 * The prod ingress inlines this content via `return 200` — same content,
 * different transport. If you edit this file, mirror the CSS block in the
 * ingress annotation.
 */
#artdai-tutorial{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;animation:artdai-fade-in .2s ease-out}
@keyframes artdai-fade-in{from{opacity:0}to{opacity:1}}
#artdai-tutorial .inner{position:relative;width:min(1200px,100%);aspect-ratio:16/9;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#artdai-tutorial iframe{width:100%;height:100%;border:0}
#artdai-tutorial .skip{position:absolute;top:-40px;right:0;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;padding:6px 14px;font-family:inherit;transition:background .15s}
#artdai-tutorial .skip:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){#artdai-tutorial .inner{aspect-ratio:auto;height:70vh}#artdai-tutorial .skip{top:auto;bottom:-40px}}

html.hide-login #artdai-help{display:none!important}

/* Sidebar Billing button mounted at the bottom of LibreChat's narrow icon
   rail. Inherits its class list from the New chat button so dark-mode text
   colors apply automatically. */
#artdai-billing-nav{display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none}
#artdai-billing-nav svg{flex-shrink:0}
html.hide-login #artdai-billing-nav{display:none!important}

/* Only position + z-index — colors, padding, radius, shadow, and dark-mode
   variants all come from LibreChat's own .tooltip class (applied in JS
   alongside .artdai-side-tip). */
.artdai-side-tip{position:fixed!important;z-index:9999;pointer-events:none;animation:artdai-side-tip-in .12s ease-out}
@keyframes artdai-side-tip-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}

#artdai-tutorial-confirm{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100000;animation:artdai-fade-in .15s ease-out;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
#artdai-tutorial-confirm .box{background:#fff;border-radius:12px;padding:36px 48px;max-width:520px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);color:#000}
#artdai-tutorial-confirm h3{margin:0 0 14px;font-size:22px;font-weight:600;color:#1E3A8A}
#artdai-tutorial-confirm p{margin:0 0 24px;font-size:14px;color:#555;line-height:1.5}
#artdai-tutorial-confirm .buttons{display:flex;gap:12px;justify-content:center}
#artdai-tutorial-confirm button{padding:10px 22px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;border:1px solid #333;background:#fff;color:#333}
#artdai-tutorial-confirm .continue-btn{background:#1E3A8A;color:#fff;border-color:#1E3A8A}