:root {
  --paper: #f6f1e9;
  --ink: #292622;
  --muted: #999087;
  --red: #bd461e;
  --line: #e3dbcf;
  --sans: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  --serif: 'STZhongsong', 'Songti SC', 'SimSun', serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.7 var(--sans);
  background: var(--paper);
  height: 100dvh;
  overflow: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
}
button:hover {
  color: var(--red);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #b64e29;
  outline-offset: 5px;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-sprite {
  display: none;
}
[hidden] {
  display: none !important;
}
.landscape {
  position: fixed;
  inset: 0;
  background: #f6f1e9 url('/assets/landscape.png') center center/cover no-repeat;
  z-index: -2;
}
.landscape:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #faf7f022, transparent 65%, #f6f1e930);
}
.topbar {
  height: 100px;
  padding: 26px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.brand-group,
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-actions {
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: #251f1a;
  font: 23px var(--serif);
  letter-spacing: 3px;
}
.brand-mark {
  width: 31px;
  height: 34px;
  border: 1.3px solid #a84423;
  border-radius: 10px;
  display: block;
  position: relative;
  transform: rotate(-3deg);
}
.brand-mark:before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #74412e;
  border-radius: 3px;
}
.brand-mark i,
.brand-mark b {
  position: absolute;
  background: #382d23;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  top: 13px;
  left: 11px;
}
.brand-mark b {
  top: 21px;
  left: 19px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 6px;
}
.icon-button:hover {
  background: #e9ded14d;
}
.topbar > .header-actions {
  color: #66584c;
}
main {
  height: calc(100dvh - 158px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-bottom: 26px;
}
#welcome {
  text-align: center;
  margin: 0 auto 35px;
  flex-shrink: 0;
}
.mascot {
  width: 150px;
  height: 132px;
  margin: 0 auto 14px;
  background-image: url('/assets/mascots.png');
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 0 50%;
  filter: drop-shadow(0 7px 7px #543d2312);
  transition: transform 0.25s;
}
.mascot.deepseek {
  background-position: 50% 50%;
}
.mascot.qwen {
  background-position: 100% 50%;
}
.mascot.thinking {
  animation: breathe 2s ease-in-out infinite;
}
.mascot.completed {
  transform: translateY(-2px);
}
h1 {
  font: 400 clamp(37px, 4.2vw, 58px) / 1.5 var(--serif);
  letter-spacing: 3px;
  margin: 0 0 5px;
}
h1 span {
  color: var(--red);
}
#welcome p {
  font: 13px var(--serif);
  letter-spacing: 4px;
  color: #968c83;
  margin: 4px 0 0;
}
.compose-wrap {
  width: min(750px, calc(100% - 64px));
  margin: 0 auto;
  flex-shrink: 0;
}
#composer {
  height: 76px;
  display: flex;
  gap: 13px;
  align-items: center;
  background: linear-gradient(120deg, #fffdf9e6, #f8f3ece8);
  border: 1px solid #ffffffeb;
  border-radius: 44px;
  padding: 11px 14px 11px 18px;
  box-shadow:
    0 14px 34px #7b533322,
    inset 0 0 0 1px #fff8;
  backdrop-filter: blur(18px);
}
#composer:focus-within {
  box-shadow:
    0 14px 34px #7b533322,
    0 0 0 2px #b84d2520;
}
#composer .icon-button {
  width: 39px;
  height: 39px;
  background: #eee8df65;
}
#composer .icon-button svg {
  width: 21px;
  height: 21px;
}
textarea {
  border: 0;
  background: none;
  resize: none;
  outline: none;
  width: 100%;
  min-width: 0;
  height: 27px;
  max-height: 100px;
  line-height: 27px;
  font-size: 14px;
  padding: 0;
}
textarea::placeholder {
  color: #a49b91;
}
#send {
  border-radius: 50%;
  background: linear-gradient(140deg, #ec8550, #c64b20 55%, #9b3217);
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow:
    inset 0 1px 1px #ffd8b9,
    0 4px 12px #ac492c23;
  flex-shrink: 0;
}
#send svg {
  width: 23px;
  height: 23px;
}
.model-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  min-height: 40px;
}
#model-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffcf6b8;
  backdrop-filter: blur(10px);
  border: 1px solid #fff8;
  border-radius: 28px;
  font-size: 12px;
  padding: 7px 14px;
  box-shadow: 0 4px 18px #6a4a2c06;
}
#model-trigger > svg {
  width: 15px;
  height: 15px;
}
.model-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #3668db;
  background: #e9edf9;
  letter-spacing: -2px;
  padding-right: 2px;
}
.model-emblem.qwen {
  color: #793ce1;
  background: #f0e6fb;
}
.model-emblem.default {
  color: #9a774a;
  background: #f1e4d3;
  letter-spacing: 0;
}
#skill-badge {
  font-size: 10px;
  color: #98644a;
  background: #fff8;
  border-radius: 20px;
  padding: 4px 9px;
}
.temporary-note {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 15px auto 0;
  font-size: 11px;
  color: #948b81;
  padding: 3px 10px;
}
.temporary-note svg {
  width: 15px;
  height: 15px;
  color: #595149;
}
.temporary-note[aria-pressed='false'] {
  color: #796a5a;
}
.page-footer {
  position: fixed;
  bottom: 20px;
  left: 40px;
  right: 40px;
  display: flex;
  justify-content: space-between;
  color: #9c9081;
  font-size: 10px;
  letter-spacing: 1.4px;
  pointer-events: none;
}
#mode-note {
  letter-spacing: 0.3px;
}
#notice {
  font-size: 12px;
  color: #9f422b;
  text-align: center;
  min-height: 21px;
  margin: 0 0 7px;
}
#notice:empty {
  display: none;
}
#messages:empty {
  display: none;
}
body.chatting .landscape:after {
  background: #f8f4edb8;
  backdrop-filter: blur(5px);
}
body.chatting main {
  justify-content: flex-end;
  padding-bottom: 2px;
}
#messages {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
  width: min(770px, calc(100% - 64px));
  margin: 0 auto 12px;
  padding: 16px 10px;
  mask-image: linear-gradient(transparent, black 15px, black calc(100% - 10px), transparent);
}
.message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.9;
  margin: 16px 0 32px;
}
.message strong {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #9b5d3b;
  margin-bottom: 9px;
  letter-spacing: 1px;
}
.message.user {
  margin-left: auto;
  max-width: 82%;
  background: #fffaf3b8;
  border: 1px solid #fff8;
  border-radius: 20px 20px 4px 20px;
  padding: 13px 20px;
}
.message.user strong {
  color: #9b8f81;
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: #29241d66;
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s;
}
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 320px;
  max-width: 88vw;
  z-index: 9;
  background: linear-gradient(135deg, #fffdf9f8, #f4eee5f5);
  border-radius: 0 24px 24px 0;
  box-shadow: 10px 0 50px #291e2820;
  padding: 25px 21px 20px;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.25s;
}
.sidebar-open aside {
  transform: translateX(0);
}
.sidebar-open .sidebar-backdrop {
  visibility: visible;
  opacity: 1;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-head .brand {
  font-size: 21px;
  gap: 10px;
}
.drawer-head .brand-mark {
  width: 26px;
  height: 29px;
}
.drawer-head .brand-mark i {
  left: 9px;
  top: 10px;
}
.drawer-head .brand-mark b {
  left: 16px;
  top: 18px;
}
.new {
  align-self: flex-end;
  margin: 24px 0 27px;
  background: linear-gradient(100deg, #9c6c53, #ce4b21);
  border-radius: 22px;
  color: #fff;
  font-size: 12px;
  padding: 8px 13px 8px 18px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.new svg {
  width: 17px;
  height: 17px;
}
.new:hover {
  color: #fff;
  filter: brightness(1.07);
}
.sidebar-scroll {
  flex: 1;
  overflow: auto;
  scrollbar-width: thin;
}
summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  margin: 12px 2px;
  color: #544a40;
}
summary::-webkit-details-marker {
  display: none;
}
summary:after {
  content: '⌄';
  float: right;
  color: #a79b8b;
}
.temporary-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  border-radius: 15px;
  padding: 12px 14px;
  background: #eee2d49e;
  width: 100%;
}
.temporary-card > svg {
  color: var(--red);
  width: 19px;
  margin-top: 2px;
}
.temporary-card span {
  font-size: 13px;
}
.temporary-card small {
  display: block;
  color: #a39788;
  font-size: 10px;
  margin-top: 2px;
}
.empty-project {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 10px;
  color: #938674;
}
.empty-project svg {
  width: 19px;
  height: 19px;
  margin-top: 3px;
}
.empty-project p {
  font-size: 12px;
  margin: 0;
}
.empty-project small {
  display: block;
  font-size: 10px;
  color: #aa9f92;
}
.more-menu {
  padding: 10px 0 5px;
  border-top: 1px solid #ddd3c52e;
}
.more-menu summary {
  color: #a49b91;
  font-size: 11px;
}
.more-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  font-size: 12px;
}
.more-menu svg {
  width: 17px;
  height: 17px;
}
.mini-compass {
  font-size: 22px;
  width: 17px;
  line-height: 17px;
}
.account-label {
  font-size: 10px;
  color: #a79b8b;
  padding: 12px 10px 0;
  border-top: 1px solid #ddd3c540;
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#history {
  padding: 8px 0;
}
#history button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  font-size: 12px;
  border-radius: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#history button.active {
  background: #e8ddcf99;
  color: #a54729;
}
dialog {
  border: 1px solid #fff9;
  border-radius: 24px;
  width: min(430px, calc(100% - 36px));
  padding: 26px 25px;
  background: linear-gradient(140deg, #fffdf9, #f6f0e8);
  color: var(--ink);
  box-shadow: 0 30px 100px #2c1d1733;
  max-height: 85dvh;
  overflow: auto;
}
dialog::backdrop {
  background: #28241f9c;
  backdrop-filter: blur(6px);
}
.close {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #7c7166;
}
dialog h2 {
  font: 400 22px var(--serif);
  margin: 0 0 20px;
  padding-right: 25px;
}
dialog p {
  font-size: 12px;
  color: #8b7f72;
}
dialog .muted {
  color: #9b9186;
  font-size: 11px;
}
.model-options {
  display: grid;
  gap: 5px;
}
.model-option {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 13px 9px;
  border-radius: 12px;
  width: 100%;
}
.model-option:hover {
  background: #e8dfd452;
}
.model-option .model-emblem {
  width: 37px;
  height: 37px;
  font-size: 22px;
}
.model-option .description {
  flex: 1;
}
.model-option b {
  display: block;
  font-size: 14px;
  font-weight: 400;
}
.model-option small {
  display: block;
  font-size: 11px;
  color: #a1978d;
  margin-top: 1px;
}
.selected-check {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #925b4c;
  color: #fff;
  padding: 5px;
  visibility: hidden;
}
.model-option[aria-pressed='true'] .selected-check {
  visibility: visible;
}
.dialog-footnote {
  border-top: 1px solid #e5ddd3;
  padding-top: 14px;
  margin-top: 16px !important;
  font-size: 10px !important;
  line-height: 1.8;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  gap: 12px;
  border-bottom: 1px solid #e8dfd5;
}
.setting-row label {
  font-size: 13px;
}
.setting-row small {
  display: block;
  color: #a4998b;
  font-size: 10px;
}
.setting-row select {
  max-width: 155px;
  padding: 7px;
  border: 1px solid #e4d7c7;
  border-radius: 8px;
  background: #fffaf2;
  font-size: 12px;
}
.setting-row input[type='checkbox'] {
  accent-color: var(--red);
  width: 18px;
  height: 18px;
}
dialog input:not([type='checkbox']),
dialog textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  margin: 10px 0 16px;
  border: 1px solid #ded2c2;
  border-radius: 10px;
  background: #fffaf3;
  outline: none;
  font-size: 13px;
  height: auto;
}
dialog input:focus,
dialog textarea:focus {
  border-color: #bb7759;
}
dialog label {
  font-size: 12px;
}
dialog .primary {
  background: linear-gradient(130deg, #d26e43, #b34321);
  color: #fff;
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 12px;
}
dialog form > button + button {
  font-size: 12px;
  margin-left: 8px;
}
#auth-error,
#memory-error {
  font-size: 12px;
  color: var(--red);
  margin: 8px 0;
}
#memory-list {
  padding: 0;
  list-style: none;
  font-size: 12px;
}
#memory-list li {
  border-bottom: 1px solid #e7ded3;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}
#memory-list button {
  color: var(--red);
  font-size: 11px;
  white-space: nowrap;
}
.search-result {
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}
.search-result:hover {
  background: #e9dfd3;
}
.shortcut-list {
  display: grid;
  gap: 8px;
}
.shortcut-list button {
  text-align: left;
  padding: 14px;
  background: #eee5d76b;
  border-radius: 12px;
  font-size: 13px;
}
.shortcut-list small {
  display: block;
  color: #a49889;
  font-size: 11px;
}
#task-status {
  margin: 18px auto 0;
  max-width: 590px;
  background: #fffaf1d9;
  border: 1px solid #fff8;
  border-radius: 22px;
  padding: 9px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 25px #6f4c2410;
}
.mascot.small {
  width: 57px;
  height: 51px;
  flex-shrink: 0;
  margin: 0;
}
#task-status > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
#task-text {
  font-size: 12px;
}
#task-detail {
  display: block;
  font-size: 10px;
  color: #a09384;
}
#stop {
  font-size: 11px;
  background: #f1e8dd;
  border-radius: 20px;
  padding: 6px 12px;
}
.compass {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.orbit {
  position: absolute;
  inset: 2px;
  border: 1px solid #d89358;
  border-radius: 50%;
  transform: rotateX(45deg) rotateZ(20deg);
}
.orbit:after {
  content: '';
  position: absolute;
  inset: -7px 7px;
  border: 1px solid #e1b087;
  border-radius: 50%;
  transform: rotate(55deg);
}
.compass i {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #fff1ce, #d99446 50%, #a45b1c);
  transform: rotate(35deg);
  box-shadow: 2px 4px 7px #b5713c33;
}
.compass.running {
  animation: rotate 3s linear infinite;
}
#task-status.complete .compass:after {
  content: '✓';
  position: absolute;
  inset: 6px;
  border: 1px solid #a75530;
  border-radius: 50%;
  color: #a75530;
  text-align: center;
  font-size: 18px;
  line-height: 29px;
}
#task-status.complete .compass i,
#task-status.complete .orbit {
  display: none;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes breathe {
  50% {
    transform: translateY(-4px);
  }
}
@media (min-height: 900px) {
  #welcome {
    margin-bottom: 45px;
  }
  .mascot {
    width: 176px;
    height: 153px;
    margin-bottom: 20px;
  }
}
@media (max-width: 700px) {
  .topbar {
    padding: 18px 20px;
    height: 78px;
  }
  .brand {
    font-size: 20px;
    gap: 9px;
  }
  .brand-group {
    gap: 10px;
  }
  .brand-mark {
    display: none;
  }
  .header-actions {
    gap: 9px;
  }
  .header-actions #search {
    display: none;
  }
  .topbar .brand-group {
    flex-direction: row-reverse;
  }
  .topbar #menu {
    position: absolute;
    right: 18px;
  }
  .header-actions #account {
    margin-right: 40px;
  }
  .landscape {
    background-position: 58% center;
  }
  main {
    height: calc(100dvh - 130px);
    padding-bottom: 25px;
  }
  #welcome {
    margin-bottom: 30px;
  }
  .mascot {
    width: 132px;
    height: 117px;
    margin-bottom: 13px;
  }
  h1 {
    font-size: 37px;
    letter-spacing: 1px;
  }
  #welcome p {
    font-size: 10px;
    letter-spacing: 1.2px;
  }
  .compose-wrap {
    width: calc(100% - 32px);
  }
  #composer {
    height: 64px;
    padding: 8px 10px;
    gap: 7px;
  }
  #composer .icon-button {
    width: 31px;
    height: 31px;
  }
  #composer .icon-button svg {
    width: 18px;
    height: 18px;
  }
  #composer textarea {
    font-size: 12px;
  }
  #send {
    width: 40px;
    height: 40px;
  }
  #send svg {
    width: 20px;
    height: 20px;
  }
  .model-row {
    margin-top: 16px;
  }
  .temporary-note {
    font-size: 10px;
    margin-top: 12px;
  }
  .page-footer {
    bottom: 15px;
    left: 20px;
    right: 20px;
    justify-content: center;
    font-size: 9px;
  }
  .page-footer > span:first-child {
    display: none;
  }
  #messages {
    width: calc(100% - 28px);
    padding-left: 5px;
    padding-right: 5px;
  }
  .message {
    font-size: 13px;
  }
  .message.user {
    max-width: 90%;
  }
  aside {
    width: 300px;
    padding-top: 22px;
  }
  #task-status {
    padding: 7px 10px;
    gap: 8px;
  }
  #task-text {
    font-size: 11px;
  }
  .mascot.small {
    width: 48px;
    height: 43px;
  }
  #task-detail {
    font-size: 9px;
  }
}
@media (max-height: 650px) {
  #welcome {
    margin-bottom: 18px;
  }
  .mascot {
    width: 100px;
    height: 88px;
    margin-bottom: 6px;
  }
  h1 {
    font-size: 36px;
  }
  main {
    padding-bottom: 0;
  }
  .model-row {
    margin-top: 12px;
  }
  .temporary-note {
    margin-top: 8px;
  }
  .topbar {
    height: 70px;
  }
  main {
    height: calc(100dvh - 112px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
@media (min-width: 701px) {
  .topbar > .header-actions {
    color: #fff7ee;
    text-shadow: 0 1px 5px #5b301b50;
  }
}
.panel-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.panel-tabs button {
  font-size: 12px;
  border-radius: 20px;
  padding: 6px 13px;
  background: #eee4d66b;
}
#dialog-content > h3 {
  font-size: 14px;
  font-weight: 500;
}
#dialog-content form > label {
  display: block;
  margin-top: 12px;
}
#dialog-content form > label > select {
  display: block;
  width: 100%;
  border: 1px solid #ded2c2;
  background: #fffaf3;
  border-radius: 10px;
  padding: 10px;
  margin-top: 7px;
  font-size: 12px;
}
#panel-error {
  color: #a84d2c;
  font-size: 12px;
  white-space: pre-wrap;
}
#back-settings,
#back-admin,
#back-users {
  font-size: 12px;
  margin-top: 20px;
}
.account-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  border-top: 1px solid #e5dbcf;
  padding-top: 14px;
  font-size: 12px;
}
.quota-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quota-card {
  background: #ece3d65c;
  border: 1px solid #fff8;
  border-radius: 14px;
  padding: 14px;
}
.quota-card small {
  display: block;
  color: #9b8a76;
  font-size: 10px;
}
.quota-card b {
  font-size: 23px;
  font-weight: 400;
  display: inline-block;
  margin-top: 5px;
}
.quota-card span {
  font-size: 10px;
  color: #9a8a79;
}
.request-list {
  max-height: 270px;
  overflow: auto;
  scrollbar-width: thin;
}
.request-row {
  padding: 12px 0;
  border-bottom: 1px solid #e5dbcf;
}
.request-row b {
  display: block;
  font-weight: 400;
  font-size: 12px;
}
.request-row small {
  display: block;
  color: #998b7a;
  font-size: 10px;
  margin-top: 3px;
}
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 16px 5px;
  border-bottom: 1px solid #e5dbcf;
  gap: 10px;
}
.admin-row b {
  font-weight: 400;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-row small {
  font-size: 10px;
  color: #998b7a;
  flex-shrink: 0;
}
.allowed-models {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.allowed-models label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.allowed-models input {
  accent-color: var(--red);
}
fieldset {
  border: 1px solid #ded2c2;
  border-radius: 10px;
  margin: 15px 0;
}
legend {
  font-size: 11px;
  color: #998b7a;
}
.model-option:disabled {
  cursor: default;
  opacity: 0.5;
}
.model-emblem.gpt {
  background: #e7e5df;
  color: #333;
}
.model-emblem.claude {
  background: #f5e7db;
  color: #c3764e;
}
.model-emblem.gemini {
  background: #e5ecfa;
  color: #4970cc;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
#history .history-open {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
#history .history-manage {
  width: 36px;
  min-width: 36px;
  min-height: 40px;
  text-align: center;
  font-weight: 700;
}
.history-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.history-danger {
  color: var(--red);
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
#history-error {
  color: var(--red);
}
#deleting-title {
  overflow-wrap: anywhere;
}
#trash-list {
  max-height: 45dvh;
  overflow: auto;
}
#trash-list b {
  overflow-wrap: anywhere;
}
.restore-chat {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 18px;
  color: var(--red);
}
#trash-error {
  color: var(--red);
}
#build-label {
  color: var(--muted);
  font-size: 10px;
  padding-top: 8px;
}

.message-actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.message-actions button {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 2px;
}
.message-actions button:hover {
  color: var(--red);
}
.template-loader {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}
.template-loader select {
  display: block;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
#templates-button,
#draft-template {
  margin: 14px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#regenerate-error {
  color: var(--red);
}
.model-filters {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.model-filters select {
  min-width: 0;
  flex: 1;
  padding: 8px;
  border: 1px solid #dfd3c5;
  border-radius: 10px;
  background: #fffaf3;
  font-size: 12px;
}
.model-brand-heading {
  font-size: 11px;
  color: #9c7a60;
  border-bottom: 1px solid #e8ded2;
  margin: 20px 0 6px;
  padding-bottom: 7px;
  letter-spacing: 1px;
}
.model-option.detailed {
  align-items: flex-start;
  padding: 12px 5px;
}
.model-option.detailed .model-emblem {
  margin-top: 4px;
}
.model-option.detailed .description {
  min-width: 0;
}
.model-option.detailed .description small {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.8;
  margin-top: 3px;
}
.model-option.detailed .model-id {
  color: #8d694c;
  font-size: 10px;
}
.model-option.detailed .selected-check {
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  padding: 0;
  line-height: 24px;
  margin-top: 6px;
}
.model-admin-row {
  display: block;
}
.model-admin-row b {
  display: block;
}
.model-admin-row small {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-top: 5px;
  line-height: 1.8;
}
.guide-note {
  padding: 13px;
  background: #eee2d5;
  border-radius: 12px;
  font-size: 12px;
  color: #8e5d40;
}
.guide-steps {
  padding-left: 20px;
  font-size: 12px;
  color: #8c7d6b;
  line-height: 2;
}
.guide-check {
  padding: 12px 0;
  border-bottom: 1px solid #e3d8ca;
}
.guide-check b {
  font-size: 12px;
  font-weight: 500;
}
.guide-check p {
  margin: 4px 0;
  font-size: 11px;
}
#model-info {
  display: block;
  font-size: 12px;
  color: #a35d3a;
  margin-top: 15px;
}
#variant-form textarea,
#model-info-form textarea {
  min-height: 85px;
}
#category-advice p {
  line-height: 1.9;
}
#variant-form > label > select,
#model-info-form > label > select {
  display: block;
  width: 100%;
}
.config-warning {
  color: #a44d29 !important;
  background: #edd9c96b;
  padding: 7px;
  border-radius: 7px;
}
.model-source {
  display: block;
  margin: -4px 0 12px 55px;
  color: #9d8068;
  font-size: 9px;
  text-decoration: none;
}
.model-source:hover {
  text-decoration: underline;
  color: #b85b37;
}
.model-option.detailed:disabled {
  opacity: 0.7;
}
#reference-model {
  max-width: 100%;
}
.mascot.model-choice-mascot {
  display: block;
  flex-shrink: 0;
  width: 53px;
  height: 53px;
  margin: 3px 0 0;
  filter: drop-shadow(0 2px 2px #60402612);
}
.model-option.detailed {
  gap: 10px;
}
.model-option.detailed:disabled .model-choice-mascot {
  opacity: 1;
}
.hat-gallery-wrap {
  margin: 14px 0;
  border: 1px solid #e9ded1;
  border-radius: 12px;
  padding: 0 10px;
}
.hat-gallery-wrap summary {
  font-size: 10px;
  color: #9a7b63;
  margin: 9px 0;
}
.hat-gallery {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 0 0 10px;
}
.hat-gallery > span {
  text-align: center;
  min-width: 0;
}
.mascot.hat-gallery-avatar {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto;
}
.hat-gallery small {
  display: block;
  color: #9a8d7b;
  font-size: 9px;
}

/* Conversation reading and composing, in the established warm-white palette. */
.chatting .landscape:after {
  background: #faf7f1ed;
  backdrop-filter: blur(12px);
}
.chatting #main {
  position: relative;
  min-height: 0;
}
#messages {
  scrollbar-width: thin;
  scrollbar-color: #d8cabc transparent;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}
.chatting #messages {
  width: min(840px, 100%);
  padding: 16px 30px 40px;
  mask-image: none;
  scroll-padding-bottom: 30px;
}
.message {
  font-size: 15px;
  line-height: 1.85;
  white-space: normal;
  margin: 0 0 30px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.message > strong {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: #897969;
  margin-bottom: 10px;
}
.message.user {
  max-width: 80%;
  width: fit-content;
  margin-left: auto;
  padding: 12px 20px;
  border: 1px solid #e9dfd2;
  border-radius: 22px 22px 5px 22px;
  background: #eee6db99;
  box-shadow: none;
}
.message.user > strong {
  display: none;
}
.message.user .message-text {
  white-space: pre-wrap;
}
.message.assistant {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.message-avatar.mascot {
  width: 35px;
  height: 35px;
  margin: 0;
  display: inline-block;
  flex-shrink: 0;
}
.message-text {
  min-width: 0;
  color: #342e28;
}
.message-text p {
  margin: 0 0 14px;
  white-space: pre-wrap;
}
.message-text p:last-child {
  margin-bottom: 0;
}
.message-text h2,
.message-text h3,
.message-text h4 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.5;
  margin: 24px 0 12px;
  font-size: 20px;
}
.message-text h3 {
  font-size: 18px;
}
.message-text h4 {
  font-size: 16px;
}
.message-text ul,
.message-text ol {
  padding-left: 25px;
  margin: 12px 0 18px;
}
.message-text li {
  padding-left: 4px;
  margin: 6px 0;
}
.message-text strong {
  font-weight: 650;
}
.message-text a {
  color: #b74622;
  text-underline-offset: 3px;
}
.message-text blockquote {
  border-left: 3px solid #cf7c52;
  margin: 16px 0;
  padding: 8px 18px;
  background: #ede3d340;
  color: #796b5e;
  white-space: pre-wrap;
}
.message-text hr {
  border: 0;
  border-top: 1px solid #e9e0d5;
  margin: 24px 0;
}
.message-text :not(pre) > code {
  font-family: Consolas, monospace;
  font-size: 0.88em;
  background: #eee7dd;
  padding: 2px 5px;
  border-radius: 5px;
}
.code-block {
  margin: 16px 0;
  border: 1px solid #ded4c6;
  border-radius: 12px;
  overflow: hidden;
  background: #f2ede5;
}
.code-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9e1d6;
  padding: 6px 14px;
  color: #766658;
  font-size: 12px;
}
.code-heading button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}
.message-text pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  padding: 18px;
  margin: 0;
  font:
    13px/1.7 Consolas,
    monospace;
  color: #3e352e;
}
.table-wrap {
  max-width: 100%;
  overflow: auto;
  margin: 16px 0;
}
.message-text table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.message-text td,
.message-text th {
  padding: 10px 14px;
  border: 1px solid #e2d9ce;
  text-align: left;
}
.message-text th {
  background: #eee7dd;
  font-weight: 600;
}
.message-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  opacity: 0.72;
}
.message-actions button {
  font-size: 11px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
  color: #8b7a69;
  cursor: pointer;
}
.message-actions button:hover {
  background: #e9dfd1;
  color: #ad4223;
}
.message-text.waiting:before {
  content: '正在组织回答';
  color: #a18f7e;
  font-size: 13px;
  animation: breathe 1.5s ease-in-out infinite;
}
.message-text.streaming:after {
  content: '●';
  display: inline-block;
  color: #c35732;
  font-size: 9px;
  animation: breathe 1s ease-in-out infinite;
  margin-left: 5px;
}
.chatting .compose-wrap {
  width: min(840px, 100%);
  padding: 0 24px;
  flex-shrink: 0;
  margin: 0 auto;
}
#composer {
  height: auto;
  min-height: 78px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 26px;
  padding: 12px 15px;
  gap: 8px;
  background: #fffcf7f5;
  border: 1px solid #e7d9c9;
  box-shadow: 0 8px 40px #76573510;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
#composer:focus-within {
  border-color: #c6a48a;
  box-shadow: 0 4px 28px #a25e2515;
}
#input {
  width: 100%;
  flex: 1 0 100%;
  height: 46px;
  min-height: 46px;
  max-height: 176px;
  resize: none;
  padding: 8px 10px;
  font: 15px/1.7 inherit;
  background: transparent;
  border: 0;
  outline: 0;
  overflow-y: auto;
}
#composer .model-row {
  margin: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}
#composer #model-trigger {
  margin: 0;
  font-size: 12px;
  padding: 6px 10px;
  background: #f3ece2;
  border: 0;
  box-shadow: none;
}
#composer .icon-button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
#composer #send {
  width: 37px;
  height: 37px;
  margin: 0;
  flex-shrink: 0;
}
#send.stopping {
  font-size: 17px;
  background: #68574a;
  color: #fff;
  box-shadow: none;
}
.compose-help {
  font-size: 10px;
  color: #a39280;
  text-align: center;
  margin: 6px 0 0;
}
.temporary-note {
  margin-top: 7px;
  font-size: 10px;
}
#notice:empty {
  display: none;
}
#notice {
  padding: 7px 10px;
  font-size: 12px;
}
.chatting #task-status {
  box-shadow: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 5px 3px;
  min-height: 30px;
  margin: 0;
  gap: 8px;
  max-width: 100%;
  font-size: 11px;
}
.chatting #task-status.complete {
  display: none;
}
.chatting #task-status .mascot {
  display: none;
}
.chatting #task-detail {
  display: inline;
  font-size: 10px;
  margin-left: 8px;
}
.chatting #task-status .compass {
  width: 24px;
  height: 24px;
  margin-left: auto;
}
.chatting #task-status #stop {
  font-size: 11px;
  padding: 3px 10px;
}
.chatting #task-text {
  font-size: 11px;
}
#jump-latest {
  position: absolute;
  bottom: 225px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  border: 1px solid #e2d3c0;
  background: #fffcf7f5;
  box-shadow: 0 3px 16px #60462c15;
  border-radius: 20px;
  padding: 8px 15px;
  color: #8b5e44;
  font-size: 12px;
  cursor: pointer;
}
@media (max-width: 700px) {
  .chatting #messages {
    padding: 10px 18px 24px;
  }
  .chatting .compose-wrap {
    padding: 0 10px;
  }
  .message {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .message.user {
    max-width: 90%;
    padding: 10px 16px;
  }
  #composer {
    padding: 8px 10px;
    border-radius: 22px;
    gap: 5px;
  }
  #input {
    font-size: 14px;
    max-height: 132px;
  }
  #composer #model-trigger {
    max-width: 195px;
    font-size: 11px;
  }
  #composer #model-label {
    max-width: 135px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .compose-help {
    display: none;
  }
  .chatting #task-detail {
    display: none;
  }
  #jump-latest {
    bottom: 190px;
  }
  .page-footer {
    font-size: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .message-text.waiting:before,
  .message-text.streaming:after {
    animation: none;
  }
}
.message .message-text strong {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  letter-spacing: normal;
}
.message .message-text em {
  display: inline;
}
#input {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
}
.chatting .header-actions .icon-button {
  color: #73604f;
}
@media (max-width: 700px) {
  #input {
    font-size: 14px;
  }
}
/* Keep history usable in short windows instead of letting the lower menu cover it. */
#sidebar {
  overflow-y: auto;
}
#sidebar > .drawer-head,
#sidebar > .new,
#sidebar > .more-menu,
#sidebar > #build-label,
#sidebar > .account-label {
  flex-shrink: 0;
}
#sidebar > .new {
  margin: 10px 0 12px;
}
.sidebar-scroll {
  min-height: 110px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.truncation-note {
  font-size: 12px;
  line-height: 1.7;
  color: #956243;
  padding: 9px 12px;
  margin: 16px 0 0;
  border-left: 2px solid #c57a4b;
  background: #f1e5d980;
}
.message-actions .continue-message {
  color: #b24824;
  background: #f2e3d5;
  border: 1px solid #e3cbb5;
  border-radius: 14px;
  padding: 4px 12px;
}
.conversation-tools {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 6px 7px;
}
.conversation-tools button {
  font-size: 10px;
  color: #89735f;
  padding: 3px 7px;
  border-radius: 10px;
}
.conversation-tools button:hover {
  background: #e9dfd3;
}
.message-receipt {
  display: block;
  font-size: 10px;
  color: #a08a75;
  line-height: 1.6;
  margin: 7px 8px;
}
.billing-card {
  border: 1px solid #e3d7c8;
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.billing-card p {
  font-size: 12px;
}
.billing-card small {
  font-size: 10px;
  color: #96806a;
}
.context-excerpts {
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  font:
    11px/1.7 Consolas,
    monospace;
  background: #f0e8dd;
  padding: 12px;
  border-radius: 10px;
}
#recovery {
  margin: 8px 0;
  background: #f4eadd;
  padding: 9px 12px;
  border-radius: 12px;
  max-height: 190px;
  overflow: auto;
}
#recovery summary {
  font-size: 11px;
  margin: 0;
  color: #a45b34;
}
#recovery p,
#recovery button {
  font-size: 11px;
}
#recovery .message-text {
  font-size: 12px;
  max-height: 100px;
  overflow: auto;
}
.chatting #jump-latest {
  bottom: 250px;
}
@media (max-width: 700px) {
  .chatting #jump-latest {
    bottom: 210px;
  }
  .conversation-tools button {
    font-size: 9px;
  }
  .message-receipt {
    font-size: 9px;
  }
}
.billing-card small {
  display: block;
  margin-top: 5px;
}
.conversation-tools {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
}
.conversation-tools > button:nth-child(2) {
  margin-left: auto;
}
.internal-badge {
  font-size: 9px;
  color: #af8b68;
  padding: 2px 6px;
  border-left: 1px solid #dfd0bd;
}
.meter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0;
}
.meter-table td,
.meter-table th {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #e8ddcf;
}
.meter-table th {
  font-weight: 400;
  color: #89705a;
}
.receipt-details {
  margin: 6px 8px;
  font-size: 11px;
  color: #8c7765;
}
.receipt-details summary {
  font-size: 10px;
  margin: 5px 0;
}
.receipt-details p {
  margin: 6px 0;
}
.receipt-details small {
  display: block;
  font-size: 10px;
  color: #a08b77;
}
.chatting #jump-latest {
  bottom: 270px;
}
@media (max-width: 700px) {
  .conversation-tools {
    gap: 1px;
  }
  .internal-badge {
    font-size: 8px;
  }
  .conversation-tools button {
    padding: 3px 5px;
  }
  .chatting #jump-latest {
    bottom: 230px;
  }
}
#composer .thinking-mode {
  font-size: 11px;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid #e4d8c9;
  border-radius: 18px;
  background: #f5eee3;
  color: #8b6a50;
}
#composer .thinking-mode[aria-pressed='true'] {
  background: #f4ddcc;
  color: #a74724;
  border-color: #d6a27b;
}
.answer-mode {
  display: block;
  font-size: 10px;
  color: #a5876f;
  margin: 8px;
}
.memory-status {
  font-size: 9px;
  color: #99836d;
  padding: 2px 6px;
}
@media (max-width: 700px) {
  #composer .thinking-mode {
    font-size: 10px;
    padding: 5px 7px;
  }
  #composer #model-label {
    max-width: 95px;
  }
  #composer #model-trigger {
    gap: 4px;
    padding: 5px 7px;
  }
}
#project-list .workspace-action {
  display: block;
  text-align: left;
  width: 100%;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 9px;
}
#project-context {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a25832;
}
.workspace-action {
  padding: 8px 12px;
  border-radius: 12px;
  background: #efe5d65c;
  font-size: 12px;
  margin: 4px;
}
.workspace-error {
  color: #b44827;
  font-size: 12px;
}
.knowledge-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #eadfd0;
}
.knowledge-check input {
  width: 17px !important;
  height: 17px !important;
  margin: 3px 0 !important;
  flex-shrink: 0;
  accent-color: #b8512a;
}
.knowledge-used {
  font-size: 10px;
}
.billing-card > p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#project-form textarea,
#memory-edit-form textarea {
  max-height: 180px;
  min-height: 80px;
}
.conversation-tools {
  max-height: 80px;
  overflow: auto;
}
#file-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 6px;
}
#file-chips:empty {
  display: none;
}
#file-chips small {
  font-size: 10px;
  color: #947b65;
}
#file-chips button {
  font-size: 10px;
  padding: 3px 8px;
  margin: 1px;
}
.source-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow: auto;
  background: #f0e8dc;
  padding: 12px;
  border-radius: 10px;
  font:
    11px/1.8 Consolas,
    monospace;
}
.message-actions {
  flex-wrap: wrap;
}
.message-actions .workspace-action {
  font-size: 10px;
  padding: 4px 8px;
  margin: 0;
}
.artifact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.artifact-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 8px 0;
}
.artifact-toolbar button {
  font-size: 11px;
  padding: 5px 9px;
}
#artifact-panel {
  position: fixed;
  z-index: 8;
  inset: 12px 12px 12px auto;
  width: min(650px, calc(100vw - 24px));
  padding: 20px;
  background: #fffaf2;
  border: 1px solid #e3d2bd;
  border-radius: 22px;
  box-shadow: -14px 0 70px #51371d30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}
#artifact-title {
  font: 20px/1.5 var(--serif);
  border: 0;
  border-bottom: 1px solid #e5d7c4;
  background: transparent;
  padding: 8px;
  width: 100%;
}
#artifact-versions {
  background: #f2eadf;
  border: 1px solid #e0d0bb;
  border-radius: 8px;
  padding: 5px;
  font-size: 12px;
}
#artifact-content {
  flex: 1;
  min-height: 250px;
  height: auto;
  max-height: none;
  resize: vertical;
  overflow: auto;
  background: #fffcf7;
  border: 1px solid #e5d7c4;
  padding: 14px;
  border-radius: 12px;
  font: 14px/1.9 var(--sans);
}
.artifact-preview {
  flex: 1;
  min-height: 250px;
  overflow: auto;
  background: #fffcf7;
  padding: 14px;
  border-radius: 12px;
}
#artifact-panel > small {
  font-size: 10px;
  color: #98816a;
}
.artifact-heading > strong {
  font-family: var(--serif);
  font-weight: 400;
}
#artifact-instructions {
  height: 120px;
  max-height: 240px;
}
@media (max-width: 700px) {
  #artifact-panel {
    inset: 0;
    width: 100%;
    border-radius: 0;
    padding: 14px;
  }
  #artifact-content {
    min-height: 180px;
  }
  .source-preview {
    max-height: 250px;
  }
  .artifact-toolbar button {
    font-size: 10px;
  }
}
@media (min-width: 1050px) {
  body.artifact-open #main,
  body.artifact-open .topbar {
    width: calc(100% - 674px);
  }
  body.artifact-open #messages {
    width: calc(100% - 30px);
    padding: 12px 16px 24px;
  }
  body.artifact-open .compose-wrap {
    width: calc(100% - 24px);
    padding: 0 8px;
  }
  body.artifact-open .page-footer {
    right: 700px;
  }
  body.artifact-open .conversation-tools {
    max-height: 95px;
  }
}

/* Focused task workflow */
.conversation-tools[hidden] {
  display: none !important;
}
.message-receipt,
.receipt-details {
  display: none !important;
}
#task-start {
  width: min(520px, 90vw);
  margin: 18px auto 0;
}
.task-primary {
  border: 1px solid #cf9b7d;
  background: #fff9f3;
  border-radius: 24px;
  padding: 10px 22px;
  color: #953b20;
}
#recent-tasks {
  margin: 14px auto;
  display: grid;
  gap: 6px;
  max-height: 150px;
  overflow: auto;
}
#recent-tasks > small {
  color: #8e8176;
  font-size: 11px;
}
.recent-task {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 8px 12px;
  background: #fff9;
  border: 1px solid #e7ddd3;
  border-radius: 12px;
  font-size: 12px;
}
.recent-task span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-task small {
  white-space: nowrap;
  color: #8e8176;
  font-size: 10px;
}
body.chatting #task-start {
  display: none;
}
#welcome .mascot {
  transform: scale(0.88);
}
@media (max-height: 760px) {
  #recent-tasks {
    max-height: 86px;
  }
  #task-start {
    margin-top: 8px;
  }
}

.recent-task {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.recent-task span {
  min-width: 0;
  flex: 1;
}
.recent-task small {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .recent-task small {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #recent-tasks {
    width: 100%;
    box-sizing: border-box;
  }
}

.revision-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.revision-diff section {
  min-width: 0;
  background: #fffdf9;
  border: 1px solid #e8ddd0;
  border-radius: 14px;
  padding: 12px;
}
.revision-diff h3 {
  font-size: 13px;
  margin: 0 0 12px;
}
.revision-diff pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/1.85 inherit;
  margin: 0;
}
.revision-diff mark.removed {
  background: #f7dcd4;
  color: #833a2c;
}
.revision-diff mark.added {
  background: #dcebd9;
  color: #285137;
}
.selected-excerpt {
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
  padding: 12px;
  background: #f4ece3;
  border-radius: 10px;
}
#run-state {
  margin: 8px 0;
  padding: 10px 14px;
  background: #fffaf3;
  border: 1px solid #e7d7c5;
  border-radius: 16px;
  font-size: 12px;
}
#run-state[hidden] {
  display: none;
}
#run-state p {
  margin: 4px 0;
  color: #877363;
}
#run-state .workspace-action {
  font-size: 11px;
  margin: 4px 6px 0 0;
}
#run-state details {
  max-height: 120px;
  overflow: auto;
}
#run-state pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#run-state[data-state='failed'],
#run-state[data-state='cancelled'],
#run-state[data-state='interrupted'] {
  border-color: #d4a88b;
}
@media (max-width: 600px) {
  .revision-diff {
    grid-template-columns: 1fr;
  }
  #run-state {
    padding: 7px 10px;
    font-size: 11px;
  }
}

body:has(#run-state[data-state='cancelled']:not([hidden])) #jump-latest,
body:has(#run-state[data-state='failed']:not([hidden])) #jump-latest,
body:has(#run-state[data-state='interrupted']:not([hidden])) #jump-latest {
  display: none;
}
.revision-diff pre {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.85;
}

/* Visible workspace destinations */
.topbar {
  height: 120px;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: 10px;
  padding: 18px 32px;
}
#workspace-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-basis: 100%;
  height: 36px;
}
#workspace-nav button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 17px;
  border: 1px solid #ded1c2;
  background: #fffaf2d9;
  backdrop-filter: blur(12px);
  border-radius: 20px;
  font-size: 12px;
  color: #665044;
}
#workspace-nav button:hover,
#workspace-nav button.has-project {
  background: #efe0cf;
  color: #a34321;
  border-color: #cc9b79;
}
#workspace-nav svg {
  width: 16px;
  height: 16px;
}
#menu {
  width: auto;
  gap: 7px;
  display: flex;
  border-radius: 18px;
}
.menu-label {
  font-size: 11px;
  white-space: nowrap;
}
#main {
  height: calc(100dvh - 178px);
}
#projects-section {
  border-bottom: 1px solid #e4d8ca;
  padding-bottom: 12px;
  margin-bottom: 14px;
}
#projects-section > small {
  display: block;
  padding: 0 10px;
  color: #9c8977;
  font-size: 10px;
}
#projects-empty {
  padding: 0 10px;
  font-size: 11px;
  color: #907e6d;
}
#project-list {
  max-height: 170px;
  overflow: auto;
}
#project-list .workspace-action {
  margin: 2px 0;
  background: #e9ddce70;
}
#history-search-open {
  align-self: stretch;
  background: #eee4d7;
  color: #6e5947;
  justify-content: space-between;
}
#new {
  align-self: stretch;
  justify-content: space-between;
}
.result-card {
  padding: 12px 0;
  border-bottom: 1px solid #e6dacb;
}
.result-card small {
  display: block;
  font-size: 10px;
  color: #958371;
  overflow-wrap: anywhere;
}
.result-open {
  padding: 5px 0;
  text-align: left;
  font-size: 14px;
  color: #6d3f2d;
}
.result-open:hover {
  text-decoration: underline;
}
@media (min-width: 1050px) {
  body.artifact-open #workspace-nav {
    gap: 5px;
  }
  body.artifact-open #workspace-nav button {
    padding: 5px 12px;
  }
  body.artifact-open .menu-label {
    display: none;
  }
}
@media (max-width: 700px) {
  .topbar {
    height: 118px;
    padding: 14px 18px;
    row-gap: 12px;
  }
  #workspace-nav {
    justify-content: space-between;
    gap: 5px;
  }
  #workspace-nav button {
    padding: 6px 10px;
    gap: 5px;
    flex: 1;
    justify-content: center;
    font-size: 12px;
  }
  .menu-label {
    display: none;
  }
  #menu {
    width: 36px;
  }
  #main {
    height: calc(100dvh - 170px);
  }
  .topbar #menu {
    top: 14px;
  }
  #project-list {
    max-height: 140px;
  }
}
@media (max-height: 700px) {
  #workspace-nav {
    height: 30px;
  }
  .topbar {
    height: 100px;
    padding-top: 10px;
    row-gap: 5px;
  }
  #main {
    height: calc(100dvh - 150px);
  }
  #recent-tasks {
    max-height: 68px;
  }
}

#workspace-nav button {
  min-width: 0;
}
#workspace-nav button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#composer #add {
  width: auto;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 18px;
}
#composer #add span {
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  #workspace-nav button {
    max-width: calc((100% - 15px) / 4);
  }
}

body.project-open #welcome,
body.project-open #messages,
body.project-open .compose-wrap,
body.project-open #jump-latest {
  display: none !important;
}
body.project-open #main {
  justify-content: flex-start;
  padding: 0 24px 14px;
}
#project-workspace {
  width: min(1160px, 100%);
  margin: 0 auto;
  overflow: auto;
  min-height: 0;
  height: 100%;
  padding: 20px 6px 36px;
  scrollbar-width: thin;
}
.project-heading {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.project-heading h1 {
  font-size: 30px;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}
.project-heading small {
  color: #ad7051;
  font-size: 11px;
}
.project-heading p,
#project-workspace > p {
  color: #8d7c6a;
  font-size: 12px;
}
.project-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 430px;
}
.project-actions .workspace-action:first-child {
  background: #b94a27;
  color: #fff;
}
.project-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.project-section {
  background: #fffaf2db;
  border: 1px solid #e5d7c7;
  border-radius: 20px;
  padding: 18px;
  min-width: 0;
}
.project-section > h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 15px;
}
.project-section > p {
  font-size: 12px;
  color: #9c8673;
}
.project-item {
  padding: 13px 0;
  border-top: 1px solid #e9ded0;
}
.project-item h3 {
  font-size: 13px;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.project-item small {
  display: block;
  color: #978371;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.project-item .workspace-action {
  margin: 7px 5px 0 0;
  font-size: 11px;
  padding: 6px 10px;
}
#project-search {
  display: block;
  width: 100%;
  border: 1px solid #dcccba;
  border-radius: 14px;
  padding: 10px 14px;
  background: #fffaf2dd;
  margin: 12px 0 20px;
}
.project-error {
  color: #ae4829 !important;
  white-space: pre-wrap;
}
#project-file-target {
  width: 100%;
  padding: 10px;
  border: 1px solid #dfcdb9;
  border-radius: 10px;
  background: #fff9ee;
}
body.project-open .landscape:after {
  background: #f8f3eccc;
  backdrop-filter: blur(5px);
}
@media (max-width: 850px) {
  .project-columns {
    grid-template-columns: 1fr;
  }
  .project-heading {
    display: block;
  }
  .project-actions {
    justify-content: flex-start;
    max-width: none;
    margin: 12px 0;
  }
  .project-heading h1 {
    font-size: 26px;
  }
  body.project-open #main {
    padding: 0 14px 8px;
  }
  #project-workspace {
    padding-top: 8px;
  }
  .project-section {
    padding: 14px;
  }
}

.project-finder {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f2eaf2;
  backdrop-filter: blur(10px);
  padding: 1px 0 10px;
  margin-bottom: 16px;
  border-radius: 14px;
}
#project-search {
  margin-bottom: 8px;
}
.project-jumps {
  display: flex;
  gap: 6px;
}
.project-jumps button {
  margin: 0;
  flex: 1;
  text-align: center;
  border: 1px solid #e0cdb9;
  background: #fffaf0;
}
.project-section {
  scroll-margin-top: 122px;
}
body.project-open .topbar > .header-actions {
  color: #735d49;
}

#workspace-nav {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

#project-progress {
  background: #fffaf3e8;
  border: 1px solid #dfcbb6;
  border-radius: 20px;
  padding: 18px;
  margin: 6px 0 18px;
}
#project-progress > h2 {
  font-size: 17px;
  margin: 0 0 3px;
}
#project-progress > small {
  color: #a17b58;
  font-size: 11px;
}
#project-progress > p {
  font-size: 12px;
  color: #a85831;
}
.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 12px 0;
}
.progress-grid h3 {
  font-size: 12px;
  color: #8c6044;
  margin: 0;
}
.progress-grid p {
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 6px 0;
}
#project-progress-form textarea {
  min-height: 70px;
  max-height: 200px;
}
.evidence-row {
  border-top: 1px solid #eadfce;
  padding: 10px 0;
}
.evidence-row p {
  font-size: 11px;
  margin: 4px 0;
}
.evidence-row strong {
  font-size: 11px;
}
.agent-steps {
  font-size: 11px;
  margin: 6px 0;
  padding-left: 20px;
}
.citation-link {
  display: inline;
  color: #a54720;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}
.source-line {
  display: block;
  white-space: pre-wrap;
}
.source-line.highlight {
  background: #ffe3b9;
  color: #653514;
}
.material-selection {
  font-size: 11px;
  color: #8e6242;
}
#run-state:has(.agent-steps) {
  max-height: 220px;
  overflow: auto;
}
@media (max-width: 700px) {
  .progress-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #project-progress {
    padding: 14px;
  }
  #project-progress .workspace-action {
    font-size: 11px;
  }
}

#agent-task-type {
  width: 100%;
  padding: 10px;
  border: 1px solid #dfcdb9;
  border-radius: 10px;
  background: #fffaf2;
}
.agent-comparison-row {
  padding: 12px;
  border: 1px solid #dfcfbd;
  border-radius: 14px;
  margin: 10px 0;
}
.agent-comparison-row small {
  display: block;
  font-size: 10px;
  color: #927355;
  overflow-wrap: anywhere;
}
.agent-numeric-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.agent-numeric-fields input {
  min-width: 0;
}
.agent-tool-preview {
  background: #f4e9d9;
  padding: 10px;
  border-radius: 12px;
}
.agent-date-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#agent-capabilities {
  padding: 10px;
  border: 1px solid #e4d5c4;
  border-radius: 12px;
}

.generated-image-preview {
  width: 100%;
  height: auto;
  max-height: 45dvh;
  object-fit: contain;
  border: 1px solid #e3d3c0;
  border-radius: 16px;
  background: #f2e9dd;
}
.project-image-gallery {
  border: 1px solid #e1d0bb;
  border-radius: 20px;
  background: #fff9f1d9;
  padding: 18px;
  margin-top: 18px;
  scroll-margin-top: 125px;
}
.project-image-gallery h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.image-gallery-card {
  padding: 10px;
  border: 1px solid #dfcdb6;
  border-radius: 14px;
  text-align: left;
  min-width: 0;
}
.image-gallery-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f1e7d8;
  border-radius: 10px;
}
.image-gallery-card strong,
.image-gallery-card small {
  display: block;
  overflow-wrap: anywhere;
}
.image-gallery-card small {
  color: #957b64;
  font-size: 11px;
}
#image-config-form select,
#image-generation-form select,
#image-access-form select {
  width: 100%;
  padding: 9px;
  margin: 8px 0 12px;
  border: 1px solid #deccb5;
  border-radius: 10px;
  background: #fffaf1;
}
.project-jumps {
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .image-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .image-gallery-card img {
    height: 125px;
  }
  .project-image-gallery {
    padding: 12px;
  }
  .project-jumps button {
    padding: 6px;
    font-size: 11px;
  }
}

/* 0.17 layout: keep the existing look; persistent sidebar on wide screens, model tag on replies, quieter actions. */
.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding: 2px 10px 2px 3px;
  border-radius: 20px;
  background: #fffcf6b8;
  border: 1px solid #fff;
  box-shadow: 0 2px 10px #6a4a2c0a;
  font-size: 11px;
  font-weight: 400;
  color: #6c6055;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.model-chip .model-emblem {
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-style: normal;
  letter-spacing: -1px;
}
@media (hover: hover) {
  .message.assistant .message-actions {
    opacity: 0;
    transition: opacity 0.2s;
  }
  .message.assistant:hover .message-actions,
  .message.assistant:focus-within .message-actions,
  .message.assistant:last-child .message-actions {
    opacity: 1;
  }
}
@media (min-width: 1100px) {
  aside {
    width: 280px;
    transform: none;
    border-radius: 0;
    background: #fbf8f2c7;
    backdrop-filter: blur(18px);
    border-right: 1px solid #ffffffa0;
    box-shadow: 8px 0 30px #7b53330d;
    padding: 22px 16px 16px;
  }
  .sidebar-backdrop,
  #close-sidebar,
  .topbar .brand-group,
  #workspace-nav {
    display: none !important;
  }
  aside .new {
    align-self: stretch;
    justify-content: center;
    margin: 10px 0 0;
    padding: 9px 14px;
  }
  #history-search-open {
    background: #efe8dd8c;
    color: #8b8075;
    box-shadow: none;
  }
  #new {
    background: linear-gradient(140deg, #ec8550, #c64b20 55%, #9b3217);
    box-shadow:
      inset 0 1px 1px #ffd8b9,
      0 6px 16px #ac492c2b;
    margin-bottom: 8px;
  }
  .topbar,
  #main {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
  .topbar {
    height: 72px;
    justify-content: flex-end;
    padding: 16px 32px;
  }
  #main {
    height: calc(100dvh - 130px);
  }
  .page-footer {
    left: 320px;
  }
  /* Secondary destinations in two compact columns so conversations get the height. */
  aside .more-menu {
    padding-top: 6px;
  }
  aside .more-menu summary {
    margin: 6px 2px;
  }
  aside .more-menu button {
    display: inline-flex;
    vertical-align: top;
    width: calc(50% - 2px);
    gap: 8px;
    padding: 5px 8px;
    border-radius: 10px;
  }
  aside .more-menu button:hover {
    background: #efe6da80;
  }
  #build-label {
    display: none;
  }
  #artifact-panel {
    width: 440px;
  }
  body.artifact-open #main,
  body.artifact-open .topbar {
    width: calc(100% - 280px - 464px);
  }
  body.artifact-open .page-footer {
    right: 476px;
  }
}

/* Artifact panel: title as heading, one primary action, the rest under "更多". */
#artifact-panel .artifact-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}
#artifact-panel #artifact-title {
  flex: 1;
  min-width: 0;
  border-bottom-color: transparent;
  padding: 4px 2px;
}
#artifact-panel #artifact-title:focus {
  outline: none;
  border-bottom-color: #e5d7c4;
}
.artifact-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  color: #8b8075;
}
.artifact-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.artifact-meta #artifact-versions {
  border-radius: 16px;
  padding: 3px 8px;
  max-width: 100%;
}
.artifact-meta #artifact-save-status {
  font-size: 11px;
  color: #a08c78;
}
#artifact-panel .artifact-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
}
#artifact-panel .artifact-toolbar .workspace-action {
  margin: 0;
}
#artifact-panel .artifact-primary {
  color: #fff;
  border: 0;
  background: linear-gradient(140deg, #ec8550, #c64b20 55%, #9b3217);
  box-shadow:
    inset 0 1px 1px #ffd8b9,
    0 4px 12px #ac492c23;
}
#artifact-panel .artifact-primary:hover {
  color: #fff;
  filter: brightness(1.05);
}
#artifact-panel .artifact-save {
  border-color: #cc9b79;
  color: #a34321;
}
.artifact-more {
  margin-left: auto;
  position: relative;
}
.artifact-more summary {
  margin: 0;
  padding: 5px 14px;
  border-radius: 18px;
  border: 1px solid #e0cdb9;
  background: #fffaf0;
  font-size: 12px;
  color: #6c6055;
}
.artifact-more summary:after {
  content: ' ▾';
}
.artifact-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 2;
  min-width: 170px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: #fffcf7;
  border: 1px solid #eadccb;
  border-radius: 14px;
  box-shadow: 0 12px 30px #51371d26;
}
#artifact-panel .artifact-menu .workspace-action {
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  border-radius: 10px;
  padding: 7px 10px;
}
#artifact-panel .artifact-menu .workspace-action:hover {
  background: #f3e9dc;
}
.artifact-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fbeee2;
}

/* Agent steps as they really happen: red tick when done, spinner while running. */
#run-state .agent-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 2px;
  font-size: 12.5px;
}
#run-state .agent-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  color: #5d534a;
}
#run-state .agent-steps small {
  margin-left: auto;
  padding-left: 10px;
  color: #a99d91;
  font-size: 11px;
  text-align: right;
}
.step-mark {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  background: #f3e4d6;
  color: var(--red);
}
.step-mark.done {
  background: #c9572a;
  color: #fff;
}
.step-mark.running {
  background: none;
  border: 2px solid #e9b597;
  border-top-color: var(--red);
  animation: step-spin 1s linear infinite;
}
.step-mark.failed,
.step-mark.needs_attention {
  background: #f6d6c8;
  color: #9c2f12;
}
@keyframes step-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step-mark.running {
    animation: none;
  }
}

/* Home task templates (same glass cards as the composer and model picker). */
#task-start {
  width: min(720px, calc(100vw - 48px));
}
#task-templates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.task-template {
  text-align: left;
  min-width: 0;
  padding: 13px 14px 12px;
  background: #fffcf6b8;
  backdrop-filter: blur(12px);
  border: 1px solid #fff;
  border-radius: 18px;
  box-shadow: 0 8px 22px #7b533312;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.task-template:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px #7b53331d;
}
.task-template i {
  font-style: normal;
  font-size: 17px;
  color: var(--red);
}
.task-template b {
  display: block;
  font: 400 15px var(--serif);
  letter-spacing: 1px;
  margin: 4px 0 2px;
}
.task-template small {
  display: block;
  color: #9a8f84;
  font-size: 12px;
  line-height: 1.5;
}
#task-start #recent-tasks {
  width: min(520px, 100%);
}
@media (max-width: 700px) {
  #task-templates {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .task-template {
    padding: 10px 12px;
    border-radius: 15px;
  }
  .task-template small {
    font-size: 11px;
  }
  /* Keep the mascot visible above the templates on short phone screens. */
  #welcome .mascot {
    width: 92px;
    height: 81px;
    margin-bottom: 4px;
    transform: none;
  }
  #task-start #recent-tasks {
    max-height: 96px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .task-template {
    transition: none;
  }
}

/* Agent switch in the composer: same pill as the quick/deep mode button, tinted when on. */
.agent-toggle[aria-pressed='true'] {
  background: #f6e2d4;
  color: #a34321;
  border-color: #e2b394;
}
.agent-toggle[aria-pressed='true']::after {
  content: ' 开';
}
@media (max-width: 700px) {
  /* On phones the tint alone shows the state, so the composer keeps one row. */
  .agent-toggle[aria-pressed='true']::after {
    content: '';
  }
}
@media (max-width: 420px) {
  /* Narrow phones: the ＋ icon alone stands for "资料" so all composer controls fit on one row. */
  #add > span {
    display: none;
  }
}

/* Shared "更多 ▾" dropdown for secondary actions. */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown summary {
  margin: 0;
  padding: 5px 14px;
  border-radius: 18px;
  border: 1px solid #e0cdb9;
  background: #fffaf0;
  font-size: 12px;
  color: #6c6055;
  white-space: nowrap;
}
.dropdown summary:after {
  content: ' ▾';
}
.dropdown-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 3;
  min-width: 160px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: #fffcf7;
  border: 1px solid #eadccb;
  border-radius: 14px;
  box-shadow: 0 12px 30px #51371d26;
}
.dropdown-list .workspace-action {
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  border-radius: 10px;
  padding: 7px 10px;
  white-space: nowrap;
}
.dropdown-list .workspace-action:hover {
  background: #f3e9dc;
}

/* Project page: back link, one primary action, quiet secondary ones. */
.project-heading .project-back {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 4px;
  font-size: 12px;
  color: #ad7051;
}
.project-actions {
  align-items: center;
  gap: 6px;
}
.project-actions .workspace-action:first-child {
  background: none;
  color: inherit;
}
.project-actions .workspace-action.project-primary {
  color: #fff;
  border: 0;
  background: linear-gradient(140deg, #ec8550, #c64b20 55%, #9b3217);
  box-shadow:
    inset 0 1px 1px #ffd8b9,
    0 4px 12px #ac492c23;
}
.project-actions .workspace-action.project-primary:hover {
  color: #fff;
  filter: brightness(1.05);
}
.progress-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.progress-actions .dropdown-list {
  left: 0;
  right: auto;
}
.project-section h2 .section-action {
  float: right;
  margin: 0;
  padding: 2px 12px;
  font-size: 11px;
}

/* Open menus sit above the cards that follow them. */
.project-heading,
.progress-actions {
  position: relative;
  z-index: 4;
}
.dropdown[open] {
  z-index: 20;
}

/* Admin home: spend at a glance, model cards, recent calls. */
.console-warning {
  color: #9f422b;
  font-size: 12px;
}
.console-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}
.console-stat {
  padding: 12px 14px;
  border-radius: 16px;
  background: #fffcf6;
  border: 1px solid #efe2d2;
  box-shadow: 0 6px 18px #7b53330d;
}
.console-stat small {
  display: block;
  color: #9a8f84;
  font-size: 11px;
}
.console-stat strong {
  display: block;
  font: 400 22px/1.4 var(--serif);
  color: var(--ink);
}
.console-model {
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 14px;
  border: 1px solid #eee2d4;
  background: #fffaf3;
}
.console-model-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.console-model-head b {
  font: 400 15px var(--serif);
}
.console-model-head .workspace-action {
  margin: 0 0 0 auto;
}
.console-model > small {
  display: block;
  color: #8e8176;
  font-size: 11px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.console-chip {
  font-size: 11px;
  padding: 1px 9px;
  border-radius: 12px;
  background: #efe8dd;
  color: #8b8075;
}
.console-chip.on {
  background: #f6e2d4;
  color: #a34321;
}
.console-table {
  overflow-x: auto;
  margin-bottom: 12px;
}
.console-calls {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.console-calls th,
.console-calls td {
  text-align: left;
  padding: 6px 6px;
  border-bottom: 1px solid #efe4d7;
  white-space: nowrap;
}
.console-calls th {
  color: #9a8f84;
  font-weight: 400;
}
.console-calls td:nth-child(4) {
  white-space: normal;
  min-width: 80px;
}
.console-form label {
  display: block;
  margin: 8px 0;
}
.console-prices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.console-prices label {
  margin: 0;
  font-size: 12px;
}
.console-form .workspace-action {
  margin-left: 8px;
}
@media (max-width: 600px) {
  .console-prices {
    grid-template-columns: 1fr 1fr;
  }
}

.console-refused {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fbeee2;
  font-size: 12px;
  color: #7a4a2e;
}
.console-refused .workspace-action {
  margin: 0 0 0 auto;
}

/* Bafang identity: an upright fortune tile. */
.brand-mark,
.drawer-head .brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 36px;
  box-sizing: border-box;
  transform: none;
  border: 1px solid #b74926;
  border-radius: 8px;
  background: #fffaf0;
  color: #b74926;
  font: bold 24px/1 var(--serif);
  letter-spacing: 0;
  box-shadow:
    0 3px 0 #d7c6ac,
    inset 0 0 0 3px #f3e9dc;
}
.brand-mark:before,
.brand-mark:after,
.brand-mark i,
.brand-mark b {
  display: none;
}
.console-chart {
  width: 100%;
  height: 180px;
  display: block;
  background: #fffaf5;
  border: 1px solid #eadfd1;
  border-radius: 12px;
}
.console-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.console-toolbar select {
  max-width: 220px;
}
.console-legend {
  font-size: 12px;
  color: #6f6255;
  line-height: 1.8;
}
.console-provider {
  padding: 14px;
  border: 1px solid #e6d9c9;
  border-radius: 12px;
  margin: 10px 0;
}
.console-provider button {
  margin-left: 12px;
}
.project-chat-label {
  font-size: 12px;
  color: #8c5a3d;
}
.usage-table {
  width: 100%;
  font-size: 12px;
}
.usage-table th,
.usage-table td {
  text-align: left;
  padding: 6px;
}

#active-project-banner {
  display: block;
  max-width: 100%;
  padding: 8px 14px;
  margin: 0 auto 8px;
  border: 1px solid #e6d9c9;
  border-radius: 12px;
  background: #fffaf0;
  overflow-wrap: anywhere;
}
#active-project-banner[hidden] {
  display: none;
}

dialog:has(.console-chart) {
  width: min(1080px, calc(100vw - 40px));
  max-width: none;
}
.console-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #75695d;
  margin: 6px 2px 12px;
}
.console-toolbar select {
  padding: 7px 10px;
  border: 1px solid #e1d6c7;
  border-radius: 8px;
  background: #fffaf5;
  color: #43362c;
  font: inherit;
}
.console-toolbar label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.console-provider form label {
  display: block;
  margin: 10px 0;
}
.console-provider form input,
.console-provider form select {
  width: 100%;
  box-sizing: border-box;
}
.console-provider p {
  overflow-wrap: anywhere;
}
.console-provider {
  margin: 12px 0;
}
.console-toolbar {
  padding: 4px 0 12px;
}
.console-chart {
  height: 210px;
}
.usage-table {
  display: block;
  overflow-x: auto;
}
.console-stats {
  margin-bottom: 20px;
}
.console-model-head {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  dialog:has(.console-chart) {
    width: calc(100vw - 36px);
    padding: 22px 18px;
  }
  .console-toolbar label {
    max-width: 100%;
  }
  .console-toolbar select {
    max-width: 210px;
  }
  .console-chart {
    height: 180px;
  }
}

/* Correct the hat layer without rotating the shared face. */
/* Hat source is already level; keep it aligned to the unchanged face. */
.mascot:after{transform-origin:50% 57%}.mascot.deepseek:after{transform:none}

.model-option.compact{padding:10px 12px;gap:12px;min-height:70px}.model-option.compact .description small{margin-top:5px}#model-options h3{margin:18px 0 7px;font-size:13px;color:#965735}#dialog-content>details{margin-top:16px;padding-top:12px;border-top:1px solid #e6d9c9}

/* Task recovery and deliverable details */
#recovery-actions:not([hidden]){display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0}#recovery-actions button{border:1px solid #dfcdbb;border-radius:16px;background:#fffaf3;color:#744d35;padding:7px 12px;cursor:pointer}.artifact-summary{display:block;flex-basis:100%;color:#877868;line-height:1.6}

@media(max-width:1099px){body.artifact-open #sidebar,body.artifact-open #sidebar-backdrop{visibility:hidden;pointer-events:none}#artifact-panel{inset:8px;width:calc(100vw - 16px);padding:16px}}



/* One complete avatar per hat, shared across every mascot size and state. */
.mascot{position:relative;background-image:url('/assets/default-mascot-v2.png');background-size:100% auto;background-position:center;background-repeat:no-repeat;isolation:isolate}
.mascot:before,.mascot:after{content:none;display:none}
.mascot.default{background-image:url('/assets/default-mascot-v2.png');background-position:center}
.mascot.deepseek{background-image:url('/assets/deepseek-mascot-v2.png');background-position:center}
.mascot.gpt{background-image:url('/assets/gpt-mascot-v2.png');background-position:center}
.mascot.claude{background-image:url('/assets/claude-mascot-v2.png');background-position:center}
.mascot.gemini{background-image:url('/assets/gemini-mascot-v2.png');background-position:center}
.mascot.qwen{background-image:url('/assets/qwen-mascot-v2.png');background-position:center}

#project-memory{padding:18px;background:#fffaf3;border:1px solid #dfcbb6;border-radius:20px;margin:8px 0 18px}#project-memory p{white-space:pre-wrap;max-height:180px;overflow:auto;line-height:1.7}#project-memory-content{display:block;width:100%;box-sizing:border-box;min-height:220px;resize:vertical;padding:12px;border:1px solid #dfcbb6;border-radius:12px;background:#fffaf3}

.image-prompt-templates{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}#image-generation-form textarea{width:100%;box-sizing:border-box;min-height:110px}#image-generation-form label{display:block;margin-top:10px}#image-generation-form small{display:block;line-height:1.7;color:#89735d}.generated-image-preview{max-width:100%;height:auto;object-fit:contain}

@media(max-width:1099px){input:not([type=checkbox]):not([type=radio]),textarea,select,#input,#composer textarea{font-size:16px!important}button,.workspace-action{min-height:40px}#composer{align-items:center}.console-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.console-toolbar select{max-width:100%}}
.admin-page{max-width:1200px;margin:0 auto;padding:24px}.admin-page header{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:24px}.admin-page section{background:#fffaf3;border:1px solid #e3d2bd;border-radius:18px;padding:20px;margin:16px 0}.admin-page .console-chart{width:100%;min-height:180px}.admin-page #admin-error{color:#ae3c23}

.admin-page h1{font-size:28px;line-height:1.3;margin:0}.admin-page header button{border:1px solid #dfcdbb;border-radius:14px;padding:9px 14px;background:#fffaf3;color:#79533b;cursor:pointer}.admin-page>section{overflow-x:auto}.admin-page header a{color:#a74423}

body.admin-shell{height:auto;min-height:100dvh;overflow:auto}.admin-shell main.admin-page{height:auto;min-height:100dvh;display:block;justify-content:initial;overflow:visible}.admin-page .console-toolbar label{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}.admin-page .console-toolbar select{width:100%;min-width:0}.admin-page section{height:auto;flex:none}

#mixed-mode{display:flex;align-items:center;gap:10px;margin:8px 0;color:#86664e;flex-wrap:wrap}#mixed-mode label{display:flex;gap:8px;align-items:center}#mixed-kind{border:1px solid #dfcdbb;border-radius:18px;background:#fffaf3;padding:7px 10px}#mixed-mode .mascot{width:42px;height:36px;margin:0}#mixed-mode small{flex:1;min-width:130px}#mixed-results{max-width:780px;margin:14px auto;width:100%;padding:0 16px}.mixed-result{border:1px solid #e3d2bd;border-radius:18px;padding:16px;background:#fffaf3;margin:12px 0}.mixed-result>.mascot{width:56px;height:49px;margin:0;display:inline-block;vertical-align:middle}.mixed-result img{display:block;width:min(100%,440px);height:auto;border-radius:12px;margin:12px 0}.mixed-result p{max-height:80px;overflow:auto;white-space:pre-wrap}.mixed-result button{border:1px solid #dfcdbb;border-radius:16px;padding:8px 12px;margin:8px;background:#fffaf3}.mixed-result small{display:block}@keyframes hat-sway{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-2px)}}.mixed-working .mascot{animation:hat-sway 1.8s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.mixed-working .mascot{animation:none}}

.image-work-status .mascot{display:block;width:72px;height:64px;margin:0 auto}#mixed-results[hidden]{display:none}

#mixed-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}.mixed-examples{margin:10px 0;color:#8c7058}.mixed-examples summary{cursor:pointer;text-align:center;font-size:13px}@media(max-width:600px){#mixed-start{gap:7px}#mixed-start .task-template{padding:12px 9px;min-height:100px}#mixed-start .task-template b{font-size:15px}#mixed-start .task-template small{font-size:11px;line-height:1.5}}

#mixed-mode .model-row{margin:0;flex:none}#mixed-task-badge{border:1px solid #e3d2bd;border-radius:16px;background:#fffaf3;padding:5px 10px}#mixed-task-badge[hidden]{display:none}#mixed-kind{max-width:100%}@media(max-width:600px){#mixed-mode{gap:6px}#mixed-mode label{flex:1;min-width:0}#mixed-mode label select{min-width:0;flex:1}#mixed-mode small{font-size:11px;flex-basis:100%}#mixed-mode .model-row{max-width:100%}}

@keyframes brand-seal-in{from{opacity:0;transform:translateY(4px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes brand-work-halo{0%,100%{box-shadow:0 0 0 0 #c24b2420}50%{box-shadow:0 0 0 6px #c24b2400}}.brand-mark{animation:brand-seal-in .6s ease-out 1;transform:none}.bafang-working .brand-mark,.bafang-image-working .brand-mark{animation:brand-work-halo 2s ease-in-out infinite}.routing-proof{display:block;font-size:11px;color:#90745f;font-weight:normal;flex-basis:100%}@media(prefers-reduced-motion:reduce){.brand-mark,.bafang-working .brand-mark,.bafang-image-working .brand-mark{animation:none}}

#workflow-board{background:#fffaf3;border:1px solid #e3d2bd;border-radius:16px;padding:14px;margin:12px 0;overflow-wrap:anywhere}#workflow-board p{max-height:64px;overflow:auto}#workflow-board button,.workflow-step button,#mixed-mode>button{border:1px solid #dfcdbb;border-radius:14px;background:#fffaf3;padding:8px 12px;color:#885a3a}.workflow-step{border:1px solid #e3d2bd;border-radius:14px;padding:12px;margin:12px 0}.workflow-step input:not([type=checkbox]),.workflow-step textarea{display:block;width:100%;box-sizing:border-box;padding:9px;margin:8px 0;border:1px solid #dfcdbb;border-radius:10px;background:#fffaf3}.workflow-step pre{white-space:pre-wrap;max-height:240px;overflow:auto}.workflow-step img{max-width:100%;height:auto}

#workflow-board{margin:16px 0}#workflow-board>strong{display:flex;align-items:center;gap:8px}#workflow-board>strong .mascot{width:44px;height:38px;margin:0}#workflow-board ol{padding-left:22px}#workflow-board li{margin:9px 0}#workflow-board li small{color:#927c68;font-size:12px}#workflow-board button{margin:5px 8px 5px 0}#inline-image-setup textarea,#inline-image-setup select,#inline-image-setup input{display:block;width:100%;padding:10px;margin:10px 0;border:1px solid #dfcdbb;border-radius:12px;background:#fffaf3;box-sizing:border-box}#task-input-count[hidden]{display:none}

/* Cost allowance dialog: do not inherit the 18px toolbar icon size. */
#dialog .cost-allowance-ring { width: 160px; height: 160px; display: block; margin: 16px auto; flex-shrink: 0; }

/* Keep task controls within the conversation scrollport. */
#messages{position:relative;scroll-padding-top:12px}#workflow-board button{scroll-margin:20px 0}

.workflow-explanation{font-size:12px;color:#886f5d;margin:10px 0}.workflow-explanation p{max-height:none!important;line-height:1.75}

#workflow-board .workflow-review-note{max-height:none;color:#8c421f;background:#fff1df;border-left:3px solid #c45d29;padding:10px;line-height:1.7}

#subscription-redeem,.subscription-admin{border:1px solid #e3d2bd;border-radius:18px;padding:18px;margin:16px 0;background:#fffaf4}#subscription-redeem label,.subscription-admin label{display:block;margin:10px 0}#subscription-redeem input,.subscription-admin input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;border:1px solid #ddcbbb;border-radius:10px;padding:10px;background:#fffdf9;margin:7px 0}#allowance-inline{display:block;font-size:11px;color:#8a705c;line-height:1.6;margin:6px 10px}.subscription-admin fieldset{border:1px solid #ddcbbb;border-radius:12px}.subscription-invite{border-top:1px solid #e3d2bd;padding:12px 0}.subscription-admin input[type=checkbox]{margin-right:8px}.subscription-admin button,#subscription-redeem button{padding:10px 15px;margin:8px 8px 8px 0;border-radius:12px;border:1px solid #ddcbbb}.cost-allowance-ring text{font-family:system-ui,sans-serif}

/* Home owns one vertical scroll area; conversation scrolling stays in #messages. */
body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{overflow-y:auto;justify-content:flex-start;overscroll-behavior-y:contain;scroll-padding:20px 0 32px;padding-top:24px;padding-bottom:32px}
body:not(.chatting):not(.project-open):not(.artifact-open) #main .compose-wrap{flex-shrink:0}
body:not(.chatting) #task-start #recent-tasks{max-height:none;overflow:visible}
/* Calm, single-screen task entry. History and examples live in secondary dialogs. */
body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{
 height:calc(100dvh - 140px);min-height:0;overflow-y:auto;justify-content:center;gap:22px;padding:12px 0 24px;scroll-padding:12px;
}
body:not(.chatting) #welcome{margin:0 auto;max-width:100%;width:min(720px,calc(100% - 32px));flex-shrink:0}
body:not(.chatting) #welcome .mascot{width:112px;height:96px;margin:0 auto 14px;transform:none}
body:not(.chatting) #welcome h1{font-size:clamp(28px,3.2vw,46px);line-height:1.3;margin:0 0 10px;letter-spacing:2px}
body:not(.chatting) #welcome p{margin:0;color:#88796d;font-size:12px;letter-spacing:1px}
body:not(.chatting) #task-start{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 0}
#mixed-start,.home-links{display:flex;gap:8px;align-items:center}
#mixed-start{grid-template-columns:none}
#mixed-start button,.home-links button{padding:7px 15px;border:1px solid #dfd2c3;border-radius:22px;background:#fffaf3a8;font-size:12px;white-space:nowrap;box-shadow:none}
.home-links button{background:transparent;color:#887565}
body:not(.chatting) .compose-wrap{margin:0 auto;width:min(720px,calc(100% - 32px))}
body:not(.chatting) #mixed-mode{margin:0 0 10px;justify-content:center;gap:8px}
body:not(.chatting) #mixed-mode>small,body:not(.chatting) #mixed-mode>.mascot,body:not(.chatting) #mixed-mode>.mixed-arrange{display:none}
body:not(.chatting) #mixed-mode label{font-size:0;display:contents}
body:not(.chatting) #mixed-kind{font-size:13px;padding:6px 12px;max-width:100%}
body:not(.chatting) #composer{margin:0;height:auto;min-height:68px}
body:not(.chatting) .temporary-note{margin:10px auto 0;font-size:11px}
body:not(.chatting) .page-footer{display:none}
#dialog #recent-tasks{max-height:none;overflow:visible;width:100%;margin:12px 0}
#dialog #task-templates{margin:16px 0}
@media(min-width:1100px){body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{height:calc(100dvh - 100px)}}
@media(max-width:700px){
 body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{gap:18px;padding:10px 0 18px}
 body:not(.chatting) #welcome .mascot{width:86px;height:74px;margin-bottom:10px}
 body:not(.chatting) #welcome h1{font-size:30px;letter-spacing:1px;margin-bottom:8px}
 body:not(.chatting) #welcome p{font-size:11px;letter-spacing:0}
 body:not(.chatting) #task-start{gap:6px;margin-top:16px}
 #mixed-start,.home-links{gap:6px}#mixed-start button,.home-links button{padding:6px 10px;font-size:12px}
 body:not(.chatting) #composer textarea{font-size:16px}
}
@media(max-height:650px){body:not(.chatting) #welcome .mascot{width:70px;height:60px;margin-bottom:5px}body:not(.chatting) #task-start{margin-top:12px}body:not(.chatting) #main{gap:12px}}
@media(max-height:460px){body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{justify-content:flex-start}body:not(.chatting) #welcome .mascot{display:none}}
.subscription-admin .plan-editor-panel{padding:20px;margin:20px 0;border:1px solid #e4d5c4;border-radius:18px;background:#fffaf5}
.plan-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}
.plan-field-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#7a604b}
.plan-field-grid input{width:100%;min-width:0;border:1px solid #decab5;background:#fffdf9;border-radius:10px;padding:9px 12px}
.plan-model-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:16px 0;border:1px solid #e1d2c0;border-radius:12px;padding:12px}
.plan-model-options label{display:flex;align-items:center;gap:8px;font-size:12px}
.plan-model-options input{width:16px!important;min-height:16px!important;margin:0!important}
.plan-budget-note{padding:10px 14px;border-radius:10px;background:#f3ebdf;font-size:13px}
.plan-budget-note[data-invalid=true]{color:#ac321b;background:#fae2db}
#subscription-version-history article{border-left:2px solid #c9916d;padding:10px 16px;margin:12px 0;background:#fffaf4;overflow-wrap:anywhere}
#subscription-version-history p{margin:4px 0}
.plan-editor-panel>p,#subscription-issue>p{overflow-wrap:anywhere}
@media(max-width:800px){.plan-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subscription-admin .plan-editor-panel{padding:12px}}
@media(max-width:430px){.plan-field-grid{grid-template-columns:1fr}.plan-model-options{grid-template-columns:1fr}}
body:not(.chatting):not(.project-open):not(.artifact-open) #messages{display:none}
body:not(.chatting) #composer{flex-wrap:nowrap}
body:not(.chatting) #composer #input{flex:1 1 0;width:0;min-width:0}
body:not(.chatting) #composer #add span{display:none}
body:not(.chatting) .compose-help{display:none}
@media(max-width:700px){
 body:not(.chatting) #composer{flex-wrap:wrap;padding:8px 10px;gap:6px}
 body:not(.chatting) #composer #input{flex:1 0 100%;width:100%;order:0;height:40px;min-height:40px;padding:5px 8px}
 body:not(.chatting) #composer>button{order:1}
 body:not(.chatting) #composer #send{margin-left:auto}
}
@media(max-width:700px) and (max-height:650px){
 body:not(.chatting) #welcome .mascot{width:60px;height:52px;margin-bottom:4px}
 body:not(.chatting) #welcome h1{font-size:28px;margin-bottom:4px}
 body:not(.chatting) #welcome p{display:none}
 body:not(.chatting) #task-start{margin-top:10px}
 body:not(.chatting):not(.project-open):not(.artifact-open):not(.admin-shell) #main{gap:10px;padding-bottom:12px}
}
.subscription-comparison{padding:18px;border:1px solid #e1d2c0;background:#fcf8f1;border-radius:18px;margin:18px 0}
.comparison-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.comparison-controls input,.comparison-controls select{min-width:0;max-width:100%;padding:8px 12px;border:1px solid #dcccba;border-radius:10px;background:#fffdf8}
.comparison-controls button{border:1px solid #b9633c;border-radius:16px;padding:8px 16px;background:#fff5e9}
.comparison-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0}
.comparison-plan{padding:16px;border:1px solid #e2d3c0;background:#fffaf3;border-radius:16px;overflow-wrap:anywhere}
.comparison-plan h4{font:20px var(--serif);margin:0 0 10px}.comparison-plan strong{font-size:25px;color:#a24525}.comparison-plan p{font-size:12px;line-height:1.8}.comparison-plan small{font-size:11px;color:#8a715e}
.comparison-table-wrap{max-width:100%;overflow-x:auto;margin:12px 0}.comparison-table-wrap table{border-collapse:collapse;width:100%;min-width:680px}.comparison-table-wrap th,.comparison-table-wrap td{text-align:left;padding:10px;border-bottom:1px solid #e5d8c9;font-size:12px}.comparison-table-wrap p{font-size:12px}
#subscription-plan-select{display:block;max-width:100%;padding:10px 14px;border:1px solid #d8c4af;background:#fffaf3;border-radius:12px;margin:8px 0}
@media(max-width:800px){.comparison-plan-grid{grid-template-columns:1fr}.subscription-comparison{padding:12px}.comparison-controls{display:grid;grid-template-columns:1fr}.comparison-controls input{width:100%}}
.language-toggle{position:fixed;left:16px;bottom:16px;z-index:45;border:1px solid #dfcdb9;border-radius:20px;background:#fffaf3;padding:8px 14px;font-size:12px;box-shadow:0 2px 10px #76573512}
@media(min-width:1100px){body:not(.admin-shell) .language-toggle{left:300px}}
html[lang=en] h1{letter-spacing:0.2px;font-family:Georgia,serif}html[lang=en] .brand{letter-spacing:1px}html[lang=en] .topbar .header-actions{gap:10px}
html[lang=en] .comparison-plan h4{font-family:Georgia,serif}html[lang=en] .task-template b{letter-spacing:0}
@media(max-width:700px){html[lang=en] #workspace-nav{gap:4px}html[lang=en] #workspace-nav button{font-size:11px;padding:6px 8px}html[lang=en] body:not(.chatting) #welcome h1{font-size:27px}html[lang=en] body:not(.chatting) #task-start{flex-wrap:wrap}}
#registration-admin{padding:20px;border:1px solid #e1d0bd;border-radius:18px;background:#fffaf3;margin:20px 0;scroll-margin-top:24px}
#registration-admin form{margin:18px 0}#registration-admin fieldset{border:1px solid #e0d1c0;border-radius:12px;padding:14px;margin:12px 0}#registration-admin legend{font-weight:600;color:#865539}
#registration-admin label{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap}#registration-admin label>span{min-width:150px}#registration-admin input:not([type=checkbox]),#registration-admin select{min-width:180px;max-width:100%;padding:9px 12px;border:1px solid #d9c5ad;border-radius:10px;background:#fffdf8}
#registration-admin input[readonly]{width:min(100%,620px);font-family:monospace}#registration-admin input[type=checkbox]{width:16px;height:16px;min-height:16px}
#registration-admin button{padding:8px 14px;border:1px solid #d5b79b;border-radius:16px;margin:4px;background:#fff4e6}#registration-admin fieldset fieldset{max-height:240px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#registration-admin fieldset fieldset label{margin:2px;font-size:12px}#registration-admin p{font-size:12px;overflow-wrap:anywhere}
@media(max-width:600px){#registration-admin{padding:12px}#registration-admin fieldset{padding:10px}#registration-admin fieldset fieldset{grid-template-columns:1fr}#registration-admin input:not([type=checkbox]),#registration-admin select{width:100%;min-width:0}}

/* Branded account entry. Scope all changes to this dialog so other panels keep their layout. */
#dialog.auth-dialog {
  width: min(460px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  padding: 28px 30px 24px;
  border: 1px solid #eee4d8;
  border-radius: 26px;
  background: #fffcf7;
  scrollbar-width: thin;
  scrollbar-color: #d9c7b7 transparent;
}
#dialog.auth-dialog::backdrop { background: #30282166; backdrop-filter: blur(9px); }
.auth-dialog #close-dialog { top: 20px; right: 19px; }
.account-auth { color: #302a25; }
.account-auth .auth-brand { display: flex; gap: 10px; align-items: center; margin: 0 0 22px; }
.auth-brand img { flex: 0 0 36px; }
.auth-brand > div { display: flex; flex-direction: column; gap: 3px; }
.auth-brand span { font-family: 'Songti SC', 'SimSun', serif; font-size: 16px; letter-spacing: .16em; }
.auth-brand small { color: #a18e7e; font-size: 9px; letter-spacing: .26em; }
.account-auth h2 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 500; letter-spacing: -.02em; }
.account-auth p.auth-subtitle { margin: 8px 0 20px; color: #8d7d70; font-size: 13px; line-height: 1.6; }
.account-auth .auth-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 4px; margin: 0 0 17px; background: #f1ebe3; border-radius: 13px; }
.account-auth .auth-tabs button { min-height: 36px; border: 0; border-radius: 9px; margin: 0; padding: 7px 5px; color: #8b7868; background: transparent; font-size: 12px; line-height: 1.3; }
.account-auth .auth-tabs button[aria-selected='true'] { color: #b44825; background: #fffdf9; box-shadow: 0 2px 6px #6042210b; }
.account-auth .auth-content > .auth-service-note { margin: 0 0 14px; padding: 0; border: 0; color: #917c69; font-size: 12px; line-height: 1.6; }
.account-auth [hidden] { display: none !important; }
.account-auth #auth { display: grid; gap: 14px; margin: 0; }
.account-auth #auth > label { display: flex; flex-direction: column; gap: 7px; margin: 0; min-width: 0; }
.account-auth #auth label > span { font-size: 12px; font-weight: 500; color: #574b41; }
.account-auth #auth input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #e4d8ca; border-radius: 10px; background: #fffefa; color: #302a25; font-family: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.account-auth #auth input:focus { border-color: #bf6948; box-shadow: 0 0 0 3px #c3562b12; }
.account-auth #auth .auth-field-hint { color: #a08c79; font-size: 11px; line-height: 1.45; }
.account-auth .auth-code-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.account-auth #auth input[name='code'] { letter-spacing: .2em; flex: 1; }
.account-auth .auth-code-send { flex: 0 0 auto; max-width: 49%; min-height: 44px; margin: 0; padding: 7px 11px; border: 1px solid #e4d8ca; border-radius: 10px; background: #f8f0e6; color: #ad4c2c; font-size: 12px; line-height: 1.4; }
.account-auth button:disabled { opacity: .5; cursor: not-allowed; }
.account-auth #auth-error { margin: 0; color: #b44b2b; font-size: 12px; line-height: 1.65; }
.account-auth #auth-error:empty { display: none; }
.account-auth #auth .auth-submit { width: 100%; min-height: 46px; margin: 3px 0 0; padding: 11px 18px; border: 0; border-radius: 12px; color: #fff9f4; background: linear-gradient(110deg, #cb6138, #b74724); font-size: 14px; font-weight: 500; box-shadow: 0 5px 12px #b54b2417; }
.account-auth p.auth-benefit { margin: 13px 0 0; color: #9a785d; text-align: center; font-size: 11px; line-height: 1.5; }
.account-auth details.auth-benefits { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #eee5da; color: #a28e7b; }
.account-auth .auth-benefits summary { width: fit-content; margin: auto; font-size: 11px; cursor: pointer; }
.account-auth .auth-benefits p { margin: 10px 0 0; font-size: 11px; line-height: 1.8; color: #8a7a6c; }
.account-auth button:focus-visible, .account-auth summary:focus-visible { outline: 2px solid #bd5b34; outline-offset: 3px; }
@media (max-width: 480px) {
  #dialog.auth-dialog { padding: 24px 22px 20px; border-radius: 22px; }
  .account-auth .auth-brand { margin-bottom: 18px; }
  .account-auth h2 { font-size: 25px; }
  .account-auth p.auth-subtitle { margin-bottom: 16px; }
  .account-auth #auth { gap: 12px; }
  .account-auth .auth-tabs { margin-bottom: 14px; }
  .account-auth .auth-code-send { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) { .account-auth #auth input { transition: none; } }
#file-drop-hint{position:fixed;inset:14px;z-index:9999;border:3px dashed #c6532a;border-radius:24px;background:#fff8eeed;color:#8b3f23;display:grid;place-items:center;pointer-events:none;font-size:20px;text-align:center;padding:30px}#file-drop-hint[hidden]{display:none}.files-uploading #composer{outline:2px solid #dfb48e}

#run-state:has(.agent-steps){max-height:none;overflow:visible;flex-shrink:0}#run-state .agent-trace{max-height:none;overflow:visible;margin-top:5px}#run-state .agent-trace summary{cursor:pointer;color:#8b4d2c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 0}#run-state .agent-trace summary:focus-visible{outline:2px solid #c6532a;outline-offset:3px}#run-state .agent-trace .agent-steps{max-height:180px;overflow:auto;overscroll-behavior:contain}#run-state .agent-trace:not([open])>.agent-steps{display:none}@media(max-width:600px){#run-state .agent-trace .agent-steps{max-height:140px}}

@media(max-width:600px){body.chatting #mixed-mode>small,body.chatting #mixed-mode>.mascot{display:none}body.chatting #mixed-mode{gap:6px;margin:4px 0}body.chatting #mixed-mode>label{font-size:0;min-width:0;flex:1}body.chatting #mixed-mode>label select{width:100%;max-width:100%}body.chatting #mixed-mode>.mixed-arrange{padding:7px 9px}#run-state>.run-pending-note{display:none}#file-chips small{display:none}}

/* Brand arrival on the existing account dialog; authentication stays immediate. */
@keyframes auth-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-tile-arrive{0%{opacity:0;transform:scale(.86)}65%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
.auth-dialog .auth-brand{animation:auth-arrive .3s ease-out both}
.auth-dialog .auth-brand img{animation:auth-tile-arrive .55s ease-out both}
.auth-dialog .auth-busy .auth-brand img{animation:brand-work-halo 1.6s ease-in-out infinite;border-radius:9px}
@media(prefers-reduced-motion:reduce){.auth-dialog .auth-brand,.auth-dialog .auth-brand img,.auth-dialog .auth-busy .auth-brand img{animation:none}}
/* Initial brand feedback never captures input or delays the application. */
#bafang-loading{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:10001;display:flex;align-items:center;gap:12px;padding:10px 20px;border:1px solid #eadaca;border-radius:20px;background:#fffaf3f5;color:#783e29;box-shadow:0 8px 32px #6d321317;pointer-events:none;transition:opacity .2s ease;animation:bafang-load-dismiss .2s 6s forwards}
#bafang-loading img{animation:bafang-load-breathe .85s ease-in-out infinite alternate}#bafang-loading.complete{opacity:0}
@keyframes bafang-load-breathe{from{transform:translateY(2px) scale(.94)}to{transform:translateY(-2px) scale(1)}}
@keyframes bafang-load-dismiss{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){#bafang-loading img{animation:none}}