:root { --card-shadow: 0 8px 30px rgba(180, 120, 80, 0.10); }

/* chat page layout — match original demo: 8% gutters + 900px column */
body.chat-page { overflow: hidden; }
body.chat-page .main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
}
body.chat-page .chat-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 8% 12px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
body.chat-page .chat-inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
body.chat-page .composer-sticky {
  flex-shrink: 0;
  background: transparent;
  position: relative;
  z-index: 20;
}
body.chat-page .composer-wrap {
  padding: 10px 8% 8px;
}
body.chat-page .composer {
  max-width: 900px;
}
body.chat-page .footer-disclaimer {
  max-width: 900px;
  margin: 8px auto 0;
  padding: 0 0 10px;
}

.thinking-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 18px 22px;
  overflow: hidden;
  animation: thinking-card-in 0.35s ease-out;
}
@keyframes thinking-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.thinking-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.thinking-collapse-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #c3dcce;
  border-radius: 999px;
  color: #2f6a4a;
  background: #eaf6f0;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.thinking-collapse-toggle:hover {
  border-color: #b3d0c0;
  background: #e1f0e8;
}
.thinking-collapse-toggle i {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  font-size: 0;
  line-height: 0;
}
.thinking-phase-tab,
.thinking-collapse-toggle { font-family: inherit; }
.thinking-detail-wrap { display: block; }
.thinking-card.is-done:not(.is-expanded) {
  padding-top: 15px;
  padding-bottom: 15px;
}
.thinking-card.is-done:not(.is-expanded) .thinking-head { margin-bottom: 0; }
.thinking-card.is-done:not(.is-expanded) .thinking-detail-wrap { display: none; }
.thinking-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff3ec url("assets/logo.svg") center / 22px 22px no-repeat;
  box-shadow: 0 0 0 0 rgba(253, 108, 57, 0.35);
  animation: thinking-logo-pulse 1.6s ease-in-out infinite;
}
.thinking-card.is-done .thinking-logo { animation: none; }
.thinking-card.is-error .thinking-logo {
  animation: none;
  background-color: #fff0ee;
  box-shadow: inset 0 0 0 1px #f2c5bc;
}
@keyframes thinking-logo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 108, 57, 0.28); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(253, 108, 57, 0); transform: scale(1.04); }
}
.thinking-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.thinking-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.thinking-meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.thinking-meta .dot { opacity: 0.5; }
.thinking-elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--orange);
  font-weight: 650;
}
.thinking-track {
  height: 3px;
  border-radius: 99px;
  background: #f1e8e0;
  overflow: hidden;
  margin-bottom: 12px;
}
.thinking-track-bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffad84, var(--orange));
  transition: width 0.45s ease;
}
.thinking-card.is-done .thinking-track-bar {
  width: 100%;
  background: #18a058;
}
.thinking-card.is-error .thinking-track-bar { background: #d84d3d; }
.thinking-estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #efe3da;
  border-radius: 10px;
  background: #fffbf8;
}
.thinking-estimate b {
  color: var(--ink);
  font-size: 12.5px;
  white-space: nowrap;
}
.thinking-estimate span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
}
.thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.thinking-phases {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin: 12px 0 12px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fcfa 0%, #f1f8f5 100%);
  border: 1px solid #d2e5dd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  overflow: hidden;
  isolation: isolate;
  animation: none;
}
.thinking-phases > * {
  position: relative;
  z-index: 1;
}
/* 单一薄荷色光带在纯净底板中移动，避免多色模糊叠加产生脏感。 */
.thinking-phases::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 11px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    102deg,
    transparent 10%,
    rgba(78, 181, 132, 0.055) 26%,
    rgba(174, 229, 207, 0.35) 43%,
    rgba(218, 246, 235, 0.58) 50%,
    rgba(174, 229, 207, 0.35) 57%,
    rgba(78, 181, 132, 0.055) 74%,
    transparent 90%
  );
  background-size: 230% 100%;
  background-position: 110% 0;
  filter: blur(11px);
  opacity: 0.78;
  transform: translate3d(-4%, 0, 0) scaleX(1.05);
  animation: phase-clean-aurora 5.8s ease-in-out infinite alternate;
}
/* 取消第二层综合色光，底板只保留一条干净的动态极光。 */
.thinking-phases::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: none;
  opacity: 0;
  animation: none;
}
.thinking-card.is-done .thinking-phases::after {
  animation-duration: 8.6s;
  opacity: 0.78;
}
.thinking-card.is-done .thinking-phases::before {
  opacity: 0.82;
}
/* 整个任务完成后切换为纯冷色极光主题，不再保留红/橙提示色。 */
.thinking-card.is-done .thinking-phases {
  background:
    linear-gradient(
      104deg,
      rgba(56, 166, 111, 0.12) 0%,
      rgba(76, 190, 168, 0.11) 38%,
      rgba(91, 177, 208, 0.105) 70%,
      rgba(116, 157, 213, 0.09) 100%
    ),
    rgba(249, 254, 252, 0.9);
  background-size: 170% 100%, 100% 100%;
  background-position: 52% 50%, 0 0;
  border-color: rgba(93, 168, 143, 0.26);
  animation: none;
}
.thinking-card.is-done .thinking-phases::before {
  background:
    radial-gradient(ellipse at 8% 88%, rgba(47, 169, 107, 0.2), transparent 36%),
    radial-gradient(ellipse at 48% 100%, rgba(66, 190, 166, 0.17), transparent 42%),
    radial-gradient(ellipse at 91% 88%, rgba(82, 160, 210, 0.18), transparent 36%);
  animation: none;
  transform: none;
  opacity: 0.82;
}
.thinking-card.is-done .thinking-phases::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(48, 177, 112, 0.2) 17%,
    rgba(199, 255, 239, 0.34) 43%,
    rgba(203, 246, 255, 0.3) 57%,
    rgba(79, 158, 211, 0.2) 80%,
    transparent 100%
  );
  background-size: 180% 100%;
  background-position: 48% 0;
  animation: none;
  transform: none;
  opacity: 0.7;
}
.thinking-card.is-done .thinking-phase-tab {
  border-color: rgba(65, 158, 114, 0.22);
  background: rgba(250, 255, 252, 0.66);
}
.thinking-card.is-done .thinking-phase-tab.active {
  border-color: rgba(67, 163, 123, 0.3);
  background: rgba(246, 254, 250, 0.76);
  box-shadow: 0 5px 16px rgba(44, 139, 99, 0.07);
}
.thinking-card.is-done .phase-link,
.thinking-card.is-done .phase-link i {
  background: linear-gradient(90deg, rgba(53, 166, 107, 0.72), rgba(75, 172, 168, 0.62));
  box-shadow: 0 0 6px rgba(60, 168, 137, 0.16);
}
.thinking-card.is-error .thinking-phases::before {
  background:
    linear-gradient(
      180deg,
      rgba(216, 77, 61, 0.03) 0%,
      rgba(216, 77, 61, 0.12) 100%
    ),
    linear-gradient(
      90deg,
      transparent,
      rgba(216, 77, 61, 0.14) 50%,
      transparent
    );
}
@keyframes phase-laser-scan {
  0% {
    background-position: 100% 0;
    transform: translate3d(-4%, 0, 0) scaleX(1.04);
    opacity: 0.44;
  }
  100% {
    background-position: -70% 0;
    transform: translate3d(4%, -1px, 0) scaleX(1.08);
    opacity: 0.64;
  }
}
@keyframes phase-clean-aurora {
  0% {
    background-position: 110% 0;
    transform: translate3d(-5%, 0, 0) scaleX(1.04);
    opacity: 0.58;
  }
  100% {
    background-position: -80% 0;
    transform: translate3d(5%, 0, 0) scaleX(1.08);
    opacity: 0.8;
  }
}
@keyframes phase-aurora-breathe {
  0% {
    transform: translate3d(-4%, 0, 0) scale(1.035);
    opacity: 0.4;
  }
  55% { opacity: 0.58; }
  100% {
    transform: translate3d(4%, -2px, 0) scale(1.07);
    opacity: 0.5;
  }
}
@keyframes phase-base-drift {
  0% {
    background-position: 0% 50%, 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }
  100% {
    background-position: 100% 50%, 0 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 0 20px rgba(74, 166, 158, 0.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-phases::before,
  .thinking-phases::after,
  .thinking-phases {
    animation: none;
    transform: none;
  }
  .thinking-phase-tab.running .phase-halo,
  .thinking-phase-tab.running .phase-halo::before,
  .thinking-phase-tab.running .phase-sheen {
    animation: none;
  }
}
.thinking-phase-tab {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  min-width: 0;
  min-height: 66px;
  padding: 10px;
  border: 1px solid #e8e0d9;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #7e746b;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.thinking-phases[data-anim="1"] .thinking-phase-tab {
  animation: phase-tab-in .35s ease both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes phase-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.thinking-phase-tab .phase-halo,
.thinking-phase-tab .phase-sheen { display: none; }
.thinking-phase-tab:hover {
  border-color: #dcc9ba;
  box-shadow: 0 4px 12px rgba(120, 70, 40, 0.06);
}
.thinking-phase-tab.active {
  border-color: rgba(237, 133, 87, 0.34);
  background: rgba(255, 250, 247, 0.96);
  box-shadow: 0 4px 14px rgba(184, 101, 62, 0.055);
}
@property --phase-flow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.thinking-phase-tab.running {
  border-color: rgba(235, 205, 190, 0.58);
  background:
    radial-gradient(circle at 82% 22%, rgba(246, 139, 91, 0.055), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.94));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
  box-shadow: 0 8px 22px rgba(184, 101, 62, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  animation: phase-card-breathe 4.2s ease-in-out infinite;
}
/* 静态底轨：保证四边始终连续，不受扇形旋转影响 */
.thinking-phase-tab.running::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 1;
  border-radius: 14px;
  border: 2px solid rgba(249, 111, 55, 0.24);
  pointer-events: none;
  box-sizing: border-box;
}
.thinking-phase-tab.running .phase-halo {
  display: block;
  position: absolute;
  inset: -2px;
  z-index: 2;
  padding: 2px;
  border-radius: 14px;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(246, 112, 56, 0.2));
}
/* 超大半径扇形自中心投射，远端覆盖更完整，避免顶边中段 mask 断裂 */
.thinking-phase-tab.running .phase-halo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900%;
  height: 900%;
  translate: -50% -50%;
  border-radius: 50%;
  --phase-flow-angle: 0deg;
  background: conic-gradient(
    from var(--phase-flow-angle),
    rgba(249, 111, 55, 0) 0deg,
    rgba(249, 111, 55, 0) 185deg,
    rgba(255, 186, 151, 0.22) 215deg,
    rgba(249, 111, 55, 0.55) 245deg,
    rgba(249, 111, 55, 0.96) 285deg,
    rgba(255, 235, 220, 0.98) 315deg,
    rgba(249, 111, 55, 0.82) 340deg,
    rgba(255, 186, 151, 0.35) 355deg,
    rgba(249, 111, 55, 0) 360deg
  );
  animation: phase-border-flow 2.4s linear infinite;
}
.thinking-phase-tab.running .phase-sheen {
  display: block;
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255, 255, 255, 0.08) 36%,
    rgba(255, 255, 255, 0.62) 48%,
    rgba(255, 212, 190, 0.13) 60%,
    transparent 78%
  );
  background-size: 250% 100%;
  opacity: 0.28;
  filter: blur(6px);
  animation: phase-sheen-glide 6.8s ease-in-out infinite;
}
.thinking-phase-tab.active.running {
  border-color: rgba(246, 135, 91, 0.2);
  animation: phase-card-breathe-active 4.2s ease-in-out infinite;
}
@keyframes phase-border-glide {
  0%, 100% { background-position: 110% 0; }
  50% { background-position: -70% 0; }
}
@keyframes phase-border-flow {
  to { --phase-flow-angle: 360deg; }
}
@keyframes phase-sheen-glide {
  0%, 100% { background-position: 120% 0; opacity: 0.22; }
  50% { background-position: -80% 0; opacity: 0.55; }
}
@keyframes phase-halo-breathe {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}
@keyframes phase-card-breathe {
  0%, 100% {
    box-shadow: 0 7px 20px rgba(184, 101, 62, 0.045), 0 0 0 0 rgba(249, 130, 82, 0.035);
  }
  50% {
    box-shadow: 0 10px 26px rgba(184, 101, 62, 0.075), 0 0 15px 2px rgba(249, 130, 82, 0.07);
  }
}
@keyframes phase-card-breathe-active {
  0%, 100% {
    box-shadow: 0 8px 22px rgba(184, 101, 62, 0.055), 0 0 0 0 rgba(249, 130, 82, 0.03);
  }
  50% {
    box-shadow: 0 11px 28px rgba(184, 101, 62, 0.08), 0 0 17px 3px rgba(249, 130, 82, 0.075);
  }
}
.thinking-phase-tab.done {
  border-color: rgba(49, 151, 96, 0.22);
  background: rgba(247, 251, 248, 0.65);
}
.phase-no {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f2eee9;
  color: #8d8279;
  font-size: 10.5px;
  font-weight: 800;
}
.thinking-phase-tab.active .phase-no,
.thinking-phase-tab.running .phase-no {
  color: #fff;
  background: var(--orange);
}
.thinking-phase-tab.running .phase-no {
  background: linear-gradient(145deg, #ff8254, #f06739);
  box-shadow: 0 5px 12px rgba(240, 103, 57, 0.18);
  animation: phase-no-soft 2.8s ease-in-out infinite;
}
@keyframes phase-no-soft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 108, 57, 0.25); }
  50% { box-shadow: 0 0 0 5px rgba(253, 108, 57, 0); }
}
.thinking-phase-tab.done .phase-no {
  color: #fff;
  background: #2f9d61;
  font-size: 13px;
  animation: none;
}
.phase-copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.phase-copy b {
  color: var(--ink);
  font-size: 12.5px;
  white-space: nowrap;
}
.phase-copy small {
  margin-top: 2px;
  color: #9a9087;
  font-size: 9.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-status {
  grid-column: 2;
  justify-self: start;
  color: #91877e;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(146, 135, 126, 0.1);
}
.thinking-phase-tab.done .phase-status {
  color: #287b4c;
  background: rgba(47, 157, 97, 0.085);
}
.thinking-phase-tab.running .phase-status,
.thinking-phase-tab.active.running .phase-status {
  color: #ad5733;
  background: rgba(238, 131, 84, 0.075);
  box-shadow: inset 0 0 0 1px rgba(238, 131, 84, 0.05);
}
.thinking-phase-tab.error .phase-no {
  color: #fff;
  background: #d84d3d;
  animation: none;
}
.thinking-phase-tab.error .phase-status {
  color: #b0392e;
  background: rgba(216, 77, 61, 0.1);
}
.thinking-phase-tab.skipped { opacity: .7; }
.phase-link {
  position: relative;
  align-self: center;
  height: 2px;
  border-radius: 99px;
  background: #e7ddd4;
  overflow: hidden;
}
.phase-link i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #d0c4b8;
  transition: width .4s ease, background .3s ease;
}
.phase-link em { display: none; }
.thinking-phase-tab.done + .phase-link i {
  width: 100%;
  background: #7fc49f;
}
.thinking-phase-tab.running + .phase-link i,
.thinking-phase-tab.active.running + .phase-link i,
.phase-link.is-active i {
  width: 55%;
  background: linear-gradient(90deg, rgba(255, 190, 151, 0.45), rgba(245, 116, 68, 0.78));
  box-shadow: 0 0 7px rgba(245, 116, 68, 0.18);
}

.thinking-phase-tab .phase-no,
.thinking-phase-tab .phase-copy,
.thinking-phase-tab .phase-status {
  position: relative;
  z-index: 3;
}
.thinking-phase-panel {
  display: none;
  min-height: 160px;
  padding: 13px 14px;
  border: 1px solid #ece4dd;
  border-radius: 12px;
  background: #fffcfa;
}
.thinking-phase-panel.active {
  display: block;
  animation: phase-panel-in .25s ease;
}
.thinking-phase-panels.is-live .thinking-phase-panel.active,
.thinking-phase-panels.is-live .t-node {
  animation: none;
}
@keyframes phase-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.phase-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee7e1;
}
.phase-panel-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.phase-panel-title b { color: var(--ink); font-size: 13px; }
.phase-panel-title span { color: var(--muted); font-size: 10.5px; }
.phase-panel-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 999px;
  color: #8a7f75;
  background: #f3eee9;
}
.phase-panel-badge.running {
  color: #c6531f;
  background: rgba(253, 108, 57, 0.12);
}
.phase-panel-badge.done {
  color: #16804a;
  background: rgba(24, 160, 88, 0.1);
}
.thinking-phase-panel .thinking-steps { max-height: 300px; }
.t-step.running {
  background: rgba(253, 108, 57, 0.04);
}
.t-node {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.t-children {
  margin: 6px 0 2px 10px;
  padding-left: 12px;
  border-left: 2px solid #ece4dc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.t-node.is-group > .t-step.running + .t-children,
.t-children:has(.t-step.running) {
  border-left-color: rgba(253, 108, 57, 0.55);
}
.t-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.6;
  color: #55493f;
  padding: 2px 0 2px 2px;
  border-radius: 8px;
  transition: background 0.25s ease;
}
.t-node.depth-0 > .t-step {
  font-size: 13px;
}
.t-node.depth-0.is-group > .t-step b {
  font-weight: 800;
}
.t-step.t-enter {
  animation: t-step-in 0.32s ease-out;
}
@keyframes t-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.t-step-body { flex: 1; min-width: 0; }
.t-step-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.t-step-title b { color: var(--ink); white-space: normal; }
.t-state-label {
  flex-shrink: 0;
  padding: 0 6px;
  border-radius: 99px;
  background: #f2eee9;
  color: #8b8178;
  font-size: 9.5px;
  font-weight: 750;
  line-height: 18px;
}
.t-step-detail {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.t-step-ico {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #18a058;
}
.t-step.done .t-step-ico {
  border-radius: 50%;
  color: #fff;
  background: #18a058;
  animation: t-check-pop 0.35s ease-out;
}
.t-step.done .t-state-label { color: #147a46; background: #e8f6ee; }
.t-step.pending { opacity: 0.68; }
.t-step.pending .t-step-ico {
  width: 12px;
  height: 12px;
  margin: 5px 2px 0;
  border: 1.5px solid #bcb4ac;
  border-radius: 50%;
  color: transparent;
}
.t-step.skipped { opacity: 0.64; }
.t-step.skipped .t-step-ico {
  border-radius: 50%;
  color: #8f8780;
  background: #eeeae6;
  font-size: 11px;
}
.t-step.error .t-step-ico {
  border-radius: 50%;
  color: #fff;
  background: #d84d3d;
  font-size: 10px;
  font-weight: 800;
}
.t-step.error .t-state-label { color: #a63025; background: #fdecea; }
.t-step.running .t-state-label { color: #b94c1f; background: #fff0e8; }
@keyframes t-check-pop {
  0% { transform: scale(0.6); opacity: 0.4; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.t-step.running {
  background: linear-gradient(90deg, rgba(253,108,57,0.08), transparent 75%);
}
.t-step.running .t-step-body b { color: var(--orange); }
.t-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(253, 108, 57, 0.25);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: t-spin 0.7s linear infinite;
}
@keyframes t-spin { to { transform: rotate(360deg); } }
.footer-disclaimer {
  max-width: 900px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 10.5px;
  color: #b9ada2;
  line-height: 1.5;
}
.composer {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid rgba(253, 108, 57, 0.45);
  border-radius: 20px;
  box-shadow: 0 10px 36px rgba(180, 120, 80, 0.12);
  padding: 14px 16px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer.dragover { border-color: var(--orange); background: #fff8f3; }
.attach-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: 18px;
  color: var(--orange);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.composer-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.composer-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.topic-picker { position: relative; max-width: 100%; }
.topic-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(390px, 72vw);
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid #f0d9cb;
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf7 0%, #fff 100%);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(163, 92, 53, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.topic-picker-trigger:hover {
  border-color: rgba(253, 108, 57, 0.6);
  box-shadow: 0 4px 14px rgba(253, 108, 57, 0.11);
}
.topic-picker.open .topic-picker-trigger {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(253, 108, 57, 0.12);
}
.topic-picker-icon {
  color: var(--orange);
  font-size: 13px;
  line-height: 1;
}
.topic-picker-label {
  color: #8c6d5b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topic-picker-value {
  min-width: 0;
  overflow: hidden;
  color: #654839;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-picker-count {
  flex-shrink: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
}
.topic-picker-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #a88673;
  transition: transform 0.15s;
}
.topic-picker.open .topic-picker-chevron { transform: rotate(180deg); }
.topic-picker-menu {
  position: absolute;
  z-index: 80;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(330px, 76vw);
  overflow: hidden;
  border: 1px solid #edd7c9;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 42px rgba(83, 48, 28, 0.16);
  backdrop-filter: blur(12px);
}
.topic-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px 8px;
  color: #5f4335;
  font-size: 12px;
  font-weight: 800;
}
.topic-picker-head button {
  border: none;
  background: none;
  color: var(--orange);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.topic-picker-options { padding: 2px 7px 7px; }
.topic-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 9px;
  color: #5f493d;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.topic-picker-option:hover { background: #fff5ef; color: #412d23; }
.topic-picker-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.topic-picker-check {
  display: grid;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  place-items: center;
  border: 1.5px solid #d8c1b3;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  font-size: 11px;
  font-weight: 900;
  transition: background 0.12s, border-color 0.12s;
}
.topic-picker-option input:checked + .topic-picker-check {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}
.topic-picker-option input:focus-visible + .topic-picker-check {
  box-shadow: 0 0 0 3px rgba(253, 108, 57, 0.16);
}
.topic-picker-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topic-picker-loading {
  padding: 15px 9px;
  color: #aa9182;
  font-size: 12px;
  text-align: center;
}
.topic-picker-foot {
  padding: 8px 13px 10px;
  border-top: 1px solid #f4e7df;
  color: #aa9182;
  font-size: 10.5px;
}
#msg-input {
  border: none;
  outline: none;
  resize: none;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  max-height: 120px;
  line-height: 1.6;
  min-height: 28px;
}
#msg-input::placeholder { color: #b9ada2; }
.composer-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #b9ada2;
}
.composer-hint svg { opacity: 0.75; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: #fdf0e9;
  border: 1px solid #f3d9c9;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #7c4a33;
}
.file-chip .file-ico {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--orange);
  background: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  border: 1px solid #f3d9c9;
}
.chip-x { border: none; background: none; cursor: pointer; color: #b0836a; font-size: 11px; }

.send-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 5px 14px rgba(253, 108, 57, 0.3);
}
.send-btn:hover { background: var(--orange-hover); }
.send-btn:disabled { opacity: 0.45; cursor: wait; }