/* 1:1 문자(personal) 전용 스타일 - scoped to .comm-page */

/* Layout */
.comm-page .personal_message_container {
  display: flex;
  gap: 20px;
  height: 600px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Chat list */
.comm-page .chat_list {
  width: 380px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.comm-page .chat_list_header {
  padding: 12px 15px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-surface-muted);
}

.comm-page .chat_list_header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-strong);
}

.comm-page .btn_new_chat {
  padding: 6px 12px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.comm-page .btn_new_chat:hover { background-color: var(--color-primary-600); }

.comm-page .chat_room_list { flex: 1; overflow-y: auto; }

.comm-page .date_divider {
  padding: 6px 15px;
  background-color: var(--color-bg-page);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.comm-page .chat_room_item {
  padding: 10px 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
}

.comm-page .chat_room_item:hover { background-color: var(--color-bg-page); }
.comm-page .chat_room_item.active { background-color: var(--color-surface-info); }
.comm-page .chat_room_item:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.comm-page .chat_room_info { flex: 1; overflow: hidden; }
.comm-page .chat_room_name { font-weight: 600; color: var(--color-text-strong); margin-bottom: 2px; font-size: 15px; line-height: 1.4; }
.comm-page .chat_room_phone { font-size: 12px; color: var(--color-text-muted); margin-bottom: 3px; line-height: 1.3; }
.comm-page .chat_room_last_message { font-size: 13px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }

.comm-page .chat_room_meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.comm-page .chat_room_time { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.comm-page .unread_count { background-color: #ff5252; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 10px; min-width: 20px; text-align: center; line-height: 1.5; }

/* Chat content */
.comm-page .chat_content {
  flex: 1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.comm-page .chat_header { padding: 15px; border-bottom: 1px solid var(--color-border); background-color: var(--color-surface-muted); }
.comm-page .chat_name { font-weight: 600; color: var(--color-text-strong); font-size: 16px; }
.comm-page .chat_phone { color: var(--color-text); font-size: 14px; margin-left: 10px; }

.comm-page .chat_messages { flex: 1; padding: 20px; overflow-y: auto; background-color: #f7f7f7; }
.comm-page .chat_empty { text-align: center; color: var(--color-text-muted); padding: 50px 20px; }

.comm-page .message_item { margin-bottom: 15px; display: flex; align-items: flex-end; gap: 10px; }
.comm-page .message_item.sent { justify-content: flex-end; }

.comm-page .message_bubble { max-width: min(70%, 250px); padding: 10px 15px; border-radius: 18px; position: relative; word-wrap: break-word; word-break: break-word; }
.comm-page .message_item.received .message_bubble { background-color: #fff; border: 1px solid var(--color-border); color: var(--color-text-strong); }
.comm-page .message_item.sent .message_bubble { background-color: var(--color-primary); color: #fff; }

.comm-page .message_time { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }
.comm-page .message_item.sent .message_time { text-align: right; color: rgba(255, 255, 255, 0.7); }

.comm-page .message_images { margin-top: 8px; }
.comm-page .message_image { max-width: 200px; max-height: 200px; border-radius: var(--radius-sm); cursor: pointer; display: block; margin-bottom: 8px; transition: opacity 0.2s; }
.comm-page .message_image:hover { opacity: 0.9; }
.comm-page .message_image_loading { background-color: #f0f0f0; width: 200px; height: 150px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 14px; }

/* Input area */
.comm-page .message_input_area { padding: 15px; border-top: 1px solid var(--color-border); background-color: #fff; }
.comm-page #personalMessageInput { width: 100%; border: 1px solid var(--color-border); border-radius: 20px; padding: 10px 15px; resize: none; font-size: 14px; outline: none; margin-bottom: 10px; }
.comm-page #personalMessageInput:focus { border-color: var(--color-primary); }

.comm-page .btn_send_message { width: 100%; padding: 10px; background-color: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600; }
.comm-page .btn_send_message:hover { background-color: var(--color-primary-600); }
.comm-page .btn_send_message:disabled { background-color: #ccc; cursor: not-allowed; }

/* Responsive */
@media (max-width: 1024px) {
  .comm-page .personal_message_container { flex-direction: column; height: auto; }
  .comm-page .chat_list { width: 100%; height: 250px; }
  .comm-page .chat_content { height: 500px; }
}

@media (max-width: 768px) {
  .comm-page .chat_list_header h3 { font-size: 14px; }
  .comm-page .btn_new_chat { font-size: 12px; padding: 4px 10px; }
}