/* Command Store - Custom styles (complements Tailwind) */

/* Modal entrance animation */
@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-modal-in {
    animation: modal-in 0.2s ease-out;
}

/* Toast slide-in animation */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-enter {
    animation: toast-in 0.3s ease-out forwards;
}

.toast-exit {
    animation: toast-out 0.3s ease-in forwards;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}

/* Textarea auto-resize helper */
textarea {
    min-height: 60px;
}

/* Command card hover effect */
.command-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.command-card:hover {
    border-color: #4ade8040;
    box-shadow: 0 0 0 1px #4ade8015;
}

/* Link card hover effect (cyan tint) */
.link-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-card:hover {
    border-color: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.08);
}

/* Type switcher tabs */
.type-tab {
    color: #6b7280;
    cursor: pointer;
}

.type-tab:hover {
    color: #d1d5db;
}

.type-tab.active {
    background-color: #334155;
    color: #fff;
}

/* Tag pill transition */
.tag-pill {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Pulse animation for loading states */
@keyframes pulse-dot {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Copy button flash */
@keyframes copy-flash {
    0% {
        background-color: rgba(74, 222, 128, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

.copy-flash {
    animation: copy-flash 0.6s ease-out;
}

/* Linked command highlight animation */
@keyframes linked-highlight {
    0% {
        border-color: rgba(59, 130, 246, 0.8);
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
    }
    100% {
        border-color: #334155;
        box-shadow: none;
    }
}

.linked-highlight {
    animation: linked-highlight 1.5s ease-out;
}

/* Linked pill transition */
.linked-pill {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Link search dropdown item border */
.link-option + .link-option {
    border-top: 1px solid #334155;
}

/* Share URL input select-all on focus */
.select-all {
    cursor: text;
}

.select-all:focus {
    user-select: all;
    -webkit-user-select: all;
}

/* Share preview card hover */
#share-preview-commands > div {
    transition: border-color 0.15s ease;
}

#share-preview-commands > div:hover {
    border-color: #4ade8040;
}

/* My Shares list item hover */
#my-shares-list > div {
    transition: border-color 0.15s ease;
}

#my-shares-list > div:hover {
    border-color: #4ade8040;
}

/* Selection color */
::selection {
    background: rgba(74, 222, 128, 0.3);
    color: #fff;
}