* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
}

body {
  overflow: hidden;
  font-size: 14px;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  display: flex;
  width: 100%;
  height: 100dvh;
  min-height: 560px;
  padding: 12px;
  gap: 12px;
  background:
    radial-gradient(ellipse at 78% 13%, rgb(184 177 255 / 25%), transparent 31%),
    radial-gradient(ellipse at 63% 90%, rgb(158 223 255 / 30%), transparent 30%),
    var(--color-bg);
}

.sidebar {
  z-index: 30;
  display: flex;
  flex: 0 0 275px;
  flex-direction: column;
  min-width: 0;
  padding: 27px 15px 14px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--radius-large);
  background: var(--color-sidebar);
  box-shadow: 0 12px 38px rgb(50 103 148 / 8%);
}

.brand-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 7px;
  margin-bottom: 27px;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 13px;
  background: var(--color-surface-raised);
  box-shadow: 0 5px 14px rgb(22 119 255 / 12%);
}

.brand-mark span {
  width: 4px;
  border-radius: 5px;
  background: var(--color-primary);
}

.brand-mark span:nth-child(1) {
  height: 12px;
  opacity: .55;
}

.brand-mark span:nth-child(2) {
  height: 20px;
}

.brand-mark span:nth-child(3) {
  height: 15px;
  opacity: .72;
}

.brand-name {
  display: block;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.8px;
  text-decoration: none;
}

.brand-tagline {
  margin: 2px 0 0;
  color: var(--color-muted);
  font-size: 10px;
  letter-spacing: .1px;
}

.new-chat-button,
.account-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--radius-small);
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.new-chat-button {
  gap: 10px;
  font-weight: 650;
}

.new-chat-button:hover,
.account-button:hover {
  transform: translateY(-1px);
  background: var(--color-surface);
  box-shadow: 0 6px 18px rgb(16 32 48 / 7%);
}

.new-chat-icon {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: var(--color-user);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 400;
}

.history-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 10px 8px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.history-count {
  display: grid;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  place-items: center;
  border-radius: 99px;
  background: rgb(255 255 255 / 52%);
  color: var(--color-muted);
  font-size: 10px;
  letter-spacing: 0;
}

.history-list {
  flex: 1;
  overflow: auto;
  padding: 0 1px 8px;
  scrollbar-color: rgb(82 101 121 / 25%) transparent;
  scrollbar-width: thin;
}

.history-empty {
  padding: 10px 9px;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.6;
}

.history-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 39px;
  gap: 9px;
  padding: 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background .15s ease;
}

.history-item:hover,
.history-item.active {
  background: rgb(255 255 255 / 43%);
}

.history-item-icon {
  color: var(--color-muted);
  font-size: 14px;
}

.history-item-title {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-bottom {
  padding-top: 11px;
}

.sidebar-tip {
  display: flex;
  gap: 9px;
  padding: 11px 11px 13px;
  margin-bottom: 11px;
  border: 1px solid rgb(255 255 255 / 44%);
  border-radius: 12px;
  background: rgb(255 255 255 / 20%);
}

.tip-sparkle {
  color: var(--color-primary);
  font-size: 16px;
}

.sidebar-tip p {
  margin: 0;
  color: var(--color-muted);
  font-size: 10px;
  line-height: 1.55;
}

.account-button {
  gap: 9px;
  min-height: 48px;
  text-align: left;
}

.account-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  background: var(--color-user);
  color: var(--color-primary);
  font-size: 16px;
}

.account-label {
  flex: 1;
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-arrow {
  color: var(--color-muted);
}

.main-panel {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--radius-large);
  background: rgb(234 245 255 / 72%);
  box-shadow: 0 12px 38px rgb(50 103 148 / 7%);
}

