/* The banner under the header on every tab (red for a failure, yellow for a decision), and how long a busy state usually takes. */
.apptop{flex-wrap:wrap}
.apptop>.hello{flex:1 1 0;min-width:0} /* so only the banner takes a new row */
.problem-bar{flex:0 0 100%;min-width:0;order:9;display:flex;align-items:stretch;margin-top:10px;border-radius:16px;background:var(--red);color:#fff}
.problem-bar.ask,.sg-full{background:#F7CE46;color:var(--ink)}
.problem-bar[hidden]{display:none}
.problem-open,.problem-close{border:0;background:none;color:inherit;font:inherit}
.problem-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 4px 10px 14px;font-size:14px;font-weight:600;text-align:left}
.problem-open span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.problem-open small{display:block;margin-top:2px;white-space:normal;font-size:13px;font-weight:500}
.problem-open svg{flex:none;width:18px;height:18px}
.problem-close{flex:none;width:44px;display:grid;place-items:center}
.problem-close svg{width:18px;height:18px}
.problem-list{display:flex;flex-direction:column;gap:6px}
.busy-time{white-space:nowrap}
.ch.busy-sub{flex-direction:column;align-items:flex-start;gap:0}
.ch.busy-sub>span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}