/* ============================================================
   /ask 提问箱页面样式
   与主站共用 style.css 的变量与卡片风格，这里只加本页专有的部分
   ============================================================ */

/* 皱纸纹理：用 SVG 的 feTurbulence + feDiffuseLighting 程序化生成，
   零字节资源、可无限平铺、不用下载任何图片。
   background-blend-mode: multiply 把它叠在纸色上就是「皱巴的纸」。 */
:root {
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013 0.021' numOctaves='5' seed='11'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='235' elevation='54'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper-bg: #f2e9d8;
  --ink: #3d3227;
  --ink-dim: #7a6a58;
}

.ask-shell { max-width: 780px; }

.ask-back {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  text-decoration: none;
  font-size: 17px;
  flex: none;
}

.ask-back:hover { background: rgba(244, 162, 97, 0.2); }

/* ---------------- 表单 ---------------- */

.ask-field { margin-bottom: 11px; }

.ask-field input[type='text'],
.ask-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
}

.ask-field input[type='text']:focus,
.ask-field textarea:focus {
  outline: none;
  border-color: rgba(244, 162, 97, 0.62);
}

.ask-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.ask-counter {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}

.ask-counter.is-over { color: #ff8b7a; font-weight: 700; }

/* ---------------- 面板（emoji / 贴纸） ---------------- */

.ask-panel {
  margin-bottom: 13px;
  padding: 12px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.24);
}

.ask-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.ask-tabs { display: flex; gap: 6px; }

.ask-tab {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.ask-tab.is-active {
  background: rgba(244, 162, 97, 0.22);
  border-color: rgba(244, 162, 97, 0.6);
  color: var(--text);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 4px;
  max-height: 168px;
  overflow-y: auto;
}

.emoji-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.emoji-cell:hover { background: rgba(255, 255, 255, 0.1); }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
}

.sticker-cell {
  aspect-ratio: 1;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  overflow: hidden;
}

.sticker-cell:hover { border-color: rgba(244, 162, 97, 0.65); background: rgba(244, 162, 97, 0.12); }

.sticker-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------- 预览 ---------------- */

.ask-preview { margin-bottom: 14px; }

.ask-preview-label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.ask-preview-body {
  min-height: 62px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  font-size: 14px;
  line-height: 1.75;
  word-break: break-word;
}

.ask-actions { display: flex; gap: 9px; align-items: center; }
.ask-actions .primary-btn { width: auto; padding: 11px 26px; }

/* 内联贴纸（预览与正式展示共用） */
.seg-sticker {
  height: 1.9em;
  max-width: 12em;
  vertical-align: -0.42em;
  margin: 0 2px;
  object-fit: contain;
}

.seg-sticker.is-animated { height: 2.4em; vertical-align: -0.62em; }

/* ---------------- 提问卡片（皱纸） ---------------- */

.ask-list { display: flex; flex-direction: column; gap: 15px; }

.ask-item {
  position: relative;
  padding: 17px 19px 15px;
  border-radius: 4px;
  background-color: var(--paper-bg);
  background-image: var(--paper);
  background-blend-mode: multiply;
  background-size: 420px 420px;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 10px 26px rgba(0, 0, 0, 0.34);
  font-size: 14.5px;
  line-height: 1.78;
  word-break: break-word;
}

/* 极轻微的随机倾斜，避免整齐得像列表 */
.ask-item:nth-child(3n)   { transform: rotate(-0.28deg); }
.ask-item:nth-child(3n+1) { transform: rotate(0.22deg); }

.ask-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(61, 50, 39, 0.16);
  font-size: 12.5px;
  color: var(--ink-dim);
}

.ask-item-author { font-weight: 700; color: #6b4f2f; }

.ask-item-body { color: var(--ink); }

.ask-item-body .seg-sticker { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); }

.ask-empty {
  font-size: 13px;
  color: var(--text-faint);
  padding: 7px 0;
}

.ask-item .ask-empty { color: var(--ink-dim); }

/* ---------------- 管理面板 ---------------- */

.admin-q {
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 9px;
}

.admin-q-text {
  font-size: 13.5px;
  line-height: 1.65;
  word-break: break-word;
  margin-bottom: 8px;
}

.admin-q-meta {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.admin-q-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.admin-q-actions .btn { padding: 6px 14px; font-size: 12.5px; }

@media (max-width: 560px) {
  .ask-item { padding: 14px 15px 13px; font-size: 14px; }
  .ask-actions .primary-btn { width: 100%; }
}