.topbar {
  z-index: 2;
  display: flex;
  height: 61px;
  flex: 0 0 61px;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  border-bottom: 1px solid rgb(82 101 121 / 8%);
  background: rgb(220 238 255 / 73%);
  backdrop-filter: blur(18px);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 65%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot,
.local-badge span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgb(22 119 255 / 10%);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.secure-icon {
  margin-right: 4px;
  color: var(--color-primary);
}

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.icon-button:hover {
  background: rgb(255 255 255 / 60%);
}

.menu-toggle,
.sidebar-close {
  display: none;
}

.chat-scroll {
  position: relative;
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
  background:
    radial-gradient(ellipse at 21% 10%, rgb(255 157 206 / 11%), transparent 25%),
    radial-gradient(ellipse at 82% 47%, rgb(169 239 194 / 12%), transparent 27%),
    radial-gradient(ellipse at 44% 98%, rgb(184 177 255 / 12%), transparent 25%),
    var(--color-surface);
}

.chat-content {
  width: min(900px, 100%);
  min-height: 100%;
  padding: 26px 30px 36px;
  margin: 0 auto;
}

.welcome {
  position: relative;
  display: flex;
  min-height: min(590px, 70vh);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 15px 28px;
  text-align: center;
}

.welcome-orbit {
  position: absolute;
  z-index: 0;
  width: 245px;
  height: 245px;
  border: 1px solid rgb(22 119 255 / 8%);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  transform: scaleX(1.25) rotate(26deg);
}

.orbit-two {
  transform: scaleX(1.25) rotate(-26deg);
}

.welcome-icon {
  z-index: 1;
  display: grid;
  width: 61px;
  height: 61px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 21px;
  background: linear-gradient(145deg, var(--color-surface-raised), var(--color-user));
  box-shadow: 0 12px 35px rgb(22 119 255 / 15%);
  transform: rotate(-7deg);
}

.welcome-spark {
  color: var(--color-primary);
  font-size: 29px;
  transform: rotate(7deg);
}

.eyebrow,
.modal-kicker {
  z-index: 1;
  margin: 0 0 10px;
  color: var(--color-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.welcome h1 {
  z-index: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(31px, 4vw, 43px);
  font-weight: 750;
  letter-spacing: -2px;
  line-height: 1.13;
}

.welcome-copy {
  z-index: 1;
  margin: 12px 0 25px;
  color: var(--color-muted);
  font-size: 13px;
}

.suggestion-grid {
  z-index: 1;
  display: grid;
  width: min(620px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.suggestion-card {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgb(82 101 121 / 10%);
  border-radius: 13px;
  background: rgb(247 251 255 / 82%);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.suggestion-card:hover {
  transform: translateY(-3px);
  border-color: rgb(22 119 255 / 25%);
  box-shadow: 0 10px 24px rgb(22 119 255 / 9%);
}

.suggestion-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border-radius: 10px;
  color: var(--color-primary);
  font-size: 18px;
}

.science-icon {
  background: var(--color-user);
}

.idea-icon {
  background: var(--color-source);
}

.math-icon {
  background: var(--color-edit);
}

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

.suggestion-card strong {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.suggestion-card small {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 9px;
  line-height: 1.35;
}

.suggestion-arrow {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 12px;
}

.welcome-footnote {
  z-index: 1;
  margin: 20px 0 0;
  color: var(--color-muted);
  font-size: 10px;
}

.welcome-footnote span {
  margin-right: 4px;
  color: var(--color-primary);
  font-size: 15px;
}

.composer-wrap {
  z-index: 3;
  padding: 9px clamp(18px, 5vw, 68px) 13px;
  background: linear-gradient(0deg, var(--color-bg) 65%, rgb(220 238 255 / 0%));
}

.composer-card {
  width: min(790px, 100%);
  padding: 0 10px 8px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 18px;
  background: rgb(221 238 255 / 92%);
  box-shadow: 0 10px 35px rgb(48 103 151 / 11%), 0 2px 6px rgb(48 103 151 / 5%);
  backdrop-filter: blur(18px);
}

.rainbow-line {
  display: flex;
  height: 3px;
  gap: 0;
  margin: 0 -10px 8px;
  overflow: hidden;
  border-radius: 0 0 3px 3px;
}

.rainbow-line span {
  flex: 1;
  animation: rainbow-wave 2.8s ease-in-out infinite alternate;
}

.rainbow-line span:nth-child(1) {
  background: var(--color-rainbow-1);
}

.rainbow-line span:nth-child(2) {
  background: var(--color-rainbow-2);
  animation-delay: -.35s;
}

.rainbow-line span:nth-child(3) {
  background: var(--color-rainbow-3);
  animation-delay: -.7s;
}

.rainbow-line span:nth-child(4) {
  background: var(--color-rainbow-4);
  animation-delay: -1.05s;
}

.rainbow-line span:nth-child(5) {
  background: var(--color-rainbow-5);
  animation-delay: -1.4s;
}

.rainbow-line span:nth-child(6) {
  background: var(--color-rainbow-6);
  animation-delay: -1.75s;
}

.rainbow-line span:nth-child(7) {
  background: var(--color-rainbow-7);
  animation-delay: -2.1s;
}

@keyframes rainbow-wave {
  from {
    opacity: .55;
  }

  to {
    opacity: 1;
  }
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
}

.attach-button,
.send-button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.attach-button {
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: 23px;
  font-weight: 350;
}

.attach-button:hover {
  background: var(--color-source);
  transform: rotate(90deg);
}

.send-button {
  background: var(--color-primary);
  box-shadow: 0 5px 13px rgb(22 119 255 / 22%);
  color: var(--color-primary-contrast);
  font-size: 25px;
  font-weight: 500;
}

.send-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}

.send-button:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
}

#messageInput {
  width: 100%;
  min-height: 42px;
  max-height: 145px;
  padding: 12px 4px 10px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.5;
}

#messageInput::placeholder {
  color: var(--color-muted);
  opacity: .8;
}

.composer-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 3px 0 50px;
  color: var(--color-muted);
  font-size: 9px;
}

.composer-caption i {
  padding: 0 3px;
  font-style: normal;
}

.local-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.local-badge span {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  background: var(--color-success);
  box-shadow: none;
}

.disclaimer-caption {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 9px;
  text-align: center;
}

.message-row {
  display: flex;
  width: 100%;
  margin: 11px 0 20px;
  animation: message-in .25s ease both;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-row {
  justify-content: flex-end;
}

.assistant-row {
  justify-content: flex-start;
}

.user-bubble {
  max-width: min(76%, 660px);
  padding: 13px 14px 9px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 17px 17px 5px 17px;
  background: var(--color-user);
  box-shadow: 0 5px 15px rgb(36 91 135 / 5%);
}

.message-text {
  margin: 0;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 7px;
}

.small-action {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: var(--color-edit);
  color: var(--color-text);
  cursor: pointer;
  font-size: 10px;
  transition: background .15s ease;
}

.small-action:hover {
  background: var(--color-edit-hover);
}

.assistant-card {
  width: min(100%, 740px);
}

.assistant-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px 7px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 750;
}

.assistant-avatar {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 13px;
}

.answer-box {
  padding: 15px 16px 11px;
  border: 1px solid rgb(82 101 121 / 8%);
  border-radius: 5px 17px 17px 17px;
  background: var(--color-assistant);
  box-shadow: 0 5px 18px rgb(36 91 135 / 5%);
}

.answer-box .message-text {
  font-size: 13px;
}

.answer-actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 11px;
}

