/* =========================
   Liminal · Chat Corpus Pool
   ========================= */


.corpus-keyboard-panel {
  position: fixed;
  inset: 0;

  z-index: 70;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  background:
    rgba(32, 31, 29, 0.16);

  backdrop-filter:
    blur(3px);
}


.corpus-keyboard-panel[hidden] {
  display: none;
}


.corpus-keyboard-sheet {
  width:
    min(
      520px,
      100%
    );

  height:
    min(
      78vh,
      680px
    );

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius:
    26px
    26px
    0
    0;

  border:
    1px solid
    rgba(55, 52, 47, 0.07);

  background:
    rgba(247, 246, 243, 0.99);

  box-shadow:
    0 -14px 42px
    rgba(30, 30, 30, 0.08);
}


/* =========================
   Header
   ========================= */

.corpus-keyboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  padding:
    20px
    22px
    14px;
}


.corpus-keyboard-header > div {
  display: flex;
  flex-direction: column;
}


.corpus-keyboard-header span {
  margin-bottom: 3px;

  color: #aaa79f;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.17em;
}


.corpus-keyboard-header strong {
  color: #403e39;

  font-size: 22px;
  font-weight: 600;
}


.corpus-keyboard-header small {
  margin-top: 3px;

  color: #98958e;

  font-size: 8px;
}


.corpus-keyboard-close {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(80, 77, 70, 0.055);

  color: #77746e;

  font-size: 20px;

  cursor: pointer;
}


/* =========================
   Summary
   ========================= */

.corpus-keyboard-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    10px
    22px;

  border-top:
    1px solid
    rgba(55, 52, 47, 0.045);

  border-bottom:
    1px solid
    rgba(55, 52, 47, 0.055);

  color: #8f8c85;

  font-size: 8px;
}


.corpus-keyboard-summary span:last-child {
  text-align: right;
}


/* =========================
   Pages
   ========================= */

.corpus-keyboard-pages {
  flex: 1;

  display: flex;

  min-height: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type:
    x mandatory;

  scrollbar-width: none;
}


.corpus-keyboard-pages::-webkit-scrollbar {
  display: none;
}


.corpus-keyboard-page {
  width: 100%;

  flex:
    0 0 100%;

  min-height: 0;

  overflow-y: auto;

  padding:
    20px
    22px
    28px;

  scroll-snap-align:
    start;
}


.corpus-page-heading {
  margin-bottom: 16px;
}


.corpus-page-heading > span {
  display: block;

  margin-bottom: 3px;

  color: #aaa79f;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.16em;
}


.corpus-page-heading > strong {
  display: block;

  color: #4c4a45;

  font-size: 18px;
  font-weight: 600;
}


.corpus-page-heading p {
  margin:
    7px
    0
    0;

  color: #99968f;

  font-size: 8px;
  line-height: 1.55;
}


/* =========================
   Toggle list
   ========================= */

.corpus-toggle-list,
.corpus-preset-list,
.corpus-extra-list {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.corpus-toggle-item,
.corpus-preset-item,
.corpus-extra-item {
  width: 100%;

  display: grid;
  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;

  gap: 12px;

  min-height: 58px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(55, 52, 47, 0.06);

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.56);

  text-align: left;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}


.corpus-toggle-item.is-on,
.corpus-preset-item.is-on,
.corpus-extra-item.is-on {
  background:
    #e5e9e6;

  border-color:
    rgba(82, 91, 84, 0.08);
}


/* =========================
   Number
   ========================= */

.corpus-toggle-number,
.corpus-preset-symbol,
.corpus-extra-symbol {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 38px;

  border-radius: 12px;

  background:
    #e8e7e3;

  color: #77746e;

  font-size: 8px;
  font-weight: 600;
}


.is-on .corpus-toggle-number,
.is-on .corpus-preset-symbol,
.is-on .corpus-extra-symbol {
  background:
    rgba(255, 255, 255, 0.72);

  color: #59635d;
}


/* =========================
   Copy
   ========================= */

