/* ShanAa kaomoji drawer v2
   UI adaptation of KaomojiDrawerKit (MIT); see /static/licenses/KaomojiDrawerKit-LICENSE.txt. */
.field.kd-ready { position: relative; padding-right: 0; }
.field.kd-ready textarea { padding-right: 30px; }
.field.kd-ready textarea::placeholder {
  font-size: 15px; letter-spacing: -.025em;
}

.kd-trigger {
  width: 28px; height: 28px; position: absolute; right: 2px; top: 50%; z-index: 2;
  display: grid; place-items: center; padding: 0; transform: translateY(-50%);
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-faint, rgba(235,225,218,.55)); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kd-trigger i { font-size: 19px; }
.kd-trigger:active { transform: translateY(-50%) scale(.9); }
.kd-trigger[aria-expanded="true"] { color: var(--blood, #d77b91); }
html[data-theme="day"] .kd-trigger { color: rgba(77,87,108,.62); }
html[data-theme="day"] .kd-trigger[aria-expanded="true"] { color: #b85f75; }

.kd-backdrop {
  position: fixed; inset: 0; z-index: 86; visibility: hidden; opacity: 0;
  background: rgba(12,10,12,.34); pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.kd-backdrop.on { visibility: visible; opacity: 1; pointer-events: auto; }

.kd-sheet {
  --kd-surface: rgba(31,27,31,.985);
  --kd-surface-2: rgba(49,43,51,.92);
  --kd-card: rgba(255,255,255,.072);
  --kd-border: rgba(255,255,255,.105);
  --kd-ink: #f3ece7;
  --kd-muted: rgba(231,220,216,.58);
  --kd-accent: #d77b91;
  --kd-selected: #a9d7f2;
  --kd-selected-ink: #29455d;
  height: min(52dvh, 470px); position: fixed; left: 0; right: 0; bottom: 0; z-index: 87;
  display: flex !important; flex-direction: column !important;
  overflow: hidden; transform: translateY(calc(100% + 18px));
  border: 1px solid var(--kd-border); border-bottom: 0; border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 86% 2%, rgba(127,151,190,.18), transparent 34%),
    linear-gradient(155deg, var(--kd-surface-2), var(--kd-surface));
  box-shadow: 0 -22px 58px rgba(0,0,0,.28); color: var(--kd-ink);
  transition: transform .22s cubic-bezier(.22,1,.36,1);
  padding-bottom: max(7px, env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.kd-sheet.on { transform: translateY(0); }
html[data-theme="day"] .kd-sheet {
  --kd-surface: rgba(246,247,250,.99);
  --kd-surface-2: rgba(231,236,245,.96);
  --kd-card: rgba(255,255,255,.66);
  --kd-border: rgba(65,78,104,.13);
  --kd-ink: #3d4659;
  --kd-muted: rgba(68,79,101,.62);
  --kd-accent: #b85f75;
  --kd-selected: #b9ddf4;
  --kd-selected-ink: #2c465d;
  box-shadow: 0 -20px 52px rgba(45,57,79,.16);
}

.kd-sheet .kd-head {
  position: relative !important; inset: auto !important; z-index: 3;
  flex: 0 0 64px; order: 0; width: auto !important; transform: none !important;
  min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr) 38px;
  align-items: center; gap: 10px; padding: 12px 15px 8px;
}
.kd-sheet .kd-head::before { content: none !important; display: none !important; }
.kd-head-copy { min-width: 0; text-align: center; }
.kd-kicker { display: block; color: var(--kd-accent); font-size: 8px; font-weight: 700; letter-spacing: .24em; }
.kd-title { margin-top: 3px; font: 500 18px/1.2 Georgia, "Songti SC", serif; letter-spacing: .08em; }
.kd-head-copy .kd-count { display: none !important; }
.kd-head-spacer { width: 38px; }
.kd-sheet .kd-close {
  position: static !important; inset: auto !important; z-index: 4;
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--kd-border); border-radius: 15px;
  background: var(--kd-card); color: var(--kd-muted); cursor: pointer;
}
.kd-close i { font-size: 19px; }
.kd-close:active { transform: scale(.92); }

.kd-sheet .kd-tabs {
  position: relative !important; inset: auto !important; z-index: 2;
  flex: 0 0 auto; order: 1; width: auto !important; transform: none !important;
  display: flex !important; gap: 7px; overflow-x: auto; padding: 5px 15px 11px;
  pointer-events: auto !important;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.kd-tabs::-webkit-scrollbar { display: none; }
.kd-tab {
  position: relative !important; inset: auto !important; z-index: 1; pointer-events: auto !important;
  flex: 0 0 auto; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--kd-border); border-radius: 999px;
  background: var(--kd-card); color: var(--kd-muted); font-size: 11px; cursor: pointer;
}
.kd-tab.on {
  border-color: color-mix(in srgb, var(--kd-selected) 82%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kd-selected) 84%, #fff), var(--kd-selected));
  color: var(--kd-selected-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 12px rgba(69,111,143,.12);
}

.kd-sheet .kd-scroll {
  position: relative !important; inset: auto !important; z-index: 1;
  flex: 1 1 auto; order: 2; width: auto !important; height: auto !important;
  min-height: 0; overflow: auto !important; padding: 3px 15px 14px;
  scrollbar-width: thin; scrollbar-color: var(--kd-border) transparent;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
}
.kd-sheet .kd-grid {
  position: static !important; display: grid !important; width: auto !important;
  height: auto !important; max-height: none !important; overflow: visible !important;
  grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px;
}
.kd-face {
  position: relative !important; inset: auto !important; display: block !important;
  min-width: 0; min-height: 46px; padding: 8px 9px;
  border: 1px solid var(--kd-border); border-radius: 15px;
  background: var(--kd-card); color: var(--kd-ink);
  font: 500 12px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-align: center; overflow-wrap: anywhere; cursor: pointer;
  box-shadow: 0 5px 16px rgba(0,0,0,.04);
}
.kd-face:active { transform: scale(.97); border-color: var(--kd-accent); }
.kd-empty { padding: 40px 16px; color: var(--kd-muted); font: 12px/1.8 Georgia, "Songti SC", serif; text-align: center; }
.kd-sheet .kd-credit {
  position: relative !important; inset: auto !important; flex: 0 0 auto; order: 3;
  padding: 6px 16px 8px; color: var(--kd-muted); font-size: 8px; letter-spacing: .08em; text-align: center;
}
.kd-credit a { color: inherit; text-decoration: none; }

@media (max-width: 350px) {
  .kd-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kd-sheet, .kd-backdrop { transition-duration: .01ms; }
}