/*!
 * natui.css — NatUI（js\natui.js）的样式层
 *
 * 定位：Pico 之上的**一层薄壳**，只补 Pico 没有的三件东西：toast 容器、
 * toast 四种配色、确认框的按钮行。其余（按钮、article 卡片、主题变量、
 * 暗色模式）全部**复用 Pico**，不自己复制一套。
 *
 * ⚠️ 刻意**不使用 CSS Nesting**（`&`）。qite 的 notification.css 用了
 *    嵌套（`& header { & [data-field] {...} }`），本项目不跟：Pico 自身
 *    零嵌套，模板 <style> 块也全是扁平写法，跟进嵌套会让「这份 CSS 为什么
 *    和别的不一样」变成一个没人记得的差异。见 前端组件开发指南。
 *
 * ⚠️ 配色刻意**硬编码**且与聊天模板 <style> 里的 .s-on/.s-off/.s-wait
 *    徽标同源（同一套色值），以保持整页观感一致。代价：本文件没有暗色模式
 *    分支 —— 页面其它部分（.ws-badge 等）同样没有。要补就整页一起补，
 *    别只补这里，否则 toast 会是暗色页面上唯一刺眼的东西。
 */

/* ======================== toast 容器 ======================== */

[data-nat-toasts] {
  position: fixed;
  top: var(--pico-spacing);
  right: var(--pico-spacing);
  z-index: 1000;              /* Pico 的 dialog 是 999，toast 要压得住它 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pico-spacing);
  /* 容器本身不吃事件，否则一大片透明区域会挡住页面右上角的按钮；
     单独给 .nat-toast 打开 —— 与 qite notification.css 同一手法 */
  pointer-events: none;
  max-width: calc(100vw - var(--pico-spacing) * 2);
}

/* ======================== toast 本体 ======================== */

.nat-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--pico-spacing);
  width: 100%;
  min-width: 16rem;
  max-width: 26rem;
  padding: calc(var(--pico-spacing) * 0.75);
  border: 1px solid var(--pico-muted-border-color);
  border-left-width: 0.3125rem;   /* 左侧色条靠这个宽度显形 */
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
}

/* 文案区允许长内容换行；超长单词（URL / 无空格串）也要能断 */
.nat-toast-body {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;      /* 提示里常有多行文本，别把换行压成一行 */
}

.nat-toast-close {
  flex: none;
  width: 1.75em;
  height: 1.75em;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: calc(var(--pico-border-radius) * 0.6);
  color: var(--pico-muted-color);
  cursor: pointer;
}

.nat-toast-close:hover {
  background: var(--pico-muted-background-color);
  color: var(--pico-color);
}

/* 四种配色：左侧色条 + 文字色。色值与聊天页 .s-on/.s-off/.s-wait 同源 */
.nat-toast[data-type="normal"] {
  border-left-color: #3b5b7d;
}
.nat-toast[data-type="normal"] .nat-toast-body {
  color: #3b5b7d;
}

.nat-toast[data-type="success"] {
  border-left-color: #1a7f37;
}
.nat-toast[data-type="success"] .nat-toast-body {
  color: #1a7f37;
}

.nat-toast[data-type="warning"] {
  border-left-color: #b45309;
}
.nat-toast[data-type="warning"] .nat-toast-body {
  color: #b45309;
}

.nat-toast[data-type="error"] {
  border-left-color: #c0392b;
}
.nat-toast[data-type="error"] .nat-toast-body {
  color: #c0392b;
}

/* ======================== 确认框 ======================== */

/*
 * Pico 已经把 <dialog> 做成全屏遮罩（position:fixed 四边贴齐 + 居中 flex），
 * 并把卡片外观给了 dialog > article —— 所以这里**不覆盖** dialog 本身的盒子，
 * 只做两件事：
 *   ① 钉死 article 宽度，不随 Pico 的断点变（Pico 是 576px→510px、768px→700px，
 *      窄屏全宽、宽屏 700px，对一句确认都偏宽）；
 *   ② 补 Pico 未覆盖的按钮行 —— Pico 只写了 dialog > article > footer，
 *      而这里用的是 div.nat-dialog-actions，不走 footer 结构。
 *
 * ⚠️ 关于 ① 的数值：Pico 把 html 的 font-size 设成 17px，所以
 *    **30rem 恰好 = 510px**，与 Pico 在 >=576px 的那个值数值相同。
 *    这**不是**「规则没生效」，而是本条规则真正生效、只是恰好与 Pico 等值；
 *    它额外的作用是把**窄屏**也钉住（Pico 在 <576px 是 width:100%，无上限）。
 *    Pico 若改了基准字号，这里会跟着变 —— 这是想要的行为。
 */
.nat-dialog > article {
  max-width: 30rem;
}

.nat-dialog-msg {
  margin-bottom: var(--pico-spacing);
  overflow-wrap: anywhere;   /* 确认文案常含用户名等长串，别顶破卡片 */
}

.nat-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--pico-spacing);
  margin-bottom: 0;
}

.nat-dialog-actions button {
  margin-bottom: 0;
  margin-inline: 0;          /* Pico 的 [role=group] 相邻按钮是 margin-left，
                                这里用 gap，不叠加负边距那套连体写法 */
  width: auto;               /* Pico 会把 dialog 里的按钮拉满宽，这里不要 */
}