/** Promised Land - layout.css | Auto-split from style.css */
/* ============================================
   Section A · 助手身份（头像+名称横排）
   ============================================ */
    .agent-card-row {
      display: flex;
      align-items: center;
      gap: 14px;
      /* ← 头像与名称间距 */
      padding: 0 2px;
    }

    /* 头像容器 — 焦糖褐色玻璃边框质感 */
    .agent-card-avatar-wrap {
      position: relative;
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      cursor: pointer;
      border-radius: 50%;
    }

    /* 图片头像 */
    .agent-card-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--color-panel2-avatar-border);
      background-color: var(--color-panel2-avatar-bg);
      box-shadow:
        0 4px 14px var(--color-panel2-avatar-shadow),
        0 1px 3px var(--color-panel2-avatar-shadow-sharp);
      transition: all 0.3s var(--ease-out-expo);
    }

    .agent-card-avatar:hover {
      border-color: var(--color-panel2-avatar-hover-border);
      box-shadow:
        0 6px 20px var(--color-panel2-avatar-hover-shadow),
        0 2px 4px var(--color-panel2-avatar-hover-shadow-sharp);
    }

    /* ★ 小鲸鱼纯图模式 · 覆盖所有美化 */
    img[data-no-shadow="true"] {
      border: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
    }

    /* 占位实心圆 — 面板同色系 + 焦糖褐边框 */
    .agent-card-avatar-placeholder {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--color-panel2-avatar-placeholder-bg);
      border: none;
      box-shadow: 0 2px 10px var(--color-panel2-avatar-placeholder-shadow);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: box-shadow 0.3s var(--ease-out-expo);
      cursor: pointer;
    }

    .agent-card-avatar-placeholder:hover {
      box-shadow: 0 4px 16px var(--color-panel2-avatar-placeholder-hover-shadow);
    }

    /* 名称输入 — 衬线斜体 */
    .agent-card-name {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-family: 'Cormorant Garamond', 'Times New Roman', serif;
      font-size: 1.05rem;
      font-weight: 400;
      font-style: italic;
      letter-spacing: 1.5px;
      color: var(--color-caramel-text);
      padding: 4px 2px;
      outline: none;
      border-bottom: 0.5px dashed var(--color-caramel);
      transition: border-color 0.25s;
      max-width: 140px;
    }

    .agent-card-name:hover {
      border-bottom-color: var(--color-caramel-light);
    }

    .agent-card-name:focus {
      border-bottom-color: var(--color-caramel-strong);
      color: var(--color-caramel-text-dark);
    }

    /* 固定顶部区域 */
    .panel2-fixed-top {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      padding-bottom: 0.5rem;
      margin-bottom: 0.8rem;
      pointer-events: auto;
    }

    /* 备注：低调斜体 */
    .agent-card-memo {
      width: 100%;
      border: none;
      background: transparent;
      font-family: 'Cormorant Garamond', 'Times New Roman', serif;
      font-size: 0.78rem;
      font-weight: 300;
      font-style: italic;
      letter-spacing: 1px;
      color: var(--color-caramel-memo);
      padding: 3px 2px 3px 70px;
      outline: none;
      border-bottom: 0.5px dashed transparent;
      margin-bottom: 0.5rem;
      transition: border-color 0.25s, color 0.25s;
    }

    .agent-card-memo::placeholder {
      color: var(--color-caramel-memo-placeholder);
      font-style: italic;
    }

    .agent-card-memo:focus {
      border-bottom-color: transparent;
      color: var(--color-caramel-memo-focus);
    }

    /* ============================================
   Section B · 模型与推理
   ============================================ */

    /* B-1 模型下拉 — 面板二专用 */
    .panel-2 .setting-select {
      width: 100%;
      padding: 6px 26px 6px 10px;
      border-radius: 6px;
      border: 0.5px solid var(--color-panel2-select-border);
      background: var(--color-panel2-select-bg);
      font-family: 'Inter', sans-serif;
      font-size: 0.74rem;
      font-weight: 300;
      color: var(--color-panel2-select-text);
      outline: none;
      cursor: pointer;
      transition: border-color 0.25s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B6F47' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.4'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }

    .panel-2 .setting-select:focus {
      border-color: var(--color-panel2-select-border-focus);
    }

    .panel-2.active {
      background-color: var(--color-panel2-bg-active);
    }

    .panel-2 .setting-row:has(#topPSlider) {
      margin-bottom: 0.69rem;
    }

    .panel-2 .setting-row:has(#toggleContextStats) {
      margin-bottom: 3rem;
    }

    .panel-2 .setting-row:has(#toggleImmersiveCoT) {
      margin-bottom: 2rem;
    }

    .panel-2 .setting-row:has(#thinkingDisplaySlider) {
      margin-bottom: 2.1rem;
    }

    /* B-2 三态开关（关|开|深）*/
    .segmented-slider {
      position: relative;
      display: flex;
      flex-direction: column;
      border: none;
      user-select: none;
      cursor: pointer;
      padding: 1px 0;
    }

    .segmented-slider::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 0.6px;
      background: linear-gradient(to right, transparent 0%, var(--color-seg-border-top) 30%, var(--color-seg-border-mid) 70%, transparent 100%);
      pointer-events: none;
    }

    .segmented-slider::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.6px;
      background: linear-gradient(to right, transparent 0%, var(--color-seg-border-top) 30%, var(--color-seg-border-mid) 70%, transparent 100%);
      pointer-events: none;
    }

    .seg-options-wrap {
      display: flex;
      position: relative;
      margin: 0 auto;
      width: 70%;
      overflow: visible;
    }

    .seg-option {
      flex: 1;
      text-align: center;
      padding: 6px 0;
      font-size: 0.78rem;
      font-weight: 320;
      letter-spacing: 1.2px;
      color: var(--color-seg-option);
      background: transparent;
      border: none;
      position: relative;
      z-index: 2;
      transition: color 0.3s var(--ease-out-expo);
      cursor: pointer;
      font-family: inherit;
    }

    .seg-option:not(:last-of-type)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 0.5px;
      background: var(--color-seg-divider);
      z-index: 3;
    }

    .seg-option.active {
      color: var(--color-seg-option-active);
      font-weight: 360;
    }

    .seg-slider-knob {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 28px;
      width: 28px;
      background: var(--color-seg-knob-bg);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      border: 0.5px solid var(--color-seg-knob-border);
      border-radius: 1px;
      z-index: 2;
      pointer-events: none;
      transition: left 0.4s var(--ease-out-expo);
      box-shadow:
        0 4px 12px var(--color-seg-knob-shadow),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
    }

    /* B-3 横线滑块 — 温度 / Top P */
    .line-slider-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      user-select: none;
      cursor: pointer;
      position: relative;
      padding: 2px 0;
      transition: opacity 0.35s ease;
    }

    .line-slider-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0 2px;
    }

    .line-slider-name {
      font-size: 0.65rem;
      font-weight: 320;
      letter-spacing: 1.2px;
      color: var(--color-caramel-label);
    }

    .line-slider-value {
      font-size: 0.68rem;
      font-weight: 350;
      font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
      color: var(--color-caramel-value);
      letter-spacing: 0.5px;
    }

    .line-slider-track {
      position: relative;
      height: 20px;
      display: flex;
      align-items: center;
      margin: 0 2px;
    }

    .line-slider-track::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      background: linear-gradient(to right, transparent 0%, var(--color-caramel-track) 10%, var(--color-caramel-track) 90%, transparent 100%);
      border-radius: 0.5px;
    }

    .line-slider-fill {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      background: var(--color-caramel-fill);
      border-radius: 0.5px;
      pointer-events: none;
      transition: width 0.05s linear;
    }

    .line-slider-handle {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 2.5px;
      height: 16px;
      background: var(--color-caramel-handle);
      border-radius: 1.25px;
      pointer-events: none;
      transition: left 0.05s linear;
    }

    .line-slider-wrap:hover .line-slider-handle {
      height: 20px;
      width: 3px;
    }

    .line-slider-wrap:active .line-slider-handle {
      height: 22px;
      width: 3px;
    }

    /* B-4 禁用态 */
    .line-slider-wrap.disabled {
      opacity: 0.32;
      pointer-events: none;
      cursor: default;
    }

    .line-slider-wrap.disabled .line-slider-handle {
      background: var(--color-caramel-handle-disabled);
    }

    /* B-5 设置行 */
    .setting-row {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .setting-label {
      font-size: 0.65rem;
      font-weight: 320;
      letter-spacing: 1.8px;
      color: var(--color-caramel-label-dark);
    }

    /* ============================================
   面板三 · 提示词 · 深蓝紫底（容器在 splash.css）
   ============================================ */

    /* ★ 面板三内容区 · 无背景无边框 */
    .panel-3 .panel-inner {
      padding: 4.5rem 3rem 3rem 2.3rem;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .panel-3 .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: 2.1rem;
      padding-bottom: 10rem;
      -webkit-mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
      mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
    }

    .panel-3 .panel-scroll::-webkit-scrollbar {
      display: none;
    }

    /* ★ 每个 section */
    .p3-section {
      display: flex;
      flex-direction: column;
      gap: 0px;
    }

    /* ★ 大标题 · 衬线淡白 */
    .p3-section-title {
      font-family: 'Times New Roman', serif;
      font-size: 0.99rem;
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0.99px;
      color: var(--color-panel3-section-title);
      text-shadow: 0 2px 12px var(--color-panel3-section-title-glow);
      margin-bottom: 9px;
      transition: color 0.25s ease;
      user-select: none;
    }

    /* ★ 标题底部装饰线 · 淡蓝灰渐变 */
    .p3-line {
      width: 100%;
      height: 0.5px;
      background: var(--color-panel3-line);
      margin-bottom: 1.2rem;
    }

    /* ★ 展示区 · 替代旧 textarea */
    .p3-prompt-display {
      width: 100%;
      min-height: 60px;
      max-height: 120px;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      border: none;
      background: transparent;
      padding: 9px 9px 9px 9px;
      font-family: 'Times New Roman', serif;
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 2;
      letter-spacing: 0.05em;
      color: var(--color-panel3-display);
      cursor: pointer;
      transition: color 0.25s, text-shadow 0.25s, background 0.25s;
      border-radius: 8px;
      user-select: none;
    }

    .p3-prompt-display::-webkit-scrollbar {
      display: none;
    }

    /* 桌面端 hover（仅鼠标设备生效）；触屏 PWA 用 :active 按压反馈替代 */
    @media (hover: hover) {
      .p3-prompt-display:hover {
        color: var(--color-panel3-display-hover);
        text-shadow: 0 0 8px var(--color-panel3-display-hover-glow);
        background: var(--color-panel3-display-hover-bg);
      }
    }

    @media (hover: none) {
      .p3-prompt-display:active {
        color: var(--color-panel3-display-hover);
        text-shadow: 0 0 8px var(--color-panel3-display-hover-glow);
        background: var(--color-panel3-display-hover-bg);
      }
    }

    .p3-prompt-display.is-hidden {
      color: var(--color-panel3-display-hidden);
      font-style: italic;
    }

    .p3-prompt-display.is-revealed {
      color: var(--color-panel3-display-revealed);
      font-style: normal;
      white-space: pre-wrap;
      word-break: break-word;
    }