/* Add-on theme for the production Vue build. Only explicitly marked surfaces
   are themed; the original form, scholarly fonts and research payloads remain
   owned by Vue. A failed/missing add-on leaves the native login intact. */

.login-page {
  --sw-brand-css-ready: 1;
}

/* The route stylesheet may arrive after this add-on. The element qualifier is
   intentional: it outranks .login-page[data-v-*] regardless of load order. */
main.login-page.sw-brand-login {
  --sw-brand-pattern: url("/brand/shuowen-bronze-pattern-20261013.png");
  --sw-brand-navy: #282d54;
  --sw-brand-gold: #ffbf1b;
  --sw-brand-cream: #fff6e7;
  display: block;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--sw-brand-navy);
}

.login-page.sw-brand-login > .login-story {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background-color: var(--sw-brand-navy);
  background-image: linear-gradient(180deg, rgb(15 19 44 / 13%), rgb(16 20 43 / 35%)),
    var(--sw-brand-pattern);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.login-page.sw-brand-login > .login-story::before {
  content: none;
}

.login-page.sw-brand-login > .login-story > .story-content,
.login-page.sw-brand-login > .login-story > small {
  display: none;
}

.login-page.sw-brand-login .sw-brand-hero {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5rem, 10vh, 8rem) 1.5rem clamp(6rem, 12vh, 9rem);
  text-align: center;
}

.login-page.sw-brand-login .sw-brand-lockup {
  width: min(100%, 68rem);
  margin: 0;
}

.login-page.sw-brand-login .sw-brand-title {
  display: block;
  margin: 0;
  padding-inline-start: .24em;
  color: var(--sw-brand-gold);
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif CJK TC", serif;
  font-size: clamp(5.5rem, 11.5vw, 12.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .24em;
  text-shadow: 0 2px 0 rgb(163 81 31 / 50%), 0 8px 28px rgb(11 17 38 / 28%);
}

.login-page.sw-brand-login .sw-brand-title-en {
  display: block;
  margin: .12em 0 0;
  color: var(--sw-brand-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3.35vw, 4.1rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: .025em;
  overflow-wrap: break-word;
  text-shadow: 0 2px 0 rgb(163 81 31 / 50%), 0 4px 18px rgb(11 17 38 / 40%);
}

.login-page.sw-brand-login .sw-brand-intro,
.login-page.sw-brand-login .sw-brand-principle {
  width: min(100%, 50rem);
  margin: clamp(1.8rem, 4.5vh, 3.5rem) 0 0;
  color: #fff9eb;
  font-family: "STKaiti", "KaiTi", "Noto Serif CJK TC", serif;
  font-size: clamp(1rem, 1.25vw, 1.45rem);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: .045em;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgb(12 18 39 / 90%);
}

.login-page.sw-brand-login .sw-brand-principle {
  margin-top: .1rem;
}

.login-page.sw-brand-login .sw-brand-intro p {
  margin: 0;
}

.login-page.sw-brand-login .sw-brand-enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(13rem, 19vw, 23rem);
  min-height: 3.5rem;
  margin-top: clamp(1.8rem, 4.5vh, 3.2rem);
  padding: .65rem 2.25rem;
  border: 1px solid rgb(247 189 112 / 66%);
  border-radius: 10px;
  color: #fff7e4;
  background: rgb(157 89 34 / 90%);
  box-shadow: 0 8px 28px rgb(17 18 38 / 22%);
  font-family: "STKaiti", "KaiTi", "Noto Serif CJK TC", serif;
  font-size: clamp(1.55rem, 2.05vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.login-page.sw-brand-login .sw-brand-enter:hover {
  border-color: #ffdda3;
  background: #ad6328;
  box-shadow: 0 10px 32px rgb(17 18 38 / 30%);
}

.login-page.sw-brand-login .sw-brand-enter:focus-visible {
  outline: 3px solid #ffde7b;
  outline-offset: 5px;
}

/* Keep the existing App footer as the only copyright node. This relational
   scope is active only on the enhanced public login, never logs/graph/chat. */
#app:has(> main.login-page.sw-brand-login) > .site-copyright {
  color: #f2e7d1;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: .72rem;
  line-height: 1.6;
  text-shadow: 0 1px 5px rgb(12 18 39 / 85%);
  pointer-events: none;
}

.login-page.sw-brand-login:not(.sw-brand-expanded) > .login-panel.sw-brand-form,
.login-page.sw-brand-login > .login-panel[hidden] {
  display: none !important;
}

.login-page.sw-brand-login.sw-brand-expanded > .login-panel.sw-brand-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2.5rem, 7vh, 5rem) 1.25rem;
  color: #45372d;
  background-color: #191e38;
  background-image: linear-gradient(rgb(13 17 33 / 70%), rgb(13 17 33 / 70%)),
    var(--sw-brand-pattern);
  background-position: center;
  background-size: cover;
  scroll-margin-top: 0;
}

.login-page.sw-brand-login .sw-brand-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.5rem;
  margin: 0 0 1rem;
  padding: .4rem .8rem;
  border: 1px solid rgb(231 203 155 / 45%);
  border-radius: 999px;
  color: #f9e6bb;
  background: rgb(21 24 43 / 80%);
  font-size: .84rem;
  cursor: pointer;
}

.login-page.sw-brand-login .sw-brand-back:focus-visible {
  outline: 2px solid #ffde7b;
  outline-offset: 3px;
}

.login-page.sw-brand-login .sw-brand-cover-notice {
  max-width: 30rem;
  margin: 0 0 1rem;
  color: #fff0d1;
  font-size: .8rem;
  line-height: 1.6;
  text-align: center;
}

.login-page.sw-brand-login .sw-brand-cover-notice[hidden] {
  display: none;
}

.login-page.sw-brand-login .sw-brand-form form {
  width: min(470px, 100%);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid #e8c78f;
  border-radius: 24px;
  background-color: var(--sw-brand-cream);
  background-image: linear-gradient(rgb(255 247 232 / 95%), rgb(255 247 232 / 98%)),
    var(--sw-brand-pattern);
  background-position: top center;
  background-size: auto 460px;
  box-shadow: 0 24px 80px rgb(6 10 25 / 38%);
}

.login-page.sw-brand-login .sw-brand-form .login-brand {
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
  color: #a64d32;
}

.login-page.sw-brand-login .sw-brand-form .login-brand > span {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border: 1px solid #b26a45;
  border-radius: 50%;
  color: #fff2cf;
  background: #a64d32;
  font-size: 1.65rem;
}

.login-page.sw-brand-login .sw-brand-form .login-brand > div {
  flex: 1;
}

.login-page.sw-brand-login .sw-brand-form .login-brand strong {
  font-size: 1.4rem;
  letter-spacing: .1em;
}

.login-page.sw-brand-login .sw-brand-form .login-brand small {
  color: #9c6143;
}

.login-page.sw-brand-login .sw-brand-form .welcome {
  margin-bottom: 1.4rem;
}

.login-page.sw-brand-login .sw-brand-form .welcome h2 {
  color: #a64d32;
  font-size: 1.7rem;
}

.login-page.sw-brand-login .sw-brand-form .welcome p {
  color: #8b654f;
  line-height: 1.6;
}

.login-page.sw-brand-login .sw-brand-form label {
  margin: 1rem 0;
  color: #6255a0;
  font-size: .9rem;
  font-weight: 600;
}

.login-page.sw-brand-login .sw-brand-form input {
  min-height: 48px;
  padding: .8rem .85rem;
  border: 1px solid #cfa889;
  border-radius: 11px;
  color: #36322f;
  background: #ffecd1;
  font-weight: 400;
}

.login-page.sw-brand-login .sw-brand-form input:focus {
  border-color: #7766b7;
  outline: 2px solid rgb(119 102 183 / 24%);
  outline-offset: 2px;
}

.login-page.sw-brand-login .sw-brand-form .password-field input {
  padding-right: 3rem;
}

.login-page.sw-brand-login .sw-brand-form .password-field button {
  right: .65rem;
  width: 2rem;
  height: 2rem;
  color: #716184;
}

.login-page.sw-brand-login .sw-brand-form .primary {
  justify-content: center;
  gap: .7rem;
  min-height: 50px;
  margin-top: 1.6rem;
  padding: .8rem 1rem;
  border: 1px solid #a793cb;
  border-radius: 11px;
  color: #ffdc55;
  background: #5a4da2;
  font-size: 1.2rem;
  font-weight: 700;
}

.login-page.sw-brand-login .sw-brand-form .primary:hover:not(:disabled) {
  background: #4b3d90;
}

.login-page.sw-brand-login .sw-brand-form .primary:focus-visible {
  outline: 3px solid #8873c5;
  outline-offset: 3px;
}

.login-page.sw-brand-login .sw-brand-form .primary:disabled {
  opacity: .65;
  cursor: wait;
}

.login-page.sw-brand-login .sw-brand-form .switch-mode {
  margin-bottom: 0;
  color: #98745b;
  line-height: 1.7;
}

.login-page.sw-brand-login .sw-brand-form .switch-mode button {
  padding: .35rem .2rem;
  color: #a64d32;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.login-page.sw-brand-login .sw-brand-form .form-error {
  border-color: #b54e35;
  border-radius: 5px;
  color: #943c2d;
  background: #f6dfd2;
  line-height: 1.6;
}

/* The content area keeps the same measured widths, position and glyph fonts.
   Solid reading surfaces prevent the decorative image from crossing originals,
   detection labels or the composer. No overlay can intercept pointer events. */
/* The #app scope also beats a late .chat-shell[data-v-*] route rule. */
#app .chat-shell.sw-brand-platform {
  background-color: #f6f0e5;
  background-image: linear-gradient(rgb(250 245 234 / 85%), rgb(250 245 234 / 89%)),
    url("/brand/shuowen-bronze-pattern-20261013.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chat-shell.sw-brand-platform > .sidebar {
  border-right-color: #d9c9ae;
  background: rgb(244 236 222 / 98%);
}

.chat-shell.sw-brand-platform .chat-header {
  border-bottom-color: #e0d3bd;
  background: rgb(255 249 237 / 98%);
}

.chat-shell.sw-brand-platform .message.assistant > .message-body {
  border-radius: 12px;
  background: #fffaf2;
  box-shadow: 0 0 0 .65rem #fffaf2, 0 4px 18px rgb(92 66 34 / 4%);
}

.chat-shell.sw-brand-platform .user-bubble {
  background: #ece1cc;
}

.chat-shell.sw-brand-platform .composer {
  background: #fffaf4;
}

.chat-shell.sw-brand-platform .composer:not(.drag-active) {
  border-color: #cdbd9f;
}

.chat-shell.sw-brand-platform .task-cards button {
  background: #fffaf2;
}

.chat-shell.sw-brand-platform .task-cards button:hover {
  background: #fff5e6;
}

@media (max-width: 800px) {
  .login-page.sw-brand-login .sw-brand-hero {
    padding: 4.5rem 1.25rem 6rem;
  }

  .login-page.sw-brand-login .sw-brand-title {
    font-size: clamp(5rem, 17vw, 8rem);
    letter-spacing: .18em;
    padding-inline-start: .18em;
  }

  .login-page.sw-brand-login .sw-brand-title-en {
    font-size: clamp(1.1rem, 4.25vw, 2rem);
  }

  .login-page.sw-brand-login .sw-brand-intro,
  .login-page.sw-brand-login .sw-brand-principle {
    max-width: 32rem;
    font-size: 1rem;
    letter-spacing: .015em;
  }

  .login-page.sw-brand-login .sw-brand-enter {
    min-width: 13rem;
    min-height: 3.25rem;
    font-size: 1.65rem;
  }

  .login-page.sw-brand-login.sw-brand-expanded > .login-panel.sw-brand-form {
    justify-content: flex-start;
    padding: 1.25rem 1rem max(2rem, env(safe-area-inset-bottom));
  }

  .login-page.sw-brand-login .sw-brand-form form {
    border-radius: 18px;
    padding: 1.5rem;
  }

}

@media (max-width: 380px) {
  .login-page.sw-brand-login .sw-brand-form form {
    padding: 1.25rem;
  }

  #app:has(> main.login-page.sw-brand-login) > .site-copyright {
    font-size: .64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page.sw-brand-login,
  .login-page.sw-brand-login .sw-brand-form {
    scroll-behavior: auto;
  }

  .login-page.sw-brand-login .sw-brand-enter {
    transition: none;
  }
}