/* The Intent panel and its real request / review / receipt states. */
.operator-panel {
  --panel-ink: #f0eef8; --panel-muted: #a7a3b8; --panel-line: #363342;
  min-width: 0; min-height: 0; margin: 16px 16px 16px 0; border-radius: 22px;
  display: flex; flex-direction: column; overflow: hidden; position: relative; isolation: isolate;
  color-scheme: dark; color: var(--panel-ink); border: 1px solid #393444;
  background: radial-gradient(ellipse at 100% 0%, #44365955, transparent 50%), #1d1b27;
  box-shadow: 0 14px 34px -14px #2620355c, inset 0 1px #ffffff0a;
  transition: opacity .25s, transform .32s var(--ease), visibility .32s;
}
.operator-panel.closed { opacity: 0; transform: translateX(18px); visibility: hidden; pointer-events: none; }
.operator-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 18px; gap: 16px; }
.operator-title { display: flex; align-items: center; gap: 12px; }
.operator-logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #ae94f4, #7860cc); color: #fff; box-shadow: 0 3px 12px #9a7add2a, inset 0 1px #fff5; }
.operator-logo .icon { width: 23px; height: 23px; }
.operator-title strong { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; }
.operator-title small { display: block; color: #a39bb3; font-size: .75rem; margin-top: 2px; }
.panel-icon { width: 32px; height: 32px; display: grid; place-items: center; background: #ffffff06; border: 1px solid #ffffff0c; border-radius: 8px; color: #a79eb8; }
.panel-icon:hover { color: #f0eafa; background: #ffffff12; }
.context-bar { display: flex; align-items: center; gap: 7px; margin: 0 22px; padding-bottom: 18px; border-bottom: 1px solid #ffffff0a; color: #a49ab4; font-size: .75rem; }
.context-bar .icon { width: 14px; height: 14px; color: #ac98c2; }
.context-bar strong { font-size: .75rem; font-weight: 400; }
.action-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 20px 22px 14px; }
.action-steps li { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; color: #9990a9; font-size: .75rem; transition: color .2s; }
.action-steps li::before { content: ""; position: absolute; height: 1px; background: #42394f; top: 12px; left: calc(-50% + 16px); width: calc(100% - 32px); }
.action-steps li:first-child::before { display: none; }
.action-steps li > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #4a4059; background: #26202f; font: .75rem ui-monospace, SFMono-Regular, monospace; position: relative; }
.action-steps li[aria-current="step"] { color: #e7d9ff; }
.action-steps li[aria-current="step"] > span { background: #79639b; border-color: #bca3dd; color: #fff; box-shadow: 0 0 0 4px #bca3dd0a; }
.action-steps li.is-done > span { background: #353442; color: #bad4c4; border-color: #73897b; }
.action-steps li.is-done::before { background: #8c749f; }
.operator-status { min-height: 24px; margin: 0 22px 6px; text-align: center; color: #b0a3be; font-size: .75rem; }
.operator-status.is-pending::before { content: ""; display: inline-block; vertical-align: -1px; width: 10px; height: 10px; margin-right: 7px; border: 1.5px solid #7e699880; border-top-color: #d9c5f5; border-radius: 50%; animation: spin .9s linear infinite; }
.operator-status.is-error { color: #edb8b3; }
.operator-body { flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #52435f transparent; overscroll-behavior: contain; }
.operator-body > * { animation: enter .35s var(--ease) both; }
.assistant-intro { display: block; }
.assistant-dot { display: none; }
.intro-kicker { margin: 0 0 9px; color: #c3acd8; font-size: .75rem; letter-spacing: .065em; }
.intro-heading { font-size: 1.875rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.18; margin: 0 0 12px; color: #f1e9fc; }
.intro-heading span { color: #b6a1c7; }
.intro-description { margin: 0 0 20px; font-size: .875rem; line-height: 1.75; color: #afa0bb; max-width: 330px; }
.suggestions { display: grid; gap: 8px; }
.suggestion { width: 100%; display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 12px; text-align: left; border: 1px solid #48394f; border-radius: 12px; background: #2c2433; color: #dfd0e9; transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s; }
.suggestion:hover { background: #3b2b45; border-color: #9672ad; transform: translateX(3px); box-shadow: 0 4px 18px #12091620; }
.suggestion > .suggestion-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #604270; background: #493454; color: #c9a2df; border-radius: 10px; }
.suggestion .suggestion-copy { display: block; min-width: 0; }
.suggestion strong { display: block; font-size: .875rem; font-weight: 500; }
.suggestion small { display: block; font-size: .75rem; line-height: 1.6; margin-top: 2px; color: #b9a4c6; }
.suggestion > .icon { width: 14px; margin-left: auto; color: #ad8fbe; transition: transform .2s; }
.suggestion:hover > .icon { transform: translateX(2px); }
.suggestion:nth-child(1) { animation-delay: .04s; }
.suggestion:nth-child(2) { animation-delay: .07s; }
.suggestion:nth-child(3) { animation-delay: .1s; }
.suggestion:nth-child(4) { animation-delay: .13s; }
.suggestion { animation: enter .45s var(--ease) both; }
.suggestion.manual-suggestion { min-height: 38px; justify-content: center; border: 0; background: transparent; color: #bf9cce; padding-block: 9px; font-size: .875rem; }
.operator-boundary { margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid #49354e; display: flex; flex-direction: column; gap: 4px; }
.operator-boundary strong { font-size: .75rem; font-weight: 500; color: #c3a6cf; }
.operator-boundary span { font-size: .75rem; color: #b698c4; }
.operator-panel .control-note { color: #b69ac1; font-size: .75rem; line-height: 1.75; margin-top: 10px; }
.prompt-box { flex-shrink: 0; margin: 12px 18px 0; padding: 13px 14px 10px; background: #33263b; border: 1px solid #755481; border-radius: 14px; box-shadow: 0 6px 20px #0a050b18; transition: border-color .2s, box-shadow .25s; }
.prompt-box:focus-within { border-color: #d2a3e8; box-shadow: 0 0 0 3px #c48fdf12, 0 5px 20px #08030920; }
.prompt-box textarea { display: block; width: 100%; border: 0; background: transparent; color: #f0dff8; font-size: .875rem; line-height: 1.65; resize: none; outline: none; min-height: 50px; padding: 0; }
.prompt-box textarea::placeholder { color: #b397c0; opacity: 1; }
.prompt-box textarea:focus-visible { outline: none; }
.prompt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 12px; font-size: .75rem; color: #bc9aca; }
.prompt-footer button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid #d7b3ed; background: #bea2dc; color: #362147; border-radius: 9px; box-shadow: inset 0 1px #fff3; }
.prompt-footer button:hover { background: #dac0ee; }
.prompt-footer button .icon { transform: rotate(-90deg); width: 18px; height: 18px; }
.operator-footnote { color: #b394c3; font-size: .75rem; text-align: center; padding: 10px 18px 16px; margin: 0; line-height: 1.6; }
.message { border-left: 2px solid #c592db; padding: 0 0 0 12px; font-size: .875rem; color: #cbb0d9; line-height: 1.7; margin-bottom: 18px; }
.message strong { color: #f0e1f7; font-size: 1.0625rem; font-weight: 500; }
.message p { margin: 9px 0 0; }
.message-note { display: block; margin-top: 8px; color: #c6a2d8; font-size: .75rem; }
.plan-card { border: 1px solid #72507e; background: #2b2131; border-radius: 14px; overflow: hidden; }
.plan-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px; background: #3a2843; border-bottom: 1px solid #64466f; flex-wrap: wrap; }
.plan-head strong { font-size: .9375rem; font-weight: 550; color: #e6cdef; }
.plan-head small { display: block; font-size: .75rem; color: #bb95cb; margin-top: 3px; }
.risk-label { display: inline-block; white-space: nowrap; color: #e1c4ef; background: #593a65; border: 1px solid #80568e; border-radius: 6px; padding: 4px 6px; font-size: .75rem; }
.plan-section { padding: 16px; }
.plan-section label { display: block; color: #d0a8df; font-size: .875rem; }
.recipient-editor { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 12px; padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid #55365d; }
.recipient-editor:last-of-type { margin-bottom: 0; }
.recipient-editor .email-field { grid-column: 1 / -1; }
.recipient-editor input, .recipient-editor select, .form-field input, .form-field select { display: block; width: 100%; margin-top: 6px; min-height: 40px; padding: 9px 10px; border: 1px solid #795383; border-radius: 8px; color: #eed7f5; background: #3b2843; font-size: .875rem; }
.field-hint { display: block; margin-top: 5px; color: #b998c7; font-size: .72rem; line-height: 1.35; }
.form-field { margin-bottom: 16px; }
.form-field:last-child { margin-bottom: 0; }
.invite-row { padding-block: 10px; border-bottom: 1px solid #54365f; }
.invite-row:first-child { padding-top: 0; }
.invite-row:last-of-type { border: 0; padding-bottom: 0; }
.invite-row strong { display: block; font-size: .875rem; font-weight: 550; color: #ead1f4; }
.invite-row small { display: block; font-size: .75rem; color: #bf98cc; line-height: 1.8; margin-top: 4px; overflow-wrap: anywhere; }
.plan-effects { font-size: .875rem; color: #c7a0d5; line-height: 1.7; margin: 16px 0 0; }
.plan-metadata { font-size: .75rem; line-height: 1.8; color: #c29cce; border-block: 1px solid #553763; background: #33253d; padding: 12px 16px; overflow-wrap: anywhere; }
.plan-metadata summary { cursor: pointer; color: #d6b4e3; font-size: .75rem; }
.plan-metadata .metadata-content { padding-top: 10px; }
.operator-body code { font: .75rem/1.7 ui-monospace, SFMono-Regular, monospace; overflow-wrap: anywhere; word-break: break-word; color: inherit; }
.policy-note { padding: 12px 16px; border-bottom: 1px solid #82582c; background: #3f2f22; color: #ecc79a; font-size: .875rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.plan-actions button { min-height: 40px; padding: 9px 12px; background: #3b2845; color: #d9b8e8; border: 1px solid #805a8c; border-radius: 9px; font-size: .875rem; font-weight: 500; }
.plan-actions button:hover { background: #51305e; border-color: #bd8dd0; }
.plan-actions button.confirm { flex: 1; background: #c4a7e7; color: #35223f; border-color: #ddc3fa; font-weight: 650; box-shadow: inset 0 1px #ffffff66, 0 4px 12px #09050b20; }
.plan-actions button.confirm:hover { background: #d8bff5; box-shadow: 0 6px 18px #0b030e40; }
.error-card { margin: 16px 0; padding: 16px; border: 1px solid #9b6462; border-radius: 12px; background: #452a32; color: #f0bebd; font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.error-card p { margin-block: 8px; }
.error-card .secondary-button { margin-top: 8px; white-space: normal; color: #f0cccc; background: #57343b; border-color: #b17a80; }
.complete-card { text-align: center; padding: 22px 0 0; border: 1px solid #596b61; background: radial-gradient(ellipse at 50% 0%, #3b534635, transparent 70%), #24272b; border-radius: 15px; overflow: hidden; }
.complete-icon { display: block; margin: 0 auto 18px; width: 62px; height: 62px; color: #bde0c9; }
.complete-icon svg { width: 62px; height: 62px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.complete-ring { stroke-dasharray: 176; animation: ring-in .65s var(--ease) both; }
.complete-tick { stroke-dasharray: 34; animation: tick-in .4s .25s var(--ease) both; }
.complete-card h3 { font-weight: 500; font-size: 1.25rem; letter-spacing: -.025em; margin: 0 20px 10px; color: #e0eddf; }
.complete-card > p { margin: 0 24px 22px; color: #adc1b1; font-size: .875rem; line-height: 1.7; }
.receipt-details { padding: 16px 18px; margin: 0; text-align: left; border-top: 1px dashed #57695d; background: #202823; font-size: .875rem; color: #d4ded5; }
.receipt-details dt { color: #a2b6a4; font-size: .75rem; margin-top: 15px; }
.receipt-details dt:first-child { margin-top: 0; }
.receipt-details dd { margin: 5px 0 0; overflow-wrap: anywhere; }
.receipt-details ul { padding: 0; margin: 0; list-style: none; font-size: .875rem; line-height: 1.8; }
.receipt-details li { padding: 6px 0; border-bottom: 1px solid #3d4d41; }
.receipt-details li:last-child { border-bottom: 0; }
.receipt-technical { color: #adc4b2; border-top: 1px solid #4b5d50; text-align: left; padding: 12px 18px; font-size: .75rem; }
.receipt-technical summary { cursor: pointer; }
.receipt-technical dl { background: transparent; border: 0; padding: 6px 0 0; }
.complete-card .plan-actions { background: #243128; justify-content: center; border-top: 1px solid #465b4b; }
.complete-card .plan-actions button { background: #304637; border-color: #5d7d66; color: #c8e2ce; }
.complete-card .plan-actions button:hover { background: #415d48; }
@keyframes ring-in { from { stroke-dashoffset: 176; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes tick-in { from { stroke-dashoffset: 34; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }

@media (max-width: 780px) {
  .operator-panel { order: 1; margin: 18px; max-height: 760px; min-height: 600px; }
  .operator-panel.closed { display: none; }
  .operator-body { min-height: 240px; }
  .operator-head { padding-top: 20px; }
  .intro-heading { font-size: 1.75rem; }
}
@media (max-width: 420px) {
  .operator-panel { margin: 14px; border-radius: 18px; }
  .operator-head, .operator-body { padding-inline: 18px; }
  .context-bar, .action-steps { margin-inline: 18px; }
  .plan-head { padding: 14px; }
  .recipient-editor { grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; }
}
/* Secondary text still needs to be readable on the light working surface. */
.table-tools p, .metric-card small, .workspace-pill small, .workspace-note, .record-id, .account small,
.control-metrics small, .ledger-row small, .check-row small, .control-view .control-note,
.proof-checklist small, .sandbox-label, th { color: #716c80; }
.eyebrow, .nav-label, .sidebar-copy p { color: #777184; }
.proof-grid small, .value-content > p { color: #756681; }
@media (prefers-reduced-motion: reduce) {
  .operator-panel, .operator-panel *, .operator-panel *::before, .operator-panel *::after { animation: none !important; transition: none !important; }
}