.copy-action {
  background: var(--color-source);
}

.copy-action:hover {
  background: var(--color-source-hover);
}

.sources-section {
  padding: 14px 0 0 2px;
}

.sources-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 750;
}

.source-card {
  display: flex;
  min-height: 61px;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin: 6px 0;
  border: 1px solid rgb(82 101 121 / 8%);
  border-radius: 12px;
  background: var(--color-source);
  color: var(--color-text);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.source-card:hover {
  transform: translateX(2px);
  background: var(--color-source-hover);
}

.source-number {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 9px;
  background: rgb(255 255 255 / 55%);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
}

.source-details {
  min-width: 0;
  flex: 1;
}

.source-title {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-domain {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-external {
  color: var(--color-muted);
  font-size: 13px;
}

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 10px;
  color: var(--color-muted);
  font-size: 11px;
}

.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dot-bounce .75s infinite alternate;
}

.loading-dots span:nth-child(2) {
  animation-delay: .2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes dot-bounce {
  to {
    opacity: .35;
    transform: translateY(-4px);
  }
}

.image-message {
  max-width: min(76%, 430px);
  padding: 9px;
  border-radius: 16px 16px 5px 16px;
  background: var(--color-user);
}

.image-message img {
  display: block;
  max-width: 100%;
  max-height: 330px;
  border-radius: 10px;
  object-fit: contain;
}

.image-filename {
  padding: 8px 4px 1px;
  color: var(--color-text);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.attached-preview:not(:empty) {
  padding: 9px 0 2px 51px;
}

.preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 9px;
  background: var(--color-user);
  font-size: 10px;
}

.preview-chip img {
  width: 29px;
  height: 29px;
  border-radius: 6px;
  object-fit: cover;
}

.preview-remove {
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-raised);
  cursor: pointer;
}

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--color-overlay);
  backdrop-filter: blur(7px);
  animation: backdrop-in .2s ease both;
}

