:root {
  --bg: #0b0b10;
  --sidebar: #101016;
  --surface: #171720;
  --surface-hover: #22222e;
  --purple: #a855f7;
  --purple-light: #c084fc;
  --silver: #e5e5ed;
  --muted: #858594;
  --border: #292936;
}

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

body {
  background: var(--bg);
  color: var(--silver);
  font-family: Inter, system-ui, Arial, sans-serif;
  min-height: 100vh;
}

button, textarea {
  font: inherit;
}

button {
  cursor: pointer;
  color: inherit;
  border: none;
}

.app-container {
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */

.sidebar {
  width: 270px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 32px;
}

.brand b {
  color: var(--purple-light);
}

.brand-logo, .welcome-logo {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #9333ea, #5b21b6);
  border-radius: 13px;
  font-weight: 900;
  color: white;
}

.brand-logo {
  width: 38px;
  height: 38px;
}

.new-chat {
  background: linear-gradient(110deg, #9333ea, #6d28d9);
  padding: 13px;
  border-radius: 10px;
  text-align: left;
  font-weight: 600;
  margin-bottom: 30px;
}

.new-chat span {
  margin-right: 10px;
  font-size: 19px;
}

.sidebar-section {
  margin-bottom: 28px;
}

.section-title {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.7px;
  margin: 0 0 13px 9px;
}

.nav-item {
  display: flex;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 9px;
  background: transparent;
  color: #b6b6c3;
  text-align: left;
  margin-bottom: 4px;
}

.nav-item span {
  font-size: 18px;
}

.nav-item:hover,
.nav-item.active {
  background: #242031;
  color: var(--purple-light);
}

.sidebar-bottom {
  margin-top: auto;
}

.profile {
  border-top: 1px solid var(--border);
  margin-top: 15px;
  padding-top: 17px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.avatar {
  background: #752ac2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: bold;
}

.profile strong, .profile small {
  display: block;
}

.profile small {
  color: var(--muted);
  margin-top: 4px;
}

/* MAIN AREA */

.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 25px;
  border-bottom: 1px solid var(--border);
}

.topbar button {
  background: transparent;
  font-size: 21px;
  color: var(--silver);
}

.topbar-title {
  font-weight: 700;
  letter-spacing: 1px;
}

.chat-area {
  flex: 1;
  width: 100%;
  max-width: 950px;
  margin: auto;
  padding: 35px 24px;
}

.welcome-screen {
  text-align: center;
  padding-top: 65px;
}

.welcome-logo {
  width: 66px;
  height: 66px;
  font-size: 32px;
  border-radius: 20px;
  margin: 0 auto 23px;
  box-shadow: 0 0 45px #9333ea44;
}

.welcome-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--purple-light);
  margin-bottom: 20px;
}

.welcome-screen h1 {
  font-size: clamp(34px, 6vw, 55px);
  line-height: 1.15;
  letter-spacing: -2px;
}

.welcome-screen h1 span {
  color: var(--purple-light);
}

.welcome-description {
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.7;
}

/* SUGGESTIONS */

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin: 40px auto;
  max-width: 620px;
}

.suggestion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
  text-align: left;
  padding: 17px;
  transition: 0.2s;
}

.suggestion:hover {
  border-color: var(--purple);
  background: var(--surface-hover);
  transform: translateY(-2px);
}

.suggestion span {
  display: block;
  color: var(--purple-light);
  font-size: 21px;
  margin-bottom: 12px;
}

.suggestion strong,
.suggestion small {
  display: block;
}

.suggestion small {
  color: var(--muted);
  margin-top: 6px;
}

/* MESSAGE AREA */

.messages {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.message {
  max-width: 85%;
  padding: 15px 18px;
  border-radius: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.user {
  align-self: flex-end;
  background: #38204e;
}

.message.ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* COMPOSER */

.composer-area {
  width: 100%;
  max-width: 850px;
  padding: 15px 22px 20px;
  margin: 0 auto;
}

.composer {
  background: var(--surface);
  border: 1px solid #373344;
  border-radius: 17px;
  padding: 13px;
  transition: 0.2s;
}

.composer:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 20px #9333ea20;
}

.composer textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  resize: none;
  min-height: 48px;
  max-height: 160px;
  padding: 8px;
  font-size: 15px;
}

.composer textarea::placeholder {
  color: #858594;
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.composer-tools button {
  background: #292936;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
}

.model-label {
  color: var(--muted);
  font-size: 11px;
}

.send-button {
  background: var(--purple);
  width: 39px;
  height: 39px;
  border-radius: 12px;
  font-size: 23px;
  font-weight: bold;
  color: white;
}

.send-button:hover {
  background: #9333ea;
}

.disclaimer {
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  margin-top: 12px;
}

.empty-history {
  color: var(--muted);
  font-size: 12px;
  padding: 10px;
}

/* MOBILE */

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: left 0.25s;
    box-shadow: 10px 0 35px #0008;
  }

  .sidebar.open {
    left: 0;
  }

  .topbar {
    padding: 0 16px;
  }

  .chat-area {
    padding: 20px 15px;
  }

  .welcome-screen {
    padding-top: 45px;
  }

  .suggestions {
    gap: 9px;
    margin-top: 30px;
  }

  .suggestion {
    padding: 13px;
  }

  .composer-area {
    padding: 12px;
  }

  .message {
    max-width: 95%;
  }
}

@media (max-width: 360px) {
  .welcome-screen h1 {
    font-size: 32px;
  }

  .suggestion {
    padding: 10px;
  }

  .suggestion strong {
    font-size: 12px;
  }
}

/* LUXEA AI - ROYAL OBSIDIAN THEME */

