#mynos-chat-root{position:fixed;right:20px;bottom:20px;z-index:2500;font:14px/1.55 system-ui,sans-serif;color:#222;word-break:break-word}
#mynos-chat-root *{box-sizing:border-box}
#mynos-chat-root [hidden]{display:none!important}
#mynos-chat-root button,#mynos-chat-root textarea{font:inherit}
#mynos-chat-root button{cursor:pointer;border:1px solid #d9dee7;border-radius:12px;background:#fff;color:#222;padding:10px 14px}
#mynos-chat-root button:focus-visible,#mynos-chat-root textarea:focus-visible{outline:3px solid #275d8c;outline-offset:2px}
#mynos-chat-root button:disabled{opacity:.55;cursor:wait}
#mynos-chat-launcher{background:#275d8c!important;color:white!important;border:0!important;border-radius:999px!important;box-shadow:0 5px 22px #0002}
#mynos-chat-panel{width:350px;max-width:calc(100vw - 32px);height:480px;max-height:70dvh;background:#fff;border:1px solid #ddd;border-radius:18px;box-shadow:0 12px 40px #0003;display:flex;flex-direction:column;overflow:hidden;margin-bottom:12px}
#mynos-chat-root .mynos-chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eee}
#mynos-chat-log{flex:1;min-height:0;overflow:auto;padding:14px;background:#f6f8fb;overscroll-behavior:contain}
#mynos-chat-root .mynos-chat-message{margin:0 25px 12px 0;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #e4e7ed;white-space:pre-wrap}
#mynos-chat-root .mynos-chat-mine{margin:0 0 12px 25px;background:#e8f1ff}
#mynos-chat-root .mynos-chat-label{font-size:11px;color:#626975;margin-bottom:4px}
#mynos-chat-status{padding:6px 14px;font-size:12px;color:#626975;min-height:28px}
#mynos-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid #eee;margin:0}
#mynos-chat-body{flex:1;min-width:0;resize:none;border:1px solid #d9dee7;border-radius:10px;padding:8px;height:65px;background:#fff;color:#222}
#mynos-chat-preview{width:280px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #ddd;border-radius:16px;padding:12px;box-shadow:0 5px 22px #0002;margin-bottom:12px}
#mynos-chat-preview-text{
  white-space:pre-wrap;
  max-height:40vh;
  overflow:auto;
  margin-bottom:10px;
  line-height:1.7;
}
@media(max-width:600px){#mynos-chat-root{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}#mynos-chat-panel{width:350px;height:440px;max-height:65dvh}}
/* ========================================
   MYNOS 고객 대화창 확대 · 첨부 영역 배치
======================================== */

#mynos-chat-panel {
  width: 460px;
  max-width: calc(100vw - 32px);

  height: 720px;

  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);

  display: flex;
  flex-direction: column;
}

/* 제목·입력·첨부 영역이 압축되지 않도록 유지 */
#mynos-chat-root .mynos-chat-head,
#mynos-chat-status,
#mynos-chat-form,
#mynos-chat-root .mynos-chat-attachments {
  flex: 0 0 auto;
}

/* 남는 높이는 대화 목록이 사용 */
#mynos-chat-log {
  flex: 1 1 0;
  min-height: 0;

  overflow-y: auto;

  padding: 18px;

  font-size: 16px;
  line-height: 1.7;
}

/* 메시지 폭을 조금 넓혀 줄바꿈 감소 */
#mynos-chat-root .mynos-chat-message {
  max-width: 94%;

  padding: 12px 14px;
  margin-right: 16px;

  line-height: 1.7;
}

#mynos-chat-root .mynos-chat-mine {
  margin-right: 0;
  margin-left: 16px;
}

/* 발신자·시간·읽음 */
#mynos-chat-root .mynos-chat-label {
  font-size: 12px;
  line-height: 1.5;
}

#mynos-chat-status {
  padding: 6px 12px;

  font-size: 12px;
  line-height: 1.5;

  overflow-wrap: anywhere;
}

/* 첨부 선택 영역 */
#mynos-chat-root .mynos-chat-attachments {
  padding: 8px 10px !important;
  gap: 6px !important;
}

#mynos-chat-root .mynos-chat-attachments input[type="file"] {
  flex: 1 1 180px;

  width: 180px;
  min-width: 0;

  font-size: 12px;
}

#mynos-chat-root .mynos-chat-attachments button {
  padding: 7px 10px;

  font-size: 12px;
  line-height: 1.4;
}

#mynos-chat-root .mynos-chat-attachments > div {
  font-size: 12px;
  line-height: 1.45;
}

/* 텍스트 입력 영역 */
#mynos-chat-form {
  padding: 8px 10px;
  gap: 8px;
}

#mynos-chat-body {
  height: 60px;
  min-height: 60px;

  font-size: 16px;
  line-height: 1.5;
}