.modal-backdrop.hidden {
  display: none;
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal-card {
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  padding: 31px 34px 26px;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: var(--radius-large);
  background: var(--color-surface-raised);
  box-shadow: 0 25px 80px rgb(16 32 48 / 22%);
  text-align: center;
  animation: modal-in .25s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(11px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-symbol {
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  margin: 0 auto 15px;
  border: 1px solid rgb(255 255 255 / 90%);
  border-radius: 16px;
  background: var(--color-user);
  box-shadow: 0 7px 20px rgb(22 119 255 / 10%);
  color: var(--color-primary);
  font-size: 23px;
}

.modal-kicker {
  margin-bottom: 7px;
  font-size: 8px;
}

.modal-card h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -.7px;
}

.notice-copy,
.modal-description {
  margin: 12px auto 19px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.75;
}

.primary-button {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 0;
  border-radius: 11px;
  background: var(--color-primary);
  box-shadow: 0 7px 15px rgb(22 119 255 / 18%);
  color: var(--color-primary-contrast);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}

.primary-button:hover {
  transform: translateY(-1px);
  background: var(--color-primary-hover);
}

.notice-ok {
  width: 100%;
}

.modal-footnote {
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 9px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 21px;
}

.modal-close:hover {
  background: var(--color-bg);
}

.image-modal-card {
  width: min(100%, 410px);
  padding-top: 37px;
}

.image-symbol {
  font-size: 25px;
}

.upload-dropzone {
  display: flex;
  min-height: 132px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--color-edit);
  border-radius: 15px;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.upload-dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-source);
}

.upload-icon {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  margin-bottom: 2px;
  border-radius: 11px;
  background: var(--color-user);
  color: var(--color-primary);
  font-size: 19px;
}

.upload-dropzone strong {
  font-size: 11px;
}

.upload-dropzone>span:last-child {
  color: var(--color-muted);
  font-size: 9px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.text-button {
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
}

.text-button:hover {
  text-decoration: underline;
}

.image-modal-card>.text-button {
  margin-top: 11px;
}

.account-modal-card {
  width: min(100%, 410px);
  padding: 28px 32px 24px;
}

.account-modal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 800;
}

.mini-mark {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  border-radius: 9px;
}

.mini-mark span:nth-child(1) {
  height: 9px;
}

.mini-mark span:nth-child(2) {
  height: 15px;
}

.mini-mark span:nth-child(3) {
  height: 11px;
}

.account-modal-card .modal-description {
  margin-top: 7px;
  margin-bottom: 16px;
  font-size: 10px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: var(--color-user);
}

.auth-tab {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}

.auth-tab.active {
  background: var(--color-primary);
  box-shadow: 0 3px 8px rgb(22 119 255 / 18%);
  color: var(--color-primary-contrast);
}

#authForm {
  text-align: left;
}

.field-label {
  display: block;
  margin: 11px 0 6px;
  font-size: 10px;
  font-weight: 650;
}

.auth-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  outline: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(22 119 255 / 10%);
}

.auth-input::placeholder {
  color: var(--color-muted);
  opacity: .65;
}

.auth-status {
  min-height: 17px;
  margin: 7px 0 2px;
  color: var(--color-error);
  font-size: 9px;
  line-height: 1.5;
}

