/* The current product Files layout, inside a controlled website example. */
#sampleFiles,
#workspace-files {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
#filesPanel {
  min-width: 0;
  width: 100%;
  flex: 1;
}
#fileList .file-row {
  user-select: none;
}
#filePreview .artifact {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
}
#filePreview .artifact-view {
  max-height: none;
  overflow: auto;
}
#filePreview .message-code {
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#filePreview .artifact-row {
  flex-wrap: wrap;
}
#filePreview .artifact-text {
  flex: 1;
  min-width: 130px;
}
#filePreview .artifact-row > button {
  font-size: 11px;
  min-height: 30px;
}
#filesTools .icon-button {
  flex-shrink: 0;
}
#fileManagerBody.preview-open #fileSide {
  box-shadow: -12px 0 30px #15261c18;
}
#pane[data-size="fill"] #fileSide {
  box-shadow: none;
}
.sample-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(100%);
  overflow: hidden;
  white-space: nowrap;
}
.workspace-example #workspace {
  height: calc(100dvh - 58px);
}
.workspace-example #pane {
  margin: 0 8px 8px;
  min-width: 0;
  container-type: inline-size;
}
.workspace-example #topbar {
  height: 58px;
  padding: 0 16px;
}
.workspace-example #panelHeader {
  gap: 8px;
}
.workspace-example .panel-tabs {
  flex: none;
}
.workspace-example .bot-name {
  font-size: 14px;
}
.workspace-example #workspace-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--sunk);
}
.workspace-example #workspace-terminal {
  padding: 0 18px;
  flex: 1;
  min-height: 0;
  background: var(--sunk);
}
#workspace-terminal header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
#workspace-terminal header span {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
#workspace-terminal pre {
  font: 12px/1.8 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.workspace-menu {
  position: fixed;
  left: 14px;
  top: 53px;
  z-index: 20;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--menu-solid);
  box-shadow: var(--lift-3);
}
.workspace-menu p {
  font-size: 11px;
  color: var(--muted);
  padding: 8px;
  margin: 0;
}
.workspace-menu button {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 9px 12px;
}
.workspace-menu button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.workspace-browser-window {
  margin: 12px;
  border: 1px solid #b5b8b9;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  min-height: 330px;
}
.browser-tabs {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: #e5e7eb;
  color: #3c4043;
  font-size: 11px;
}
.browser-tabs > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6d9df;
}
.browser-tabs > b {
  height: 28px;
  align-self: end;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 8px 8px 0 0;
  background: #fff;
  min-width: 150px;
  font-weight: 400;
}
.browser-tabs > i {
  font-size: 18px;
  font-style: normal;
}
.browser-address {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 11px;
  color: #4c5158;
  font-size: 12px;
  background: #fff;
  border-bottom: 1px solid #e2e4e7;
}
.browser-address > div {
  flex: 1;
  border-radius: 18px;
  background: #f1f3f4;
  padding: 4px 12px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-browser-page {
  padding: 21px 24px;
  background: #f6f8f3;
  color: #24332a;
}
.workspace-browser-page > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #dce3d8;
  padding-bottom: 13px;
  font-size: 11px;
}
.workspace-browser-page > header span {
  font-size: 10px;
  color: #536456;
}
.workspace-browser-page > h2 {
  font-size: 25px;
  margin: 22px 0 10px;
}
.workspace-browser-page > p {
  font-size: 12px;
  color: #536456;
}
.workspace-account {
  padding: 15px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #d6dfd0;
  border-radius: 6px;
  background: #fff;
  max-width: 320px;
}
.workspace-account > span {
  font-size: 10px;
  color: #536456;
}
.workspace-account strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.workspace-account small {
  font-size: 10px;
  color: #536456;
}
.workspace-browser-projects {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.workspace-browser-projects > div {
  padding: 12px;
  border: 1px solid #d6dfd0;
  border-radius: 5px;
  font-size: 11px;
  background: #edf3e8;
}
@media (max-width: 760px) {
  .workspace-example #topbar {
    height: 50px;
    padding-inline: 10px;
  }
  .workspace-example #workspace {
    height: calc(100dvh - 50px);
  }
  .workspace-example .top-toggle > span:not(.state-dot) {
    display: none;
  }
  .workspace-example .wordmark {
    font-size: 18px;
  }
  .workspace-example .brand-button {
    gap: 8px;
  }
  .workspace-example #panelHeader {
    padding: 6px 9px;
  }
  .workspace-browser-window {
    margin: 8px;
  }
  .workspace-browser-page {
    padding: 18px;
  }
  .workspace-browser-page > header span {
    display: none;
  }
  .workspace-browser-page > h2 {
    font-size: 24px;
  }
  .browser-address > span:first-child {
    display: none;
  }
  .workspace-browser-projects {
    gap: 7px;
  }
  .workspace-browser-projects > div {
    padding: 8px;
    font-size: 10px;
  }
}
@container (max-width:390px) {
  #fileTableHeader,
  .file-row {
    grid-template-columns: 22px 30px minmax(100px, 1fr);
  }
  #fileTableHeader > *:nth-child(n + 4),
  .file-row > *:nth-child(n + 4) {
    display: none;
  }
  #filePreview {
    padding: 40px 12px 12px;
  }
}
:root[data-theme="light"] {
  --faint: #616b66;
  --muted: #626b68;
  --accent: #0d7951;
}
.file-row .file-check {
  width: 13px;
  height: 13px;
  border: 1px solid #808783;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font: 10px/1 var(--sans);
  color: white;
  background: white;
}
.file-row .file-check.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.file-row .file-check.checked::after {
  content: "✓";
}
#filePreview .artifact {
  height: 100%;
  min-height: 220px;
  flex-shrink: 0;
}
#filePreview .artifact-view {
  display: block;
  min-height: 100px;
  flex: 1;
  overflow: auto;
}
#filePreview .artifact-view .message-code {
  max-height: none;
  height: auto;
}
#filePreview .artifact-row {
  flex-shrink: 0;
}
@container (max-width:700px) {
  #filePreview {
    min-height: 0;
  }
  #filePreview .artifact {
    flex-shrink: 0;
    min-height: 0;
  }
  #filePreview .artifact-view {
    min-height: 60px;
  }
  #filePreview .artifact-row {
    padding: 8px;
    gap: 7px;
  }
  #filePreview .artifact-row > button {
    min-height: 28px;
  }
}

#filePreview .artifact-view > img,
#filePreview .artifact-view > video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
}
#filePreview .artifact-view > iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  background: #faf8f5;
}