/* 用户端和后台共用的基础控件规范。颜色与页面布局由各自样式负责。 */
.btn,
.input,
.select,
.textarea,
.sug__act,
.row-actions summary {
  border-radius: var(--control-radius);
}

textarea { resize: none; }

.btn,
.sug__act,
.row-actions summary {
  min-height: var(--control-height);
  font-size: var(--control-font-size);
  line-height: 1.5;
}
.btn { gap: var(--action-gap); padding: 0 var(--sp-4); font-weight: 500; letter-spacing: 0.02em; }
.btn--sm { min-height: var(--control-height); font-size: var(--control-font-size); }
.btn--lg { min-height: var(--control-height-lg); font-size: var(--input-font-size); }
.btn--primary,
.btn--primary:hover {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
  border: 1px solid transparent;
  font-weight: 600;
}
.btn--danger { background: var(--danger-fill); border: 1px solid var(--danger-fill); color: var(--on-danger); font-weight: 600; }
.btn--danger:hover { background: var(--danger-fill); color: var(--on-danger); }

.input,
.select,
.textarea {
  font-size: var(--input-font-size);
  line-height: 1.6;
}
.input:not(textarea),
.select { height: var(--control-height); min-height: var(--control-height); padding-top: 0; padding-bottom: 0; }
textarea.input,
.textarea { min-height: var(--textarea-min-height); height: auto; }
.chip,
.chip--sm { min-height: var(--control-height); font-size: var(--control-font-size); }

.field__label,
.admin .field > span { font-size: var(--label-font-size); margin-bottom: var(--label-gap); }
.filter-field { gap: var(--label-gap); }
.form-feedback { font-size: var(--feedback-font-size); line-height: 1.6; }
.form-feedback[role="alert"] { color: var(--ember); }
.form-feedback:empty { margin: 0; }

/* 焦点只改变描边，不能改变控件几何形状。 */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:is(.input,.select,.textarea)[aria-invalid="true"] { border-color: var(--ember); }
:is(.btn,.input,.select,.textarea):disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled { transform: none; }

/* 长反馈换行；提示和触控尺寸不依赖特定页面或屏宽。 */
.form-feedback,
.notice,
.toast { overflow-wrap: anywhere; }
.toast { font-size: var(--feedback-font-size); line-height: 1.6; max-width: calc(100vw - 32px); }
input[type="file"] { display: none; }

/* 键盘、浏览器工具栏和视口平移共用一套尺寸；无visualViewport时沿用dvh。 */
.sheet {
  bottom: var(--visual-bottom, 0px);
  max-height: min(86dvh, calc(var(--visual-height, 100dvh) - 16px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.sheet__grip, .sheet__title, .sheet > .stack-sm { flex-shrink: 0; }
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px;
}
.modal-scrim {
  top: var(--visual-top, 0px);
  bottom: var(--visual-bottom, 0px);
}
.modal:not(.issue-modal) {
  display: flex;
  flex-direction: column;
  max-height: min(82dvh, calc(var(--visual-height, 100dvh) - 32px));
  overflow: hidden;
  overflow-wrap: anywhere;
}
.modal__body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 8px;
}
.modal__acts { flex-shrink: 0; }
.issue-modal { max-height: calc(var(--visual-height, 100dvh) - 48px); }
.bubble, .sug, .turn__sent { overflow-wrap: anywhere; min-width: 0; }
.composer { bottom: var(--visual-bottom, 0px); }
.composer .textarea--chat { max-height: max(64px, calc(var(--visual-height, 100dvh) * 0.3)); }
.nav { bottom: var(--visual-bottom, 0px); }
.toast { bottom: calc(var(--visual-bottom, 0px) + var(--nav-offset, var(--nav-h)) + env(safe-area-inset-bottom) + 22px); }
:root[data-keyboard-open="true"] .nav { display: none; }
:root[data-keyboard-open="true"] .screen--auth {
  align-items: flex-start;
  min-height: var(--visual-height, 100dvh);
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: calc(var(--visual-bottom, 0px) + 24px);
}
:root[data-keyboard-open="true"] .composer { padding-bottom: 8px; }
:root[data-keyboard-open="true"] .sheet { padding-bottom: 12px; }
:root[data-keyboard-open="true"] .sheet__grip { display: none; }
:root[data-keyboard-open="true"] .sheet > .stack-sm { display: flex; flex-wrap: wrap; gap: 8px; }
:root[data-keyboard-open="true"] .sheet > .stack-sm > .btn { flex: 1 1 120px; width: auto; margin-top: 0; }
@media (max-width: 1023px) {
  :root[data-keyboard-open="true"] .toast { bottom: calc(var(--visual-bottom, 0px) + 12px); }
}
@media (max-width: 600px) {
  .issue-modal { height: var(--visual-height, 100dvh); max-height: var(--visual-height, 100dvh); }
}