/* The product demo uses the same chat chrome as the Fork workspace. */
.fork-hero-demo { --drawer-width: 460px; }
.fork-hero-demo .demo-layout,
.fork-hero-demo .demo-layout.is-chat-open,
.fork-hero-demo .client-site { min-height: 620px; }
.fork-hero-demo .client-hero,
.fork-hero-demo .client-image { min-height: 544px; }

.fork-hero-demo .fork-chat-header {
  display: flex;
  align-items: center;
  flex: none;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid #ededed;
  background: #fff;
}
.fork-chat-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: #101010;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.fork-chat-avatar img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: invert(1);
}
.fork-chat-brand { min-width: 0; flex: 1; }
.fork-chat-brand strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}
.fork-chat-brand > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8a8a8a;
  font-size: 9px;
  line-height: 1.5;
  white-space: nowrap;
}
.fork-chat-brand i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  background: #258150;
}
.fork-chat-tools { display: flex; align-items: center; gap: 7px; flex: none; color: #5e5e5e; }
.fork-chat-tools > span { display: grid; place-items: center; width: 17px; }
.fork-chat-tools svg { width: 16px; height: 16px; stroke-width: 1.8; }
.fork-chat-close { width: 22px; height: 26px; display: grid; place-items: center; padding: 0; background: transparent; color: #5e5e5e; }
.fork-hero-demo .fork-chat-thread { padding: 24px 19px 20px; min-height: 0; overscroll-behavior: contain; }
.fork-chat-ready > p { font-size: 14px; color: #181818; line-height: 1.6; }
.fork-copy-mark { display: block; width: 18px; margin: 14px 0 0 6px; color: #aaa; }
.fork-copy-mark svg { display: block; width: 16px; height: 16px; }
.fork-hero-demo .user-message { background: #f2f2f2; border-radius: 16px; margin: 2px 0 0 32px; padding: 12px 16px; color: #161616; font-size: 14px; line-height: 1.6; }
.fork-agent-response { margin-top: 27px; }
.fork-agent-response > p { font-size: 14px; line-height: 1.65; color: #161616; }
.fork-worked { display: flex; align-items: center; gap: 5px; padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid #ededed; font-size: 12px; color: #888; }
.fork-worked > span { font-size: 19px; line-height: 1; }
.fork-hero-demo .fork-agent-response .thinking-message { font-size: 12px; color: #888; }
.fork-hero-demo .fork-agent-response .thinking-dots i { background: #888; }
.fork-chat-bottom { padding: 0 14px 14px; flex: none; }
.fork-hero-demo #chat-form { border: 1px solid #dadada; border-radius: 22px; background: #fff; padding: 16px 14px 12px; box-shadow: 0 4px 14px #00000007; }
.fork-hero-demo #chat-form.is-typing,
.fork-hero-demo #chat-form:focus-within { border-color: #aaa; }
.fork-hero-demo #chat-input { display: block; padding: 0; height: 49px; min-height: 49px; background: transparent; color: #222; font-size: 14px; line-height: 1.5; caret-color: #111; }
.fork-hero-demo #chat-input::placeholder { color: #8d8d8d; opacity: 1; }
.fork-composer-controls { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.fork-add, .fork-mic { display: grid; place-items: center; flex: none; width: 17px; color: #6f6f6f; }
.fork-add svg, .fork-mic svg { width: 16px; height: 16px; }
.fork-mode-switch { display: flex; flex: none; padding: 3px; border-radius: 12px; background: #f5f5f5; }
.fork-mode-switch button { background: transparent; padding: 5px 7px; border: 1px solid transparent; border-radius: 9px; color: #888; font-size: 12px; line-height: 1.3; }
.fork-mode-switch button[aria-pressed=true] { background: #fff; border-color: #ddd; color: #111; box-shadow: 0 1px 4px #00000008; }
.fork-model { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: #8a8a8a; white-space: nowrap; font-size: 11px; font-weight: 600; }
.fork-model svg { width: 11px; height: 11px; }
.fork-chat-send { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: #111; color: #fff; border-radius: 50%; padding: 0; }
.fork-chat-send svg { width: 17px; height: 17px; }
.fork-chat-send:disabled { background: #aaa; cursor: default; }
.fork-composer-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 5px 0; color: #999; font-size: 9px; line-height: 1.5; }
.fork-composer-meta > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fork-composer-meta button { flex: none; padding: 0; background: transparent; color: #999; font-size: inherit; }
.fork-hero-demo.is-manual .chat-panel { transition-duration: 260ms; }
.fork-hero-demo.is-instant .chat-panel { transition: none; }
.fork-hero-demo.is-instant .client-image img { transition: none; }

@media (max-width: 1100px) {
  .fork-hero-demo { --drawer-width: 420px; }
  .fork-chat-tools { gap: 5px; }
  .fork-chat-tools svg { width: 15px; height: 15px; }
  .fork-mode-switch button { font-size: 11px; padding-inline: 6px; }
  .fork-model { font-size: 10px; }
}
@media (max-width: 899px) {
  .fork-hero-demo { --drawer-width: 390px; }
  .fork-hero-demo .client-copy { min-height: 544px; }
  .fork-hero-demo .fork-chat-header { padding-inline: 12px; gap: 7px; }
  .fork-chat-tools { gap: 4px; }
  .fork-chat-brand > span { font-size: 8px; }
  .fork-composer-controls { gap: 5px; }
  .fork-mode-switch button { font-size: 10px; padding-inline: 5px; }
}
@media (max-width: 679px) {
  .fork-hero-demo .chat-panel { width: calc(100% - 16px); }
  .fork-hero-demo .client-hero,
  .fork-hero-demo .client-image,
  .fork-hero-demo .client-copy { min-height: 554px; }
  .fork-hero-demo .fork-chat-header { flex-wrap: wrap; gap: 9px; padding: 12px 14px; }
  .fork-chat-brand strong { font-size: 16px; }
  .fork-chat-brand > span { font-size: 10px; }
  .fork-chat-tools { width: 100%; justify-content: space-between; }
  .fork-chat-tools svg { width: 16px; height: 16px; }
  .fork-hero-demo .fork-chat-thread { padding: 22px 16px 18px; }
  .fork-chat-bottom { padding: 0 11px 12px; }
  .fork-hero-demo #chat-form { border-radius: 20px; padding: 14px 11px 11px; }
  .fork-hero-demo #chat-input { font-size: 13px; }
  .fork-composer-controls { gap: 5px; }
  .fork-model { font-size: 9px; gap: 2px; }
  .fork-model svg { width: 9px; height: 9px; }
  .fork-composer-meta { font-size: 8px; }
}
@media (max-width: 359px) {
  .fork-mode-switch button { padding-inline: 4px; font-size: 9px; }
  .fork-composer-controls { gap: 4px; }
  .fork-add, .fork-mic { width: 13px; }
  .fork-add svg, .fork-mic svg { width: 13px; height: 13px; }
  .fork-chat-send { width: 27px; height: 27px; }
  .fork-model { font-size: 8px; }
}