:root {
  --bg: #000000;
  --panel: #101116;
  --panel-2: #17181d;
  --panel-3: #202126;
  --line: rgba(255, 255, 255, 0.13);
  --line-soft: rgba(255, 255, 255, 0.075);
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.74);
  --text-faint: rgba(255, 255, 255, 0.52);
  --accent: #9b7cff;
  --accent-2: #6f4dff;
  --rail-width: 62px;
  --sidebar-width: 304px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  width: 100vw;
  height: 100dvh;
  min-height: 680px;
  background: #000;
}

body.sidebar-open .app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.svg-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
}

.brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-mark path {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px rgba(155, 124, 255, 0.56));
}

.brand-mark circle {
  fill: #ffe26a;
}

.rail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--rail-width);
  height: 100dvh;
  padding: 13px 0 14px;
  border-right: 1px solid var(--line-soft);
  background: #050507;
}

body.sidebar-open .rail {
  display: none;
}

.rail-btn {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.rail-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-1px);
}

.rail-logo {
  margin-bottom: 12px;
}

.rail-logo .brand-mark {
  width: 30px;
  height: 30px;
}

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

.rail-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2c2d32;
  font-size: 11px;
  font-weight: 800;
}

.sidebar {
  grid-column: 1;
  grid-row: 1;
  display: none;
  width: var(--sidebar-width);
  height: 100dvh;
  min-height: 0;
  padding: 16px 7px 14px 14px;
  border-right: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 30% 12%, rgba(155, 124, 255, 0.10), transparent 12rem),
    linear-gradient(180deg, #101116, #0b0c10);
  overflow: hidden;
}

body.sidebar-open .sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 14px 2px;
}

.sidebar-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-name {
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.brand-name span {
  color: var(--accent);
}

.sidebar-collapse {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
}

.sidebar-collapse:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.new-chat-button {
  display: flex;
  align-items: center;
  width: calc(100% - 4px);
  min-height: 42px;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(155, 124, 255, 0.14), rgba(255, 255, 255, 0.035)),
    #17181d;
  color: #fff;
  font-size: 15px;
  font-weight: 720;
  cursor: pointer;
}

.new-chat-button .svg-icon {
  width: 19px;
  height: 19px;
}

.new-chat-spark {
  margin-left: auto;
  width: 22px;
  height: 22px;
}

.new-chat-spark svg {
  width: 100%;
  height: 100%;
}

.new-chat-spark path {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px rgba(155, 124, 255, 0.55));
}

.sidebar-scroll-panel {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 96px 0;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.30) transparent;
}

.sidebar-scroll-panel::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll-panel::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.sidebar-scroll-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

.sidebar-nav {
  display: grid;
  gap: 3px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.nav-item,
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 39px;
  padding: 0 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
  font-weight: 620;
}

.nav-item .svg-icon,
.history-item .svg-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.86);
}

.nav-item:hover,
.history-item:hover,
.history-item.active {
  background: rgba(255, 255, 255, 0.075);
  color: #fff;
}

.nav-item:hover .svg-icon,
.history-item:hover .svg-icon,
.history-item.active .svg-icon {
  color: #fff;
}

.sidebar-section {
  display: grid;
  gap: 3px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}

.sidebar-section h2 {
  margin: 0 0 8px;
  padding: 0 10px;
  color: var(--accent);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 780;
}

.history-item span:last-child,
.nav-item span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px);
}

.profile-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2b2c33;
  font-size: 14px;
  font-weight: 800;
  position: relative;
}

.profile-avatar::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid #111216;
  border-radius: 50%;
  background: #24db68;
}

.profile-copy {
  display: grid;
  min-width: 0;
}

.profile-copy strong {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-copy span {
  color: var(--text-faint);
  font-size: 12px;
}

.profile-settings {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: auto;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
}

.profile-settings:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.main-surface {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 38%, rgba(155, 124, 255, 0.045), transparent 32rem),
    radial-gradient(circle at 88% 43%, rgba(111, 77, 255, 0.08), transparent 18rem),
    #000;
}

.mobile-header {
  display: none;
}

.home-view,
.chat-view {
  position: absolute;
  inset: 0;
}

.home-view {
  display: grid;
  place-items: center;
  padding: 48px 34px 64px;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 980px);
  margin: 0 auto;
  text-align: center;
  transform: translateY(-4px);
}

.hero-content h1 {
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(46px, 5.05vw, 72px);
  line-height: 0.95;
  font-weight: 735;
  letter-spacing: -0.07em;
}

.hero-content h1 span {
  color: var(--accent);
}

.hero-content p {
  margin: 0 auto 41px;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 430;
}

.brand-watermark {
  position: absolute;
  top: 26%;
  right: -54px;
  width: 285px;
  height: 285px;
  opacity: 0.13;
  pointer-events: none;
}

.brand-watermark svg {
  width: 100%;
  height: 100%;
}

.brand-watermark path,
.brand-watermark circle {
  fill: var(--accent-2);
}

.composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  width: min(100%, 870px);
  min-height: 58px;
  gap: 8px;
  margin: 0 auto 26px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055)),
    #1f2024;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.36);
}

.composer:focus-within {
  border-color: rgba(255, 255, 255, 0.22);
}

.composer-plus {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 30px;
  font-weight: 240;
  cursor: pointer;
}

.composer textarea {
  width: 100%;
  min-height: 26px;
  max-height: 150px;
  resize: none;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15.5px;
  line-height: 1.45;
}

.composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.54);
}

.composer-mode,
.composer-mic,
.composer-send {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.composer-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 8px;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
  font-weight: 720;
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.72);
  transform: rotate(45deg) translateY(-2px);
}

.composer-mic {
  position: relative;
  display: grid;
  width: 34px;
  height: 42px;
  place-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.composer-mic span {
  position: relative;
  width: 12px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 9px;
}

.composer-mic span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 15px;
  height: 8px;
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}

.composer-mic span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.composer-send {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  gap: 4px;
  border-radius: 50%;
  background: #f4f4f6;
  box-shadow:
    0 0 0 4px rgba(155, 124, 255, 0.12),
    0 0 20px rgba(155, 124, 255, 0.26),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.composer-send span {
  width: 3px;
  border-radius: 999px;
  background: #0b0c0f;
}

.composer-send span:nth-child(1) {
  height: 14px;
}

.composer-send span:nth-child(2) {
  height: 22px;
}

.composer-send span:nth-child(3) {
  height: 17px;
}

.quick-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 762px);
  gap: 22px;
  margin: 0 auto;
}

.quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.04)),
    #18191d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 32px rgba(0, 0, 0, 0.24);
  font-size: 16px;
  font-weight: 720;
  cursor: pointer;
}

.quick-chip:hover {
  border-color: rgba(155, 124, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(155, 124, 255, 0.12), rgba(255, 255, 255, 0.045)),
    #1a1b20;
}

.product-icon {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(155, 124, 255, 0.45);
  background:
    radial-gradient(circle at 34% 24%, rgba(190, 165, 255, 0.55), transparent 0 18%, transparent 44%),
    linear-gradient(145deg, rgba(82, 58, 170, 0.72), rgba(26, 22, 48, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 0 18px rgba(126, 82, 255, 0.24);
}

.product-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: rgba(245, 240, 255, 0.96);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(155, 124, 255, 0.50));
}

