.agent-watch { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: 28px; align-items: start; margin: 0 0 28px; color: #183b2d; }
.watch-config { padding: 27px 28px 25px; border: 1px solid #ccd5bd; border-radius: 14px; background: #f4f5e9; }
.watch-recipient-control { padding: 0; margin: 0 0 25px; border: 0; min-width: 0; }
.watch-recipient-control legend, .watch-topic-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 650; }
.watch-recipient-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.watch-recipient { display: flex; align-items: center; gap: 9px; min-height: 64px; padding: 11px 9px; border: 1px solid #d3dac8; border-radius: 8px; background: transparent; color: #4c6553; text-align: left; font-size: 12px; font-weight: 650; transition: border-color .18s, background .18s; }
.watch-recipient small { display: block; margin-top: 4px; font-size: 9px; font-weight: 450; color: #778370; }
.watch-recipient.selected { border-color: #7e9870; background: #fffef6; color: #183b2d; }
.watch-recipient:hover { border-color: #7e9870; }
.watch-recipient-avatar { flex-shrink: 0; display: grid; place-items: center; width: 29px; height: 32px; border-radius: 5px; background: #e3e9d6; font-size: 10px; font-weight: 700; color: #496240; }
.watch-recipient:last-child .watch-recipient-avatar { font-size: 20px; font-weight: 400; background: #e5e5db; }
.watch-topic-control { position: relative; }
.watch-topic-control select { appearance: none; width: 100%; padding: 13px 32px 13px 13px; border: 1px solid #cdd6be; border-radius: 7px; background: #fffef6; color: #233d2a; font: inherit; font-size: 13px; cursor: pointer; }
.watch-topic-control > span { position: absolute; right: 13px; top: 11px; pointer-events: none; color: #68845b; font-size: 17px; }
.watch-rule { margin-top: 26px; border-top: 1px solid #d7dfca; padding-top: 24px; }
.watch-rule > div { display: flex; gap: 13px; align-items: center; font-size: 12px; line-height: 1.55; }
.watch-rule small { display: block; margin-bottom: 5px; font-size: 8px; font-weight: 650; letter-spacing: .8px; color: #718267; }
.watch-rule-dot { width: 8px; height: 8px; margin: 0 8px; flex-shrink: 0; border: 2px solid #719051; border-radius: 50%; }
.watch-rule-connector { display: block; width: 1px; height: 22px; margin: 6px 0 6px 11px; background: #c6d2b4; }
.watch-rule-destination { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 26px; background: #fffef7; border: 1px solid #d5deca; border-radius: 5px; }
.watch-rule-destination img { width: 15px; height: 15px; object-fit: contain; }
.watch-notification { overflow: hidden; min-width: 0; border: 1px solid #dfdce0; border-radius: 12px; background: #fff; box-shadow: 0 15px 35px -27px #263c28; color: #1d1c1d; }
.watch-slack-top { display: flex; gap: 8px; align-items: center; padding: 12px 19px; color: #fff; background: #4b1e4f; font-size: 12px; }
.watch-slack-top > img { width: 20px; height: 20px; background: #fff; border-radius: 4px; padding: 3px; }
.watch-slack-top > span { margin-left: auto; font-size: 8px; letter-spacing: .7px; color: #e3d6e4; }
.watch-slack-destination { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #edeaed; padding: 13px 20px; font-size: 12px; }
.watch-slack-destination > .icon { width: 13px; height: 13px; color: #726472; }
.watch-slack-destination > span { margin-left: auto; font-size: 9px; color: #777078; }
.watch-slack-message { display: flex; gap: 12px; padding: 23px 22px 18px; }
.watch-bot-avatar { display: grid; place-items: center; width: 34px; height: 36px; border-radius: 6px; background: #eef1de; flex-shrink: 0; }
.watch-bot-avatar img { display: block; width: 28px; height: 30px; object-fit: contain; }
.watch-message-content { min-width: 0; flex: 1; }
.watch-app-meta { display: flex; gap: 7px; align-items: center; font-size: 13px; margin: 0 0 15px; }
.watch-app-meta .watch-app-badge { font-size: 8px; background: #f1f0f1; padding: 2px 4px; border-radius: 3px; color: #69636a; }
.watch-app-meta time { font-size: 10px; color: #817981; }
.watch-signal-card { border-left: 3px solid #64844e; padding: 0 0 0 15px; }
.watch-decision-label { font-size: 8px; letter-spacing: .65px; color: #728461; font-weight: 700; }
.watch-signal-card h3 { margin: 7px 0 9px; font-size: 21px; line-height: 1.35; letter-spacing: -.55px; font-weight: 650; color: #203b2d; }
.watch-signal-card > p { margin: 0; font-size: 13px; line-height: 1.75; color: #555158; }
.watch-source-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 15px; }
.watch-source { display: inline-flex; gap: 6px; align-items: center; border: 1px solid #e4e6df; border-radius: 5px; padding: 6px 7px; background: #fafbf6; color: #4e6046; text-align: left; font-size: 9px; line-height: 1.4; transition: border-color .18s; }
.watch-source img { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.watch-source:hover { border-color: #97af83; }
.watch-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.watch-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 9px 11px; border: 1px solid #d9ded4; border-radius: 5px; background: #fff; color: #3e5039; font-size: 10px; font-weight: 650; transition: background .18s; }
.watch-actions > .watch-followup { background: #244536; border-color: #244536; color: #fff; }
.watch-actions > button:hover { background: #f0f4e9; }
.watch-actions > .watch-followup:hover { background: #355944; }
.watch-actions .icon { width: 12px; height: 12px; }
.watch-reason { font-size: 10px; color: #857d85; margin: 13px 0 0; line-height: 1.6; }
.watch-delivery-check { display: flex; gap: 7px; align-items: center; border-top: 1px solid #edeeea; padding: 12px 22px; font-size: 9px; color: #65785b; background: #fcfdf8; }
.watch-delivery-check .icon { width: 13px; height: 13px; flex-shrink: 0; }
.watch-decision { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #dce5d3; background: #f3f7ee; border-radius: 6px; padding: 12px; margin-top: 19px; font-size: 11px; line-height: 1.6; color: #37532e; }
.watch-decision > .icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
.watch-decision small { display: block; margin-top: 3px; font-size: 9px; color: #7a886e; }
.watch-decision button { margin: 2px 0 0 auto; padding: 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font-size: 8px; color: #667e54; }
#watch-evidence[hidden], #review-intro[hidden], #review-dock[hidden] { display: none !important; }
#watch-evidence { margin-top: 34px; }
#watch-evidence .evidence-source.highlighted { box-shadow: 0 0 0 2px #a6b98e; }
.watch-evidence-close { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; margin-left: 9px; border: 1px solid #c7d3b6; border-radius: 50%; background: transparent; color: #658250; }
.watch-evidence-close .icon { width: 12px; height: 12px; }
#watch-evidence .evidence-top .review-tag { margin-left: auto; }
#watch-evidence .evidence-source, #watch-evidence-heading, #review-dock { scroll-margin-top: 100px; }
.review-return { display: inline-flex; gap: 9px; align-items: center; margin-top: 18px; padding: 10px 0; border: 0; background: transparent; color: #345a43; font-size: 12px; font-weight: 650; }
.review-return .icon { width: 15px; height: 15px; }
.agent-watch button:focus-visible, .agent-watch select:focus-visible, .watch-evidence-close:focus-visible, .review-return:focus-visible { outline: 2px solid #719350; outline-offset: 3px; }
@media (max-width: 1080px) {
  .agent-watch { grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 20px; }
  .watch-config { padding: 24px 20px; }
  .watch-recipient { padding: 10px 8px; gap: 7px; font-size: 10px; }
  .watch-recipient-avatar { width: 24px; height: 29px; }
  .watch-recipient small { font-size: 8px; }
  .watch-slack-message { padding: 22px 18px 18px; gap: 10px; }
  .watch-signal-card h3 { font-size: 19px; }
}
@media (max-width: 800px) {
  .agent-watch { grid-template-columns: 1fr; gap: 18px; }
  .watch-config { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .watch-recipient-control { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
  .watch-topic-label { grid-column: 2; }
  .watch-topic-control { grid-column: 2; }
  .watch-rule { grid-column: 1 / -1; display: flex; align-items: center; gap: 17px; margin-top: 22px; padding-top: 20px; }
  .watch-rule-connector { width: 26px; height: 1px; margin: 0; flex-shrink: 0; }
  .watch-rule > div { flex: 1; font-size: 11px; }
  .watch-recipient { font-size: 12px; }
  .watch-recipient small { font-size: 9px; }
  .watch-slack-message { padding: 24px; }
}
@media (max-width: 520px) {
  .watch-config { display: block; padding: 22px 19px; border-radius: 11px; }
  .watch-recipient-control { margin-bottom: 22px; }
  .watch-recipient { min-height: 59px; padding: 10px 12px; }
  .watch-recipient-avatar { width: 28px; height: 31px; }
  .watch-rule { gap: 8px; }
  .watch-rule > div { gap: 8px; font-size: 10px; }
  .watch-rule small { font-size: 6.5px; letter-spacing: .5px; }
  .watch-rule-dot { margin: 0 4px; }
  .watch-rule-connector { width: 15px; }
  .watch-slack-top { padding: 11px 15px; }
  .watch-slack-top > span { font-size: 7px; letter-spacing: .4px; }
  .watch-slack-destination { padding: 13px 15px; font-size: 11px; }
  .watch-slack-destination > span { font-size: 8px; }
  .watch-slack-message { padding: 20px 15px; gap: 9px; }
  .watch-bot-avatar { width: 28px; height: 31px; }
  .watch-bot-avatar img { width: 25px; height: 27px; }
  .watch-app-meta { font-size: 12px; gap: 5px; }
  .watch-app-meta time { font-size: 9px; }
  .watch-signal-card { padding-left: 11px; }
  .watch-decision-label { font-size: 7px; letter-spacing: .4px; }
  .watch-signal-card h3 { font-size: 19px; }
  .watch-signal-card > p { font-size: 12px; }
  .watch-actions { align-items: stretch; gap: 7px; }
  .watch-actions > button { font-size: 10px; min-height: 40px; }
  .watch-reason { font-size: 9px; }
  .watch-delivery-check { padding: 12px 15px; font-size: 9px; }
  .watch-decision { flex-wrap: wrap; font-size: 10px; padding: 10px; }
  .watch-decision > span { flex: 1; }
  .watch-decision button { flex-basis: 100%; text-align: left; margin-left: 22px; }
}

/* Style the native picker to match the surrounding lotse controls. */
@supports (appearance:base-select) {
 .watch-topic-control select, .watch-topic-control select::picker(select) { appearance:base-select; }
 .watch-topic-control select { display:flex; align-items:center; justify-content:space-between; padding:13px; }
 .watch-topic-control > span { display:none; }
 .watch-topic-control select::picker-icon { color:#68845b; transition:transform .2s; }
 .watch-topic-control select:open::picker-icon { transform:rotate(180deg); }
 .watch-topic-control select::picker(select) { margin-top:6px; padding:6px; border:1px solid #cdd6be; border-radius:10px; background:#fffef6; color:#233d2a; box-shadow:0 12px 28px #183b2d16; }
 .watch-topic-control option { padding:11px 12px; border-radius:6px; font:inherit; font-size:13px; cursor:pointer; }
 .watch-topic-control option:hover, .watch-topic-control option:focus { background:#edf2e3; }
 .watch-topic-control option:checked { background:#e3edcf; color:#233d2a; }
 .watch-topic-control option::checkmark { color:#68845b; }
}