/** Promised Land - splash.css | Auto-split from style.css */
/* ========== 启动屏 ========== */
    .splash-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--color-splash-overlay-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: opacity 0.99s var(--ease-out-expo), backdrop-filter 0.99s var(--ease-out-expo);
      gap: 1.2rem;
      user-select: none;
      padding: 2rem;
      padding-bottom: 6rem;
    }

    .splash-overlay.fade-out {
      opacity: 0;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      pointer-events: none;
    }

    /* —— 德语 —— */
    .splash-de {
      font-family: 'Times New Roman', serif;
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 1.5px;
      color: var(--color-splash-de);
      text-align: center;
      line-height: 1.6;
      text-shadow:
        0 1px 2px var(--color-splash-de-shadow1),
        0 4px 12px var(--color-splash-de-shadow2),
        0 8px 24px var(--color-splash-de-shadow3);
    }

    /* —— 承诺 —— */
    .splash-zh {
      font-family: serif;
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: 2px;
      color: var(--color-splash-zh);
      text-align: center;
      margin-top: 0.3rem;
      text-shadow:
        0 1px 2px var(--color-splash-zh-shadow1),
        0 4px 18px var(--color-splash-zh-shadow2),
        0 8px 27px var(--color-splash-zh-shadow3);
    }

    /* 主布局（桌面端） */
    .main-layout {
      display: flex;
      height: 100vh;
      height: 100dvh;
      width: 100%;
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    /* ★ 左边栏 · 统一 fixed overlay（桌面端 + 移动端）
       位移用 transform（纯合成层动画）；will-change 提示浏览器提前栅格化，移动端不掉帧 */
    .left-sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 295px !important;
      height: 100vh;
      height: 100dvh;
      z-index: 200;
      transform: translateX(-305px);
      will-change: transform;
      transition: transform 0.35s var(--ease-out-expo);
      /* 面板之间的缝隙穿透到 body 背景，和页面浑然一体 */
      background: transparent !important;
      overflow: visible;
      pointer-events: none;
    }

    .left-sidebar[data-state="expanded"] {
      transform: translateX(0) !important;
      pointer-events: auto !important;
    }

    .left-sidebar[data-state="collapsed"] {
      transform: translateX(-305px) !important;
      pointer-events: none !important;
    }

    /* 移动端遮罩层（不用 backdrop-filter：侧栏滑动时全屏实时模糊是掉帧主因，改略浓底色） */
    .mobile-left-backdrop {
      position: fixed;
      inset: 0;
      z-index: 190;
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .mobile-left-backdrop.active {
      opacity: 1;
      pointer-events: auto;
    }

    .panel {
      position: absolute;
      left: 0;
      top: 0;
      width: 295px;
      height: 100vh;
      height: 100dvh;
      border-radius: 30px 15px 30px 15px;
      cursor: pointer;
      will-change: transform;
      transition: transform 0.45s var(--ease-out-expo), filter 0.45s var(--ease-out-expo), z-index 0s;
    }

    /* ========== 面板一 · 深蓝智能体 ========== */
    .panel-1 {
      background-color: var(--color-panel1-bg);
      background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
      clip-path: polygon(0% 0%, 91.53% 0%, 100% 0%, 100% 32.9%, 99.79% 33.08%, 99.58% 33.25%, 91.53% 34.65%, 91.53% 100%, 0% 100%);
      filter: drop-shadow(6px 10px 28px var(--color-panel1-shadow));
      box-shadow: inset 0 0 0 1px var(--color-panel1-border);
      transform: translateX(0) translateY(0);
      z-index: 30;
    }
    .panel-1:hover {
      transform: translateX(6px) translateY(0px) !important;
      filter: drop-shadow(0 20px 38px var(--color-panel1-shadow));
    }

    /* ========== 面板二 · 暖白焦糖褐 ========== */
    .panel-2 {
      background-color: var(--color-panel2-bg);
      background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E"), linear-gradient(var(--color-panel2-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-panel2-grid-90) 1px, transparent 1px);
      background-size: auto, 28px 28px, 28px 28px;
      clip-path: polygon(0% 0%, 91.53% 0%, 100% 0%, 100% 61.1%, 99.79% 61.43%, 99.58% 61.75%, 91.53% 64.35%, 91.53% 100%, 0% 100%);
      filter: drop-shadow(6px 6px 20px var(--color-panel2-shadow));
      box-shadow: inset 0 0 0 1px var(--color-panel2-border);
      transform: translateX(2px) translateY(0);
      z-index: 20;
    }
    .panel-2:hover {
      transform: translateX(12px) translateY(-2px);
      filter: drop-shadow(0 14px 28px var(--color-panel2-shadow-hover));
    }

    .panel-2 .panel-inner {
      padding: 3.1rem 3rem 3.1rem 2.3rem;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .panel-2 .panel-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      pointer-events: auto;
      display: flex;
      flex-direction: column;
      gap: 1.8rem;
      padding-bottom: 10rem;
      -webkit-mask-image: linear-gradient(to bottom, black 0%, black 97%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 0%, black 97%, transparent 100%);
    }
    .panel-2 .panel-scroll::-webkit-scrollbar {
      display: none;
    }

    /* ========== 面板三 · 深蓝紫提示词 ========== */
    .panel-3 {
      background-color: var(--color-panel3-bg);
      background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
      filter: drop-shadow(2px 4px 16px var(--color-panel3-shadow));
      box-shadow: inset 0 0 0 1px var(--color-panel1-border);
      transform: translateX(4px) translateY(0);
      z-index: 10;
    }
    .panel-3:hover {
      transform: translateX(12px) translateY(-2px);
      filter: drop-shadow(0 10px 22px var(--color-panel3-shadow));
    }

    /* ★ 活跃面板提升 */
    .panel.active {
      z-index: 35 !important;
      transform: translateX(0) translateY(-4px);
      filter: drop-shadow(0 24px 44px var(--color-panel1-shadow-active)) !important;
      box-shadow: inset 0 0 0 1px var(--color-panel1-border-active) !important;
    }

    /* ========== 移动端适配 ========== */
    @media (max-width: 800px) {
      .main-layout {
        overflow: visible !important;
      }

      .left-sidebar {
        width: 295px !important;
        border-radius: 0 40px 40px 0;
        background: transparent !important;
      }

      .left-sidebar[data-state="expanded"] {
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.3) !important;
      }

      /* 面板内容避开状态栏安全区 */
      .left-sidebar .panel-inner {
        padding-top: calc(2rem + env(safe-area-inset-top, 0px));
      }

      /* ★ 移动端保留面板偏移动效 */
      .left-sidebar .panel-1 {
        transform: translateX(0) translateY(0);
        z-index: 30;
      }
      .left-sidebar .panel-2 {
        transform: translateX(2px) translateY(0);
        z-index: 20;
      }
      .left-sidebar .panel-3 {
        transform: translateX(4px) translateY(0);
        z-index: 10;
      }

      /* ★ 移动端禁用面板本身的 hover 位移（仅标签耳区域响应）：
         触屏点按后 :hover 会粘住，把 hover 态钉回各自静息位，防止 2px/4px 错落被清零 */
      .left-sidebar .panel-1:hover {
        transform: translateX(0) translateY(0) !important;
        filter: drop-shadow(6px 10px 28px var(--color-panel1-shadow)) !important;
      }
      .left-sidebar .panel-2:hover {
        transform: translateX(2px) translateY(0) !important;
        filter: drop-shadow(6px 6px 20px var(--color-panel2-shadow)) !important;
      }
      .left-sidebar .panel-3:hover {
        transform: translateX(4px) translateY(0) !important;
        filter: drop-shadow(2px 4px 16px var(--color-panel3-shadow)) !important;
      }

      /* ★ 标签耳 JS toggle class 控制动效 */
      .left-sidebar .tab-label {
        pointer-events: auto;
        cursor: pointer;
        z-index: 55;
      }
      /* ★ 拉出态：浮到所有面板之上（盖过 .active 的 z-35），阴影加深（面板一纯静息，不参与） */
      .left-sidebar .panel.mobile-tab-active {
        z-index: 40;
        filter: drop-shadow(0 14px 28px var(--color-panel2-shadow-hover)) !important;
      }
      .left-sidebar .panel-2.mobile-tab-active {
        transform: translateX(12px) translateY(-2px) !important;
      }
      .left-sidebar .panel-3.mobile-tab-active {
        transform: translateX(12px) translateY(-2px) !important;
      }
      .left-sidebar .tab-label:active {
        opacity: 0.7;
      }

      /* ★ 移动端隐藏删除按钮 */
      .left-sidebar .conv-delete-btn {
        display: none !important;
      }
    }