.product-icon .icon-fill {
  fill: rgba(245, 240, 255, 0.96);
  stroke: none;
}

.chat-view {
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) auto;
  padding: 0 22px 18px;
}

.chat-view[hidden],
.home-view[hidden] {
  display: none !important;
}

.chat-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.chat-new {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.chat-scroll {
  min-height: 0;
  overflow: auto;
  padding: 70px 0 24px;
}

.chat-message {
  max-width: 680px;
  margin: 0 auto 18px;
}

.user-message {
  width: fit-content;
  max-width: min(680px, 80%);
  margin-left: auto;
  padding: 13px 18px;
  border-radius: 16px;
  background: #202126;
}

.user-message p,
.assistant-card p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}

.assistant-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
}

.assistant-card {
  padding: 30px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #17181d;
}

.chat-composer {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .app-shell {
    display: block;
    min-height: 0;
    height: 100dvh;
  }

  .rail,
  .sidebar {
    display: none !important;
  }

  .main-surface {
    width: 100%;
    height: 100%;
  }

  .mobile-header {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 78px;
    padding: max(12px, env(safe-area-inset-top)) 18px 8px;
  }

  .mobile-menu,
  .mobile-plus {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: #fff;
  }

  .mobile-menu span {
    display: block;
    width: 17px;
    height: 2px;
    margin: 2px 0;
    border-radius: 999px;
    background: #fff;
  }

  .mobile-brand {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 760;
    letter-spacing: -0.045em;
  }

  .mobile-brand span:last-child span {
    color: var(--accent);
  }

  .home-view {
    display: block;
    padding: 0 18px;
  }

  .hero-content {
    width: 100%;
    transform: none;
    padding-top: clamp(34px, 6dvh, 58px);
    text-align: center;
  }

  .hero-content h1 {
    margin-bottom: 18px;
    font-size: clamp(38px, 10.2vw, 48px);
    line-height: 1.04;
  }

  .hero-content p {
    max-width: 330px;
    margin-bottom: clamp(34px, 8dvh, 72px);
    font-size: 15.5px;
  }

  .brand-watermark {
    top: 35%;
    right: -82px;
    width: 220px;
    height: 220px;
  }

  .composer {
    width: 100%;
    min-height: 58px;
    margin-bottom: 20px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .composer-mode {
    display: none;
  }

  .composer-plus {
    width: 42px;
    height: 42px;
  }

  .composer-send {
    width: 44px;
    height: 44px;
  }

  .quick-chips {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .quick-chip {
    flex-direction: column;
    min-height: 108px;
    gap: 10px;
    border-radius: 16px;
    font-size: 14px;
  }

  .chat-view {
    grid-template-rows: 74px minmax(0, 1fr) auto;
    padding: 0 14px 10px;
  }
}
/* HOME-PASS-28-HERO-ACTIONS-START */
.top-actions {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.top-action-btn {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(12, 13, 17, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.top-action-btn:hover {
  color: #ffffff;
  border-color: rgba(156, 124, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(156, 124, 255, 0.16), rgba(255, 255, 255, 0.035)),
    rgba(18, 19, 24, 0.88);
  transform: translateY(-1px);
}

.top-action-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-content h1 {
  font-weight: 720;
  letter-spacing: -0.068em;
}

.hero-content h1 span {
  color: #a98cff;
}

.hero-content p {
  max-width: 760px;
}

body.is-logged-in .auth-action {
  border-color: rgba(54, 214, 126, 0.32);
}

body.is-logged-in .auth-action::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #29d96f;
  box-shadow: 0 0 10px rgba(41, 217, 111, 0.55);
}

@media (max-width: 760px) {
  .top-actions {
    top: max(17px, env(safe-area-inset-top));
    right: 66px;
    gap: 7px;
  }

  .top-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .top-action-btn svg {
    width: 18px;
    height: 18px;
  }

  .hero-content h1 {
    font-size: clamp(36px, 9.6vw, 46px);
  }
}
/* HOME-PASS-28-HERO-ACTIONS-END */
/* HOME-CHAT-POLISH-PASS-29-START */

/* Chat page polish only. Keeps sidebar, rail, hero, chips, and composer architecture unchanged. */
.chat-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0 24px 22px;
  background:
    radial-gradient(circle at 55% 0%, rgba(156, 124, 255, 0.075), transparent 34rem),
    radial-gradient(circle at 82% 32%, rgba(92, 62, 190, 0.08), transparent 26rem),
    rgba(0, 0, 0, 0.0);
}

.chat-view[hidden] {
  display: none !important;
}

.chat-view .chat-topbar {
  display: none !important;
}

.chat-scroll {
  width: min(100%, 860px);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(84px, 14vh, 136px) 0 124px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.20) transparent;
}

.chat-scroll::-webkit-scrollbar {
  width: 6px;
}

.chat-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.chat-message {
  margin-bottom: 18px;
}

.chat-message p {
  margin: 0;
}

.user-message {
  width: fit-content;
  max-width: min(640px, 78%);
  margin-left: auto;
  padding: 12px 17px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px 18px 6px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.040)),
    #202126;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.user-message p {
  color: rgba(255, 255, 255, 0.96);
  font-size: 15px;
  line-height: 1.52;
  font-weight: 520;
}

.assistant-message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 13px;
  max-width: min(760px, 94%);
  margin-right: auto;
}

.assistant-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding-top: 3px;
}

.assistant-mark .if-mark {
  width: 28px;
  height: 28px;
}

.assistant-card {
  position: relative;
  padding: 23px 24px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.94);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.030)),
    #15161b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 40px rgba(0, 0, 0, 0.28);
}

.assistant-card::before {
  content: "IdeasForgeAI";
  display: block;
  margin-bottom: 10px;
  color: rgba(169, 140, 255, 0.94);
  font-size: 12px;
  line-height: 1;
  font-weight: 780;
  letter-spacing: 0.03em;
}

.assistant-card p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.58;
  font-weight: 450;
}

.chat-composer {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 12;
  transform: translateX(-50%);
  width: min(calc(100% - 48px), 870px);
  margin: 0;
}

.chat-view .composer {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.060)),
    #1d1e22;
}

.chat-view .composer textarea {
  color: rgba(255, 255, 255, 0.96);
}

.chat-view .composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.chat-view .composer-send {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 0 0 4px rgba(156, 124, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.30);
}

body.sidebar-open .chat-scroll,
body.sidebar-open .chat-composer {
  transition: width 160ms ease;
}

.chat-empty-hint {
  width: fit-content;
  max-width: min(680px, 92%);
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 760px) {
  .chat-view {
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0 14px 12px;
  }

  .chat-scroll {
    width: 100%;
    padding: 88px 0 104px;
  }

  .user-message {
    max-width: 86%;
    padding: 11px 15px;
    border-radius: 17px 17px 6px 17px;
  }

  .assistant-message {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    max-width: 100%;
  }

  .assistant-mark {
    width: 30px;
    height: 30px;
  }

  .assistant-mark .if-mark {
    width: 24px;
    height: 24px;
  }

  .assistant-card {
    padding: 18px 17px;
    border-radius: 18px;
  }

  .chat-composer {
    bottom: 12px;
    width: calc(100% - 22px);
  }
}

