:root {
  --bg-primary: rgba(22, 22, 24, 1);
  --bg-secondary: rgba(40, 41, 42, 1);
  --text-primary: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-tertiary: rgba(255, 255, 255, 0.45);
  --accent-green: #45d483;
  --badge-green: #25a57b;
  --border-color: rgba(255, 255, 255, 0.14);
  --hover-bg: rgba(255, 255, 255, 0.05);
}

@keyframes blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 217, 134, 0.5),
                0 0 0 0 rgba(59, 217, 134, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 217, 134, 0),
                0 0 0 0 rgba(59, 217, 134, 0.5);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(59, 217, 134, 0),
                0 0 0 16px rgba(59, 217, 134, 0);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main-container {
  position: relative;
  overflow: hidden;
}

.background-layer {
  pointer-events: none;
  z-index: 0;
}

.background-layer img {
  mix-blend-mode: normal;
}



.tab-bar {
  background: rgba(22, 22, 24, 0.8);
  backdrop-filter: blur(10px);
}

.tab-item {
  transition: background-color 0.2s ease;
}

.tab-item:hover {
  background: var(--hover-bg);
}



.task-item {
  transition: background-color 0.2s ease;
}

.task-item:hover {
  background: var(--hover-bg);
}

.command-input-area {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

button {
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  background: transparent;
}

button:hover {
  opacity: 0.8;
}

input::placeholder {
  color: var(--text-tertiary);
}

input:focus {
  outline: none;
}

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

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* 滚动时显示滚动条 */
*:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

*:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
  .main-container {
    min-height: 100vh;
  }

  .header-bar {
    padding: 0.5rem;
  }

  .header-bar .flex {
    gap: 0.5rem;
  }

  .header-bar .font-\[\'Prompt\'\] {
    font-size: 12px;
  }

  .tab-bar {
    display: none !important;
  }

  .sidebar {
    display: none !important;
  }

  aside {
    display: none !important;
  }

  .explorer-panel {
    display: none !important;
  }

  .editor-panel {
    display: none !important;
  }

  .resizer {
    display: none !important;
  }

  .main-content-panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
  }

  main {
    min-height: calc(100vh - 20rem);
    padding: 2rem 1rem;
  }

  .command-input-area {
    margin-top: 1rem;
  }

  .input-container {
    flex-wrap: wrap;
    gap: 0.5rem !important;
  }

  .input-container > button {
    font-size: 11px;
    padding: 0.5rem 1rem;
  }

  .input-container input {
    font-size: 12px;
  }
}

@media (max-width: 465px) {
  /* 工具栏只显示图标 */
  .flex.items-center.gap-3 > div > p {
    display: none !important;
  }
  
  #toggleDiffLens p,
  #toggleCodeReview p {
    display: none !important;
  }
  
  #diffLensArrow,
  #codeReviewArrow {
    display: none !important;
  }
}

@media (max-width: 410px) {
  #minimalButton span,
  #planButton span {
    display: none !important;
  }
  
  #minimalButton img {
    display: none !important;
  }
  
  #minimalButton {
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  #planButton {
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  #minimalIndicator {
    display: flex !important;
  }
  
  #inputHeader > div:not(:has(#projectFolderBtn)) {
    display: none !important;
  }
}

/* 通过JavaScript添加的响应式类 */
.responsive-small #minimalButton span,
.responsive-small #planButton span {
  display: none !important;
}

.responsive-small #minimalButton img {
  display: none !important;
}

.responsive-small #minimalButton {
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.responsive-small #planButton {
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.responsive-small #minimalIndicator {
  display: flex !important;
}

.responsive-small #inputHeader > div:not(:has(#projectFolderBtn)),
.responsive-small .input-header > div:not(:has(#projectFolderBtn)) {
  display: none !important;
}

/* 工具栏只显示图标 */
.responsive-small .flex.items-center.gap-3 > div > p {
  display: none !important;
}

.responsive-small #toggleDiffLens p,
.responsive-small #toggleCodeReview p {
  display: none !important;
}

