/* Extracted from index.html. Panel and task card base styles and task enter/remove animations. */

.panel {
  display: none;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}

.panel:not(#ai-image) {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.panel.active {
  display: block;
}

.panel.clean {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.panel h2 {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  font-weight: 600;
}

.panel p {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 22px;
}

.task-card {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 22px rgba(0, 0, 0, 0.08);
  min-height: 420px;
  height: 520px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.task-card::-webkit-scrollbar {
  display: none;
}

html.theme-dark .panel {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

html.theme-dark .panel:not(#ai-image) {
  border: none;
  box-shadow: none;
}

html.theme-dark .panel.clean {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html.theme-dark .task-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.task-shell {
  position: relative;
}

.task-shell.task-entering {
  transform-origin: top center;
  animation: task-shell-enter 540ms cubic-bezier(0.16, 0.84, 0.24, 1);
}

.task-shell.task-entering .task-card {
  animation: task-card-pullout 540ms cubic-bezier(0.16, 0.84, 0.24, 1);
}

html.theme-dark .task-shell.task-entering .task-card {
  animation: task-card-pullout-dark 540ms cubic-bezier(0.16, 0.84, 0.24, 1);
}

@keyframes task-shell-enter {
  0% {
    opacity: 0.08;
    transform: translateY(-74px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes task-card-pullout {
  0% {
    transform: perspective(800px) rotateX(10deg) scale(0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    filter: brightness(0.98);
  }
  65% {
    transform: perspective(800px) rotateX(-1deg) scale(1.01);
  }
  100% {
    transform: perspective(800px) rotateX(0deg) scale(1);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6),
      0 8px 22px rgba(0, 0, 0, 0.08);
    filter: brightness(1);
  }
}

@keyframes task-card-pullout-dark {
  0% {
    transform: perspective(800px) rotateX(10deg) scale(0.96);
    box-shadow: none;
    filter: brightness(0.98);
  }
  65% {
    transform: perspective(800px) rotateX(-1deg) scale(1.01);
  }
  100% {
    transform: perspective(800px) rotateX(0deg) scale(1);
    box-shadow: none;
    filter: brightness(1);
  }
}

.task-shell.task-removing {
  pointer-events: none;
  transform-origin: center center;
  animation: task-card-shatter 620ms cubic-bezier(0.15, 0.82, 0.22, 1) forwards;
}

.task-shell.task-ghost-removing {
  position: fixed;
  margin: 0;
  pointer-events: none;
  z-index: 50;
}

.task-shell.task-removing .task-card {
  animation: task-card-collapse 620ms cubic-bezier(0.15, 0.82, 0.22, 1) forwards;
}

.task-shell.task-removing .task-index-tag-bg,
.task-shell.task-removing .task-index-tag-text,
.task-shell.task-removing .task-add-btn,
.task-shell.task-removing .task-close-btn {
  animation: task-fragment-fade 620ms cubic-bezier(0.15, 0.82, 0.22, 1) forwards;
}

@keyframes task-card-shatter {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: none;
  }
  32% {
    transform: translateY(5px) scale(0.96) rotate(-1.4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(44px) scale(0.58) rotate(10deg);
    filter: blur(11px) saturate(1.5) contrast(1.2);
  }
}

@keyframes task-card-collapse {
  0% {
    transform: perspective(900px) rotateX(0deg) scale(1);
    filter: none;
  }
  30% {
    transform: perspective(900px) rotateX(4deg) scale(0.96);
  }
  62% {
    transform: perspective(900px) rotateX(-8deg) skewX(-2deg) scale(0.84);
  }
  100% {
    transform: perspective(900px) rotateX(-14deg) skewX(-6deg) scale(0.64);
    filter: blur(8px);
  }
}

@keyframes task-fragment-fade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(14px) scale(0.8);
  }
}