/* cherish-team-chat (patch-team-chat-ui.py, 2026-09-22) — 2대2 같은 편 팀 채팅.
   화면에 남는 건 **입력칸 한 줄**이고, 주고받은 말은 필드 안 말풍선으로 떴다 6초 뒤 사라진다.
   ⚠️ patch-skin.py 가 덮어쓰는 cherish-skin.css 와 별개 파일이라 스킨을 다시 발라도 살아남는다
      (2026-09-09 cherish-avoid-tab 사고와 같은 함정을 피한 것). */

/* ── 입력칸 한 줄 ───────────────────────────────────────────────────────── */
.cw-tchat {
	box-sizing: border-box;
	max-width: 100%;
	flex: none;
	/* 「조작부 바로 아래」가 설계다 — 셸의 12px 간격을 절반으로 당겨 카드에 붙인다. */
	margin-top: -6px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 10px 8px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .85);
	background: var(--cw-surface, rgba(255, 255, 255, .86));
	box-shadow: var(--cw-card-shadow, 0 8px 22px -14px rgba(40, 20, 45, .5));
	backdrop-filter: blur(12px);
	font-size: 12px;
	line-height: 1.45;
	color: var(--cw-ink, #2c1f33);
}
.cw-tchat-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid var(--cw-line, rgba(120, 90, 130, .28));
	background: #fff;
	font: inherit;
	font-size: 12px;
	color: inherit;
}
.cw-tchat-input:focus { outline: 0; border-color: var(--cw-line-strong, rgba(120, 90, 130, .6)); }
/* 못 보낸 이유는 **입력칸 자리**에 잠깐 띄운다 — 필드를 덮지 않는다. */
.cw-tchat-notice .cw-tchat-input { border-color: #e08ba0; }
.cw-tchat-notice .cw-tchat-input::placeholder { color: #b03a5a; }
.cw-tchat-send {
	flex: 0 0 auto;
	min-width: 64px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--cw-line, rgba(120, 90, 130, .28));
	background: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
	line-height: 1;
}
.cw-tchat-send:hover:not(:disabled) { background: var(--cw-tint, #fbf4f8); }
/* 쿨타임 — 남은 초가 버튼 자리에 뜬다. 눌러도 아무 일 없는 것보다 낫다. */
.cw-tchat-send:disabled { opacity: .5; cursor: default; font-variant-numeric: tabular-nums; }
/* PC 는 한 뼘 낮게 — 마우스라 30px 짜리 손잡이가 필요 없다.
   ⚠️ 모바일에서는 줄이지 않는다 — 거기서는 이게 손가락으로 누르는 자리다. */
@media (min-width: 701px) {
	.cw-tchat { padding: 5px 10px 6px; }
	.cw-tchat-input, .cw-tchat-send { height: 26px; }
}

/* ── 필드 안 말풍선 ─────────────────────────────────────────────────────────
   ⚠️ **여기 치수는 전부 640×360 좌표계다.** `.innerbattle` 은 늘 640×360 이고 바깥
      `.battle`(=$frame)이 transform:scale 로 줄인다(폰 0.54 · PC 1.07). 그래서
      **모바일용 축소 미디어쿼리를 걸면 안 된다** — 두 번 줄어들어 글씨가 뭉갠다
      (담임 말풍선 `.cherish-coach` 가 지금 그 상태다. 그쪽 소유라 손대지 않았다).
      15pt 는 화면에서 폰 10.8px · PC 21px 로, 기술 캡션(12.5pt → 폰 9px)보다 크다.
   ⚠️ 담임 말풍선과 **같은 요소를 쓰면 안 된다** — 담임이 말하는 순간 팀원 말이 지워진다.
      자리도 같아서(bottom 62) 맨 아래 규칙이 담임을 한 층 위로 올린다. */
.cw-tsay {
	position: absolute;
	left: 14px;
	bottom: 62px;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	max-width: 80%;
	z-index: 31;
	pointer-events: none;
	transition: opacity .45s ease;
}
.cw-tsay-hide { opacity: 0; }
.cw-tsay-pop { animation: cw-tsay-pop .35s ease; }
@keyframes cw-tsay-pop {
	0% { transform: translateY(8px) scale(.96); }
	100% { transform: translateY(0) scale(1); }
}
.cw-tsay-face {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #E7F0FF;
	border: 2px solid #4f7fd0;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}
/* 아바타는 전신 그림(`-full.png`)이라 위쪽(얼굴)을 잘라 쓴다. 그림이 없으면 뒤의 이모지가 남는다. */
.cw-tsay-face img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 14%; }
.cw-tsay-body {
	background: rgba(255, 255, 255, .97);
	border: 2px solid #4f7fd0;
	border-radius: 14px 14px 14px 4px;
	padding: 6px 12px 7px;
	color: #222;
	font-size: 15pt;
	line-height: 1.4;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	word-break: keep-all;
}
.cw-tsay-name { font-size: 11pt; color: #33559b; font-weight: bold; margin-bottom: 1px; }
.cw-tsay-prev { font-size: 12pt; color: #8A8A8A; margin-bottom: 2px; }
.cw-tsay-prev:empty { display: none; }
.cw-tsay-text { font-weight: bold; }
/* 내가 쓴 줄 — 보냈다는 확인이 되게 색만 다르다. 자리는 그대로(왼쪽)라 눈이 안 흔들린다. */
.cw-tsay-me .cw-tsay-face { background: #FFF0E7; border-color: #d08a4f; }
.cw-tsay-me .cw-tsay-body { border-color: #d08a4f; }
.cw-tsay-me .cw-tsay-name { color: #9b5a24; }
/* 팀원 말이 떠 있는 동안 담임 말풍선을 한 층 위로 — 자리가 같아서(bottom 62) 그냥 두면 겹친다.
   담임 쪽 CSS(cherish-skin.css §31 `bottom: 62px`)보다 선택자가 세다.
   ⚠️ **고정값으로 밀면 안 된다.** 말풍선 높이가 한 줄/두 줄로 달라져서, 한 줄 기준으로 밀어 두면
      두 줄짜리 말에서 그대로 겹친다(09-22 미리보기 실측). tsx 가 그릴 때마다 실제 높이를
      `--cw-tsay-h` 로 올려 준다 — 그 값이 없을 때만 넉넉한 기본값으로 떨어진다. */
.innerbattle:has(> .cw-tsay:not(.cw-tsay-hide)) .cherish-coach {
	bottom: calc(72px + var(--cw-tsay-h, 120px));
}