.auth-status.success {
  color: var(--color-success);
}

.auth-submit {
  width: 100%;
  min-height: 42px;
}

.auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
}

.auth-actions .text-button {
  padding: 9px 2px;
  font-size: 9px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 9px 0 12px;
  color: var(--color-muted);
  font-size: 8px;
  font-weight: 650;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--color-border);
  content: '';
}

.google-button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--color-google-border);
  border-radius: 9px;
  background: var(--color-primary-contrast);
  color: var(--color-google-text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
}

.google-button:hover {
  background: var(--color-google-hover);
}

.google-g {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 800;
}

.auth-note {
  margin: 11px 0 0;
  color: var(--color-muted);
  font-size: 8px;
  line-height: 1.55;
}

.toast {
  position: fixed;
  z-index: 150;
  right: 22px;
  bottom: 22px;
  max-width: min(360px, calc(100vw - 34px));
  padding: 11px 15px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 11px;
  background: var(--color-text);
  box-shadow: 0 8px 25px rgb(16 32 48 / 20%);
  color: var(--color-primary-contrast);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.mobile-scrim {
  display: none;
}

@media (max-width: 850px) {
  .app-shell {
    padding: 8px;
    gap: 8px;
  }

  .sidebar {
    flex-basis: 240px;
  }

  .chat-content {
    padding-right: 22px;
    padding-left: 22px;
  }

  .suggestion-card {
    gap: 7px;
    padding: 8px;
  }
}

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

  .app-shell {
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  .main-panel {
    border: 0;
    border-radius: 0;
  }

  .sidebar {
    position: fixed;
    inset: 8px auto 8px 8px;
    width: min(300px, calc(100vw - 60px));
    height: auto;
    padding-top: 24px;
    border-radius: var(--radius-large);
    box-shadow: 0 18px 60px rgb(16 32 48 / 18%);
    transform: translateX(calc(-100% - 18px));
    transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .mobile-scrim.visible {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: block;
    background: var(--color-overlay);
  }

  .sidebar-close,
  .menu-toggle {
    display: grid;
  }

  .sidebar-close {
    margin-left: auto;
    color: var(--color-muted);
    font-size: 22px;
  }

  .topbar {
    height: 55px;
    flex-basis: 55px;
    padding: 0 12px;
  }

  .topbar-title {
    flex: 1;
    max-width: none;
    margin-left: 4px;
  }

  .topbar-right {
    display: none;
  }

  .chat-content {
    padding: 15px 15px 25px;
  }

  .welcome {
    min-height: 100%;
    min-height: calc(100dvh - 210px);
    padding: 25px 3px 18px;
  }

  .welcome-icon {
    width: 53px;
    height: 53px;
    margin-bottom: 14px;
  }

  .welcome h1 {
    font-size: clamp(29px, 8vw, 38px);
  }

  .welcome-copy {
    max-width: 280px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.6;
  }

  .suggestion-grid {
    width: min(360px, 100%);
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .suggestion-card {
    min-height: 55px;
    padding: 8px 10px;
  }

  .suggestion-card strong {
    font-size: 10px;
  }

  .suggestion-card small {
    font-size: 9px;
  }

  .suggestion-icon {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .welcome-footnote {
    margin-top: 14px;
  }

  .composer-wrap {
    padding: 6px 11px max(9px, env(safe-area-inset-bottom));
  }

  .composer-card {
    padding-right: 8px;
    padding-left: 8px;
    border-radius: 15px;
  }

  .composer-caption {
    padding-left: 3px;
    font-size: 8px;
  }

  .disclaimer-caption {
    font-size: 8px;
  }

  .message-row {
    margin: 8px 0 15px;
  }

  .user-bubble,
  .image-message {
    max-width: 90%;
  }

  .assistant-card {
    width: 100%;
  }

  .answer-box {
    padding: 12px;
  }

  .source-card {
    padding: 8px;
  }

  .modal-card {
    padding-right: 24px;
    padding-left: 24px;
    border-radius: 20px;
  }
}

@media (max-width: 370px) {
  .local-badge {
    display: none;
  }

  .composer-caption {
    padding-left: 4px;
  }

  .account-modal-card {
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* Account, legal links, and conversation URL controls */
.legal-links{display:flex;gap:9px;justify-content:center;align-items:center;padding:10px 0;font-size:12px;color:var(--muted,#777)}.legal-links a{text-decoration:none}.legal-links a:hover{text-decoration:underline}.topbar-right{gap:12px}.topbar-right #shareChatButton{white-space:nowrap;font-size:12px;padding:7px 10px;border:1px solid rgba(120,130,160,.25);border-radius:9px}.auth-status{font-size:12px;line-height:1.5;margin:8px 0;overflow-wrap:anywhere}.auth-actions{flex-wrap:wrap}
/* Settings modal additions */
.settings-card{max-height:min(88vh,850px);overflow-y:auto;text-align:left}.settings-section{border-top:1px solid #e6e8ef;padding:18px 0;display:flex;flex-direction:column;gap:10px}.settings-section h3{font-size:16px;font-weight:700}.settings-section a{color:#315ddc;text-decoration:underline}.settings-check{display:flex;align-items:center;gap:10px;font-size:14px}.settings-check input{width:16px;height:16px}.danger-action{color:#c62828!important;align-self:flex-start}.settings-warning{font-size:12px;color:#73778a;line-height:1.5}

/* Source links returned by live search should be easy to spot and open. */
.answer-box .message-text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.answer-box .message-text a:hover { opacity: .82; }
.answer-box .message-text strong { font-weight: 750; }
.answer-box .message-text em { font-style: italic; }
.answer-box .message-text code { padding: 1px 4px; border-radius: 4px; background: rgb(120 130 150 / 12%); }

/* Conversation actions: each history item exposes only the Delete action. */
.history-entry{position:relative;display:flex;align-items:center;gap:2px;margin:2px 0;border-radius:9px}
.history-item{flex:1;width:auto;min-width:0}
.history-item-title{min-width:0;flex:1}
.history-more{display:grid;flex:0 0 29px;width:29px;height:29px;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--color-muted);font-size:22px;line-height:1;cursor:pointer;opacity:.82}
.history-more:hover,.history-more[aria-expanded="true"]{background:var(--color-surface);color:var(--color-text);opacity:1}
.history-context-menu{position:absolute;z-index:45;top:31px;right:2px;min-width:142px;padding:5px;border:1px solid var(--color-border);border-radius:11px;background:var(--color-surface-raised);box-shadow:0 12px 28px rgb(0 0 0 / 18%)}
.history-delete{display:flex;align-items:center;gap:9px;width:100%;min-height:35px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#d92d20;text-align:left;font-size:12px;cursor:pointer}
.history-delete:hover{background:rgb(217 45 32 / 10%)}

/* Account menu opens when a signed-in user clicks their name. */
.account-control{position:relative;width:100%}
.account-menu{position:absolute;z-index:60;left:0;right:0;bottom:calc(100% + 8px);padding:6px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface-raised);box-shadow:0 14px 30px rgb(0 0 0 / 16%)}
.account-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:39px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:var(--color-text);text-align:left;font-size:12px;cursor:pointer}
.account-menu button:hover{background:var(--color-surface)}
.account-menu button[hidden]{display:none}
.account-menu .account-menu-logout{color:#d92d20}
.google-logo{display:block;width:20px;height:20px;flex:0 0 20px;object-fit:contain;border-radius:3px}

/* A full dark palette is applied when a signed-in user selects Dark in Settings. */
html[data-theme="dark"]{
  color-scheme:dark;
  --color-primary:#72A7FF;
  --color-primary-contrast:#0B1020;
  --color-primary-hover:#8AB7FF;
  --color-bg:#0B1020;
  --color-surface:#111A2C;
  --color-surface-raised:#172237;
  --color-sidebar:#10192A;
  --color-text:#EAF0FC;
  --color-muted:#A2B0C8;
  --color-user:#203550;
  --color-assistant:#141E31;
  --color-source:#1B2A42;
  --color-source-hover:#263954;
  --color-edit:#293A53;
  --color-edit-hover:#344965;
  --color-overlay:rgb(0 0 0 / 68%);
  --color-border:rgb(184 202 236 / 18%);
  --color-success:#6AD6A0;
  --color-error:#FF8D8D;
  --color-google-border:#3B465A;
  --color-google-text:#202124;
  --color-google-hover:#F1F4F8;
}
html[data-theme="dark"] body{background:var(--color-bg);color:var(--color-text)}
html[data-theme="dark"] .app-shell{background:radial-gradient(ellipse at 78% 13%,rgb(58 75 133 / 20%),transparent 31%),radial-gradient(ellipse at 63% 90%,rgb(20 83 110 / 20%),transparent 30%),var(--color-bg)}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .main-panel{border-color:rgb(185 204 239 / 13%);box-shadow:0 12px 38px rgb(0 0 0 / 18%)}
html[data-theme="dark"] .new-chat-button,
html[data-theme="dark"] .account-button{border-color:var(--color-border);background:var(--color-surface-raised);color:var(--color-text)}
html[data-theme="dark"] .new-chat-button:hover,
html[data-theme="dark"] .account-button:hover{background:var(--color-surface);box-shadow:0 6px 18px rgb(0 0 0 / 20%)}
html[data-theme="dark"] .history-count{background:#22304A;color:var(--color-muted)}
html[data-theme="dark"] .history-item:hover,
html[data-theme="dark"] .history-item.active{background:rgb(132 164 218 / 13%)}
html[data-theme="dark"] .sidebar-tip{border-color:var(--color-border);background:rgb(126 154 201 / 7%)}
html[data-theme="dark"] .main-panel{background:rgb(15 23 39 / 94%)}
html[data-theme="dark"] .topbar{border-bottom-color:var(--color-border);background:rgb(16 25 42 / 92%)}
html[data-theme="dark"] .icon-button:hover{background:rgb(140 160 198 / 14%)}
html[data-theme="dark"] .chat-scroll{background:radial-gradient(ellipse at 21% 10%,rgb(130 69 117 / 8%),transparent 25%),radial-gradient(ellipse at 82% 47%,rgb(44 112 96 / 8%),transparent 27%),radial-gradient(ellipse at 44% 98%,rgb(88 77 152 / 10%),transparent 25%),var(--color-surface)}
html[data-theme="dark"] .welcome-icon,
html[data-theme="dark"] .modal-symbol{border-color:var(--color-border)}
html[data-theme="dark"] .suggestion-card{border-color:var(--color-border);background:rgb(23 34 55 / 90%);color:var(--color-text)}
html[data-theme="dark"] .suggestion-card:hover{border-color:rgb(114 167 255 / 35%);box-shadow:0 10px 24px rgb(0 0 0 / 16%)}
html[data-theme="dark"] .composer-wrap{background:linear-gradient(0deg,var(--color-bg) 65%,rgb(11 16 32 / 0%))}
html[data-theme="dark"] .composer-card{border-color:var(--color-border);background:rgb(20 30 49 / 96%);box-shadow:0 10px 35px rgb(0 0 0 / 22%)}
html[data-theme="dark"] .user-bubble{border-color:var(--color-border);box-shadow:0 5px 15px rgb(0 0 0 / 10%)}
html[data-theme="dark"] .answer-box,
html[data-theme="dark"] .source-card{border-color:var(--color-border);box-shadow:0 5px 18px rgb(0 0 0 / 12%)}
html[data-theme="dark"] .source-number{background:rgb(220 230 255 / 10%)}
html[data-theme="dark"] .modal-card{border-color:var(--color-border);box-shadow:0 25px 80px rgb(0 0 0 / 52%)}
html[data-theme="dark"] .settings-section{border-top-color:var(--color-border)}
html[data-theme="dark"] .settings-section a{color:#9DC0FF}
html[data-theme="dark"] .settings-warning{color:#A2B0C8}
html[data-theme="dark"] .topbar-right #shareChatButton{border-color:var(--color-border);color:var(--color-text)}
html[data-theme="dark"] .toast{background:#18243A;color:var(--color-text);border-color:var(--color-border)}
@media (max-width:520px){.history-more{opacity:1}.account-menu{left:auto;min-width:190px;width:100%}}