/* 모바일 */
@media (max-width: 600px) {
  #mynos-chat-root {
    right: 12px;

    bottom: calc(
      12px + env(safe-area-inset-bottom, 0px)
    );
  }

  #mynos-chat-panel {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);

    height: 720px;

    max-height: calc(
      100vh - 100px -
      env(safe-area-inset-bottom, 0px)
    );

    max-height: calc(
      100dvh - 100px -
      env(safe-area-inset-bottom, 0px)
    );
  }

  #mynos-chat-log {
    padding: 12px;

    font-size: 16px;
    line-height: 1.65;
  }

  #mynos-chat-root .mynos-chat-head {
    padding: 8px 12px;
  }

  #mynos-chat-root .mynos-chat-attachments input[type="file"] {
    flex-basis: 100%;
    width: 100%;
  }
}
/*
 * 고객 전송 폼 바로 앞의 첨부 영역
 * JavaScript에 별도 클래스를 추가하지 않아도 적용
 */
#mynos-chat-panel > div:has(+ #mynos-chat-form) {
  flex: 0 0 auto;

  padding: 8px 10px !important;
  gap: 6px !important;
}

#mynos-chat-panel > div:has(+ #mynos-chat-form)
input[type="file"] {
  flex: 1 1 180px;

  width: 180px;
  min-width: 0;
  max-width: 100%;

  font-size: 12px;
}

#mynos-chat-panel > div:has(+ #mynos-chat-form)
button {
  padding: 7px 10px;

  font-size: 12px;
  line-height: 1.4;
}

#mynos-chat-panel > div:has(+ #mynos-chat-form) > div {
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 600px) {
  #mynos-chat-panel > div:has(+ #mynos-chat-form)
  input[type="file"] {
    flex-basis: 100%;
    width: 100%;
  }
}
/* ========================================
   모바일 상담창 크기 축소
   기존 PC 배치는 유지
======================================== */

@media (max-width: 600px) {
  #mynos-chat-root {
    right: 12px;

    bottom: calc(
      12px + env(safe-area-inset-bottom, 0px)
    );
  }

  #mynos-chat-panel {
    /* 화면 전체 폭을 쓰지 않고 최대 360px로 제한 */
    width: 360px;
    max-width: calc(100vw - 24px);

    height: 520px;

    max-height: min(
      72vh,
      calc(
        100vh - 100px -
        env(safe-area-inset-bottom, 0px)
      )
    );

    max-height: min(
      72dvh,
      calc(
        100dvh - 100px -
        env(safe-area-inset-bottom, 0px)
      )
    );

    margin-bottom: 8px;
    border-radius: 16px;
  }

  /* 제목 영역 축소 */
  #mynos-chat-root .mynos-chat-head {
    padding: 8px 10px;
  }

  #mynos-chat-root .mynos-chat-head strong {
    font-size: 15px;
  }

  #mynos-chat-close {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  /* 메시지 영역 */
  #mynos-chat-log {
    padding: 10px;
    font-size: 14px;
    line-height: 1.6;
  }

  #mynos-chat-root .mynos-chat-message {
    padding: 9px 10px;
    margin-bottom: 10px;
    line-height: 1.6;
  }

  #mynos-chat-root .mynos-chat-label {
    font-size: 11px;
  }

  /* 파일명은 줄바꿈을 유지하며 조금 작게 */
  #mynos-chat-log a[data-chat-attachment-id] {
    font-size: 12px !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* 상담 상태 안내 */
  #mynos-chat-status {
    padding: 4px 10px;
    min-height: 0;

    font-size: 11px;
    line-height: 1.4;
  }

  /* 클래스 없이 현재 첨부 영역 선택 */
  #mynos-chat-panel > div:has(+ #mynos-chat-form) {
    padding: 6px 8px !important;
    gap: 5px !important;
  }

  #mynos-chat-panel > div:has(+ #mynos-chat-form)
  input[type="file"] {
    font-size: 12px;
  }

  #mynos-chat-panel > div:has(+ #mynos-chat-form)
  button {
    padding: 6px 9px !important;
    font-size: 12px !important;
    line-height: 1.3;
  }

  #mynos-chat-panel > div:has(+ #mynos-chat-form) > div {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* 텍스트 입력 영역 */
  #mynos-chat-form {
    padding: 7px 8px;
    gap: 6px;
  }

  #mynos-chat-body {
    height: 48px;
    min-height: 48px;

    padding: 7px 9px;

    /* 입력 글자는 지나치게 작게 줄이지 않음 */
    font-size: 16px;
    line-height: 1.4;
  }

  #mynos-chat-send {
    padding: 7px 12px !important;
    font-size: 14px !important;
  }

  #mynos-chat-launcher {
    padding: 9px 14px !important;
    font-size: 14px !important;
  }
}