/* ============================================================
   AgPaste — Global Styles
   Tailwind handles 95% via utility classes; this file is only
   for things Tailwind can't easily express: custom scrollbars,
   highlight.js overrides, animations, and small refinements.
   ============================================================ */

/* Hide elements while Alpine.js is initialising */
[x-cloak] { display: none !important; }

/* ---------- Base ---------- */
html, body { font-feature-settings: "cv11", "ss01"; }
body { background-color: #0a0a0a; }

/* Smooth focus ring */
*:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 6px;
    border: 2px solid #0a0a0a;
}
::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #27272a #0a0a0a;
}

/* ---------- Code blocks ---------- */
pre {
    background: transparent !important;
    margin: 0 !important;
    tab-size: 4;
}
pre code {
    background: transparent !important;
    padding: 0 !important;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
    font-size: 13px;
    line-height: 1.6;
    color: #e4e4e7;
}

/* highlight.js token tweaks — match our dark theme */
.hljs-comment, .hljs-quote { color: #71717a; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #c084fc; }
.hljs-string, .hljs-attr { color: #86efac; }
.hljs-number, .hljs-literal { color: #fbbf24; }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #60a5fa; }
.hljs-type, .hljs-class .hljs-title { color: #f472b6; }
.hljs-params { color: #e4e4e7; }
.hljs-meta { color: #71717a; }

/* ---------- Animations ---------- */
.animate-fade-in {
    animation: ag-fade-in 0.3s ease-out;
}
.animate-slide-up {
    animation: ag-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ag-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ag-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Toasts ---------- */
.toast {
    pointer-events: auto;
    animation: ag-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ag-slide-down {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.leaving {
    animation: ag-toast-out 0.2s ease-in forwards;
}
@keyframes ag-toast-out {
    to { opacity: 0; transform: translateX(12px); }
}

/* ---------- Buttons & inputs ---------- */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Line clamp utility (Tailwind typography plugin includes this but just in case) */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Selection ---------- */
::selection {
    background: rgba(99, 102, 241, 0.4);
    color: #fff;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 640px) {
    pre code {
        font-size: 12px;
    }
}

/* ---------- Print ---------- */
@media print {
    header, footer, .toast-container { display: none !important; }
    body { background: white !important; color: black !important; }
}