/* ============================================================
   MOA.AI.KR — Premium Chat UI
   Design Language: Warm Crimson / Light Editorial
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ── CSS Variables ── */
:root {
  /* Brand Red Palette */
  --color-accent:        #e03030;
  --color-accent-deep:   #c42020;
  --color-accent-light:  #ff5252;
  --color-accent-dim:    rgba(224, 48, 48, 0.10);
  --color-accent-glow:   rgba(224, 48, 48, 0.18);

  /* Surface */
  --color-bg:          #fafafa;
  --color-surface:     #ffffff;
  --color-surface-2:   #f5f5f7;
  --color-surface-3:   #efefef;

  /* Border */
  --color-border:      rgba(0,0,0,0.07);
  --color-border-md:   rgba(0,0,0,0.12);

  /* Bubble Colors */
  --bubble-incoming-bg:   #ffffff;
  --bubble-outgoing-bg:   #e03030;
  --bubble-outgoing-text: #ffffff;
  --bubble-incoming-text: #1a1a1a;

  /* Text */
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted:     #aaa;

  /* Typography */
  --font-body: 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-sm: 180ms;
  --duration-md: 320ms;

  /* Shadow */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.08);
  --shadow-accent: 0 4px 18px rgba(224,48,48,0.28);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

input:focus, textarea:focus { outline: none; outline-offset: 0; }
a, textarea { text-decoration: none; color: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar        { width: 3px; }
::-webkit-scrollbar-thumb  { background: rgba(224,48,48,0.22); border-radius: 99px; }
::-webkit-scrollbar-track  { background: transparent; }
::-ms-scrollbar            { width: 3px; }
::-ms-scrollbar-thumb      { background: rgba(224,48,48,0.22); border-radius: 99px; }

/* ── Chat Container ── */
.chatContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-surface-2);
  overflow: hidden;
}

/* ── Header ── */
.chatHeader_pc,
.chatHeader_mb {
  position: relative;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e03030 0%, #c42020 60%, #a81818 100%);
  box-shadow: 0 2px 16px rgba(224,48,48,0.30);
}

.chatHeader_pc { height: 56px; }
.chatHeader_mb { height: 44px; }

.chatHeader_pc::after,
.chatHeader_mb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25) 50%, transparent);
}

.chatHeaderP_pc {
  float: left;
  margin: 10px 10px;
  width: 36px; height: 36px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20);
  border: 1.5px solid rgba(255,255,255,0.25);
}

.chatHeaderP_mb {
  float: left;
  margin: 7px 8px;
  width: 30px; height: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  border: 1.5px solid rgba(255,255,255,0.2);
}

.chatHeaderT_pc {
  float: left;
  height: 56px; line-height: 56px;
  width: calc(100% - 56px);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.chatHeaderT_mb {
  float: left;
  height: 44px; line-height: 44px;
  width: calc(100% - 46px);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Chat Content Area ── */
.chatContentView {
  flex: 1;
  padding: 12px 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-surface-2);
}

.chatContentView::-webkit-scrollbar        { width: 3px; }
.chatContentView::-webkit-scrollbar-track  { background: transparent; }
.chatContentView::-webkit-scrollbar-thumb  { background: rgba(224,48,48,0.20); border-radius: 99px; }
.chatContentView::-webkit-scrollbar-thumb:hover { background: rgba(224,48,48,0.40); }

/* ── Message Wrapper ── */
.messageStyle {
  margin: 6px 12px;
  height: auto;
  overflow: hidden;
}

/* ── Avatar ── */
.messageView1_left  { float: left;  width: 40px; height: 40px; }
.messageView1_right { float: right; width: 40px; height: 40px; text-align: right; }

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-xs);
}

/* ── Message Body ── */
.messageView2V_left  { float: left;  max-width: calc(100% - 80px); height: auto; overflow: hidden; }
.messageView2_left   { float: left;  max-width: 100%;              height: auto; overflow: hidden; }
.messageView2V_right { float: right; max-width: calc(100% - 80px); height: auto; overflow: hidden; }
.messageView2_right  { float: right; max-width: 100%;              height: auto; overflow: hidden; }