/* HOME-CHAT-POLISH-PASS-29-END */
/* HOME-CHAT-PASS30-POLISH-START */

/* Chat page final polish only */
.chat-view {
  grid-template-rows: 74px minmax(0, 1fr) auto !important;
  padding: 0 22px 34px !important;
}

.chat-topbar {
  min-height: 74px !important;
  pointer-events: none;
}

.chat-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 72px 0 130px !important;
}

.chat-message {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.user-message {
  width: fit-content !important;
  max-width: min(520px, 76%) !important;
  margin: 0 auto 18px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)),
    #1f2025 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}

.user-message p {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.assistant-message {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.assistant-message .assistant-mark {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  margin-top: 10px !important;
}

.assistant-card {
  padding: 22px 24px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.032)),
    #17181d !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 20px 50px rgba(0,0,0,.28) !important;
}

.assistant-card::before {
  content: "IdeasForgeAI";
  display: block;
  margin-bottom: 8px;
  color: #a98cff;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .01em;
}

.assistant-card p {
  font-size: 15px !important;
  line-height: 1.62 !important;
  color: rgba(255,255,255,.94) !important;
}

.chat-composer {
  position: relative !important;
  z-index: 30 !important;
  width: min(100%, 870px) !important;
  margin: 0 auto !important;
  transform: none !important;
}

.chat-view .composer {
  min-height: 58px !important;
}

/* Keep top-right actions clean above chat */
.chat-view ~ .top-actions,
.top-actions {
  z-index: 40 !important;
}

/* Mobile chat polish */
@media (max-width: 760px) {
  .chat-view {
    grid-template-rows: 68px minmax(0, 1fr) auto !important;
    padding: 0 14px 18px !important;
  }

  .chat-scroll {
    padding: 44px 0 108px !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
  }

  .user-message {
    max-width: 82% !important;
  }

  .assistant-message {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .assistant-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }

  .chat-composer {
    width: 100% !important;
  }
}

/* HOME-CHAT-PASS30-POLISH-END */
/* HOME-CHAT-PASS30B-COMPOSER-FIX-START */

/* Fix chat composer only. Do not affect landing composer/sidebar. */
.chat-view {
  display: grid !important;
  grid-template-rows: 76px minmax(0, 1fr) 86px !important;
  height: 100dvh !important;
  min-height: 0 !important;
  padding: 0 22px 18px !important;
  overflow: hidden !important;
}

.chat-scroll {
  grid-row: 2 !important;
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 56px 0 34px !important;
}

.chat-composer,
.chat-view .chat-composer,
.chat-view form.chat-composer.composer {
  grid-row: 3 !important;
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: min(100%, 870px) !important;
  max-width: 870px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 58px !important;
  max-height: none !important;

  margin: 0 auto !important;
  align-self: end !important;
  justify-self: center !important;

  border-radius: 999px !important;
  overflow: visible !important;
}

.chat-view .composer::before,
.chat-view .composer::after,
.chat-composer::before,
.chat-composer::after {
  display: none !important;
  content: none !important;
}

.chat-message {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
}

.user-message {
  margin: 0 auto 18px !important;
}

.assistant-message {
  margin: 0 auto !important;
}

/* Keep top-right buttons visible but not interfering */
.top-actions {
  z-index: 50 !important;
}

@media (max-width: 760px) {
  .chat-view {
    grid-template-rows: 74px minmax(0, 1fr) 78px !important;
    padding: 0 14px 12px !important;
  }

  .chat-scroll {
    padding: 38px 0 28px !important;
  }

  .chat-composer,
  .chat-view .chat-composer,
  .chat-view form.chat-composer.composer {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
  }
}

/* HOME-CHAT-PASS30B-COMPOSER-FIX-END */
/* HOME-CHAT-LEFT-RIGHT-DISCLAIMER-START */

/* Chat page only: align user message right, assistant message left */
.chat-view {
  padding-bottom: 42px !important;
}

.chat-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 120px !important;
}

.chat-view .chat-message {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
}

/* User message to the right, like ChatGPT */
.chat-view .user-message {
  align-self: center !important;
  width: fit-content !important;
  max-width: min(520px, 68vw) !important;
  margin: 0 calc((100% - min(800px, 100%)) / 2) 18px auto !important;
  padding: 13px 18px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.04)),
    #202126 !important;
}

