/*
 * assets/chat-input.css — src/gopang/ui/chat-input.js 전용 스타일
 * (2026-07-23 신설, 1단계 — webapp.html의 #ai-panel-input-row CSS를
 * 마크업과 함께 그대로 이식했다. 색만 색-중립 변수로 교체했다.)
 *
 * ★ 2026-07-23 정정 — 최초 버전은 실수로 옛 숨겨진 .input-dock/.input-row
 * 구조(아이콘이 입력창 옆에 나란히 붙는 1단 구성)를 베껴 실제
 * #ai-panel-input-row(textarea가 윗줄 전체를 차지하고 아랫줄 툴바에
 * 좌/우 아이콘을 배치하는 2단 카드형 구성, webapp.html 409-421행 주석
 * 참고)와 레이아웃이 달랐다. 이 버전에서 2단 구조로 바로잡았다.
 *
 * 사용법: 이 파일을 <link>하고, mountChatInput()에 theme/colors를 넘기면
 * JS가 컨테이너에 인라인으로 --brand-primary 등 3개 변수를 설정한다 —
 * 이 CSS 파일 자체는 페이지별로 고칠 필요가 없다.
 */

.chat-input-root{
  /* 기본값(JS가 항상 덮어쓰지만, 혹시 JS 실행 전 렌더링될 때의 안전망) */
  --brand-primary:      #06C755;
  --brand-primary-dark: #05A648;
  --brand-primary-bg:   #E9FBF0;

  font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
}

/* ── 첨부 미리보기 — 카드 위에 별도로 뜸(원본과 동일 순서) ────────── */
.chat-input-root .ci-attach-preview{
  display:flex;align-items:center;gap:6px;
  margin:0 12px 6px;padding:6px 10px;
  background:var(--brand-primary-bg);
  border:1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent);
  border-radius:10px;
  font-size:13px;color:#374151;
}
.chat-input-root .ci-attach-preview[hidden]{ display:none; }
.chat-input-root .ci-attach-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-input-root .ci-attach-remove{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:#9CA3AF;font-size:14px;line-height:1;padding:2px 4px;
}
.chat-input-root .ci-attach-idv-save{
  flex-shrink:0;background:none;border:1px solid var(--brand-primary);
  color:var(--brand-primary-dark);border-radius:8px;cursor:pointer;
  font-size:11px;font-weight:600;padding:3px 8px;
}
.chat-input-root .ci-attach-idv-save[hidden]{ display:none; }

/* ── IDV 저장 폼 — 첨부 미리보기 바로 아래, 필요할 때만 노출 ────────── */
.chat-input-root .ci-idv-save-form{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 12px 6px;padding:8px 10px;
  background:#F9FAFB;border:1px solid #E5E7EB;border-radius:10px;
  font-size:12px;
}
.chat-input-root .ci-idv-save-form[hidden]{ display:none; }
.chat-input-root .ci-idv-type,
.chat-input-root .ci-idv-issuance-date{
  font-size:12px;padding:4px 6px;border:1px solid #D1D5DB;border-radius:6px;
}
.chat-input-root .ci-idv-save-confirm{
  background:var(--brand-primary);color:#fff;border:none;border-radius:6px;
  padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;
}
.chat-input-root .ci-idv-save-confirm:disabled{ opacity:.6;cursor:default; }
.chat-input-root .ci-idv-save-cancel{
  background:none;border:none;color:#9CA3AF;font-size:12px;cursor:pointer;
}
.chat-input-root .ci-idv-save-status{ font-size:11px;color:#6B7280; }

/* ── 입력 카드 — 2단 구성: textarea(윗줄 전체) + 툴바(아랫줄, 좌/우) ── */
.chat-input-root .ci-card{
  display:flex;flex-direction:column;gap:6px;
  margin:0 10px calc(env(safe-area-inset-bottom,0px) + 10px);
  padding:10px 12px 8px;
  border:1px solid #E5E7EB;
  border-radius:22px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  flex-shrink:0;
  transition:border-color .15s;
}
.chat-input-root .ci-card:focus-within{ border-color:#D1D5DB; }

.chat-input-root .ci-input{
  width:100%;min-height:24px;max-height:110px;
  border:none;background:transparent;
  padding:2px 2px;font-size:14px;
  font-family:inherit;resize:none;outline:none;
  line-height:1.45;color:#111;overflow-y:auto;
}
.chat-input-root .ci-input::placeholder{ color:#9CA3AF; }

/* 아랫줄 툴바 — 좌측 첨부/카메라, 우측 마이크/전송 */
.chat-input-root .ci-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.chat-input-root .ci-aux-left,
.chat-input-root .ci-aux-right{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
}

.chat-input-root .ci-btn{
  width:32px;height:32px;border-radius:50%;background:none;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:#9CA3AF;transition:background .12s,color .12s;flex-shrink:0;
}
.chat-input-root .ci-btn:hover,.chat-input-root .ci-btn:active{ background:#F3F4F6;color:#111; }
.chat-input-root .ci-btn svg{ width:15.5px;height:15.5px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round; }
.chat-input-root .ci-mic-btn.mic-active{
  color:var(--brand-primary);
  animation:ci-mic-pulse .9s ease-in-out infinite;
}
@keyframes ci-mic-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* 전송 버튼 — 원형이 아닌 둥근 사각형(원본과 동일), 상태별 3단 구성 */
.chat-input-root .ci-send-btn{
  width:27px;height:27px;flex-shrink:0;
  border:1.5px solid transparent;border-radius:9px;
  background:var(--brand-primary);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
.chat-input-root .ci-send-btn:hover:not(:disabled):not(.generating){ background:var(--brand-primary-dark); }
.chat-input-root .ci-send-btn svg{ stroke:currentColor;fill:none; }
.chat-input-root .ci-send-btn .icon-stop{ display:none;fill:currentColor;stroke:none; }
.chat-input-root .ci-send-btn .icon-waveform{ display:none; }

/* 대기(비어있음) — 박스 없이 음성 파형 아이콘만 */
.chat-input-root .ci-send-btn:disabled{
  background:transparent;border-color:transparent;opacity:1;cursor:not-allowed;
}
.chat-input-root .ci-send-btn:disabled .icon-send{ display:none; }
.chat-input-root .ci-send-btn:disabled .icon-waveform{ display:block;stroke:#9CA3AF; }

/* 생성 중 — 테두리만 있는 둥근 사각형 + 정지 아이콘(중단 버튼 역할) */
.chat-input-root .ci-send-btn.generating{
  background:#fff;border-color:#D1D5DB;opacity:1;cursor:pointer;color:#111;
}
.chat-input-root .ci-send-btn.generating .icon-send{ display:none; }
.chat-input-root .ci-send-btn.generating .icon-stop{ display:block; }

/* 음성 입력 중 — 대기 상태의 파형 아이콘이 오디오 이퀄라이저처럼 움직임 */
.chat-input-root .ci-send-btn.mic-active .icon-waveform{ display:block;stroke:var(--brand-primary); }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line{
  transform-box:fill-box;transform-origin:center;
  animation:ci-waveform .8s ease-in-out infinite;
}
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(1){ animation-delay:0s; }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(2){ animation-delay:.12s; }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(3){ animation-delay:.24s; }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(4){ animation-delay:.36s; }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(5){ animation-delay:.48s; }
.chat-input-root .ci-send-btn.mic-active .icon-waveform line:nth-child(6){ animation-delay:.6s; }
@keyframes ci-waveform{ 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }