:root {
  --ink: #151515;
  --muted: #969696;
  --line: #e8e8e8;
  --side: #fafafa;
  --soft: #f5f5f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  background: #fff;
}

button,
textarea {
  font: inherit;
}

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

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  padding: 17px 12px;
  background: var(--side);
  border-right: 1px solid #ededed;
  display: flex;
  flex-direction: column;
}

.brand-row {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin-bottom: 13px;
}

.brand {
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -4px;
}

.brand-row svg {
  color: #666;
  width: 17px;
}

.new {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 1px 3px #00000016;
  border-radius: 8px;
  font-weight: 500;
}

.new:hover {
  background: #fff;
}

.nav {
  margin-top: 13px;
}

.nav-item {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 11px;
  text-align: left;
  border-radius: 7px;
}

.nav-item:hover {
  background: #f0f0f0;
}

.nav-item svg {
  width: 16px;
  height: 16px;
}

.expand {
  margin-left: auto;
  width: 14px !important;
}

.media-list {
  margin: 0 0 1px 11px;
  padding: 0 0 2px 28px;
  border-left: 1px solid #e6e6e6;
}

.sub {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  color: #666;
  font-size: 13px;
}

.sub svg {
  width: 15px;
  height: 15px;
}

.chats {
  margin-top: 11px;
  flex: 1;
}

.empty {
  text-align: center;
  color: #aaa;
  margin-top: 84px;
  font-size: 13px;
  line-height: 24px;
}

.empty svg {
  display: block;
  margin: 0 auto 12px;
  width: 28px;
  height: 28px;
  stroke: #c7c7c7;
}

.empty small {
  display: block;
  font-size: 12px;
  color: #b7b7b7;
}

.history {
  display: none;
}

.history button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
}

.history button:hover {
  background: #eee;
}

.help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  height: 38px;
}

.help svg {
  width: 16px;
}

main {
  min-height: 100vh;
  margin-left: 260px;
  position: relative;
}

.topbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.model {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 500;
}

.model svg {
  width: 14px;
  color: #888;
  stroke-width: 1.5;
}

.right {
  display: flex;
  align-items: center;
  gap: 23px;
  color: #4a4a4a;
}

.language {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
}

.language svg {
  width: 16px;
}

.sign {
  color: #fff;
  padding: 11px 22px;
  background: #0b0b0b;
  border-radius: 22px;
  font-size: 13px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(800px, calc(100% - 48px));
  transform: translate(-50%, -42%);
}

h1 {
  margin: 0 0 34px;
  text-align: center;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: -.7px;
}

.composer {
  min-height: 121px;
  padding: 13px 17px 11px;
  border: 1px solid #e2e2e2;
  border-radius: 15px;
  box-shadow: 0 2px 9px #0000000d;
}

textarea {
  display: block;
  height: 49px;
  width: 100%;
  resize: none;
  outline: 0;
  border: 0;
  color: #222;
  font-size: 16px;
  line-height: 24px;
}

textarea::placeholder {
  color: #a9a9a9;
}

.tools {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #707070;
}

.tools button {
  display: grid;
  place-items: center;
  padding: 0;
}

.tools .plus {
  font-size: 28px;
  font-weight: 300;
  line-height: 18px;
  color: #555;
}

.tool-label {
  display: flex !important;
  gap: 7px;
  align-items: center;
  font-size: 13px;
}

.tool-label svg {
  width: 17px;
}

.mic {
  margin-left: auto;
}

.send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f0f1f2;
  color: #aaa;
  transition: background-color .16s ease, color .16s ease;
}

.send svg {
  width: 18px;
}

.send.is-ready {
  background: #050505;
  color: #fff;
}

.suggestions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 17px;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  height: 38px;
  border: 1px solid #e7e7e7;
  border-radius: 21px;
  box-shadow: 0 1px 2px #00000007;
  font-size: 13px;
  white-space: nowrap;
}

.suggestion:hover {
  background: #f7f7f7;
}

.suggestion svg {
  width: 15px;
  height: 15px;
}

.footnote {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  color: #b2b2b2;
  text-align: center;
  font-size: 12px;
}

.footnote a {
  color: #9c9c9c;
  text-decoration: underline;
}

.messages {
  display: none;
  position: absolute;
  inset: 60px 0 90px;
  overflow: auto;
  padding: 24px max(44px, calc((100% - 800px)/2));
}

.message {
  max-width: 75%;
  padding: 11px 14px;
  margin: 12px 0;
  border-radius: 11px;
  line-height: 1.5;
}

.message.user {
  margin-left: auto;
  background: #111;
  color: #fff;
}

.message.assistant {
  background: #f4f4f4;
}

.login-overlay {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(5px);
}

.login-overlay.open {
  display: flex;
}

.login-modal {
  position: relative;
  display: grid;
  grid-template-columns: 540px 380px;
  width: 100%;
  max-width: 920px;
  min-height: 540px;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

.login-close {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 24px;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #737373;
}

.login-close svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.login-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: #fafafa;
}

.powered {
  width: 100%;
  margin: 0 0 47px;
  color: #6e6e6e;
  font-size: 13px;
  line-height: 19.5px;
}

.providers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 12px;
  color: #111;
  font-size: 14px;
  font-weight: 500;
}

.provider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.openai-logo {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.anthropic-logo {
  color: #db713e;
  font-size: 22px;
  line-height: 16px;
}

.google-star {
  font-size: 25px;
  line-height: 16px;
  background: conic-gradient(from 45deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  -webkit-background-clip: text;
  color: transparent;
}

.promo-title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: -.5px;
}

.promo-copy {
  max-width: 380px;
  margin: 0;
  color: #6e6e6e;
  font-size: 15px;
  line-height: 22.5px;
}

.models-pill {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
  padding: 8px 17px;
  border: 1px solid #e5e5e5;
  border-radius: 25px;
  color: #6e6e6e;
  font-size: 14px;
}

.model-bubbles {
  display: flex;
}

.model-bubbles span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: -5px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #ddd;
  font-size: 11px;
}

.login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  padding: 32px;
  text-align: center;
}

.login-panel h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -.25px;
}

.login-panel .subtitle {
  margin: 0 0 24px;
  color: #6e6e6e;
  font-size: 14px;
  line-height: 21px;
}

.login-option {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 316px;
  height: 47px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

.login-option.google {
  height: 45px;
  color: #fff;
  border-color: #080808;
  background: #080808;
}

.google-g {
  font-size: 20px;
  font-weight: 700;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 43%, #fbbc05 0 62%, #ea4335 0 83%, #4285f4 0);
  -webkit-background-clip: text;
  color: transparent;
}

.email-icon {
  width: 18px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
}

.email-icon:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  top: -7px;
  left: 2.5px;
}

.privacy {
  width: 100%;
  margin-top: 34px;
  color: #6e6e6e;
  font-size: 13px;
  line-height: 19.5px;
}

.privacy-line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  white-space: nowrap;
}

.lock {
  width: 14px;
  height: 12px;
  border: 1.5px solid #888;
  border-radius: 2px;
  position: relative;
}

.lock:before {
  content: "";
  position: absolute;
  width: 7px;
  height: 6px;
  border: 1.5px solid #888;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  left: 2px;
  top: -7px;
}

.terms {
  max-width: 316px;
  margin: 0 auto;
}

.terms a {
  color: #777;
}

.login-actions {
  width: 316px;
}

.login-option:disabled {
  cursor: wait;
  opacity: .65;
}

.email-login-form {
  display: none;
  width: 316px;
}

.login-panel.email-mode .login-actions {
  display: none;
}

.login-panel.email-mode .email-login-form {
  display: block;
}

.email-field {
  width: 100%;
  height: 47px;
  padding: 0 14px;
  outline: 0;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  color: #111;
  background: #fff;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.email-field:focus {
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}

.email-field::placeholder {
  color: #aaa;
}

.email-submit {
  width: 100%;
  height: 45px;
  margin-top: 12px;
  border-radius: 12px;
  color: #fff;
  background: #080808;
  font-size: 14px;
  font-weight: 500;
}

.email-back {
  margin-top: 15px;
  color: #777;
  font-size: 13px;
}

.email-back:hover {
  color: #111;
}

.toast {
  position: fixed;
  z-index: 20;
  top: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid #dce9df;
  border-radius: 10px;
  color: #245c31;
  background: #f1faf3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px);
  transition: opacity .2s, transform .2s;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error {
  color: #8a2d2d;
  border-color: #f0d4d4;
  background: #fff3f3;
}

.toast-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #2e8b45;
  font-size: 13px;
}

.toast.error .toast-check {
  background: #c44747;
}

.subscription-overlay { position:fixed; z-index:12; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.48); backdrop-filter:blur(4px); }
.subscription-overlay.open { display:flex; }
.subscription-modal { position:relative; display:grid; grid-template-columns:56.5% 43.5%; width:min(920px,100%); height:min(610px,calc(100vh - 36px)); overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 24px 55px rgba(0,0,0,.3); }
.subscription-close { position:absolute; z-index:1; top:26px; right:27px; width:22px; height:22px; padding:0; color:#777; }
.subscription-close svg { width:21px; height:21px; }
.compare-panel { display:flex; flex-direction:column; padding:44px 40px 34px; background:#fafafa; }
.joined-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:35px; font-size:15px; font-weight:500; }
.avatar-stack { display:flex; align-items:center; }
.avatar { display:block; width:31px; height:31px; margin-left:-6px; border:2px solid #fff; border-radius:50%; object-fit:cover; }
.avatar-count { display:grid; place-items:center; color:#777; background:#e9e9e9; font-size:11px; font-weight:700; }
.compare-head, .feature-row { display:grid; grid-template-columns:1fr 60px 60px; align-items:center; column-gap:10px; }
.compare-head { padding-bottom:15px; border-bottom:1px solid #ddd; color:#374151; font-size:15px; font-weight:650; }
.compare-head span:not(:first-child) { text-align:center; }
.compare-head .pro-label { color:#2764ea; }
.feature-row { min-height:58px; border-bottom:1px solid #e7e7e7; font-size:15px; }
.feature-name { display:flex; align-items:center; gap:13px; }
.feature-icon { display:grid; place-items:center; width:24px; height:24px; flex:none; font-style:normal; }
.feature-icon svg { width:23px; height:23px; stroke-width:1.8; }
.feature-icon img { display:block; width:23px; height:23px; object-fit:contain; }
.openai-icon { color:#111; }
.gemini-icon svg path { fill:url(#geminiGradient); stroke:none; }
.document-icon { color:#f4a000; }
.image-icon, .limits-icon { color:#8959f6; }
.extension-icon { color:#11b983; }
.feature-no, .feature-yes { text-align:center; font-size:23px; font-weight:700; }
.feature-no { color:#9ca3af; }
.feature-yes { color:#12b981; }
.trusted-row { margin-top:auto; color:#111; text-align:center; font-size:15px; font-weight:550; }
.stars { margin-right:9px; color:#f6b81a; letter-spacing:2px; }
.checkout-panel { display:flex; flex-direction:column; min-height:0; overflow-y:auto; padding:30px 32px 22px; background:#fff; scrollbar-width:thin; }
.subscription-title { margin:0 0 22px; text-align:center; font-size:28px; font-weight:650; letter-spacing:-.5px; }
.product-option { position:relative; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:13px; min-height:62px; margin-bottom:13px; padding:12px 17px; border:2px solid #e3e3e3; border-radius:12px; text-align:left; }
.product-option.active { border-color:#2e68e9; background:#f1f6ff; }
.radio-dot { width:20px; height:20px; border:2px solid #cfd4dc; border-radius:50%; }
.product-option.active .radio-dot { border:5px solid #2e68e9; }
.product-name { font-size:16px; }
.product-price { font-size:19px; font-weight:650; white-space:nowrap; }
.save-pill { margin-left:7px; padding:4px 8px; border-radius:13px; color:#087b5d; background:#cff7e4; font-size:12px; font-weight:600; white-space:nowrap; }
.most-popular { position:absolute; top:-10px; right:9px; display:none; padding:4px 9px; border-radius:11px; color:#fff; background:#111; font-size:10px; font-weight:700; letter-spacing:.03em; }
.product-option.active[data-plan="quarterly"] .most-popular { display:block; }
.charge-copy { min-height:51px; margin:9px 0 11px; color:#777; text-align:center; font-size:13px; line-height:1.5; }
.charge-copy strong { color:#111; }
.total-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-bottom:19px; border-bottom:1px solid #ddd; font-size:17px; }
.total-price { text-align:right; font-size:24px; font-weight:650; }
.total-saving { display:block; min-height:18px; margin-top:4px; color:#087b5d; font-size:12px; }
.subscribe-action { width:100%; height:51px; margin-top:17px; border-radius:12px; color:#fff; background:#2f66e9; font-size:17px; font-weight:600; }
.subscribe-action:hover { background:#2458d5; }
.subscribe-terms { margin:12px 0 12px; color:#999; text-align:center; font-size:11px; line-height:1.5; }
.subscribe-terms a { color:#888; text-decoration:underline; }
.secure-pay { margin:0 0 11px; color:#777; text-align:center; font-size:13px; }
.payment-logos { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px; margin-top:16px; padding-bottom:2px; }
.payment-logos svg { display:block; flex:0 0 36px; stroke:none; }

@media (max-width:800px) {
  .sidebar {
    width: 225px
  }

  .sidebar+main {
    margin-left: 225px
  }

  .suggestions {
    flex-wrap: wrap
  }

  .center {
    transform: translate(-50%, -46%)
  }

  .tools {
    gap: 13px
  }

  .tool-label:nth-of-type(4) {
    display: none !important
  }
}

@media (max-width:767px) {
  .login-overlay {
    padding: 0
  }

  .login-modal {
    display: block;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    overflow: auto
  }

  .login-promo {
    display: none
  }

  .login-panel {
    min-height: 100vh;
    padding: 64px 24px 30px
  }

  .login-close {
    top: 24px;
    right: 24px
  }

  .login-option {
    width: 100%;
    max-width: 316px
  }

  .privacy {
    margin-top: 34px
  }

  .privacy-line {
    white-space: normal
  }

  .subscription-overlay { padding:0; }
  .subscription-modal { display:block; width:100%; height:100vh; max-height:100vh; overflow:auto; border-radius:0; }
  .compare-panel { display:none; }
  .checkout-panel { min-height:100vh; padding:55px 22px 28px; }
  .subscription-title { font-size:27px; }
}