.dialogue-status {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .7rem .85rem;
    margin: .45rem 0 .75rem;
    border: 1px solid #dce5e2;
    border-radius: 12px;
    background: #f6faf8;
    color: #243d36;
}
.dialogue-status > span {
    flex: none;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: #dceee7;
}
.dialogue-status strong { display: block; font-size: .9rem; }
.dialogue-status p { margin: .2rem 0 0; font-size: .78rem; line-height: 1.5; }
.dialogue-status.status-needs_input,
.dialogue-status.status-assumption_draft,
.dialogue-status.status-unknown { border-color: #eadcbd; background: #fffaf1; }
.dialogue-status.status-failed,
.dialogue-status.status-timeout,
.dialogue-status.status-cancelled,
.dialogue-status.status-disconnected,
.dialogue-status.status-not_applicable { border-color: #eddddb; background: #fff8f7; }
.dialogue-context-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .65rem; }
.dialogue-context-tags span {
    display: inline-flex;
    max-width: 100%;
    padding: .16rem .5rem;
    border: 1px solid #e2e8e5;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.4;
    color: #4e625c;
    background: #fff;
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .dialogue-status { padding: .6rem; gap: .5rem; }
    .dialogue-context-tags { gap: .25rem; }
}