.app {

  width: 100vw;

  height: 100vh;

  display: flex;

}


/* ========================= */
/* SIDEBAR */
/* ========================= */

.sidebar {

  width: 260px;

  background:
    var(--panel);

  border-right:
    1px solid var(--border);

  display: flex;

  flex-direction: column;

}


.sidebar-top {

  padding: 16px;

}


#newChatBtn {

  width: 100%;

  padding: 14px;

  border: none;

  border-radius: 12px;

  background:
    var(--primary);

  color: white;

  font-size: 15px;

  cursor: pointer;

}


.chat-history {

  padding: 10px;

}


.history-item {

  padding: 12px;

  border-radius: 10px;

  background:
    var(--panel-2);

}


/* ========================= */
/* MAIN */
/* ========================= */

.main {

  flex: 1;

  display: flex;

  flex-direction: column;

}


/* ========================= */
/* TOPBAR */
/* ========================= */

.topbar {

  height: 60px;

  display: flex;

  align-items: center;

  padding: 0 20px;

  border-bottom:
    1px solid var(--border);

}


.logo {

  font-weight: bold;

}


/* ========================= */
/* CHAT */
/* ========================= */

.chat-messages {

  flex: 1;

  overflow-y: auto;

  padding: 20px;

}


/* ========================= */
/* MESSAGE */
/* ========================= */

.message {

  display: flex;

  margin-bottom: 20px;

}


/* ========================= */
/* AVATAR */
/* ========================= */

.avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

}


.avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


/* ========================= */
/* AI LAYOUT */
/* ========================= */

.ai-message {

  display: flex;

  align-items: flex-start;

  gap: 12px;

}

.user-message {

  justify-content: flex-end;

}


.ai-message {

  justify-content: flex-start;

}


.message-content {

  max-width: 85%;

  padding: 16px;

  border-radius: 16px;

  line-height: 1.8;

}


.user-message .message-content {

  background:
    var(--primary);

}


.ai-message .message-content {

  background:
    var(--panel-2);

}


/* ========================= */
/* INPUT */
/* ========================= */

.input-area {

  padding: 16px;

  display: flex;

  gap: 10px;

  border-top:
    1px solid var(--border);

}


#userInput {

  flex: 1;

  resize: none;

  border: none;

  outline: none;

  border-radius: 14px;

  background:
    var(--panel-2);

  color: white;

  padding: 14px;

  min-height: 56px;

  max-height: 160px;

}


#sendBtn {

  width: 56px;

  border: none;

  border-radius: 50%;

  background:
    var(--primary);

  color: white;

  font-size: 20px;

  cursor: pointer;

}

/* ========================= */
/* AI MESSAGE */
/* ========================= */

.ai-message {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-bottom: 20px;

}


/* ========================= */
/* AVATAR */
/* ========================= */

.avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  object-fit: cover;

  flex-shrink: 0;

}


/* ========================= */
/* BODY */
/* ========================= */

.ai-body {

  display: flex;

  flex-direction: column;

}


/* ========================= */
/* TEACHER NAME */
/* ========================= */

.teacher-name {

  font-size: 13px;

  color: #9ca3af;

  margin-bottom: 4px;

  margin-left: 8px;

}


/* ========================= */
/* AI BUBBLE */
/* ========================= */

.ai-message .message-content {

  background: #1e293b;

  color: white;

  padding: 14px;

  border-radius: 18px;

  border-top-left-radius: 6px;

  max-width: 280px;

}


/* ========================= */
/* USER MESSAGE */
/* ========================= */

.user-message {

  display: flex;

  justify-content: flex-end;

  margin-bottom: 20px;

}


.user-message .message-content {

  background: #2563eb;

  color: white;

  padding: 14px;

  border-radius: 18px;

  border-top-right-radius: 6px;

  max-width: 280px;

}

/* ========================= */
/* KATEX */
/* ========================= */

.katex {

  font-size: 1.1em;

  color: #ffffff;

}


.katex-display {

  overflow-x: auto;

  overflow-y: hidden;

  padding: 8px 0;

}