/* Lumen Web: chat widgets (```widget blocks as live mini-apps) and the desktop's chats in the list */
.md > .seg { display: contents }
.md > .seg:first-child > :first-child { margin-top: 0 }
.md > .seg:last-child > :last-child { margin-bottom: 0 }
.md > .seg.widget { display: block; margin: .9em 0; border: 1px solid var(--lumen-line-strong); border-radius: 6px; overflow: hidden; background: var(--lumen-bg) }
.md > .seg.widget:first-child { margin-top: 0 }
.w-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-bottom: 1px dashed var(--lumen-line-strong);
  font: 600 11px var(--lumen-mono); color: var(--lumen-muted) }
.w-type { color: var(--lumen-accent); white-space: nowrap }
.w-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end }
.w-acts button { font: 500 11px var(--lumen-mono); color: var(--lumen-fg); background: transparent; border: 1px solid var(--lumen-line-strong); border-radius: 4px;
  padding: 3px 8px; min-height: 26px; cursor: pointer }
.w-acts button:hover { border-color: var(--lumen-accent); color: var(--lumen-accent) }
.w-frame { display: block; width: 100%; height: 360px; border: 0; background: var(--lumen-bg) }
.w-code { border-top: 1px dashed var(--lumen-line-strong); max-height: 320px; overflow: auto }
.w-code pre { margin: 0; padding: 10px; font: 11.5px/1.5 var(--lumen-mono); white-space: pre-wrap; word-break: break-all }
/* one widget on the whole screen (a map on a phone) */
.md > .seg.widget.full { position: fixed; inset: 0; z-index: 1000; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) }
.md > .seg.widget.full .w-frame { flex: 1; height: auto !important }
.md > .seg.widget.full .w-code { max-height: 40vh }
html.w-full-on, html.w-full-on body { overflow: hidden }
/* the desktop's chats: a foldable section under the web chats */
.grp.desk-grp { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: 600 11px var(--lumen-mono);
  color: var(--lumen-muted); padding: 16px 6px 5px; text-transform: lowercase }
.grp.desk-grp::before { content: "" }
.grp.desk-grp:hover { color: var(--lumen-fg) }
.ci.desk .ci-g { color: var(--lumen-accent) }
html.w-full-on #top, html.w-full-on #dock, html.w-full-on #jump { visibility: hidden }
.md > .seg.widget.full { z-index: 2147483000 }
.md > .seg.widget.full .w-head { background: var(--lumen-bg) }