/* ...existing code... */
:root {
  --discord-quote-border: rgba(32, 34, 37, 0.12);
  --muted: #6b7280;
}

/* 基本表單外觀保持，並加強可讀性 */
.form-input,
.form-textarea {
  appearance: none;
}

/* 放大預覽並允許捲動 */
.markdown-preview {
  min-height: 220px;
  /* 放大 */
  max-height: 420px;
  overflow: auto;
  background-clip: padding-box;
}

/* 模仿 Discord 的 blockquote 樣式 */
.markdown-preview blockquote {
  border-left: 4px solid var(--discord-quote-border);
  background: rgba(0, 0, 0, 0.02);
  padding: 8px 12px;
  margin: 0 0 12px 0;
  border-radius: 6px;
  color: inherit;
}

/* code block / inline code 強化 */
.markdown-preview pre {
  background: #0f172a;
  /* 深色背景 */
  color: #e6eef8;
  padding: 12px;
  border-radius: 8px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Sans Mono", monospace;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.markdown-preview code {
  background: rgba(27, 31, 35, 0.06);
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Sans Mono", monospace;
}

/* 錯誤訊息、檔案列表等延用現有 class（若需要可再調整） */
.error-msg {
  color: #dc2626;
  font-size: .875rem;
  margin-top: .25rem;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}

/* ...existing code... */
.toolbar button {
  /* keep backward compatibility if referenced */
  border: 0;
  background: transparent;
}

/* 新增：更明顯的 toolbar 按鈕樣式 */
.toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: .35rem .6rem;
  min-width: 2.2rem;
  height: 2rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: .5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.9);
  color: inherit;
  cursor: pointer;
  transition: all .12s ease;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}

/* hover / focus */
.toolbar-btn:hover {
  transform: translateY(-1px);
  background: rgba(59, 130, 246, 0.06);
  /* light blue hint */
  border-color: rgba(59, 130, 246, 0.15);
}

.toolbar-btn:active {
  transform: translateY(0);
}

.toolbar-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

/* 深色主題調整 */
.dark .toolbar-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.dark .toolbar-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.18);
}

/* 增加按鈕間距（備援） */
.toolbar .flex.items-center.gap-2>.toolbar-btn+.toolbar-btn {
  margin-left: .5rem;
}

/* 若需要，把文字改為 icon 可在此再加樣式 */
.toolbar-btn.small {
  padding: .25rem .45rem;
  min-width: 1.8rem;
  height: 1.8rem;
  font-size: .85rem;
}

/* toolbar layout：允許換行並保留 spacing */
.toolbar {
  gap: 0.5rem;
}

.toolbar-left {
  flex: 1 1 auto;
}

.toolbar-right {
  flex: 0 1 auto;
}

/* toolbar button 基本樣式 */
.toolbar-btn {
  @apply inline-flex items-center justify-center px-2.5 py-1.5 text-sm font-medium rounded-md transition-colors duration-150;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
}

.toolbar-btn:hover {
  @apply bg-primary/10;
}

@media (prefers-color-scheme: dark) {
  .toolbar-btn:hover {
    @apply bg-white/5;
  }
}

.toolbar-btn:active {
  transform: translateY(1px);
}

/* active state */
.toolbar-btn.active,
.toolbar-btn[aria-pressed="true"] {
  @apply bg-primary text-white;
}

/* spoiler（預覽用）：預設隱藏內容，點擊後顯示 */
.preview .spoiler {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
  color: transparent;
  border-radius: 6px;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color .12s ease, background .12s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.preview .spoiler.revealed {
  color: inherit;
  background: transparent;
  border-color: transparent;
}

/* 小螢幕時按鈕自動換行、每個按鈕維持最小寬度 */
@media (max-width: 640px) {
  .toolbar-left .toolbar-btn {
    flex: 0 1 auto;
  }
}

/* Discord 風格的隱藏（spoiler） */
.spoiler {
  position: relative;
  display: inline-block;
  /* 讓遮罩剛好包住內容 */
  cursor: pointer;
  border-radius: .25rem;
}

/* 未揭露狀態：把文字、子元素都“隱形”，並加上半透明灰底 */
.spoiler:not(.revealed) {
  color: transparent !important;
}

.spoiler:not(.revealed) * {
  color: transparent !important;
}

.spoiler:not(.revealed)::selection,
.spoiler:not(.revealed) *::selection {
  background: transparent;
  /* 禁止反白偷看 */
}

/* 內容遮罩（灰底），點一下就會拿掉 */
.spoiler:not(.revealed)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(120, 120, 120, 0.25);
  /* 亮色主題 */
  border-radius: .25rem;
  pointer-events: none;
}

.dark .spoiler:not(.revealed)::after {
  background: rgba(70, 70, 70, 0.5);
  /* 暗色主題 */
}

/* 如果 spoiler 裡面有圖片或 code，再多做模糊/降亮度處理 */
.spoiler:not(.revealed) img,
.spoiler:not(.revealed) video,
.spoiler:not(.revealed) canvas {
  filter: blur(8px) brightness(0.6);
}

.spoiler:not(.revealed) code,
.spoiler:not(.revealed) pre {
  filter: blur(6px) brightness(0.8);
}

/* 揭露後還原 */
.spoiler.revealed {
  color: inherit !important;
}

.spoiler.revealed * {
  color: inherit !important;
}

.spoiler.revealed img,
.spoiler.revealed video,
.spoiler.revealed canvas,
.spoiler.revealed code,
.spoiler.revealed pre {
  filter: none;
}

/* 版號資訊 */
.ver-badge {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: .5rem;
  font-weight: 600;
  background: rgba(0, 0, 0, .06);
}

footer {
  opacity: .8
}

/* Lightbox fade animations */
.lightbox-overlay {
  opacity: 0;
  --lightbox-duration: 800ms; /* adjust this value (e.g. 500ms, 1s, 1500ms) */
  transition: opacity var(--lightbox-duration) ease;
}
.lightbox-overlay.show {
  opacity: 1;
}
.lightbox-overlay.hide {
  opacity: 0;
}

/* Dragging visual for file box */
.file-box.file-box-dragging {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-color: rgba(59,130,246,0.25);
  background: rgba(59,130,246,0.02);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

/* Compact progress "light" strip under file */
.file-progress {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 12px;
  margin-right: 8px;
  width: 140px;
  flex: 0 0 140px;
}
.file-progress .inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #34d399, #3b82f6);
  transition: width 120ms linear;
}

/* Small file status text next to strip */
.file-status {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
  min-width: 56px;
  text-align: left;
}

@media (max-width: 640px) {
  .file-progress { width: 120px; flex: 0 0 120px; }
}