/* 第 11 轮 · 甲：全站交互规则与外观。全部覆盖在 r10 之上，不改老文件。 */

/* ── 1. 圆角 ──────────────────────────────────────────────────
   面板、栏 16；卡片按第 10 轮定稿的 10；按钮、输入框 10；胶囊全圆；浮层 16；弹窗 20。 */
#popover-root .popover,
#confirmation-params-root .popover {
  border-radius: 16px;
}

/* 嵌套：内圆角 = 外圆角 − 内边距，两个弧度才平行。 */
.composer .reference-slot-add,
.composer .composer-ref-thumb,
.composer .attachment-chip {
  border-radius: 8px;
}
/* 浮层 16、内边距 8，里面的条目就收成 8，两条弧线才平行。 */
#popover-root .popover .menu-item,
#confirmation-params-root .popover .menu-item {
  border-radius: 8px;
}

/* ── 2. 弹窗一律在视口正中 ──────────────────────────────────── */
:root:not([data-family='mobile']) #app-dialog.app-dialog[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  border-radius: 20px;
}

/* 关闭按钮：标题栏右上角一个 28 的纯图标 ×，不为它单开一行。 */
#app-dialog .dialog-head {
  position: relative;
  padding-right: 52px;
  padding-top: 16px;
}
#app-dialog .dialog-head [data-dialog-close] {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}
#app-dialog .dialog-head [data-dialog-close]:hover {
  background: var(--fill-hover);
  color: var(--ink);
}
#app-dialog .dialog-head [data-dialog-close] svg {
  width: 14px;
  height: 14px;
  margin: 0;
}
#app-dialog .dialog-actions > [data-dialog-close]:only-child {
  display: none;
}

/* ── 3. 图标和文字竖直居中 ──────────────────────────────────── */
button,
.chip,
.menu-item,
.choice,
.pro-select,
.field-select,
.history-item,
.param-section-head {
  align-items: center;
}
button > svg,
.chip > svg,
.menu-item > svg,
.setting-row > svg,
.param-issue > svg,
.param-section-head > svg {
  flex: none;
}

/* 纯图标按钮：图标在灰圆正中。
 * 只认样稿里明确的纯图标按钮类，不用「只有一个 svg 子元素」来判断——
 * 「全部会话 →」这类按钮的文字是裸文本节点，:has(> svg:only-child) 也会命中，套上网格后箭头会折到第二行（总策划 10-28 改）。 */
:is(.icon-btn, .card-more, .prototype-icon, .send-button:not(.generate):not(.script), .param-ref-add, .r7-search-clear, .play-button):not(.art-tile) {
  display: inline-grid;
  place-items: center;
}
/* 展开的输入框里，输入行那个收起态发送键照旧隐藏。上面一条权重 (0,4,0)，会盖掉 styles.css 的 (0,3,0) 隐藏规则，
 * 所以这里写到 (0,5,0)（总策划 10-28 改） */
.composer:not(.is-collapsed) .send-button.collapsed-send:not(.art-tile) { display: none; }
:is(.icon-btn, .card-more, .prototype-icon, .send-button:not(.generate):not(.script), .param-ref-add, .r7-search-clear, .play-button):not(.art-tile) > svg {
  margin: 0;
}
/* 文字按钮：文字和图标同一行，不折行。 */
.text-button {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
}
.icon-btn,
.card-more,
.prototype-icon,
.send-button:not(.generate),
.param-ref-add,
.r7-search-clear {
  border-radius: 50%;
}
.icon-btn:hover,
.card-more:hover,
.param-ref-add:hover,
.r7-search-clear:hover {
  background: var(--fill-hover);
}

/* ── 4. 下拉箭头：同一列右边缘对齐 ──────────────────────────── */
.pro-select {
  padding-right: 10px;
}
.pro-select > .pro-chev {
  margin-left: auto;
  width: 14px;
  height: 14px;
  flex: none;
}
.field-select,
.r7-spec-btn {
  padding-right: 10px;
}
.field-select > svg:last-child,
.r7-spec-btn > svg:last-child {
  margin-left: auto;
  width: 14px;
  height: 14px;
  flex: none;
}

/* ── 5. 时长滑杆 ────────────────────────────────────────────── */
input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--ink) 0 var(--r11-range-progress, 0%),
    var(--surface-3) var(--r11-range-progress, 0%) 100%);
}
input[type='range']::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
}
input[type='range']::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.range-row output {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 6. 选中：右上角一个 18 的圆勾 + 2px 主色细边 ───────────── */
.r11-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease, border-color .12s ease;
}
/* 勾定位在卡片右上角，卡片自己得是定位祖先。 */
.r11l-card,
.r11l-row,
.r11-card {
  position: relative;
}
/* 丙那一路把 .r11-check 做成可点的按钮；这里保证它点的到。 */
button.r11-check {
  pointer-events: auto;
  cursor: pointer;
}
span.r11-check {
  pointer-events: none;
}
.r11-check svg {
  width: 11px;
  height: 11px;
  margin: 0;
}
.r11-card:hover .r11-check,
.r11-card:focus-within .r11-check,
.r7-project-card:hover .r11-check,
.r7-resource-card:hover .r11-check,
.creation-card:hover .r11-check,
.asset-card:hover .r11-check,
.fragment-tile:hover .r11-check,
.r11l-card:hover .r11-check,
.r11l-row:hover .r11-check,
.r11-check:hover,
.r11-check:focus-visible,
.r11-selected .r11-check,
.r11-check[aria-pressed='true'],
.r11-check.is-checked {
  opacity: 1;
}
.r11-selected .r11-check,
.r11-check[aria-pressed='true'],
.r11-check.is-checked {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}
.r11-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-color: transparent;
  box-shadow: none;
}

/* ── 7. 放大 / 缩小 ────────────────────────────────────────── */
.r11-zoom {
  flex: none;
  color: var(--ink);
}
.r11-zoom .r11-zoom-bg {
  fill: var(--surface-3);
  stroke: none;
}

/* ── 8. 错误提示块：文字不贴边 ─────────────────────────────── */
.param-section.has-issue {
  padding: 8px 10px;
  border: 1px solid var(--error);
  border-radius: 12px;
}
.composer.has-params .param-section.has-issue {
  margin-inline: 0;
  padding: 8px 10px;
  border: 0;
  outline: 1px solid var(--error);
  outline-offset: -1px;
  border-radius: 12px;
}
.param-issue {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  line-height: 18px;
}
.param-issue > svg {
  margin-top: 1px;
}

/* ── 9. 顶部留白收到 12 ────────────────────────────────────── */
.r9-params-popover .params-scroll > .param-section:first-child,
.composer .params-scroll > .param-section:first-child {
  padding-top: 12px;
}

/* ── 10. 纯图标按钮的提示气泡 ──────────────────────────────── */
.r11-tip {
  position: fixed;
  z-index: 10030;
  max-width: 240px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #17171a;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.r11-tip[hidden] {
  display: none;
}