.corpus-toggle-copy,
.corpus-preset-copy,
.corpus-extra-copy {
  min-width: 0;
}


.corpus-toggle-copy strong,
.corpus-preset-copy strong,
.corpus-extra-copy strong {
  display: block;

  color: #55524c;

  font-size: 10px;
  font-weight: 600;
}


.corpus-toggle-copy small,
.corpus-preset-copy small,
.corpus-extra-copy small {
  display: block;

  margin-top: 3px;

  color: #aaa79f;

  font-size: 7px;
}


/* =========================
   ON / OFF
   ========================= */

.corpus-toggle-state {
  min-width: 35px;

  padding:
    5px
    7px;

  border-radius: 999px;

  background:
    rgba(80, 77, 70, 0.055);

  color: #aaa79f;

  font-size: 6px;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-align: center;
}


.is-on .corpus-toggle-state {
  background:
    rgba(255, 255, 255, 0.78);

  color: #647069;
}


/* =========================
   Footer
   ========================= */

.corpus-keyboard-footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 7px;

  padding:
    11px
    20px
    calc(
      12px +
      env(safe-area-inset-bottom)
    );

  border-top:
    1px solid
    rgba(55, 52, 47, 0.055);
}


.corpus-page-dots {
  display: flex;
  align-items: center;

  gap: 6px;
}


.corpus-page-dot {
  width: 5px;
  height: 5px;

  padding: 0;

  border: 0;
  border-radius: 999px;

  background: #cfccc5;

  cursor: pointer;

  transition:
    width 0.15s ease,
    background 0.15s ease;
}


.corpus-page-dot.active {
  width: 14px;

  background: #77746e;
}


#corpusPageLabel {
  color: #aaa79f;

  font-size: 7px;
}

/* =========================
   固定自定义预设
   ========================= */

.corpus-fixed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin:
    22px
    3px
    9px;
}


.corpus-fixed-heading span {
  color: #aaa79f;

  font-size: 7px;
  font-weight: 700;

  letter-spacing: 0.16em;
}


.corpus-fixed-heading small {
  color: #aaa79f;

  font-size: 7px;
}


.corpus-fixed-empty {
  padding:
    18px
    12px;

  border-radius: 16px;

  background:
    rgba(80, 77, 70, 0.035);

  color: #aaa79f;

  font-size: 8px;

  text-align: center;
}

/* =========================
   无限循环复制页
   ========================= */

.corpus-loop-clone {
  pointer-events: none;
  user-select: none;
}

/* =========================
   Desktop
   ========================= */

@media (min-width: 700px) {

  .corpus-keyboard-sheet {
    margin-bottom: 0;
  }

}


/* =========================
   Mobile · Phase 1
   ========================= */

@media (max-width: 767px) {

  .corpus-keyboard-sheet {
    height:
      min(78dvh, 680px);
    max-height:
      calc(100dvh - env(safe-area-inset-top));
  }

  .corpus-keyboard-header {
    gap: 12px;
    padding:
      16px
      max(16px, env(safe-area-inset-right))
      12px
      max(16px, env(safe-area-inset-left));
  }

  .corpus-keyboard-header > div,
  .corpus-keyboard-summary > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .corpus-keyboard-close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .corpus-keyboard-summary {
    flex-wrap: wrap;
    padding-right:
      max(16px, env(safe-area-inset-right));
    padding-left:
      max(16px, env(safe-area-inset-left));
  }

  .corpus-keyboard-page {
    padding:
      16px
      max(16px, env(safe-area-inset-right))
      22px
      max(16px, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
  }

  .corpus-toggle-item,
  .corpus-preset-item,
  .corpus-extra-item {
    grid-template-columns:
      auto minmax(0, 1fr) auto;
    min-height: 58px;
    touch-action: manipulation;
  }

  .corpus-keyboard-footer {
    padding-right:
      max(16px, env(safe-area-inset-right));
    padding-left:
      max(16px, env(safe-area-inset-left));
  }

}