@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .gradient-text {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-blue-500;
    }

    .hero-pattern {
        background-image:
                radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    }

    .primary-button {
        @apply bg-gradient-to-r from-purple-600 to-blue-500 transition-all duration-300;
    }

    .primary-button:hover {
        @apply -translate-y-0.5 shadow-lg;
    }

    .topic-card {
        @apply transition-all duration-300;
    }

    .topic-card:hover {
        @apply -translate-y-1 shadow-lg;
    }

    /* Player styles */
    .player-gradient {
        @apply bg-gradient-to-b from-purple-900 to-black;
    }

    .player-button {
        @apply rounded-full bg-white text-black hover:scale-105 transition-all duration-300 flex items-center justify-center;
    }

    .progress-bar {
        @apply h-1 bg-gray-600 rounded-full;
    }

    .progress-bar-fill {
        @apply h-1 bg-green-500 rounded-full transition-all duration-300;
    }

    .suggest-button {
        font-size: 14px !important;
        position: absolute;
        right: 10px;
        top: 35% !important;
        border: 1px solid #7d19995c !important;
        transform: translateY(calc(-50% - 2px)) translateZ(1px) translateX(-1px) rotate3d(1, 1, 0, -2deg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        padding: 0 20px !important;
        color: #ffffff;
        font-weight: 500;
        letter-spacing: 0.01em;
        border-radius: 8px;
        box-shadow: 
            3px 3px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.2) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset,
            -1px 0 0 rgba(255, 255, 255, 0.15) inset;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        perspective: 1000px;
        backface-visibility: hidden;
    }

    .suggest-button:hover:not(:disabled) {
        transform: translateY(calc(-50% + 1px)) translateZ(0) translateX(0) rotate3d(1, 1, 0, -2deg);
        box-shadow: 
            2px 2px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.1) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset;
        filter: brightness(1.05);
    }

    .suggest-button:active:not(:disabled) {
        transform: translateY(-50%) translateZ(0);
        box-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.05),
            0 1px 0 rgba(255, 255, 255, 0.1) inset;
        filter: brightness(0.95);
    }

    .suggest-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: saturate(0.7) grayscale(0.2);
        transform: translateY(-50%) !important;
        box-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(75, 75, 75, 0.3);
    }

    .suggest-button:disabled svg {
        opacity: 0.5;
        fill: #d1d5db;
        stroke: #6b7280;
    }

    .suggest-button:disabled span {
        opacity: 0.7;
    }

    /* Add a semi-transparent overlay to emphasize disabled state */
    .suggest-button:disabled::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2));
        border-radius: 8px;
        pointer-events: none;
    }

    .suggest-button svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin-right: 6px;
        stroke: #1a1a1a;
        stroke-width: 2;
        fill: #fbbf24;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
    }

    .suggest-button span {
        white-space: nowrap;
        line-height: 1;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .char-counter {
        position: absolute;
        right: 0.75rem;  /* 3 in Tailwind */
        bottom: -0.1px;
        font-size: 0.75rem;  /* text-xs in Tailwind */
        color: rgb(156 163 175);  /* text-gray-400 in Tailwind */
    }

    .isometric-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px !important;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 0 20px !important;
        background: linear-gradient(135deg, #9333ea 0%, #4f46e5 100%);
        color: #ffffff;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        transform: translateZ(1px) translateY(-2px) translateX(-1px) rotate3d(1, 1, 0, -2deg);
        box-shadow: 
            3px 3px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.2) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset,
            -1px 0 0 rgba(255, 255, 255, 0.15) inset;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        perspective: 1000px;
        backface-visibility: hidden;
    }

    .isometric-button:hover:not(:disabled) {
        transform: translateZ(0) translateY(-1px) translateX(0) rotate3d(1, 1, 0, -2deg);
        box-shadow: 
            2px 2px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.1) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset;
        filter: brightness(1.05);
    }

    .isometric-button:active:not(:disabled) {
        transform: translateZ(0) translateY(0);
        box-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.05),
            0 1px 0 rgba(255, 255, 255, 0.1) inset;
        filter: brightness(0.95);
    }

    .isometric-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: saturate(0.7) grayscale(0.2);
        transform: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid rgba(75, 75, 75, 0.3);
    }

    .isometric-button svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-right: 8px;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
    }

    .isometric-shadow {
        transform: translateZ(1px) translateY(-2px) translateX(-1px);
        box-shadow: 
            3px 3px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.2) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset,
            -1px 0 0 rgba(255, 255, 255, 0.15) inset;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        perspective: 1000px;
        backface-visibility: hidden;
    }

    .isometric-shadow:hover:not(:disabled) {
        transform: translateZ(0) translateY(-1px) translateX(0);
        box-shadow: 
            2px 2px 0 rgba(79, 70, 229, 0.3),
            0 1px 0 rgba(255, 255, 255, 0.1) inset,
            0 -1px 0 rgba(0, 0, 0, 0.1) inset;
        filter: brightness(1.05);
    }

    .isometric-shadow:active:not(:disabled) {
        transform: translateZ(0) translateY(0);
        box-shadow: 
            0 1px 2px rgba(0, 0, 0, 0.05),
            0 1px 0 rgba(255, 255, 255, 0.1) inset;
        filter: brightness(0.95);
    }

    /* Add new mobile suggest button styles */
    .suggest-button-mobile {
        position: relative !important;
        width: 120px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        margin-top: 12px !important;
        margin-bottom: -20px !important;
    }
    
    .auth-button {
        transition: all 0.2s ease;
        border: 1px solid #e5e7eb;
    }
    
    .auth-button:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }
}

/* Regular CSS */
.mr-5 {
    margin-right: 5px;
}

.p-2 {
    padding: 10px;
}

.m-cb {
    margin-left: 5px;
    margin-top: 3px;
}

.cb-margin {
    margin-left: 4px;
}

/* Custom gradient classes if needed */
.gradient-background {
    @apply bg-gradient-to-b from-purple-50 to-white;
}

/* Custom tooltip styles */
[data-tooltip-target="content"] {
  z-index: 99 !important;
  position: fixed;
}

[data-tooltip-target="content"] > div {
  @apply w-[320px] sm:w-[320px] max-w-[calc(100vw-2rem)] !important;
  position: relative;
}

/* Position the tooltip */
[data-tooltip-target="content"].tooltip-below {
  margin-top: 0;
}

[data-tooltip-target="content"].tooltip-above {
  margin-bottom: 0;
}

/* Style the HTML arrow */
[data-tooltip-target="content"].tooltip-below .rotate-45 {
  top: -6px;
  bottom: auto;
}

[data-tooltip-target="content"].tooltip-above .rotate-45 {
  top: auto;
  bottom: -6px;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-left: none;
  border-top: none;
}

.tooltip-trigger {
  position: relative;
  display: inline-flex;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .tooltip-trigger {
    position: static;
  }

  [data-tooltip-target="content"] {
    left: 1rem !important;
    right: 1rem !important;
    transform: none !important;
    width: calc(100% - 2rem);
  }

  [data-tooltip-target="content"] > div {
    @apply w-full !important;
    margin: 0 auto;
  }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(1px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(1px) rotate(-360deg);
    }
}

.sparkle-orbit {
    transform-origin: center;
    animation: orbit 3s linear infinite;
}

/* Add different speeds for variety */
.sparkle-orbit-1 { animation-duration: 4s; }
.sparkle-orbit-2 { animation-duration: 5s; }
.sparkle-orbit-3 { animation-duration: 3s; }

.isometric-pattern {
  stroke: #a5b4fc; /* indigo-300 */
  opacity: 0.7;
}