/* Assistant message to the left */
.chat-view .assistant-message {
  align-self: center !important;
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto 18px !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

/* Keep assistant card compact and left-readable */
.chat-view .assistant-card {
  width: min(100%, 680px) !important;
  margin-right: auto !important;
}

/* Composer line below tray */
.chat-view .chat-composer {
  position: relative !important;
  margin-bottom: 24px !important;
}

.chat-view .chat-composer::after {
  content: "IdeasForgeAI can make mistakes. Check important info.";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  text-align: center;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Mobile: keep left/right natural and disclaimer visible */
@media (max-width: 760px) {
  .chat-view {
    padding-bottom: 34px !important;
  }

  .chat-scroll {
    padding-bottom: 110px !important;
  }

  .chat-view .chat-message,
  .chat-view .assistant-message {
    width: 100% !important;
    max-width: 100% !important;
  }

  .chat-view .user-message {
    max-width: 82% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .chat-view .assistant-card {
    width: 100% !important;
  }

  .chat-view .chat-composer::after {
    font-size: 11px;
    top: calc(100% + 8px);
  }
}

/* HOME-CHAT-LEFT-RIGHT-DISCLAIMER-END */
/* HOME-CHAT-MESSAGE-CLEANUP-START */

/* Chat page only: remove assistant bubble/card background */
.chat-view .assistant-card {
  width: min(100%, 680px) !important;
  margin-right: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove the IdeasForgeAI label/tag above assistant message */
.chat-view .assistant-card::before {
  display: none !important;
  content: none !important;
}

/* Keep assistant text clean like ChatGPT */
.chat-view .assistant-card p {
  margin: 0 !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 430 !important;
}

/* Keep assistant message aligned left inside the main chat column */
.chat-view .assistant-message {
  width: min(100%, 800px) !important;
  max-width: 800px !important;
  margin: 0 auto 22px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* More room for the line below composer */
.chat-view {
  grid-template-rows: 76px minmax(0, 1fr) 106px !important;
  padding-bottom: 8px !important;
  overflow: hidden !important;
}

.chat-scroll {
  padding-bottom: 44px !important;
}

/* Composer line below tray */
.chat-view .chat-composer {
  position: relative !important;
  margin: 0 auto 24px !important;
  overflow: visible !important;
}

.chat-view .chat-composer::after {
  content: "IdeasForgeAI can make mistakes. Check important info.";
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 11px) !important;
  display: block !important;
  text-align: center !important;
  color: rgba(255,255,255,.58) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 50 !important;
}

/* Mobile safe spacing */
@media (max-width: 760px) {
  .chat-view {
    grid-template-rows: 72px minmax(0, 1fr) 96px !important;
    padding-bottom: 6px !important;
  }

  .chat-view .assistant-message {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .chat-view .assistant-card p {
    font-size: 15px !important;
  }

  .chat-view .chat-composer::after {
    top: calc(100% + 8px) !important;
    font-size: 11px !important;
  }
}

/* HOME-CHAT-MESSAGE-CLEANUP-END */
/* HOME-MOBILE-CHAT-PASS31-START */

/* Mobile only: 390 x 844 ChatGPT-style chat screen */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    background: #000 !important;
  }

  .app-shell {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .rail,
  .sidebar {
    display: none !important;
  }

  .main-surface {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 72% 22%, rgba(130, 92, 255, 0.10), transparent 18rem),
      #000 !important;
  }

  .top-actions {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 14px !important;
    z-index: 60 !important;
    gap: 8px !important;
  }

  .top-action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .mobile-header {
    display: none !important;
  }

  .chat-view {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 92px !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 14px 10px !important;
    overflow: hidden !important;
  }

  .chat-view[hidden] {
    display: none !important;
  }

  .chat-topbar {
    display: none !important;
  }

  .chat-scroll {
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 92px 0 34px !important;
    scrollbar-width: none !important;
  }

  .chat-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .chat-view .chat-message {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* User message: right side */
  .chat-view .user-message {
    align-self: flex-end !important;
    width: fit-content !important;
    max-width: 78% !important;
    margin: 0 0 20px auto !important;
    padding: 11px 16px !important;
    border-radius: 18px !important;
    color: #fff !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.045)),
      #202126 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: none !important;
  }

  .chat-view .user-message p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  /* Assistant message: left side, no bubble/card background */
  .chat-view .assistant-message {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;
  }

  .chat-view .assistant-message .assistant-mark {
    width: 28px !important;
    height: 28px !important;
    margin-top: 1px !important;
  }

  .chat-view .assistant-message .assistant-mark .if-mark {
    width: 28px !important;
    height: 28px !important;
  }

  .chat-view .assistant-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .chat-view .assistant-card::before {
    display: none !important;
    content: none !important;
  }

  .chat-view .assistant-card p {
    margin: 0 !important;
    color: rgba(255,255,255,.96) !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    font-weight: 430 !important;
  }

  /* Composer fixed visually at bottom, same style as desktop */
  .chat-composer,
  .chat-view .chat-composer,
  .chat-view form.chat-composer.composer {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 auto 22px !important;
    padding: 6px 7px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
    align-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055)),
      #202126 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 18px 44px rgba(0,0,0,.36) !important;
    overflow: visible !important;
    transform: none !important;
  }

  .chat-view .composer-plus {
    width: 42px !important;
    height: 42px !important;
    font-size: 29px !important;
  }

  .chat-view .composer textarea {
    min-height: 26px !important;
    max-height: 84px !important;
    font-size: 15.5px !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,.94) !important;
  }

  .chat-view .composer textarea::placeholder {
    color: rgba(255,255,255,.58) !important;
  }

  .chat-view .composer-mode {
    display: none !important;
  }

  .chat-view .composer-mic {
    width: 34px !important;
    height: 42px !important;
    border-left: 0 !important;
  }

  .chat-view .composer-send {
    width: 44px !important;
    height: 44px !important;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(0,0,0,.14),
      0 0 20px rgba(156,124,255,.22) !important;
  }

  .chat-view .chat-composer::after {
    content: "IdeasForgeAI can make mistakes. Check important info.";
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,.52) !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }

  /* Mobile landing screen */
  .home-view {
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  .home-view[hidden] {
    display: none !important;
  }

  .hero-content {
    width: 100% !important;
    padding-top: 86px !important;
    transform: none !important;
    text-align: center !important;
  }

  .hero-content h1 {
    margin: 0 0 18px !important;
    font-size: clamp(38px, 10vw, 47px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.07em !important;
  }

  .hero-content p {
    max-width: 350px !important;
    margin: 0 auto 46px !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }

  .hero-composer {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    margin-bottom: 18px !important;
  }

  .hero-composer .composer-mode {
    display: none !important;
  }

  .quick-chips {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .quick-chip {
    min-height: 104px !important;
    flex-direction: column !important;
    gap: 9px !important;
    border-radius: 18px !important;
    font-size: 13.5px !important;
  }

  .brand-watermark {
    top: 31% !important;
    right: -92px !important;
    width: 230px !important;
    height: 230px !important;
    opacity: .11 !important;
  }
}

/* HOME-MOBILE-CHAT-PASS31-END */
/* HOME-MOBILE-LANDING-POLISH-PASS32-START */

/* Mobile landing polish only. Desktop and chat remain untouched. */
@media (max-width: 760px) {
  .home-view {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 72% 22%, rgba(132, 96, 255, 0.11), transparent 15rem),
      radial-gradient(circle at 52% 46%, rgba(132, 96, 255, 0.07), transparent 18rem),
      #000 !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding-top: clamp(82px, 12svh, 108px) !important;
    transform: none !important;
    text-align: center !important;
  }

  .hero-content h1 {
    margin: 0 auto 18px !important;
    max-width: 360px !important;
    font-size: clamp(35px, 8.8vw, 41px) !important;
    line-height: 1.05 !important;
    font-weight: 720 !important;
    letter-spacing: -0.058em !important;
    text-wrap: balance !important;
  }

  .hero-content h1 span {
    color: #a98cff !important;
  }

  .hero-content p {
    max-width: 342px !important;
    margin: 0 auto 34px !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 14.5px !important;
    line-height: 1.48 !important;
    font-weight: 430 !important;
    text-wrap: balance !important;
  }

  .top-actions {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 18px !important;
    gap: 8px !important;
  }

  .top-action-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(18,19,24,.72) !important;
    backdrop-filter: blur(18px) !important;
  }

  .hero-composer,
  .home-view .hero-composer {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 auto 16px !important;
    padding: 5px 7px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
    border-radius: 999px !important;
    border-color: rgba(255,255,255,.18) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.058)),
      #202126 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 16px 38px rgba(0,0,0,.34),
      0 0 0 1px rgba(156,124,255,.06) !important;
  }

  .home-view .composer-plus {
    width: 42px !important;
    height: 42px !important;
    font-size: 30px !important;
    background: rgba(255,255,255,.075) !important;
  }

  .home-view .composer textarea {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: rgba(255,255,255,.94) !important;
  }

  .home-view .composer textarea::placeholder {
    color: rgba(255,255,255,.54) !important;
  }

  .home-view .composer-mic {
    width: 32px !important;
    height: 42px !important;
    border-left: 1px solid rgba(255,255,255,.14) !important;
  }

  .home-view .composer-send {
    width: 44px !important;
    height: 44px !important;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(0,0,0,.16),
      0 0 20px rgba(156,124,255,.22) !important;
  }

  .quick-chips {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  .quick-chip {
    min-height: 86px !important;
    padding: 12px 6px !important;
    flex-direction: column !important;
    gap: 9px !important;
    border-radius: 20px !important;
    font-size: 14.5px !important;
    font-weight: 760 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
      #191a1f !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 14px 32px rgba(0,0,0,.28) !important;
  }

  .quick-chip .product-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
  }

  .brand-watermark {
    top: 38% !important;
    right: -104px !important;
    width: 230px !important;
    height: 230px !important;
    opacity: .10 !important;
  }
}

