/* chat.css - ChatGPT Clean Style */

:root {
  --bg-sidebar: #171717;
  --bg-chat: #212121;
  --bg-input: #2f2f2f;
  --bg-user-msg: #2f2f2f;
  --border-color: #383838;
  --text-main: #ececec;
  --text-muted: #b4b4b4;
  --brand-primary: #3a8df5;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: var(--bg-chat);
  color: var(--text-main);
  font-family: Tajawal, Inter, sans-serif;
  overflow: hidden;
  direction: rtl; /* RTL Support */
}

/* Hide legacy background animation */
#field, .auth-bg-glow { display: none !important; }

/* Main Layout */
.chat-app {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: var(--bg-chat);
}

/* Sidebar */
.sidebar {
  width: 260px;
  background-color: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-left: 1px solid var(--border-color); /* RTL border */
  flex-shrink: 0;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.new-chat-btn:hover { background: rgba(255,255,255,0.05); }
.new-chat-btn svg { width: 18px; height: 18px; }

.chat-history {
  flex: 1;
  overflow-y: auto;
  margin-top: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.chat-history h2 {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 0 14px;
  font-weight: 600;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-main);
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  transition: background 0.2s;
}
.history-item:hover, .history-item.active { background: #202123; }
.history-item svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.history-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.history-item strong { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.history-item small { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.upgrade-card {
  margin-top: 16px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 8px;
  color: var(--text-main);
  text-decoration: none;
  border: 1px solid var(--border-color);
}
.upgrade-card:hover { background: rgba(255,255,255,0.05); }
.top-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.upgrade-card strong { font-size: 14px; font-weight: 500; }

/* Main Chat Area */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.chat-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: var(--bg-chat);
  z-index: 10;
  border-bottom: 1px solid var(--border-color);
}

.assistant-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.model-selector {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.model-selector svg { width: 16px; height: 16px; color: var(--text-muted); }

.guest-actions { display: flex; gap: 8px; }
.guest-actions a {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
}
.auth-btn-primary { background: var(--text-main); color: #000; }
.auth-btn-primary:hover { background: #dcdcdc; }
.auth-btn-secondary { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); }
.auth-btn-secondary:hover { background: rgba(255,255,255,0.05); }

/* Chat Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 140px 0; /* Padding for composer */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40vh;
}
.welcome-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 24px;
  background: #fff;
  padding: 10px;
  object-fit: contain;
}
.welcome-container h1 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 12px 0;
}
.welcome-container p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

/* Message Rows */
.message-row {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  align-items: flex-start;
}
.message-row.user {
  flex-direction: row-reverse;
}
.message-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  padding: 4px;
}

.message-bubble {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.7;
}

.message-row.user .message-bubble {
  background-color: var(--bg-user-msg);
  padding: 12px 20px;
  border-radius: 20px;
  border-top-left-radius: 4px; /* RTL reversed */
  max-width: 75%;
}

.message-row.assistant .message-bubble {
  max-width: 90%;
  padding-top: 4px;
  color: var(--text-main);
}

.message-bubble p { margin: 0; }
.message-bubble pre {
  background-color: #000;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  border: 1px solid var(--border-color);
  margin-top: 12px;
}
.message-bubble code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
}
.message-bubble small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.message-row.user .message-bubble small { text-align: left; }

/* Composer */
.composer-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, var(--bg-chat) 20%);
  padding: 24px 0;
}

.composer {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer:focus-within {
  border-color: #6b6b6b;
}

.composer textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 16px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  max-height: 200px;
}
.composer textarea::placeholder {
  color: var(--text-muted);
}

.composer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.composer-tools {
  display: flex;
  gap: 8px;
}

.round-tool {
  background: transparent;
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.round-tool:hover { background: rgba(255,255,255,0.1); color: var(--text-main); }
.round-tool svg { width: 20px; height: 20px; }

.send-btn {
  background: #fff;
  color: #000;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.1s;
}
.send-btn svg { width: 16px; height: 16px; }
.send-btn:hover { background: #dcdcdc; }
.send-btn:disabled { background: #676767; color: #989898; cursor: not-allowed; }

/* Responsive */
.mobile-bar { display: none; }

/* Typing indicator */
.typing-indicator{display:flex;gap:6px;padding:8px 0}
.typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:typing 1.2s infinite ease-in-out both}
.typing-indicator span:nth-child(2){animation-delay:.14s}
.typing-indicator span:nth-child(3){animation-delay:.28s}
@keyframes typing{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}

@media (max-width: 1100px) {
  .sidebar {
    position: fixed;
    z-index: 20;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .chat-header { display: none; }
  .mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-chat);
    z-index: 10;
  }
  .mobile-bar img { width: 120px; }
  .mobile-bar .icon-btn {
    background: transparent; border: none; color: var(--text-main); cursor: pointer;
  }
  .mobile-bar .icon-btn svg { width: 24px; height: 24px; }
}

@media (max-width: 720px) {
  .chat-container { padding: 0 16px; }
  .message-row.assistant .message-bubble { max-width: 100%; }
  .composer-wrapper { padding: 12px 16px; background: var(--bg-chat); }
  .composer { margin: 0; }
  .chat-messages { padding-bottom: 120px; }
}