
/* DCM_BROKER_PORTAL_DEMO_V1_CSS */
.dcm-demo{--dcm-ink:#102b24;--dcm-green:#1eb386;--dcm-mint:#62dfba;--dcm-line:#dfe9e5;--dcm-soft:#f3f8f6;position:relative;overflow:hidden;border-radius:14px;background:#f7faf9;color:var(--dcm-ink);font-family:Inter,Arial,sans-serif;box-shadow:0 18px 50px rgba(2,27,20,.22);isolation:isolate}
.dcm-demo *{box-sizing:border-box}.dcm-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#092a22;border-bottom:1px solid rgba(255,255,255,.1)}
.dcm-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:9px 8px;border:0;border-right:1px solid rgba(255,255,255,.09);background:transparent;color:#b8d1ca;font:600 11px/1.2 Inter,Arial,sans-serif;letter-spacing:.01em;cursor:pointer;transition:color .25s,background .25s}.dcm-tab:last-child{border-right:0}.dcm-tab:hover,.dcm-tab:focus-visible{color:#fff;background:rgba(98,223,186,.09);outline:none}.dcm-tab.is-active{color:#fff;background:rgba(30,179,134,.15)}.dcm-tab-num{color:var(--dcm-mint);font:700 9px/1 monospace;letter-spacing:.08em}
.dcm-stage{position:relative;min-height:440px;background:#edf4f1}.dcm-scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transform:translateX(14px) scale(.995);transition:opacity .42s ease,transform .42s ease,visibility 0s linear .42s;background:#f6f9f8}.dcm-scene.is-active{z-index:2;opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dcm-appbar,.dcm-portal-bar{height:44px;display:flex;align-items:center;padding:0 14px;color:#fff;background:#102f55;font-size:10px}.dcm-app-title{display:flex;align-items:center;gap:7px;min-width:104px}.dcm-app-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:3px;background:#1877c9;font-weight:800}.dcm-app-search{flex:1;max-width:250px;margin:auto;padding:7px 12px;border-radius:4px;background:rgba(255,255,255,.14);color:#dce7f4}.dcm-avatar{display:grid;place-items:center;width:25px;height:25px;margin-left:auto;border-radius:50%;background:#d9f5eb;color:#07513c;font-weight:800;font-size:9px}
.dcm-inbox-layout{display:grid;grid-template-columns:138px minmax(190px,1fr) 190px;height:396px}.dcm-mail-list{padding:10px 8px;background:#f5f6f7;border-right:1px solid #dde3e7}.dcm-mail-folder{display:flex;justify-content:space-between;padding:6px 7px 9px;font-size:10px}.dcm-mail-folder span{color:#2876bf}.dcm-mail-card{margin-bottom:5px;padding:9px 7px;border-left:3px solid transparent;border-radius:2px;color:#66727b;font-size:8px}.dcm-mail-card strong{color:#263942;font-size:9px}.dcm-mail-card>span{float:right}.dcm-mail-card p{margin:4px 0 0;line-height:1.3}.dcm-mail-card.is-selected{border-left-color:#1877c9;background:#e3f0fb}.dcm-message{padding:18px 18px;background:#fff}.dcm-message-meta{display:flex;gap:8px;align-items:center}.dcm-sender{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e8eef3;color:#355;font-weight:800}.dcm-message-meta strong,.dcm-message-meta small{display:block;font-size:9px}.dcm-message-meta small{margin-top:2px;color:#829099}.dcm-message h3{margin:19px 0 12px;font-size:14px;line-height:1.25}.dcm-message p{font-size:10px;line-height:1.65;color:#52635e}.dcm-attachment{display:flex;align-items:center;gap:8px;margin-top:20px;padding:10px;border:1px solid #e1e8e5;border-radius:7px}.dcm-attachment>span{display:grid;place-items:center;width:31px;height:35px;border-radius:4px;background:#e44d4d;color:#fff;font-size:8px;font-weight:800}.dcm-attachment strong,.dcm-attachment small{display:block;font-size:8px}.dcm-attachment small{color:#7d8a86;margin-top:3px}
.dcm-ai-pane{padding:14px;background:#eef7f4;border-left:1px solid #d7e7e1}.dcm-ai-head{display:flex;gap:6px;align-items:center;font-size:10px}.dcm-spark{color:var(--dcm-green)}.dcm-live-dot{width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--dcm-green);box-shadow:0 0 0 3px rgba(30,179,134,.12)}.dcm-ai-status{display:flex;align-items:center;gap:8px;margin:13px 0;padding:9px;border-radius:7px;background:#daf3e9}.dcm-check{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--dcm-green);color:#fff;font-weight:800}.dcm-ai-status strong,.dcm-ai-status small{display:block;font-size:8px}.dcm-ai-status small{margin-top:2px;color:#568175}.dcm-fields{margin:0}.dcm-fields>div{padding:7px 0;border-bottom:1px solid #dae6e2}.dcm-fields dt{font-size:7px;text-transform:uppercase;letter-spacing:.07em;color:#799087}.dcm-fields dd{margin:3px 0 0;font-size:8px;font-weight:700}.dcm-confidence{display:grid;grid-template-columns:1fr auto;gap:4px;margin:10px 0;font-size:8px}.dcm-confidence i{grid-column:1/-1;height:4px;overflow:hidden;border-radius:9px;background:#d2dfdb}.dcm-confidence b{display:block;width:98%;height:100%;background:var(--dcm-green);animation:dcm-fill 5.5s ease infinite}.dcm-ai-pane .mock-btn,.dcm-review-body header .mock-btn,.dcm-queue-row .mock-btn{border:0;border-radius:5px;background:var(--dcm-green);color:#fff;font-weight:750}.dcm-ai-pane .mock-btn{width:100%;padding:9px;font-size:8px}.dcm-auto-note{display:block;margin-top:7px;text-align:center;color:#789086;font-size:7px}
.dcm-portal-bar{background:#0b2c23}.dcm-brand{display:flex;align-items:center;gap:7px;font-weight:800}.dcm-brand>span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--dcm-green);color:#082a21;font-size:14px}.dcm-portal-links{display:flex;gap:18px;margin-left:26px;color:#acc8bf}.dcm-portal-links strong{color:#fff}.dcm-portal-links i{margin-left:3px;padding:2px 5px;border-radius:9px;background:#f1b24a;color:#382300;font-style:normal}.dcm-review-body{padding:20px 24px}.dcm-review-body header{display:flex;align-items:center;justify-content:space-between}.dcm-review-body h3,.dcm-client-head h3{margin:3px 0;font-size:17px}.dcm-review-body header p,.dcm-client-head p{margin:0;color:#6d7c77;font-size:9px}.dcm-kicker{color:#138c69;font:700 7px/1 monospace;letter-spacing:.1em}.dcm-review-body header .mock-btn{padding:8px 13px;font-size:8px}.dcm-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}.dcm-metrics>div{padding:10px 12px;border:1px solid #dfe8e5;border-radius:7px;background:#fff}.dcm-metrics strong,.dcm-metrics span{display:block}.dcm-metrics strong{color:#138c69;font-size:17px}.dcm-metrics span{margin-top:2px;color:#6f7e79;font-size:7px}.dcm-metrics .is-warn strong{color:#d48b19}.dcm-queue{border:1px solid #dde7e3;border-radius:8px;overflow:hidden;background:#fff}.dcm-queue-row{display:grid;grid-template-columns:34px minmax(120px,1.2fr) auto minmax(110px,.9fr) auto;gap:9px;align-items:center;padding:14px 12px;border-bottom:1px solid #e5ece9;font-size:8px}.dcm-queue-row:last-child{border-bottom:0}.dcm-queue-row.is-focus{background:#fffdfa;box-shadow:inset 3px 0 #e5a338}.dcm-doc-icon{display:grid;place-items:center;width:30px;height:34px;border-radius:4px;background:#e8f3ef;color:#118264;font-size:7px;font-weight:800}.dcm-doc-copy strong,.dcm-doc-copy span,.dcm-candidate strong,.dcm-candidate span,.dcm-candidate small{display:block}.dcm-doc-copy strong{font-size:9px}.dcm-doc-copy span,.dcm-candidate small,.dcm-candidate span{margin-top:3px;color:#7b8984;font-size:7px}.dcm-candidate strong{margin-top:2px;font-size:8px}.dcm-queue-row .mock-btn{padding:7px 8px;font-size:7px}
.dcm-pill{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:4px 7px;border-radius:20px;background:#edf2f0;color:#52635d;font-size:7px;font-weight:750}.dcm-pill-amber{background:#fff0d4;color:#9a5f04}.dcm-pill-blue{background:#e4f0fb;color:#25669c}.dcm-pill-green{background:#dcf5eb;color:#0c795a}.dcm-client-head{display:flex;align-items:center;gap:10px;padding:15px 22px 12px;background:#fff}.dcm-client-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:#dff4ed;color:#087756;font-weight:800}.dcm-client-head>.dcm-pill{margin-left:auto}.dcm-client-tabs{display:flex;gap:22px;padding:0 22px;background:#fff;border-bottom:1px solid #dce6e2;color:#71817b;font-size:8px}.dcm-client-tabs span,.dcm-client-tabs strong{padding:8px 0}.dcm-client-tabs strong{border-bottom:2px solid var(--dcm-green);color:#17372e}.dcm-timeline-wrap{padding:13px 22px}.dcm-review-banner{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid #cfe7de;border-radius:7px;background:#edfaf5}.dcm-review-banner div{flex:1}.dcm-review-banner strong,.dcm-review-banner p{display:block;margin:0;font-size:8px}.dcm-review-banner p{margin-top:2px;color:#648177;font-size:7px}.dcm-timeline{position:relative;margin-top:9px;padding-left:13px}.dcm-timeline:before{content:"";position:absolute;left:25px;top:13px;bottom:13px;width:1px;background:#d2dfda}.dcm-event{position:relative;display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:8px 9px;margin-bottom:5px;border:1px solid #e0e9e6;border-radius:7px;background:#fff}.dcm-event-icon{z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e7efec;color:#325e51;font-size:7px;font-weight:800}.dcm-event-icon.is-ai{background:#dff5ed;color:#087757;font-size:11px}.dcm-event small,.dcm-event strong,.dcm-event p{display:block;margin:0}.dcm-event small{color:#83908c;font:600 6px/1.2 monospace}.dcm-event strong{margin-top:2px;font-size:8px}.dcm-event p{margin-top:2px;color:#70807a;font-size:7px}
.dcm-progress{height:3px;background:#d9e6e1}.dcm-progress span{display:block;width:0;height:100%;background:var(--dcm-green)}.dcm-demo.is-running .dcm-progress span{animation:dcm-progress 5.5s linear infinite}.dcm-caption{margin:0;padding:10px 14px;background:#fff;color:#52655e;text-align:center;font-size:9px}.dcm-caption .dcm-spark{margin-right:5px}
@keyframes dcm-progress{from{width:0}to{width:100%}}@keyframes dcm-fill{0%{width:0}25%,100%{width:98%}}
/* UBW-252: the message column is minmax(0,1fr), not 1fr — a 1fr track's automatic minimum is
   its content's, which at phone widths is 189px against 159px of room, so the AI pane was
   pushed out of the scene's overflow:hidden and lost its client, policy and action rows. */
@media(max-width:700px){.dcm-stage{min-height:415px}.dcm-tab{font-size:9px}.dcm-inbox-layout{grid-template-columns:minmax(0,1fr) 165px;height:371px}.dcm-mail-list{display:none}.dcm-message{padding:14px 12px}.dcm-ai-pane{padding:11px}.dcm-review-body{padding:15px 12px}.dcm-queue-row{grid-template-columns:28px 1fr auto}.dcm-queue-row .dcm-candidate{grid-column:2/3}.dcm-queue-row>.mock-btn{grid-column:3;grid-row:2}.dcm-metrics>div{padding:8px}.dcm-client-head{padding:12px}.dcm-client-tabs{gap:13px;padding:0 12px}.dcm-timeline-wrap{padding:10px}.dcm-event{grid-template-columns:24px 1fr}.dcm-event>.dcm-pill{display:none}}
@media(max-width:460px){.dcm-tab{gap:4px}.dcm-tab-num{display:none}.dcm-stage{min-height:400px}.dcm-appbar,.dcm-portal-bar{height:40px}.dcm-inbox-layout{height:360px;grid-template-columns:minmax(0,1fr) 145px}.dcm-message p{font-size:9px}.dcm-ai-pane{padding:9px}.dcm-portal-links{gap:9px;margin-left:13px}.dcm-review-body h3,.dcm-client-head h3{font-size:14px}.dcm-review-body header p{display:none}.dcm-queue-row{padding:10px 8px}.dcm-queue-row:nth-child(2){display:none}.dcm-client-head .dcm-client-logo{display:none}.dcm-client-tabs span:nth-child(2),.dcm-client-tabs span:nth-child(3){display:none}.dcm-caption{font-size:8px}}
/* UBW-252: below this the mock portal's nav row and its avatar no longer fit the demo, and the
   avatar was being sliced in half by the scene's clip. Keep only the active section — the same
   trim .dcm-client-tabs already makes at 460px. The bar is decorative (aria-hidden inside a
   role="img"), so nothing is lost to a screen reader. */
@media(max-width:380px){.dcm-portal-links span{display:none}}
@media(prefers-reduced-motion:reduce){.dcm-scene{transition:none}.dcm-demo.is-running .dcm-progress span,.dcm-confidence b{animation:none}.dcm-progress span{width:100%}.dcm-confidence b{width:98%}}