/* HOME-MOBILE-LANDING-POLISH-PASS32-END */
/* HOME-MOBILE-LANDING-SHIFT-DOWN-START */

/* Mobile landing only: shift main content slightly down, keep top icons untouched */
@media (max-width: 760px) {
  .home-view:not([hidden]) .hero-content {
    padding-top: clamp(112px, 15svh, 136px) !important;
  }

  .home-view:not([hidden]) .hero-content h1 {
    margin-bottom: 19px !important;
  }

  .home-view:not([hidden]) .hero-content p {
    margin-bottom: 38px !important;
  }

  .home-view:not([hidden]) .hero-composer {
    margin-bottom: 18px !important;
  }

  .home-view:not([hidden]) .quick-chips {
    margin-top: 2px !important;
  }

  .home-view:not([hidden]) .brand-watermark {
    top: 42% !important;
  }
}

/* HOME-MOBILE-LANDING-SHIFT-DOWN-END */
/* HOME-MOBILE-LANDING-SHIFT-DOWN-MORE-START */

/* Mobile landing only: shift content slightly more down, top icons untouched */
@media (max-width: 760px) {
  .home-view:not([hidden]) .hero-content {
    padding-top: clamp(138px, 17svh, 158px) !important;
  }

  .home-view:not([hidden]) .hero-content h1 {
    margin-bottom: 20px !important;
  }

  .home-view:not([hidden]) .hero-content p {
    margin-bottom: 40px !important;
  }

  .home-view:not([hidden]) .hero-composer {
    margin-bottom: 20px !important;
  }

  .home-view:not([hidden]) .quick-chips {
    margin-top: 4px !important;
  }

  .home-view:not([hidden]) .brand-watermark {
    top: 45% !important;
  }
}

/* HOME-MOBILE-LANDING-SHIFT-DOWN-MORE-END */
/* HOME-MOBILE-MENU-DRAWER-PASS33-START */

/* Mobile only: ChatGPT-style top menu + slide drawer */
@media (max-width: 760px) {
  .mobile-header {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 14px !important;
    right: 112px !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .mobile-menu {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
      rgba(18,19,24,.72) !important;
    color: #fff !important;
    backdrop-filter: blur(18px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 12px 26px rgba(0,0,0,.22) !important;
  }

  .mobile-menu span {
    display: block !important;
    width: 17px !important;
    height: 1.25px !important;
    margin: 2px 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
  }

  .mobile-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-left: 9px !important;
    min-width: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: -0.045em !important;
    white-space: nowrap !important;
  }

  .mobile-brand .if-mark {
    width: 30px !important;
    height: 30px !important;
  }

  .mobile-brand > span:last-child {
    display: inline-block !important;
  }

  .mobile-brand > span:last-child span {
    color: #a98cff !important;
  }

  .mobile-plus {
    display: none !important;
  }

  .top-actions {
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    z-index: 82 !important;
  }

  /* Mobile drawer uses the existing sidebar, but only when opened */
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 120 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    width: min(86vw, 318px) !important;
    max-width: 318px !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: max(16px, env(safe-area-inset-top)) 7px max(14px, env(safe-area-inset-bottom)) 14px !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
    background:
      linear-gradient(180deg, rgba(18,19,24,.98), rgba(10,11,15,.98)),
      #0b0c10 !important;
    box-shadow: 28px 0 70px rgba(0,0,0,.52) !important;
    transform: translateX(-104%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      transform 260ms cubic-bezier(.2,.82,.2,1),
      opacity 180ms ease !important;
    overflow: hidden !important;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-sidebar-open .mobile-drawer-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 110 !important;
    background: rgba(0,0,0,.48) !important;
    backdrop-filter: blur(5px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease !important;
  }

  body.mobile-sidebar-open {
    overflow: hidden !important;
  }

  body.mobile-sidebar-open .main-surface {
    pointer-events: none !important;
  }

  body.mobile-sidebar-open .sidebar {
    pointer-events: auto !important;
  }

  .sidebar-scroll-panel {
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 92px !important;
  }

  .sidebar-profile {
    min-height: 58px !important;
  }

  /* Keep landing/chat content clear below the mobile header */
  .home-view:not([hidden]) .hero-content {
    padding-top: clamp(144px, 18svh, 164px) !important;
  }

  .chat-scroll {
    padding-top: 104px !important;
  }
}

/* HOME-MOBILE-MENU-DRAWER-PASS33-END */


/* HOME-MOBILE-MENU-POLISH-PASS34-START */
@media (max-width: 760px) {
  .mobile-menu {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      rgba(18,19,24,.78) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 10px 26px rgba(0,0,0,.24) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    cursor: pointer !important;
    transition:
      transform .18s ease,
      background .18s ease,
      border-color .18s ease,
      box-shadow .18s ease !important;
  }

  .mobile-menu:active {
    transform: scale(.97) !important;
  }

  .mobile-menu:hover {
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 12px 30px rgba(0,0,0,.28) !important;
  }

  .mobile-menu-icon {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    gap: 3px !important; /* reduced gap */
    pointer-events: none !important;
  }

  .mobile-menu span,
  .mobile-menu .line {
    display: block !important;
    width: 18px !important;
    height: 1.25px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;
    transform-origin: center !important;
    transition:
      transform .22s ease,
      opacity .22s ease,
      width .22s ease !important;
  }

  body.mobile-sidebar-open .mobile-menu {
    border-color: rgba(169,140,255,.35) !important;
    background:
      linear-gradient(180deg, rgba(169,140,255,.14), rgba(255,255,255,.03)),
      rgba(20,21,28,.88) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 0 1px rgba(169,140,255,.14),
      0 12px 28px rgba(70,40,155,.24) !important;
  }

  body.mobile-sidebar-open .mobile-menu span:nth-child(1),
  body.mobile-sidebar-open .mobile-menu .line:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }

  body.mobile-sidebar-open .mobile-menu span:nth-child(2),
  body.mobile-sidebar-open .mobile-menu .line:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(.6) !important;
  }

  body.mobile-sidebar-open .mobile-menu span:nth-child(3),
  body.mobile-sidebar-open .mobile-menu .line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }
}
/* HOME-MOBILE-MENU-POLISH-PASS34-END */


/* HOME-MOBILE-MENU-ICON-PERFECT-PASS35-START */
@media (max-width: 760px) {
  .mobile-menu {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
      rgba(16,17,22,.84) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.22),
      0 12px 28px rgba(0,0,0,.26) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    cursor: pointer !important;
    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease !important;
  }

  .mobile-menu:active {
    transform: scale(.96) !important;
  }

  .mobile-menu .mobile-menu-icon,
  .mobile-menu .if-menu-lines {
    width: 18px !important;
    height: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    pointer-events: none !important;
  }

  .mobile-menu .if-menu-lines i {
    display: block !important;
    width: 18px !important;
    height: 1.25px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 0 6px rgba(255,255,255,.05) !important;
    transform-origin: center !important;
    transition:
      transform .22s cubic-bezier(.2,.82,.2,1),
      opacity .16s ease,
      width .18s ease,
      background .18s ease !important;
  }

  body.mobile-sidebar-open .mobile-menu {
    border-color: rgba(169,140,255,.42) !important;
    background:
      linear-gradient(180deg, rgba(169,140,255,.18), rgba(255,255,255,.035)),
      rgba(22,22,30,.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 1px rgba(169,140,255,.12),
      0 14px 30px rgba(80,50,170,.26) !important;
  }

  body.mobile-sidebar-open .mobile-menu .if-menu-lines i:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  body.mobile-sidebar-open .mobile-menu .if-menu-lines i:nth-child(2) {
    opacity: 0 !important;
    width: 6px !important;
  }

  body.mobile-sidebar-open .mobile-menu .if-menu-lines i:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }
}
/* HOME-MOBILE-MENU-ICON-PERFECT-PASS35-END */


