*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:      #1B3A5C;   /* navy */
  --accent:     #C9A84C;   /* gold */
  --accent-lt:  #f5efd6;
  --bg:         #f4f6f9;
}

body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.chat-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  background: #fff;
}

/* Header */
.chat-header {
  background: var(--brand);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border-bottom: 3px solid var(--accent);
}
.header-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
  border-radius: 4px;
}
.header-text h1 { font-size: 15px; font-weight: 600; color: #fff; }
.header-text p  { font-size: 12px; color: #a8b8cc; }
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #5DCAA5;
  flex-shrink: 0;
}
.status-dot.offline { background: #888; }
.page-ts { font-size: 10px; color: #7a92aa; margin-left: auto; margin-right: 8px; white-space: nowrap; flex-shrink: 0; }

/* Message list */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8fafd;
}

.msg { display: flex; gap: 10px; align-items: flex-start; max-width: 85%; }
.msg.user { flex-direction: row-reverse; align-self: flex-end; }

.msg-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.msg.bot  .msg-avatar { background: var(--brand); color: var(--accent); }
.msg.user .msg-avatar { background: #e0e7ef; color: #444; border: 1px solid #ccd5e0; }

.bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  border-radius: 12px;
}
.msg.bot  .bubble { background: #fff; border: 1px solid #e0e7ef; border-radius: 4px 12px 12px 12px; color: #1a1a2e; }
.msg.user .bubble { background: var(--brand); color: #fff; border-radius: 12px 4px 12px 12px; }

/* Typing indicator */
.typing-dots { display: flex; align-items: center; gap: 5px; padding: 10px 4px; }
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #aab4c8;
  animation: bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-6px); }
}

/* Suggestion chips */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid #e8edf4;
  background: #fff;
  flex-shrink: 0;
}
.sug-btn {
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  transition: background .15s;
}
.sug-btn:hover { background: var(--accent-lt); }

/* Input row */
.input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #e8edf4;
  background: #fff;
  flex-shrink: 0;
}
.input-row input {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid #c8d5e8;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  color: #1a1a2e;
}
.input-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); }
.send-btn {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--accent);
  border: none;
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.send-btn:hover    { background: #b8943e; }
.send-btn:disabled { background: #c0ccd8; cursor: default; color: #fff; }