:root {
  --ink: #10253e;
  --muted: #66798d;
  --line: rgba(25, 72, 111, .14);
  --canvas: #edf3f5;
  --panel: #ffffff;
  --navy: #071a2d;
  --navy-soft: #0a2840;
  --cyan: #16d9c5;
  --cyan-deep: #0b9f91;
  --blue: #347cff;
  --orange: #ff9b57;
  --red: #e85d75;
  --shadow: 0 22px 60px rgba(11, 45, 70, .1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--canvas);
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.job-claw-app { min-height: 100vh; }

.job-claw-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 248px;
  overflow-y: auto;
  padding: 24px 16px 18px;
  color: #dcebf4;
  background:
    radial-gradient(circle at 14% 5%, rgba(22, 217, 197, .18), transparent 25%),
    radial-gradient(circle at 90% 76%, rgba(52, 124, 255, .08), transparent 30%),
    linear-gradient(180deg, #071a2d 0%, #081c2f 58%, #061521 100%);
  box-shadow: 14px 0 45px rgba(4, 22, 36, .13);
}

.job-claw-sidebar::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}

.claw-brand {
  display: flex;
  gap: 11px;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.claw-brand-mark {
  position: relative;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  border: 1px solid rgba(22, 217, 197, .55);
  border-radius: 12px;
  background: rgba(22, 217, 197, .08);
  box-shadow: inset 0 0 18px rgba(22,217,197,.1), 0 0 18px rgba(22,217,197,.05);
}
.claw-brand-mark i { position: absolute; display: block; border-radius: 3px; background: var(--cyan); }
.claw-brand-mark i:nth-child(1) { width: 8px; height: 22px; left: 8px; top: 8px; }
.claw-brand-mark i:nth-child(2) { width: 8px; height: 14px; left: 20px; top: 8px; }
.claw-brand-mark i:nth-child(3) { width: 8px; height: 5px; left: 20px; bottom: 8px; }
.claw-brand > span:last-child { display: grid; gap: 2px; }
.claw-brand strong { font-size: 16px; letter-spacing: .04em; }
.claw-brand small { color: rgba(220,235,244,.52); font: 700 9px/1.2 ui-monospace, monospace; letter-spacing: .18em; }

.new-task-button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 27px;
  color: #d9fffb;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid rgba(22,217,197,.3);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(22,217,197,.17), rgba(22,217,197,.045));
  transition: .2s ease;
}
.new-task-button:hover { border-color: rgba(22,217,197,.58); transform: translateY(-1px); }
.new-task-button span { color: var(--cyan); font-size: 17px; font-weight: 400; }

.park-context {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid rgba(151,188,211,.12);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.park-context > span { color: #7894a8; font-size: 9px; letter-spacing: .12em; }
.park-context strong { color: #f5fbff; font-size: 12px; line-height: 1.55; }
.park-context small { display: flex; gap: 7px; align-items: center; color: #8faabd; font-size: 9px; }
.park-context small i, .model-state i, .draft-source-note i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(22,217,197,.74);
}

.claw-steps { display: grid; gap: 4px; margin-top: 21px; }
.claw-steps button {
  position: relative;
  display: grid;
  grid-template-columns: 26px 8px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 8px 10px;
  text-align: left;
  cursor: default;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  transition: .2s ease;
}
.claw-steps button > span { color: #577287; font: 700 9px/1 ui-monospace, monospace; }
.claw-steps button > i { width: 7px; height: 7px; border: 1px solid #426077; border-radius: 50%; }
.claw-steps button div { display: grid; gap: 3px; }
.claw-steps strong { color: #91aabc; font-size: 11px; }
.claw-steps small { color: #516c80; font-size: 8px; }
.claw-steps button.is-active {
  border-color: rgba(22,217,197,.18);
  background: linear-gradient(90deg, rgba(22,217,197,.14), rgba(22,217,197,.02));
}
.claw-steps button.is-active > span, .claw-steps button.is-active strong { color: #fff; }
.claw-steps button.is-active > i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px rgba(22,217,197,.7); }
.claw-steps button.is-complete > span { color: var(--cyan); }
.claw-steps button.is-complete > i { border-color: rgba(22,217,197,.62); background: rgba(22,217,197,.18); }

.sidebar-trust {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: auto;
  padding: 18px 6px 3px;
}
.sidebar-trust > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #06242c;
  font: 900 10px/1 ui-monospace, monospace;
  border-radius: 8px;
  background: var(--cyan);
}
.sidebar-trust div { display: grid; gap: 3px; }
.sidebar-trust strong { color: #d3e2eb; font-size: 10px; }
.sidebar-trust small { color: #688296; font-size: 8px; line-height: 1.5; }

.job-claw-main { min-width: 0; margin-left: 248px; }
.claw-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 10px clamp(18px, 2.6vw, 40px);
  border-bottom: 1px solid rgba(18,68,104,.1);
  background: rgba(246,250,251,.92);
  backdrop-filter: blur(17px);
}
.claw-topbar > div:first-child { display: grid; gap: 3px; }
.claw-topbar a { color: #7890a3; font-size: 9px; text-decoration: none; }
.claw-topbar strong { font-size: 13px; }
.topbar-controls { display: flex; gap: 10px; align-items: center; }
.park-select { display: flex; gap: 8px; align-items: center; }
.park-select span { color: #8293a4; font-size: 9px; }
.park-select select {
  min-width: 176px;
  padding: 8px 28px 8px 10px;
  color: #263f56;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: #fff;
}
.model-state {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px 11px;
  color: #197d73;
  font-size: 9px;
  border: 1px solid rgba(22,217,197,.2);
  border-radius: 8px;
  background: #edfbf8;
}

.claw-workspace {
  display: grid;
  grid-template-columns: minmax(480px, 1fr) minmax(340px, 390px);
  gap: 16px;
  height: calc(100vh - 68px);
  padding: 16px;
  overflow: hidden;
}

.conversation-panel, .job-draft-panel {
  min-width: 0;
  border: 1px solid rgba(19,64,98,.11);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}
.conversation-panel { display: flex; flex-direction: column; overflow: hidden; }
.conversation-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 15px;
}
.conversation-heading > div:first-child { display: grid; gap: 4px; }
.conversation-heading span, .draft-heading > div:first-child span {
  color: var(--cyan-deep);
  font: 800 8px/1.2 ui-monospace, monospace;
  letter-spacing: .16em;
}
.conversation-heading h1 { margin: 0; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.03em; }
.model-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f4f7f8; }
.model-switch button {
  padding: 7px 10px;
  color: #718395;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.model-switch button.is-active { color: #0b5f58; background: #fff; box-shadow: 0 3px 10px rgba(11,47,72,.08); }
.model-switch button:disabled { cursor: not-allowed; opacity: .4; }

.conversation-notice {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0 22px;
  padding: 9px 11px;
  border: 1px solid rgba(52,124,255,.12);
  border-radius: 9px;
  background: #f5f8ff;
}
.conversation-notice span { flex: 0 0 auto; padding: 4px 6px; color: #3569c0; font-size: 8px; font-weight: 800; border-radius: 5px; background: #e4edff; }
.conversation-notice p { margin: 0; color: #6e8194; font-size: 9px; line-height: 1.55; }

.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px clamp(18px, 3vw, 34px);
  scrollbar-width: thin;
  scrollbar-color: #cad7de transparent;
}
.message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 86%;
  margin-bottom: 18px;
}
.message.is-user { flex-direction: row-reverse; margin-left: auto; }
.message-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: #06242c;
  font: 900 9px/1 ui-monospace, monospace;
  border-radius: 9px;
  background: var(--cyan);
}
.message.is-user .message-avatar { color: #fff; background: #183b5a; }
.message > div { display: grid; gap: 5px; }
.message small { color: #8a9baa; font-size: 8px; }
.message.is-user small { text-align: right; }
.message p {
  margin: 0;
  padding: 11px 13px;
  color: #334e65;
  font-size: 11px;
  line-height: 1.75;
  white-space: pre-wrap;
  border: 1px solid rgba(25,72,111,.09);
  border-radius: 5px 13px 13px 13px;
  background: #f5f8f9;
}
.message.is-user p { color: #fff; border-color: #183b5a; border-radius: 13px 5px 13px 13px; background: #183b5a; }
.message.is-thinking p { display: flex; gap: 5px; align-items: center; min-width: 64px; }
.thinking-dot { width: 5px; height: 5px; border-radius: 50%; background: #7a90a1; animation: thinking 1s ease-in-out infinite; }
.thinking-dot:nth-child(2) { animation-delay: .16s; }
.thinking-dot:nth-child(3) { animation-delay: .32s; }
@keyframes thinking { 0%, 70%, 100% { transform: translateY(0); opacity: .35; } 35% { transform: translateY(-4px); opacity: 1; } }

.starter-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 20px 41px; }
.starter-prompts button {
  padding: 8px 10px;
  color: #557086;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: .2s ease;
}
.starter-prompts button:hover { color: #0a8177; border-color: rgba(22,217,197,.35); background: #f0fbf9; }

.composer-wrap { padding: 12px 18px 13px; border-top: 1px solid rgba(19,64,98,.09); background: #f8fafb; }
.composer {
  overflow: hidden;
  border: 1px solid rgba(25,72,111,.18);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(12,44,68,.05);
}
.composer:focus-within { border-color: rgba(22,217,197,.62); box-shadow: 0 0 0 3px rgba(22,217,197,.08); }
.composer textarea { width: 100%; min-height: 72px; padding: 13px 14px 4px; color: #263f56; font-size: 11px; line-height: 1.6; resize: none; border: 0; outline: 0; }
.composer-actions { display: flex; gap: 10px; align-items: center; padding: 8px 9px 9px; }
.composer-actions small { margin-right: auto; color: #9aa8b3; font-size: 8px; }
.voice-button {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 7px 8px;
  color: #64798c;
  font-size: 9px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f7f9fa;
}
.voice-button span { color: #e85d75; font-size: 8px; }
.voice-button.is-listening { color: #b43d54; border-color: rgba(232,93,117,.35); background: #fff2f5; }
.send-button {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: #052a31;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  background: var(--cyan);
  box-shadow: 0 8px 20px rgba(22,217,197,.21);
}
.send-button:disabled { cursor: wait; opacity: .6; }
.send-button b { font-size: 14px; }
.composer-wrap > p { margin: 7px 2px 0; color: #8c9ba8; font-size: 8px; }

.job-draft-panel {
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: #cad7de transparent;
}
.draft-heading { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.draft-heading > div:first-child { display: grid; gap: 4px; }
.draft-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.completeness-ring {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan-deep) var(--progress), #e8eef1 0);
}
.completeness-ring::before { position: absolute; inset: 5px; content: ""; border-radius: 50%; background: #fff; }
.completeness-ring strong, .completeness-ring small { position: relative; z-index: 1; }
.completeness-ring strong { font-size: 13px; }
.completeness-ring small { color: #8696a4; font-size: 7px; }

.draft-source-note {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 13px 0;
  padding: 8px 9px;
  color: #64798b;
  font-size: 8px;
  border: 1px solid rgba(22,217,197,.16);
  border-radius: 8px;
  background: #f0faf8;
}

.draft-form { display: grid; gap: 10px; }
.draft-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.draft-field-grid label, .detail-fields label { display: grid; gap: 5px; }
.draft-field-grid label.wide { grid-column: 1 / -1; }
.draft-form label > span { color: #6e8091; font-size: 8px; font-weight: 700; }
.draft-form label > span b { color: #e96378; }
.draft-form input, .draft-form select, .draft-form textarea {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  color: #294358;
  font-size: 9px;
  line-height: 1.45;
  border: 1px solid rgba(25,72,111,.13);
  border-radius: 7px;
  outline: 0;
  background: #fafcfc;
}
.draft-form input:focus, .draft-form select:focus, .draft-form textarea:focus { border-color: rgba(22,217,197,.6); background: #fff; box-shadow: 0 0 0 2px rgba(22,217,197,.08); }
.draft-form textarea { resize: vertical; }
.draft-form [data-inferred="true"] { border-color: rgba(52,124,255,.2); background: #f5f8ff; }

.detail-fields { padding: 10px; border: 1px solid rgba(25,72,111,.1); border-radius: 9px; background: #f8fafb; }
.detail-fields summary { display: flex; align-items: center; justify-content: space-between; color: #425e75; font-size: 9px; font-weight: 800; cursor: pointer; list-style: none; }
.detail-fields summary::-webkit-details-marker { display: none; }
.detail-fields summary span { color: #8ca0af; font-size: 8px; font-weight: 500; }
.detail-fields[open] summary { margin-bottom: 10px; }
.detail-fields label + label { margin-top: 8px; }

.save-draft-button {
  min-height: 34px;
  color: #3d6178;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.save-draft-button:disabled { cursor: not-allowed; opacity: .45; }

.risk-card, .output-card { margin-top: 12px; overflow: hidden; border: 1px solid rgba(25,72,111,.11); border-radius: 10px; }
.risk-card header { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; background: #f7f9fa; }
.risk-card header span { color: #526b7e; font-size: 9px; font-weight: 800; }
.risk-card header strong { color: #8a9ba9; font-size: 8px; }
.risk-card > div { display: grid; gap: 6px; padding: 9px; }
.risk-card p { margin: 0; color: #8293a1; font-size: 8px; line-height: 1.55; }
.risk-item { display: flex; gap: 7px; align-items: flex-start; padding: 7px 8px; border-radius: 7px; background: #f7f9fa; }
.risk-item i { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: var(--orange); }
.risk-item.high { background: #fff3f5; }
.risk-item.high i { background: var(--red); }
.risk-item.pass { background: #effaf7; }
.risk-item.pass i { background: var(--cyan-deep); }
.risk-item span { color: #627789; font-size: 8px; line-height: 1.5; }

.output-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; background: #f1f5f6; }
.output-tabs button { padding: 7px 3px; color: #7a8c9a; font-size: 8px; font-weight: 800; cursor: pointer; border: 0; border-radius: 6px; background: transparent; }
.output-tabs button.is-active { color: #0c756c; background: #fff; box-shadow: 0 2px 8px rgba(11,47,72,.07); }
.output-content { max-height: 190px; overflow-y: auto; padding: 10px; color: #526a7d; font-size: 8px; line-height: 1.65; white-space: pre-wrap; }
.output-content h3 { margin: 0 0 6px; color: #213c52; font-size: 10px; }
.output-content ul { margin: 6px 0; padding-left: 16px; }

.publish-gate { display: grid; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(25,72,111,.1); }
.publish-gate label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.publish-gate input { margin: 1px 0 0; accent-color: var(--cyan-deep); }
.publish-gate label span { color: #65798b; font-size: 8px; line-height: 1.5; }
.publish-gate button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 13px;
  color: #05272e;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  border: 0;
  border-radius: 9px;
  background: var(--cyan);
  box-shadow: 0 10px 24px rgba(22,217,197,.18);
}
.publish-gate button:disabled { color: #90a0aa; cursor: not-allowed; background: #e7ecee; box-shadow: none; }
.publish-gate > small { color: #94a2ad; font-size: 7px; line-height: 1.5; }
.publish-success { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(22,217,197,.24); border-radius: 9px; background: #effbf8; }
.publish-success strong { color: #08766c; font-size: 10px; }
.publish-success a { color: #0d6d9f; font-size: 9px; font-weight: 800; }
.publish-success span { color: #6f8796; font-size: 8px; }
.resume-word-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px 10px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(28, 105, 173, .16);
  border-radius: 11px;
  background: linear-gradient(145deg, #f7fbff, #eef8f7);
}
.resume-word-card[hidden] { display: none; }
.resume-word-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  border-radius: 9px;
  background: linear-gradient(145deg, #1e6eb8, #184f91);
  box-shadow: 0 8px 18px rgba(30, 110, 184, .2);
}
.resume-word-copy span { color: #3972a1; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.resume-word-copy h3 { margin: 3px 0 0; color: #1d3d55; font-size: 11px; }
.resume-word-copy p { margin: 4px 0 0; color: #6b8091; font-size: 8px; line-height: 1.55; }
.resume-word-card > button {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #1d69ae, #0f958c);
  box-shadow: 0 9px 20px rgba(26, 105, 166, .15);
}
.resume-word-card > button:disabled { cursor: wait; opacity: .6; }
.resume-word-card > small { grid-column: 1 / -1; color: #8194a2; font-size: 7px; line-height: 1.5; }
.job-marketing-card { display: grid; gap: 9px; margin-top: 12px; padding: 12px; border: 1px solid rgba(38,105,194,.14); border-radius: 11px; background: linear-gradient(145deg, #f5f9ff, #effbf9); }
.job-marketing-card[hidden] { display: none; }
.job-marketing-card > header { display: flex; align-items: center; justify-content: space-between; }
.job-marketing-card > header span { color: #46728c; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.job-marketing-card > header h3 { margin: 3px 0 0; color: #1c3c53; font-size: 11px; }
.job-marketing-card > header > b { padding: 5px 7px; color: #087a70; font-size: 7px; border-radius: 5px; background: #dff7f3; }
.job-marketing-card > p { margin: 0; color: #6b8091; font-size: 8px; line-height: 1.55; }
.job-marketing-generate { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 11px; color: #fff; font-size: 9px; font-weight: 900; cursor: pointer; border: 0; border-radius: 8px; background: linear-gradient(90deg, #1769c2, #0f9c91); }
.job-marketing-generate:disabled { cursor: wait; opacity: .6; }
.job-marketing-card > small { color: #8396a4; font-size: 7px; line-height: 1.5; }
.job-marketing-result { display: grid; gap: 9px; }
.job-marketing-result[hidden] { display: none; }
.job-moments-image { display: grid; place-items: center; min-height: 160px; overflow: hidden; color: #8294a2; font-size: 8px; border-radius: 9px; background: #e8f0f3; }
.job-moments-image img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.job-moments-copy { max-height: 170px; overflow-y: auto; padding: 10px; color: #5d7485; font-size: 8px; line-height: 1.65; white-space: pre-wrap; border: 1px solid rgba(25,72,111,.1); border-radius: 8px; background: #fff; }
.job-moments-copy strong { display: block; margin-bottom: 5px; color: #203e53; font-size: 9px; }
.job-marketing-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.job-marketing-actions button, .job-marketing-actions a { padding: 6px 8px; color: #1769c2; font-size: 7px; font-weight: 800; text-decoration: none; cursor: pointer; border: 1px solid rgba(23,105,194,.2); border-radius: 6px; background: #fff; }
.job-marketing-actions button:disabled { color: #91a0aa; cursor: not-allowed; }
.output-content .status-label {
  display: inline-flex;
  margin: 3px 5px 3px 0;
  padding: 5px 8px;
  color: #087c72;
  font-size: 8px;
  font-weight: 800;
  border-radius: 6px;
  background: #e7faf7;
}

.toast {
  position: fixed;
  z-index: 100;
  right: 22px;
  bottom: 22px;
  max-width: min(390px, calc(100vw - 40px));
  padding: 11px 14px;
  color: #fff;
  font-size: 10px;
  line-height: 1.55;
  border-radius: 9px;
  background: #173b55;
  box-shadow: 0 15px 40px rgba(5,29,47,.24);
}
.toast.is-error { background: #b44154; }

@media (max-width: 1180px) {
  .claw-workspace { grid-template-columns: minmax(430px, 1fr) 340px; }
  .conversation-heading { align-items: flex-start; }
  .model-switch { flex-direction: column; }
  .park-select span { display: none; }
}

@media (max-width: 980px) {
  .job-claw-sidebar { position: relative; width: 100%; height: auto; min-height: 0; padding: 14px 16px; overflow: visible; }
  .job-claw-sidebar::after { mask-image: linear-gradient(90deg, #000, transparent); }
  .claw-brand { width: max-content; }
  .new-task-button { position: absolute; top: 11px; right: 16px; min-height: 38px; margin: 0; padding: 0 13px; }
  .park-context, .sidebar-trust { display: none; }
  .claw-steps { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-top: 13px; overflow-x: auto; }
  .claw-steps button { min-height: 46px; grid-template-columns: 20px 7px 1fr; padding: 6px 8px; }
  .claw-steps small { display: none; }
  .job-claw-main { margin-left: 0; }
  .claw-topbar { position: relative; }
  .claw-workspace { height: auto; min-height: calc(100vh - 170px); overflow: visible; }
  .conversation-panel { min-height: 720px; }
  .job-draft-panel { max-height: none; overflow: visible; }
}

@media (max-width: 760px) {
  .new-task-button { font-size: 0; }
  .new-task-button span { font-size: 19px; }
  .claw-topbar { align-items: flex-start; padding: 11px 14px; }
  .claw-topbar > div:first-child strong { max-width: 150px; }
  .model-state { display: none; }
  .park-select select { width: 150px; min-width: 0; }
  .claw-workspace { grid-template-columns: 1fr; padding: 10px; }
  .conversation-panel { min-height: 650px; }
  .conversation-heading { display: grid; padding: 17px 16px 12px; }
  .conversation-heading h1 { font-size: 21px; }
  .model-switch { width: max-content; flex-direction: row; }
  .conversation-notice { margin: 0 16px; }
  .message-list { padding: 18px 15px; }
  .message { max-width: 94%; }
  .starter-prompts { margin-left: 0; }
  .composer-wrap { padding: 10px; }
  .composer-actions small { display: none; }
  .job-draft-panel { padding: 16px; }
  .draft-field-grid { grid-template-columns: 1fr; }
  .draft-field-grid label.wide { grid-column: auto; }
}