/* 共用 UI 回饋元件樣式；公開頁面與管理介面都由此檔案統一維護。 */
:root {
  --diamwolf-feedback-ready: 1;
  --diamwolf-feedback-surface: var(--card, #ffffff);
  --diamwolf-feedback-text: var(--text, #243447);
  --diamwolf-feedback-border: var(--border, #d7dee8);
  --diamwolf-feedback-brand: var(--brand-strong, #6f4218);
  --diamwolf-feedback-danger: var(--danger, #b42318);
  --diamwolf-feedback-success: var(--success, #18794e);
  --diamwolf-feedback-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

#diamwolf-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}

.diamwolf-toast {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: min(640px, calc(100vw - 32px));
  padding: 12px 24px;
  border-left: 4px solid var(--diamwolf-feedback-brand);
  border-radius: 8px;
  background: var(--diamwolf-feedback-surface);
  color: var(--diamwolf-feedback-text);
  box-shadow: var(--diamwolf-feedback-shadow);
  font-weight: 500;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: auto;
}

.diamwolf-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.diamwolf-toast-error { border-left-color: var(--diamwolf-feedback-danger); }
.diamwolf-toast-success { border-left-color: var(--diamwolf-feedback-success); }
.diamwolf-toast-content { min-width: 0; }

.diamwolf-toast-close {
  flex: 0 0 auto;
  min-width: 28px;
  min-height: 28px;
  margin: -4px -12px -4px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 28px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.diamwolf-toast-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.diamwolf-toast-close:focus-visible,
.diamwolf-feedback-dialog-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.diamwolf-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 20px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.diamwolf-feedback-overlay.show { opacity: 1; }

.diamwolf-feedback-dialog {
  box-sizing: border-box;
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--diamwolf-feedback-border);
  border-radius: 16px;
  background: var(--diamwolf-feedback-surface);
  color: var(--diamwolf-feedback-text);
  box-shadow: var(--diamwolf-feedback-shadow);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.diamwolf-feedback-overlay.show .diamwolf-feedback-dialog {
  transform: translateY(0) scale(1);
}

.diamwolf-feedback-dialog-danger { border-top: 4px solid var(--diamwolf-feedback-danger); }
.diamwolf-feedback-dialog-title { 
  margin: 0 0 12px; 
  font-size: 1.15rem; 
  color: var(--diamwolf-feedback-brand);
}
.diamwolf-feedback-dialog-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.diamwolf-feedback-dialog-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 9px 11px;
  border: 1px solid var(--diamwolf-feedback-border);
  border-radius: 8px;
  background: var(--diamwolf-feedback-surface);
  color: inherit;
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.diamwolf-feedback-dialog-input:focus {
  outline: none;
  border-color: var(--diamwolf-feedback-brand);
  /* 使用帶透明度的 brand color 營造光暈 */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(111, 66, 24, 0.15);
}

.diamwolf-feedback-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.diamwolf-feedback-dialog-button {
  min-width: 92px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--diamwolf-feedback-border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}

.diamwolf-feedback-dialog-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.diamwolf-feedback-dialog-button:active {
  transform: translateY(1px);
}

.diamwolf-feedback-dialog-confirm {
  border-color: var(--diamwolf-feedback-brand);
  background: var(--diamwolf-feedback-brand);
  color: #ffffff;
}

.diamwolf-feedback-dialog-confirm.danger {
  border-color: var(--diamwolf-feedback-danger);
  background: var(--diamwolf-feedback-danger);
}

@media (max-width: 560px) {
  #diamwolf-toast-container { bottom: 16px; }
  .diamwolf-toast { width: min(100%, calc(100vw - 32px)); padding: 11px 16px; }
  .diamwolf-feedback-overlay { padding: 16px; }
  .diamwolf-feedback-dialog { padding: 20px; }
  .diamwolf-feedback-dialog-actions > button { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .diamwolf-toast,
  .diamwolf-feedback-overlay,
  .diamwolf-feedback-dialog { transition: none; }
}