:root {
  --bg: #09060F;
  --sidebar: #0D0915;
  --surface: #171020;
  --surface-hover: #261438;
  --purple: #8546D8;
  --purple-light: #C69AFF;
  --silver: #F0EAF7;
  --muted: #A99AB8;
  --border: #30203F;
}

/* Overall blended background */
body {
  background:
    radial-gradient(
      ellipse at 70% 15%,
      #351354 0%,
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #09060F,
      #130B1D 55%,
      #08060D
    );
  color: #F0EAF7;
}

/* Main workspace */
.main-content {
  background:
    radial-gradient(
      circle at 75% 20%,
      #26103955,
      transparent 45%
    ),
    #09070E;
}

/* Sidebar */
.sidebar {
  background: linear-gradient(
    180deg,
    #110A1B,
    #0A080F 90%
  );
  border-right: 1px solid #39234E;
}

/* Brand logo */
.brand-logo,
.welcome-logo {
  background: linear-gradient(
    135deg,
    #B477F5,
    #803CCB 45%,
    #35105B
  );
  box-shadow:
    0 0 20px #8B43D966,
    0 0 45px #5C248833;
}

/* New chat */
.new-chat {
  background: linear-gradient(
    110deg,
    #9149DE,
    #5D248F,
    #35134F
  );
  border: 1px solid #A56AE2;
  box-shadow: 0 5px 20px #7029AD44;
}

/* Navigation */
.nav-item.active,
.nav-item:hover {
  background: linear-gradient(
    100deg,
    #392052,
    #1C1129,
    #120D19
  );
  color: #D4AEFF;
  border: 1px solid #583477;
}

/* Welcome heading */
.welcome-screen h1 span {
  background: linear-gradient(
    90deg,
    #D5B1FF,
    #A15DE8,
    #7741B8
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Suggestion cards */
.suggestion {
  background: linear-gradient(
    135deg,
    #21132F,
    #120D1A 75%
  );
  border: 1px solid #43265B;
}

.suggestion:hover {
  background: linear-gradient(
    135deg,
    #38204E,
    #191022
  );
  border-color: #A66BE5;
  box-shadow: 0 8px 25px #742BBE33;
}

/* Composer */
.composer {
  background: linear-gradient(
    135deg,
    #21142E,
    #110D18 85%
  );
  border: 1px solid #54336D;
  box-shadow: 0 8px 30px #0008;
}

.composer:focus-within {
  border-color: #A66BE5;
  box-shadow: 0 0 24px #8B43D944;
}

/* Send button */
.send-button {
  background: linear-gradient(
    135deg,
    #B477F5,
    #7838C2,
    #4B1B78
  );
  box-shadow: 0 0 16px #9149DE66;
}

/* Messages */
.message.user {
  background: linear-gradient(
    120deg,
    #512B72,
    #281537
  );
  border: 1px solid #7946A0;
}

.message.ai {
  background: linear-gradient(
    120deg,
    #1E1429,
    #100D17
  );
  border: 1px solid #392647;
}

/* Smooth transitions */
button {
  transition: all 0.25s ease;
}

/* LUXEA AI — LUXURY PURPLE EDITION */

:root {
  --bg: #08060D;
  --sidebar: #0E0A16;
  --surface: #181121;
  --surface-hover: #28163B;
  --purple: #9147E8;
  --purple-light: #C28AFF;
  --silver: #F4EFFA;
  --muted: #A99BB8;
  --border: #332044;
}

body {
  background:
    radial-gradient(
      ellipse at 50% -20%,
      #492078 0%,
      transparent 55%
    ),
    #08060D;
}

.main-content {
  background:
    radial-gradient(
      circle at 50% 30%,
      #28133D55,
      transparent 55%
    ),
    #09070F;
}

.sidebar {
  background: #0D0913;
  border-right: 1px solid #39234C;
}

.brand-logo,
.welcome-logo {
  background: linear-gradient(
    135deg,
    #D2A1FF,
    #9147E8 45%,
    #45156F
  );
  box-shadow:
    0 0 20px #A34FFF66,
    0 0 55px #7728BB33;
}

.new-chat {
  background: linear-gradient(
    110deg,
    #A65AFF,
    #7733C2,
    #52217E
  );
  border: 1px solid #B87BFF;
  box-shadow: 0 5px 22px #913FEA55;
}

.nav-item.active,
.nav-item:hover {
  background: linear-gradient(
    100deg,
    #452263,
    #21142F
  );
  color: #E0C2FF;
  border: 1px solid #7541A0;
}

.welcome-screen h1 span {
  background: linear-gradient(
    90deg,
    #E1C5FF,
    #B66BFF,
    #8443DB
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.suggestion {
  background: linear-gradient(
    145deg,
    #241532,
    #120D19
  );
  border: 1px solid #4A3061;
  box-shadow: 0 5px 20px #0003;
}

.suggestion:hover {
  border-color: #B36AFF;
  box-shadow: 0 8px 30px #923FEA44;
  transform: translateY(-3px);
}

.composer {
  background: linear-gradient(
    120deg,
    #21142F,
    #110D18
  );
  border: 1px solid #67448A;
  box-shadow: 0 8px 35px #0006;
}

.composer:focus-within {
  border-color: #B66BFF;
  box-shadow: 0 0 25px #923FEA44;
}

.send-button {
  background: linear-gradient(
    135deg,
    #D0A0FF,
    #9849E8,
    #6327A4
  );
  box-shadow: 0 0 20px #A34FFF77;
}

.message.user {
  background: linear-gradient(
    120deg,
    #63318C,
    #321849
  );
  border: 1px solid #9055BA;
}

.message.ai {
  background: #191220;
  border: 1px solid #443052;
}

button {
  transition: all .25s ease;
}