/* ============================================================
   Sho.rt — small custom layer on top of Tailwind (CDN)
   ============================================================ */

:root {
    color-scheme: dark;
}

html {
    -webkit-tap-highlight-color: transparent;
}

body {
    text-rendering: optimizeLegibility;
}

/* ---- URL field validation states ---------------------------- */
.url-field .state-valid,
.url-field .state-invalid {
    display: none;
}

#urlField.is-valid {
    border-color: rgba(52, 211, 153, 0.55);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.1);
}

#urlField.is-invalid {
    border-color: rgba(248, 113, 113, 0.55);
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
}

#urlField.is-valid .state-valid,
#urlField.is-invalid .state-invalid {
    display: inline-flex;
}

.url-field.is-invalid {
    animation: field-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes field-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* ---- Copy button feedback ---------------------------------- */
.btn-copy .icon-check {
    display: none;
}

.btn-copy.is-copied,
.btn-copy.is-copied:hover {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.45);
    background-color: rgba(16, 185, 129, 0.14);
}

.btn-copy.is-copied .icon-copy {
    display: none;
}

.btn-copy.is-copied .icon-check {
    display: block;
}

/* ---- Recent links scroller --------------------------------- */
.links-scroll {
    max-height: 28rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.links-scroll::-webkit-scrollbar {
    width: 8px;
}

.links-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.links-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.links-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.4);
}

/* ---- Toast -------------------------------------------------- */
#toast {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Accessibility ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}