/* ── Name / Time ── */
.messageView2VT1 {
  height: 22px; line-height: 22px;
  font-size: 12px; font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}

.messageView2VT2 {
  margin: 0 0 0 8px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 300;
}

.cstime {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ── Bubbles ── */
.messageContent_left {
  padding: 10px 14px;
  max-width: 100%; min-height: 20px;
  border-radius: 4px 16px 16px 16px;
  white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;
  font-size: 14px; line-height: 1.55;
  background: var(--bubble-incoming-bg);
  color: var(--bubble-incoming-text);
  box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
  transition: box-shadow var(--duration-sm) var(--ease-out);
}
.messageContent_left:hover {
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border-md);
}

.messageContent_right {
  padding: 10px 14px;
  max-width: 100%; min-height: 20px;
  border-radius: 16px 4px 16px 16px;
  white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;
  font-size: 14px; line-height: 1.55;
  background: var(--bubble-outgoing-bg);
  color: var(--bubble-outgoing-text);
  box-shadow: var(--shadow-accent);
  transition: box-shadow var(--duration-sm) var(--ease-out),
              filter     var(--duration-sm) var(--ease-out);
}
.messageContent_right:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 24px rgba(224,48,48,0.36);
}

/* ── Picture Bubbles ── */
.messagePicture_left {
  padding: 8px;
  max-width: 100%; min-height: 20px;
  border-radius: 4px 16px 16px 16px;
  background: var(--bubble-incoming-bg);
  overflow: hidden;
  box-shadow: var(--shadow-xs), 0 0 0 1px var(--color-border);
}

.messagePicture_right {
  padding: 8px;
  max-width: 100%; min-height: 20px;
  border-radius: 16px 4px 16px 16px;
  background: var(--color-accent-dim);
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(224,48,48,0.20);
}

.pictureStyle {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ── Fade Animation ── */
.fade { opacity: 0; animation: fadeIn 0.4s var(--ease-out) forwards; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility ── */
.fl { float: left; }
.fr { float: right; }

.bg1 { background: var(--color-surface-3); color: var(--color-text-primary); }
.bg2 { background: #fff0f0;               color: var(--color-accent-deep); }
.bg3 { background: var(--color-accent);   color: white; }
.bg4 { background: #2a9d5c;              color: white; }

/* ── Input Bar ── */
.chatInput_pc {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}

.chatInput_mb {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 6px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* ── Picture Button ── */
.sendPictureView {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sendPicture {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-border-md);
  color: var(--color-text-muted);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background     var(--duration-sm) var(--ease-out),
    color          var(--duration-sm) var(--ease-out),
    border-color   var(--duration-sm) var(--ease-out),
    transform      var(--duration-sm) var(--ease-out);
}
.sendPicture:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-color: rgba(224,48,48,0.30);
  transform: scale(1.08);
}

/* ── Text Input ── */
.textContent {
  flex: 1;
  border: 1.5px solid var(--color-border-md);
  border-radius: 22px;
  padding: 9px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  resize: none;
  height: 38px;
  min-height: 38px;
  line-height: 20px;
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  transition:
    border-color var(--duration-sm) var(--ease-out),
    background   var(--duration-sm) var(--ease-out),
    box-shadow   var(--duration-sm) var(--ease-out);
}
.textContent::placeholder { color: var(--color-text-muted); }
.textContent:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-accent-dim);
}

/* ── Send Button ── */
.sendText {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: var(--shadow-accent);
  transition:
    transform   var(--duration-sm) var(--ease-out),
    box-shadow  var(--duration-sm) var(--ease-out),
    filter      var(--duration-sm) var(--ease-out);
}
.sendText:hover {
  transform: scale(1.08);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(224,48,48,0.40);
}
.sendText:active {
  transform: scale(0.95);
}