/* Kole UI Mobile · Textarea 样式 — 对齐移动端规格 §31
   多行文本框：最小高度 3 行（触屏上不能像桌面那样看到输入上下文）；
   只允许纵向伸缩（resize: vertical）—— 横向拉宽会破坏 375 宽的布局；
   计数与错误提示都在框外下方，不挤占输入区；到达上限时计数变错误色（is-full 状态）。 */

.kole-m-textarea {
  /* 组件级变量：业务侧可在容器上覆盖 */
  --kole-m-textarea-row-height: 24px;  /* 单行高度（字号 16 × 行高 1.5） */
  /* 最小高度按「行数 × 行高 + 上下内边距」算：3 行 = 96px，与 rows=3 的自然高度一致 */
  --kole-m-textarea-min-height: calc(var(--kole-m-textarea-row-height) * 3 + var(--kole-space-12) * 2);
  --kole-m-textarea-duration: 150ms;   /* 边框与聚焦外发光的过渡时长 */
  box-sizing: border-box;
  display: block;
}

.kole-m-textarea__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--kole-m-textarea-min-height);
  padding: var(--kole-space-12);
  border: 1px solid var(--kole-color-border);
  border-radius: var(--kole-radius-base);
  background: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-family: inherit;
  font-size: var(--kole-m-font-size-body);
  line-height: 1.5;
  /* 只允许纵向拉伸：横向拉宽在 375 宽下有溢出风险 */
  resize: vertical;
  transition: border-color var(--kole-m-textarea-duration) var(--kole-ease-standard),
              box-shadow var(--kole-m-textarea-duration) var(--kole-ease-standard);
}

/* 变体 size=large：最小高度 5 行 */
.kole-m-textarea--large {
  --kole-m-textarea-min-height: calc(var(--kole-m-textarea-row-height) * 5 + var(--kole-space-12) * 2);
}

.kole-m-textarea__control::placeholder { color: var(--kole-color-text-placeholder); }

.kole-m-textarea__control:focus {
  outline: none;
  border-color: var(--kole-color-brand);
  box-shadow: 0 0 0 2px var(--kole-color-focus-ring);
}

/* 状态 error：边框变错误色；聚焦时保留错误色 */
.kole-m-textarea.is-error .kole-m-textarea__control { border-color: var(--kole-color-error); }

.kole-m-textarea.is-error .kole-m-textarea__control:focus {
  border-color: var(--kole-color-error);
  box-shadow: 0 0 0 2px var(--kole-color-focus-ring);
}

/* 状态 disabled：置灰且不可聚焦 */
.kole-m-textarea.is-disabled .kole-m-textarea__control {
  background: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
  cursor: not-allowed;
}

/* 计数行：与错误提示同一行时左错误右计数，两者都不消失 */
.kole-m-textarea__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kole-space-8);
  margin-top: var(--kole-space-8);
}

.kole-m-textarea__error {
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
  color: var(--kole-color-error);
}

.kole-m-textarea__counter {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
  color: var(--kole-color-text-secondary);
  /* 数字用等宽数字：计数跳动时宽度不抖 */
  font-variant-numeric: tabular-nums;
}

/* 状态 full：到达上限时计数变错误色（不靠隐藏表达「写不进去了」） */
.kole-m-textarea.is-full .kole-m-textarea__counter { color: var(--kole-color-error); }