/* HOME-MOBILE-MENU-ICON-FINAL-PASS36-START */
@media (max-width: 760px) {
  .mobile-menu {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
      rgba(16,17,22,.86) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.24),
      0 12px 28px rgba(0,0,0,.28) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    cursor: pointer !important;
    transition:
      transform .16s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease !important;
  }

  .mobile-menu:active {
    transform: scale(.965) !important;
  }

  /* Hide any previous span/pseudo hamburger systems */
  .mobile-menu span,
  .mobile-menu i,
  .mobile-menu .mobile-menu-icon,
  .mobile-menu .if-menu-lines {
    display: none !important;
  }

  .mobile-menu::before,
  .mobile-menu::after {
    display: none !important;
    content: none !important;
  }

  .mobile-menu .menu-svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    overflow: visible !important;
    color: rgba(255,255,255,.94) !important;
    pointer-events: none !important;
  }

  .mobile-menu .menu-svg path {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    vector-effect: non-scaling-stroke !important;
    transform-box: fill-box !important;
    transform-origin: center !important;
    transition:
      transform .22s cubic-bezier(.2,.82,.2,1),
      opacity .16s ease,
      stroke .18s ease !important;
  }

  body.mobile-sidebar-open .mobile-menu {
    border-color: rgba(169,140,255,.40) !important;
    background:
      linear-gradient(180deg, rgba(169,140,255,.16), rgba(255,255,255,.032)),
      rgba(22,22,30,.92) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 0 1px rgba(169,140,255,.12),
      0 14px 30px rgba(80,50,170,.26) !important;
  }

  body.mobile-sidebar-open .mobile-menu .menu-svg {
    color: #ffffff !important;
  }

  body.mobile-sidebar-open .mobile-menu .menu-line-1 {
    transform: translateY(5px) rotate(45deg) !important;
  }

  body.mobile-sidebar-open .mobile-menu .menu-line-2 {
    opacity: 0 !important;
    transform: scaleX(.35) !important;
  }

  body.mobile-sidebar-open .mobile-menu .menu-line-3 {
    transform: translateY(-5px) rotate(-45deg) !important;
  }
}
/* HOME-MOBILE-MENU-ICON-FINAL-PASS36-END */


/* HOME-COMPOSER-ICONS-CLEAN-LOCK-PASS45-START */

/* Final single source of truth for composer icons */
.composer {
  overflow: visible !important;
}

.composer-plus,
.composer-mic,
.composer-send {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  border: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.composer-plus {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.93) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.18) !important;
}

.composer-plus svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.composer-mic {
  width: 36px !important;
  height: 44px !important;
  min-width: 36px !important;
  border-left: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.94) !important;
}

.composer-mic svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Final polished submit button */
.composer-send {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0 38%, #f7f6ff 66%, #eeeaff 100%) !important;
  color: #07070a !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.72),
    0 7px 17px rgba(0,0,0,.25),
    0 0 16px rgba(165,136,255,.18) !important;
}

.composer-send::before,
.composer-send::after {
  display: none !important;
  content: none !important;
}

/* Kill any old hiding rule and force final icon visible */
.composer-send svg,
.composer-send svg * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.composer-send svg.submit-wave-final-lock {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: #08080b !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  margin: 0 !important;
  transform: translateX(.25px) !important;
}

.composer-plus:active,
.composer-mic:active,
.composer-send:active {
  transform: scale(.965) !important;
}

@media (max-width: 760px) {
  .hero-composer,
  .chat-composer,
  .home-view .hero-composer,
  .chat-view .chat-composer {
    height: 56px !important;
    min-height: 56px !important;
    padding: 5px 6px !important;
    gap: 6px !important;
    grid-template-columns: 42px minmax(0, 1fr) 36px 44px !important;
  }

  .home-view .composer textarea,
  .chat-view .composer textarea {
    min-width: 0 !important;
    padding-right: 2px !important;
  }
}

/* HOME-COMPOSER-ICONS-CLEAN-LOCK-PASS45-END */


/* HOME-SUBMIT-WAVE-CENTER-FINAL-PASS46-START */