.responsive-small #diffLensArrow,
.responsive-small #codeReviewArrow {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 200px;
  }

  .task-item {
    font-size: 12px;
  }

  .task-item .text-\[13px\] {
    font-size: 12px;
  }

  main h1 {
    font-size: 22px;
  }

  main p {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .content-wrapper {
    min-height: calc(100vh - 10rem);
  }

  .main-container {
    overflow: hidden;
  }
}

@media (min-width: 1440px) {
  .main-container {
    overflow: hidden;
  }
}

.new-task:hover {
  background: var(--hover-bg);
}

.task-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

.tab-bar::-webkit-scrollbar {
  height: 4px;
}

@media (hover: hover) {
  button:active {
    transform: scale(0.98);
  }
}



.content-wrapper {
  position: relative;
}

@media (max-width: 767px) {
  .header-bar .flex.items-center.gap-6 .flex.items-center.gap-1 .tab-item:nth-child(2),
  .header-bar .flex.items-center.gap-6 .flex.items-center.gap-1 > div:last-child {
    display: none !important;
  }

  .header-bar .relative.z-10 > .flex.items-center.gap-2 {
    display: none !important;
  }

  .tab-item-active span,
  .tab-item.tab-active span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-bar > div:last-child {
    display: none;
  }

  .input-header {
    font-size: 10px;
    overflow-x: auto;
  }

  .input-header > div {
    white-space: nowrap;
  }

  .main-content-panel {
    padding: 1rem !important;
  }

  main {
    padding: 1rem !important;
  }

  #projectFolderDropdown {
    position: fixed !important;
    right: 1rem !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  #projectFolderDropdown .text-xs {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  #minimalPopup {
    position: fixed !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: 5rem !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 360px) {
  .header-bar .relative.z-10 > .flex.items-center.gap-2 {
    display: none !important;
  }

  .tab-item-active span,
  .tab-item.tab-active span {
    max-width: 100px;
  }
}

main img[alt="Logo"] {
  filter: drop-shadow(0 4px 12px rgba(69, 212, 131, 0.3));
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-item-enter {
  animation: slideInFromTop 0.3s ease-out;
}

.explorer-panel {
  transition: all 0.3s ease;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.explorer-panel > div:not(.absolute) {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
}

.explorer-panel.hidden {
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.main-content-panel {
  height: 100%;
  overflow-y: auto;
}

.content-flex-container {
  min-height: 0;
}

.terminal-panel {
  transition: all 0.3s ease;
  position: relative;
}

.terminal-panel.hidden {
  height: 0 !important;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.terminal-content {
  background: rgba(22, 22, 24, 0.95);
  color: #ffffff;
}

.border-white\/\[0\.14\] {
  border-color: rgb(255 255 255 / 0.08);
}

.editor-panel {
  transition: all 0.3s ease;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.editor-panel > div {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.editor-panel.hidden {
  width: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: none;
}

.resizer {
  position: relative;
  background: transparent;
  z-index: 10;
  flex-shrink: 0;
}

.resizer-x {
  width: 4px;
  cursor: col-resize;
}

.resizer-x:hover,
.resizer-x.resizing {
  background: rgba(69, 212, 131, 0.5);
}

.resizer-y {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  cursor: row-resize;
  transition: height 0.15s ease;
  transform-origin: top;
}

.resizer-y:hover,
.resizer-y.resizing {
  height: 4px;
  background: rgba(69, 212, 131, 0.5);
}

body.resizing {
  user-select: none;
  cursor: col-resize;
}

body.resizing-y {
  user-select: none;
  cursor: row-resize;
}

/* Shimmer text effect */
.shimmer-text {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.65) 40%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.65) 60%,
    rgba(255, 255, 255, 0.65) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.panel-header {
  user-select: none;
}

[data-panel] {
  transition: opacity 0.2s ease;
}

[data-panel].drag-over {
  outline: 2px solid rgba(69, 212, 131, 0.6);
  outline-offset: -2px;
}

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

.animate-slide-in {
  animation: slide-in 0.3s ease-out;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* 下拉菜单展开动画 */
@keyframes dropdown-expand {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-animate {
  animation: dropdown-expand 0.2s ease-out;
  transform-origin: top right;
}