:root {
    --stone-200: #e3e3df;
    --stone-300: #cfcfc8;
    --stone-900: #111111;
    --placeholder: #b3b3a9;
}

details[open] .details-chevron {
    transform: rotate(0deg);
}

details:not([open]) .details-chevron {
    transform: rotate(-90deg);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--stone-200) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--stone-200);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--stone-300);
}

.check-icon {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    transition: stroke-dashoffset 0.3s ease-in-out;
}

.completed .check-icon {
    stroke-dashoffset: 0;
}

@keyframes typing {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}

.typing-dot {
    animation: typing 1s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-reveal {
    animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modalShow {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes backdropShow {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-modal {
    animation: modalShow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-backdrop {
    animation: backdropShow 0.2s ease-out forwards;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Task card staggered entrance */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-row {
    animation: cardEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.task-row[draggable="true"] {
    cursor: grab;
}

.task-row[draggable="true"]:active {
    cursor: grabbing;
}

.task-dragging {
    opacity: 0.45;
}

/* drop indicator color matches tailwind stone-900 */
.task-drop-before {
    box-shadow: inset 0 3px 0 0 var(--stone-900);
}

.task-drop-after {
    box-shadow: inset 0 -3px 0 0 var(--stone-900);
}

.task-row-editing {
    cursor: default;
}

.task-card-title-input,
.task-card-description-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.task-card-title-input::placeholder,
.task-card-description-input::placeholder {
    color: var(--placeholder);
}

/* Task removal (inbox triage) */
.task-removing {
    opacity: 0;
    transform: translateX(40px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Task completion pulse */
.task-completing {
    transition: opacity 0.4s ease-out;
    opacity: 0.6;
}

/* View content crossfade */
@keyframes viewEnter {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#mainView > * {
    animation: viewEnter 0.2s ease-out both;
}

#mainView.task-list-static > * {
    animation: none;
}

#mainView.task-list-static .task-row {
    animation: none;
}

@keyframes float-celebration {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.empty-icon {
    animation: float-celebration 4s ease-in-out infinite;
}

@keyframes toastIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

.toast {
    animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
    pointer-events: auto;
}

.toast-leaving {
    animation: toastOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.assistant-resize-handle {
    width: 18px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.assistant-resize-handle-bar {
    width: 4px;
    height: min(88px, 22vh);
    border-radius: 9999px;
    background: rgba(17, 17, 17, 0.08);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.assistant-resize-handle:hover .assistant-resize-handle-bar,
.assistant-resize-handle-active .assistant-resize-handle-bar {
    background: rgba(17, 17, 17, 0.2);
    transform: scaleX(1.1);
}

body.assistant-resizing,
body.assistant-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

@supports (field-sizing: content) {
    textarea {
        field-sizing: content;
    }
}

/* Landing page animations */
@keyframes landingReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollLine {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    51% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

.landing-reveal {
    opacity: 0;
    animation: landingReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--reveal-i, 0) * 120ms + 200ms);
}

.landing-scroll-line {
    animation: scrollLine 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    animation-delay: 1.6s;
}

.landing-page nav {
    background: linear-gradient(to bottom, #f6f6f5 60%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

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

@media (max-width: 1023px) {
    #mobileNav,
    #assistantPanel {
        position: fixed !important;
        top: 0;
        bottom: 0;
    }

    #mobileNav {
        left: 0;
    }

    #assistantPanel {
        right: 0;
    }

    #assistantResizeHandle {
        display: none !important;
    }
}

/* Show hover-dependent controls on touch devices */
@media (hover: none) {
    [data-action="remove-subtask"] {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Inbox schedule buttons always visible on touch (no hover state) */
    .task-row .xl\:opacity-0 {
        opacity: 1 !important;
    }
}