/* The demo uses the supplied application's surfaces and design tokens. */
.coworkian-mark { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.demo-flow .demo-brand-avatar { background: #e7f5f7 !important; }
.demo-brand-avatar img { object-fit: contain; }
.ai-ava { background: #e7f5f7 !important; }
body[data-page="start"] #viewDash .dash-groups {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 24px;
  width: min(100%, 680px);
  margin: 0 auto;
}
body[data-page="start"] #viewDash .dash-greet {
  flex: 0 0 auto;
  padding: 0;
  width: min(100%, 640px);
  justify-content: flex-start;
}
body[data-page="start"] #viewDash .dash-greet > .proj-header {
  justify-content: flex-start;
}
body[data-page="start"] #viewDash .dpx-chat,
body[data-page="start"] #viewDash .dash-tail { display: none; }
.demo-start-copy {
  width: min(100%, 640px);
  margin: 18px 0 0;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
}
.demo-start-action {
  align-self: flex-start;
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 24px 0 0;
  padding: 11px 16px;
  background: var(--purple);
  color: white;
  border: 1px solid var(--purple);
  border-radius: 8px;
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.demo-start-action:hover { background: var(--purple-dark); transform: translateY(-1px); }
.demo-start-action span { margin-left: 12px; font-size: 16px; }


/* A compact transport control in the original topbar, not a second interface. */
#mainTopbar .topbar-search { display: none !important; }
.demo-transport {
  position: relative;
  z-index: 35;
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px 13px;
  background: transparent;
}
.demo-transport[hidden] { display: none !important; }
body:has(> .demo-transport) {
  grid-template-rows: auto minmax(0, 1fr) 66px;
}
.demo-transport:has(.demo-tip:not([hidden])) { z-index: 50; }
.demo-transport .demo-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #111b2d;
  box-shadow: 0 7px 18px rgba(7,16,31,.18);
}
.shell-area.demo-window-in {
  animation: demoWindowIn .46s cubic-bezier(.2,.78,.2,1) both;
  transform-origin: center center;
}
.shell-area .area-frame { transition: opacity .38s ease-out; }
.shell-area.demo-frame-preparing .area-frame,
#shellLeft .area-frame.demo-frame-preparing {
  opacity: 0;
  pointer-events: none;
  transition: none;
}
@keyframes demoWindowIn {
  from { opacity: 0; transform: translateY(7px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.demo-tip {
  position: absolute;
  bottom: calc(100% + 13px);
  right: 0;
  width: min(304px, calc(100vw - 24px));
  display: grid;
  gap: 5px;
  padding: 15px 38px 16px 16px;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(12, 31, 64, .13), 0 2px 8px rgba(12, 31, 64, .04);
  color: var(--text-primary);
  text-align: left;
  white-space: normal;
  animation: demoTipIn .38s cubic-bezier(.2,.78,.2,1) both;
}
.demo-tip[hidden] { display: none; }
.demo-tip::before {
  content: '';
  position: absolute;
  top: auto;
  bottom: -6px;
  right: 55px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #fff;
  border-right: 1px solid #dfe6ef;
  border-bottom: 1px solid #dfe6ef;
}
.demo-tip-title { font-size: 12px; line-height: 1.35; font-weight: 700; }
.demo-tip-copy { font-size: 11.5px; line-height: 1.55; color: var(--text-secondary); }
.demo-tip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: 18px/1 Inter, sans-serif;
  cursor: pointer;
}
.demo-tip-close:hover { background: var(--bg); color: var(--text-primary); }
@keyframes demoTipIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.demo-controls .demo-step {
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  color: #c7d1df;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.demo-controls .demo-control {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #e8eef8;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.demo-controls .demo-control:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.demo-controls .demo-control:disabled { opacity: .36; cursor: default; }
.demo-controls .demo-control.demo-play { background: #fff; color: #111b2d; }
.demo-controls .demo-control.demo-play:hover:not(:disabled) { background: #e7edf6; }
.demo-control svg { width: 14px; height: 14px; }
.area-title .at-file { display: none; }
.demo-flow .demo-brand-avatar {
  overflow: hidden;
  border-radius: 7px;
  background: #0b2348;
  box-shadow: 0 2px 7px rgba(11, 35, 72, .16);
}
.demo-brand-avatar img { display: block; width: 100%; height: 100%; }
.demo-flow .ai-msg.ai-msg-agent .demo-brand-avatar { border-radius: 7px; }
.demo-flow .demo-agent-avatar {
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(42, 180, 160, .35);
  border-radius: 7px;
  color: #0b5f55;
  background: #e6f7f4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.demo-message-in { animation: demoMessageIn .58s cubic-bezier(.2,.78,.2,1) both; }
.demo-system-event {
  display: flex;
  justify-content: center;
  margin: 12px 0 18px;
  color: #6c7a8f;
  font-size: 12px;
}
.demo-system-event span {
  padding: 7px 11px;
  border: 1px dashed #cfd8e4;
  border-radius: 999px;
  background: #f5f7fa;
}
.demo-pending { animation: demoPendingIn .36s cubic-bezier(.2,.78,.2,1) both; }
.demo-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted) !important;
  font-size: 12px;
  font-weight: 500;
}
.demo-flow .ai-msg.user .demo-status {
  background: #eef1f6;
  padding: 8px 12px;
}
.demo-flow .ai-msg.ai-msg-agent .demo-status {
  display: flex;
  width: max-content;
  padding-top: 7px;
}
.demo-status-dots { display: inline-flex; align-items: center; gap: 3px; height: 12px; }
.demo-status-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  animation: demoDot 1.15s ease-in-out infinite;
}
.demo-status-dots i:nth-child(2) { animation-delay: .14s; }
.demo-status-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes demoMessageIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes demoPendingIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes demoDot {
  0%, 60%, 100% { opacity: .32; transform: translateY(0); }
  30% { opacity: .9; transform: translateY(-2px); }
}
.demo-flow .demo-emphasis { box-shadow: 0 0 0 2px rgba(42, 180, 160, .28); border-radius: 6px; }
.demo-gantt-focus > .gantt-row { background: rgba(42, 180, 160, .08); }
body[data-page="workflows"] .screen-hint { display: none !important; }
@media (max-width: 960px) {
  .demo-transport { min-height: 94px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  body:has(> .demo-transport) { grid-template-rows: auto minmax(0, 1fr) auto; }
  .demo-transport .demo-controls { gap: 6px; padding: 7px; flex-wrap: wrap; justify-content: center; width: min(100%, 330px); }
  .demo-controls .demo-step { flex: 0 0 100%; text-align: center; padding: 0 4px 3px; font-size: 11px; }
  .demo-controls .demo-control { width: 44px; height: 44px; }
  .demo-control svg { width: 18px; height: 18px; }
  .demo-tip { right: 50%; transform: translateX(50%); width: min(304px, calc(100vw - 32px)); animation: none; }
  .demo-tip-close { width: 32px; height: 32px; }
  body { height: 100dvh; }
  body.lb:has(> #mainTopbar) { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px; }
  body.lb:has(> #mainTopbar) > .content-col { grid-column: 1; }
  body.lb:has(> #mainTopbar) > .lb-rail,
  body.lb:has(> #mainTopbar) > .sidebar-col { display: none; }
  #mainTopbar { overflow-x: auto; scrollbar-width: none; }
  .area-head { padding: 0 8px; min-height: 48px; }
  .area-tabs { flex: 1; }
  .area-tab { min-height: 44px; flex: 1; }
  .shell-narrow .area-title, .shell-narrow .area-btn { display: none; }
  .demo-flow .vibe-sticky { padding-inline: 12px; }
  .demo-flow .tab-bar { overflow-x: auto; white-space: nowrap; }
  .demo-flow .vibe-feed, .demo-flow .ai-body { padding-inline: 14px; }
  .demo-flow .ai-msg, .demo-flow .ai-msg.user { max-width: 100%; overflow-wrap: anywhere; }
  .demo-flow .vibe-foot { display: none; }
  body[data-page="workflows"] .vibe-foot { display: none; }
  body[data-page="workflows"] #trList .tr-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
  body[data-page="workflows"] #trList .tr-row { height: auto; min-height: 62px; }
  body[data-page="workflows"] #trList .tr-sub { flex-wrap: wrap; gap: 5px; }
  .demo-flow .vibe-feed .vibe-cols { flex-direction: column; }
  .demo-flow .vibe-feed .vibe-cols > .vibe-colx { flex-basis: auto !important; width: 100%; }
  .demo-system-event span { border-radius: 12px; line-height: 1.6; }
  .vnew-demo-report { padding: 16px; overflow-wrap: anywhere; }
  body[data-page="start"] #viewDash .dash-groups { padding: 24px 20px; }
  .demo-start-copy { font-size: 13px; }
}
@media (max-height: 500px) and (max-width: 960px) {
  .demo-transport { min-height: 60px; padding: 4px 8px; }
  .demo-transport .demo-controls { width: auto; flex-wrap: nowrap; padding: 4px; }
  .demo-controls .demo-step { flex: initial; padding: 0 6px; }
  .demo-flow .vibe-sticky > .proj-header { padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-message-in, .demo-pending, .demo-status-dots i, .demo-start-action, .demo-control, .demo-tip, .shell-area, .shell-area .area-frame { animation: none !important; transition: none !important; }
}
.demo-is-paused *{animation-play-state:paused!important}
.vnew-demo-report{margin-bottom:18px;padding:20px;border:1px solid var(--border,#dfe5ee);border-radius:12px;background:var(--bg-card,#fff);font-size:14px;line-height:1.7}
.vnew-demo-report>b{font-size:17px}
.vnew-demo-report p{margin:12px 0}
.vnew-demo-report small{color:var(--text-muted,#748398);font-size:12px}