/* Final submit icon micro-polish: larger centered waveform */
.composer-send {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.composer-send svg.submit-wave-final-lock,
.composer-send svg.submit-wave-center-final {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  transform: translateX(0px) translateY(0px) !important;
  color: #08080b !important;
  fill: none !important;
  stroke: #08080b !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.composer-send svg.submit-wave-final-lock path,
.composer-send svg.submit-wave-center-final path {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  stroke: #08080b !important;
  fill: none !important;
}

@media (max-width: 760px) {
  .composer-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .composer-send svg.submit-wave-final-lock,
  .composer-send svg.submit-wave-center-final {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.75 !important;
  }
}

/* HOME-SUBMIT-WAVE-CENTER-FINAL-PASS46-END */


/* HOME-SUBMIT-WAVE-EXACT-CENTER-PASS47-START */

/* Final submit waveform: larger, thin, sleek, exact center */
.composer-send {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
}

.composer-send svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.composer-send svg.submit-wave-exact-center {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  color: #07070a !important;
  fill: none !important;
  stroke: #07070a !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}

.composer-send svg.submit-wave-exact-center path {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: #07070a !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 760px) {
  .composer-send {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .composer-send svg.submit-wave-exact-center {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.15 !important;
  }
}

/* HOME-SUBMIT-WAVE-EXACT-CENTER-PASS47-END */


/* CHAT-SCROLL-FADE-ONLY-START */

/* Hide chat side scrollbar without changing scroll behavior */
.chat-view,
.chat-view *,
.if-original-live-thread,
.if-live-chat-thread,
.chat-messages,
.messages,
.conversation,
.thread {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.chat-view::-webkit-scrollbar,
.chat-view *::-webkit-scrollbar,
.if-original-live-thread::-webkit-scrollbar,
.if-live-chat-thread::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.conversation::-webkit-scrollbar,
.thread::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Soft bottom fade so text disappears smoothly above composer */
.chat-view::after {
  content: "" !important;
  position: fixed !important;
  left: 72px !important;
  right: 0 !important;
  bottom: 92px !important;
  height: 110px !important;
  z-index: 78 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to bottom,
    rgba(4, 4, 7, 0) 0%,
    rgba(4, 4, 7, 0.18) 28%,
    rgba(4, 4, 7, 0.48) 58%,
    rgba(4, 4, 7, 0.82) 84%,
    rgba(4, 4, 7, 0.96) 100%
  ) !important;
}

/* Keep composer above fade */
.chat-composer,
.composer,
.hero-composer {
  position: relative !important;
  z-index: 95 !important;
}

@media (max-width: 760px) {
  .chat-view::after {
    left: 0 !important;
    bottom: 92px !important;
    height: 84px !important;
  }
}

/* CHAT-SCROLL-FADE-ONLY-END */


/* MOBILE-CHAT-1-FIXED-COMPOSER-SCROLL-START */

@media (max-width: 760px) {

  /* Stop full-page movement on mobile chat */
  html.if-original-chat-live,
  body.if-original-chat-live {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #050507 !important;
    background-image: none !important;
    position: fixed !important;
    inset: 0 !important;
  }

  body.if-original-chat-live {
    touch-action: none !important;
  }

  /* Chat view becomes the fixed screen */
  body.if-original-chat-live .chat-view {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 74% 28%, rgba(116, 82, 255, .14), transparent 34%),
      linear-gradient(180deg, #07070a 0%, #040406 48%, #020203 100%) !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  /* Header fixed, never scrolls */
  body.if-original-chat-live .home-topbar,
  body.if-original-chat-live .topbar,
  body.if-original-chat-live header {
    position: fixed !important;
    top: env(safe-area-inset-top) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 120 !important;
    transform: none !important;
  }

  /* Only message thread scrolls */
  body.if-original-chat-live .if-original-live-thread,
  body.if-original-chat-live .if-live-chat-thread,
  body.if-original-chat-live .chat-messages,
  body.if-original-chat-live .messages,
  body.if-original-chat-live .conversation,
  body.if-original-chat-live .thread {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(env(safe-area-inset-top) + 96px) !important;
    bottom: calc(env(safe-area-inset-bottom) + 132px) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    padding: 12px 18px 34px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.if-original-chat-live .if-original-live-thread::-webkit-scrollbar,
  body.if-original-chat-live .if-live-chat-thread::-webkit-scrollbar,
  body.if-original-chat-live .chat-messages::-webkit-scrollbar,
  body.if-original-chat-live .messages::-webkit-scrollbar,
  body.if-original-chat-live .conversation::-webkit-scrollbar,
  body.if-original-chat-live .thread::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Message rows fit mobile width */
  body.if-original-chat-live .if-original-msg-row,
  body.if-original-chat-live .if-live-msg-row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    box-sizing: border-box !important;
  }

  body.if-original-chat-live .if-original-msg-row.is-user,
  body.if-original-chat-live .if-live-msg-row.is-user {
    justify-content: flex-end !important;
  }

  body.if-original-chat-live .if-original-msg-row.is-assistant,
  body.if-original-chat-live .if-live-msg-row.is-assistant {
    justify-content: flex-start !important;
  }

  body.if-original-chat-live .if-original-msg-row.is-user .if-original-msg,
  body.if-original-chat-live .if-live-msg-row.is-user .if-live-msg {
    max-width: 84vw !important;
    padding: 12px 16px !important;
    border-radius: 22px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  body.if-original-chat-live .if-original-msg-row.is-assistant .if-original-msg,
  body.if-original-chat-live .if-live-msg-row.is-assistant .if-live-msg {
    max-width: 92vw !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Composer fixed at bottom */
  body.if-original-chat-live .chat-composer,
  body.if-original-chat-live .composer-wrap,
  body.if-original-chat-live .home-composer,
  body.if-original-chat-live .hero-composer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom) + 18px) !important;
    z-index: 160 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 18px !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.if-original-chat-live .composer {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 42px 58px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(72,75,82,.96), rgba(52,55,63,.96)) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      inset 0 -1px 0 rgba(0,0,0,.20),
      0 16px 46px rgba(0,0,0,.42) !important;
  }

  body.if-original-chat-live .composer textarea {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 96px !important;
    overflow-y: auto !important;
    font-size: 18px !important;
    line-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.if-original-chat-live .composer textarea::placeholder {
    color: rgba(255,255,255,.55) !important;
  }

  body.if-original-chat-live .composer-plus {
    width: 48px !important;
    height: 48px !important;
  }

  body.if-original-chat-live .composer-mic {
    width: 42px !important;
    height: 48px !important;
  }

  body.if-original-chat-live .composer-send {
    width: 58px !important;
    height: 58px !important;
  }

  /* Fade above fixed composer */
  body.if-original-chat-live .chat-view::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(env(safe-area-inset-bottom) + 92px) !important;
    height: 92px !important;
    z-index: 130 !important;
    pointer-events: none !important;
    background: linear-gradient(
      to bottom,
      rgba(3,3,5,0) 0%,
      rgba(3,3,5,.22) 28%,
      rgba(3,3,5,.58) 62%,
      rgba(3,3,5,.92) 100%
    ) !important;
  }

  /* Hide desktop browser-style side rail width issue on mobile if present */
  body.if-original-chat-live .rail,
  body.if-original-chat-live .side-rail {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 110 !important;
  }
}

/* MOBILE-CHAT-1-FIXED-COMPOSER-SCROLL-END */


/* MOBILE-COMPOSER-LOWEST-SAFE-START */

@media (max-width: 760px) {
  /* Lowest safe Safari position: move full tray down without touching icon/grid */
  body.if-original-chat-live .chat-composer,
  body.if-original-chat-live .composer-wrap,
  body.if-original-chat-live .home-composer,
  body.if-original-chat-live .hero-composer {
    bottom: -10px !important;
    transform: none !important;
  }

  body.if-original-chat-live .composer {
    transform: none !important;
  }

  /* Fade follows lowered tray */
  body.if-original-chat-live .chat-view::after {
    bottom: 58px !important;
  }

  /* Keep message scroll ending above composer */
  body.if-original-chat-live .if-original-live-thread,
  body.if-original-chat-live .if-live-chat-thread,
  body.if-original-chat-live .chat-messages,
  body.if-original-chat-live .messages,
  body.if-original-chat-live .conversation,
  body.if-original-chat-live .thread {
    bottom: 96px !important;
  }
}

/* MOBILE-COMPOSER-LOWEST-SAFE-END */


/* CHAT-THINKING-FORMAT-FINAL-START */

.if-final-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(255,255,255,0.9);
  font-weight: 560;
  letter-spacing: -0.01em;
}

.if-final-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.if-final-dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(168,128,255,0.98);
  animation: ifFinalDotBlink 1.05s infinite ease-in-out;
}

.if-final-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.if-final-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

.if-final-time {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 520;
}

@keyframes ifFinalDotBlink {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: translateY(0) scale(0.82);
  }

  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

.if-final-p {
  margin: 0 0 12px;
  line-height: 1.55;
}

.if-final-heading {
  margin: 18px 0 10px;
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.if-final-list {
  margin: 10px 0 16px 22px;
  padding: 0;
}

.if-final-list li {
  margin: 7px 0;
  padding-left: 4px;
  line-height: 1.5;
}

.if-final-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 14px 0 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}

.if-final-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.if-final-table th,
.if-final-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.if-final-table th {
  font-weight: 760;
  color: rgba(255,255,255,0.96);
  background: rgba(255,255,255,0.06);
}

.if-final-table td {
  color: rgba(255,255,255,0.88);
}

.if-final-table tr:last-child td {
  border-bottom: 0;
}

/* CHAT-THINKING-FORMAT-FINAL-END */


/* CHAT-FORMAT-PHASE2C-CLEANUP-START */

.if-original-msg,
.if-live-msg,
.message.assistant,
[data-role='assistant'] {
  counter-reset: ifPhase2cStep;
}

.if-phase2c-answer,
.if-original-msg,
.if-live-msg {
  font-size: 16px;
  line-height: 1.52;
}

.if-phase2c-p,
.if-final-p,
.if-rich-p {
  margin: 0 0 10px !important;
  line-height: 1.52 !important;
}

.if-phase2c-heading,
.if-final-heading,
.if-rich-heading {
  margin: 16px 0 8px !important;
  font-size: 19px !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.24 !important;
}

ol.if-phase2c-list,
ol.if-final-list,
ol.if-rich-list {
  list-style: none !important;
  margin: 8px 0 14px 0 !important;
  padding: 0 !important;
}

ol.if-phase2c-list > li,
ol.if-final-list > li,
ol.if-rich-list > li {
  counter-increment: ifPhase2cStep;
  position: relative;
  margin: 7px 0 10px !important;
  padding-left: 30px !important;
  line-height: 1.48 !important;
}

ol.if-phase2c-list > li::before,
ol.if-final-list > li::before,
ol.if-rich-list > li::before {
  content: counter(ifPhase2cStep) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  color: rgba(255,255,255,0.92);
  font-weight: 760;
}

ul.if-phase2c-list,
ul.if-final-list,
ul.if-rich-list {
  list-style: none !important;
  margin: 8px 0 14px 0 !important;
  padding: 0 !important;
}

ul.if-phase2c-list > li,
ul.if-final-list > li,
ul.if-rich-list > li {
  position: relative;
  margin: 7px 0 10px !important;
  padding-left: 24px !important;
  line-height: 1.48 !important;
}

ul.if-phase2c-list > li::before,
ul.if-final-list > li::before,
ul.if-rich-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(168,128,255,0.9);
}

.if-phase2c-table-wrap,
.if-final-table-wrap,
.if-rich-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 12px 0 16px !important;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}

