/* TaoView Custom CSS — Dark Terminal Theme */

:root {
    --tv-bg: #08090d;
    --tv-surface: #0f1118;
    --tv-surface2: #151720;
    --tv-border: #1a1d2b;
    --tv-primary: #22d1ee;
    --tv-green: #00c853;
    --tv-red: #e53935;
    --tv-text: #d1d5db;
    --tv-muted: #585e6f;
    --tv-gold: #f59e0b;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar — thin & dark */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: var(--tv-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--tv-border);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tv-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--tv-border) var(--tv-bg);
}

/* Sidebar transition */
#sidebar.open {
    transform: translateX(0);
}

/* Sort icon styling */
.sort-icon {
    opacity: 0.4;
    font-size: 0.7em;
}
th:hover .sort-icon {
    opacity: 1;
}

/* Form focus rings */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 2px rgba(34, 209, 238, 0.15);
}

/* Pulse animation for API status */
@keyframes pulse-green {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Treemap tile hover effect */
#treemap a:hover {
    filter: brightness(1.2);
}

/* Bubble hover effect */
.heatmap-bubble:hover {
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(255,255,255,0.15));
    z-index: 10;
}

/* Dense table rows */
.subnet-row td {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Price chart mobile */
@media (max-width: 640px) {
    #priceChart { min-height: 200px; }
}

/* Chart period button focus */
#chart-period-btns button:focus-visible {
    outline: 2px solid var(--tv-primary);
    outline-offset: 1px;
}

/* Hero price animation */
@keyframes price-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.price-hero-value {
    animation: price-fade-in 0.4s ease-out;
}

/* Wallet overview tab animation */
.wo-panel {
    animation: wo-fade-in 0.25s ease-out;
}
@keyframes wo-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Wallet card hover on profile */
.wallet-delete-btn,
.wallet-primary-btn {
    transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}

/* Skeleton pulse */
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}
.animate-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Coffee steam animation */
@keyframes coffee-steam {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 0.7; }
    60% { opacity: 0.4; transform: translateY(-3px); }
    100% { opacity: 0; transform: translateY(-5px); }
}
.coffee-steam {
    opacity: 0;
}
.coffee-btn .coffee-steam.steam-1,
.coffee-donate .coffee-steam.steam-1 {
    animation: coffee-steam 1.2s ease-out infinite;
    animation-delay: 0s;
}
.coffee-btn .coffee-steam.steam-2,
.coffee-donate .coffee-steam.steam-2 {
    animation: coffee-steam 1.2s ease-out infinite;
    animation-delay: 0.3s;
}
.coffee-btn .coffee-steam.steam-3,
.coffee-donate .coffee-steam.steam-3 {
    animation: coffee-steam 1.2s ease-out infinite;
    animation-delay: 0.6s;
}
/* Subtle idle pulse to attract attention */
@keyframes coffee-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.coffee-btn {
    animation: coffee-pulse 3s ease-in-out infinite;
}
.coffee-btn:hover {
    animation: none;
    opacity: 1;
}

/* Watchlist star hover effect */
.wl-star svg {
    transition: transform 0.15s ease, fill 0.2s ease;
}
.wl-star:hover svg {
    transform: scale(1.2);
}