.if-phase2c-table,
.if-final-table,
.if-rich-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.42;
}

.if-phase2c-table th,
.if-phase2c-table td,
.if-final-table th,
.if-final-table td,
.if-rich-table th,
.if-rich-table td {
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.if-phase2c-table th,
.if-final-table th,
.if-rich-table th {
  font-weight: 760;
  color: rgba(255,255,255,0.96);
  background: rgba(255,255,255,0.06);
}

.if-phase2c-table td,
.if-final-table td,
.if-rich-table td {
  color: rgba(255,255,255,0.88);
}

.if-phase2c-thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: rgba(255,255,255,0.9);
  font-weight: 560;
  letter-spacing: -0.01em;
}

.if-phase2c-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.if-phase2c-dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(168,128,255,0.98);
  animation: ifPhase2cDotBlink 1.05s infinite ease-in-out;
}

.if-phase2c-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.if-phase2c-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

.if-phase2c-time {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 520;
}

@keyframes ifPhase2cDotBlink {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: translateY(0) scale(0.82);
  }

  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@media (max-width: 760px) {
  .if-phase2c-answer,
  .if-original-msg,
  .if-live-msg {
    font-size: 17px;
    line-height: 1.5;
  }

  .if-phase2c-table,
  .if-final-table,
  .if-rich-table {
    min-width: 620px;
    font-size: 14px;
  }
}

/* CHAT-FORMAT-PHASE2C-CLEANUP-END */


/* CHAT-ONLY-FINAL-POLISH-START */

@media (max-width: 760px) {
  /*
    CHAT MODE ONLY.
    Landing page / hero composer remains untouched.
  */

  body.if-original-chat-live .composer.hero-composer {
    display: none !important;
  }

  body.if-original-chat-live form.composer.chat-composer,
  body.if-original-chat-live .composer.chat-composer {
    position: fixed !important;

    left: 22px !important;
    right: auto !important;
    width: calc(100vw - 44px) !important;
    max-width: calc(100vw - 44px) !important;

    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px) !important;

    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    padding: 6px 8px !important;
    border-radius: 999px !important;

    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 40px 48px !important;
    gap: 6px !important;
    align-items: center !important;

    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 999 !important;

    background: linear-gradient(180deg, rgba(78,80,88,0.64), rgba(58,60,68,0.57)) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,0.30),
      inset 0 0 0 1px rgba(255,255,255,0.12) !important;

    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-mode {
    display: none !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-plus {
    width: 46px !important;
    height: 52px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-plus svg.if-chat-plus-final {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
  }

  body.if-original-chat-live .composer.chat-composer textarea,
  body.if-original-chat-live .composer.chat-composer input,
  body.if-original-chat-live .composer.chat-composer .composer-input {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    line-height: 52px !important;
    padding: 0 4px !important;
    margin: 0 !important;

    font-size: 18px !important;
    align-self: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-mic {
    width: 40px !important;
    height: 52px !important;
    min-width: 40px !important;
    max-width: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-mic svg.if-chat-mic-final {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-send {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;

    display: grid !important;
    place-items: center !important;

    overflow: hidden !important;
    transform: none !important;
    color: #050507 !important;

    box-shadow: 0 7px 18px rgba(180,170,255,0.14) !important;
  }

  body.if-original-chat-live .composer.chat-composer .composer-send svg.if-chat-send-final {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    margin: 0 !important;
    transform: translateX(1px) translateY(0) !important;
  }

  body.if-original-chat-live {
    padding-bottom: 78px !important;
  }
}

/* CHAT-ONLY-FINAL-POLISH-END */


/* TOP-LEFT-DOWN-10PX-START */
@media (max-width: 760px) {
  body.if-original-chat-live button[aria-label="Menu"],
  body.if-original-chat-live .menu-button,
  body.if-original-chat-live .mobile-menu-button,
  body.if-original-chat-live .hamburger,
  body.if-original-chat-live .sidebar-toggle {
    transform: translateY(10px) !important;
  }

  body.if-original-chat-live .brand,
  body.if-original-chat-live .brand-wrap,
  body.if-original-chat-live .logo-wrap,
  body.if-original-chat-live .home-brand,
  body.if-original-chat-live .mobile-brand {
    transform: translateY(10px) !important;
    display: flex !important;
    align-items: center !important;
  }
}
/* TOP-LEFT-DOWN-10PX-END */


/* MENU-DOWN-10PX-ONLY-START */
@media (max-width: 760px) {
  body.if-original-chat-live button[aria-label="Menu"],
  body.if-original-chat-live .menu-button,
  body.if-original-chat-live .mobile-menu-button,
  body.if-original-chat-live .hamburger,
  body.if-original-chat-live .sidebar-toggle {
    transform: translateY(10px) !important;
  }
}
/* MENU-DOWN-10PX-ONLY-END */


/* MENU-DOWN-5PX-MORE-START */
@media (max-width: 760px) {
  body.if-original-chat-live button[aria-label="Menu"],
  body.if-original-chat-live .menu-button,
  body.if-original-chat-live .mobile-menu-button,
  body.if-original-chat-live .hamburger,
  body.if-original-chat-live .sidebar-toggle {
    transform: translateY(15px) !important;
  }
}
/* MENU-DOWN-5PX-MORE-END */