/* Room conversations share the new-room composer's width and controls. */
.ws-main[data-room-view="chat"] { overflow: visible; }
.ws-chat {
  --ws-chat-bubble-radius: 24px;
  --ws-chat-bubble-pad-y: 6px;
  --ws-chat-bubble-pad-x: 14px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(0 round 16px 0 0 16px);
}
.ws-chat[hidden] { display: none; }
html[data-embed="landing"] #workspace-main[data-room-view="chat"] #workspace-home-pill { top: 45px; visibility: visible; pointer-events: auto; }
html[data-embed="landing"] .ws-chat-header-blur { height: 104px; }
html[data-embed="landing"] .ws-chat-history { padding-top: 108px; scroll-padding-top: 108px; }
.ws-chat-header-blur {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0) 85%);
  pointer-events: none;
}
.ws-chat-header-blur-layer {
  --chat-blur: .5px;
  --chat-blur-mask: linear-gradient(to bottom, transparent 55%, #000 70%, #000 78%, transparent 90%);
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--chat-blur));
  backdrop-filter: blur(var(--chat-blur));
  -webkit-mask-image: var(--chat-blur-mask);
  mask-image: var(--chat-blur-mask);
}
.ws-chat-header-blur-layer:nth-child(2) { --chat-blur: 1px; --chat-blur-mask: linear-gradient(to bottom, transparent 40%, #000 55%, #000 63%, transparent 78%); }
.ws-chat-header-blur-layer:nth-child(3) { --chat-blur: 2px; --chat-blur-mask: linear-gradient(to bottom, transparent 25%, #000 40%, #000 48%, transparent 63%); }
.ws-chat-header-blur-layer:nth-child(4) { --chat-blur: 4px; --chat-blur-mask: linear-gradient(to bottom, transparent 10%, #000 25%, #000 33%, transparent 48%); }
.ws-chat-header-blur-layer:nth-child(5) { --chat-blur: 8px; --chat-blur-mask: linear-gradient(to bottom, #000 0%, #000 10%, #000 18%, transparent 33%); }
.ws-chat-header-blur-layer:nth-child(6) { --chat-blur: 16px; --chat-blur-mask: linear-gradient(to bottom, #000 0%, #000 5%, transparent 18%); }
.ws-chat-header-blur-layer:nth-child(7) { --chat-blur: 24px; --chat-blur-mask: linear-gradient(to bottom, #000 0%, transparent 8%); }
.ws-chat-history {
  min-width: 0;
  min-height: 0;
  padding: 76px 40px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 76px 24px;
}
.ws-chat-transcript {
  display: grid;
  align-content: start;
  gap: 16px;
  width: min(574px, calc(100% - 46px));
  min-width: 0;
  margin: 0 auto;
}
.ws-chat-message {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: end;
  gap: 4px;
  min-width: 0;
}
.ws-chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  color: var(--ink, #15110d);
  background: #eeece5;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  user-select: none;
}
.ws-chat-avatar::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgba(21, 17, 13, .1); pointer-events: none; }
.ws-chat-avatar-till { background: #fff; }
.ws-chat-avatar-pool { color: #006187; background: #b9e7f5; }
.ws-chat-avatar-lime { color: #426600; background: #bdee9d; }
.ws-chat-avatar-yolk { color: #7b5800; background: #fadc7b; }
.ws-chat-avatar-gum { color: #94285f; background: #feb2dd; }
.ws-chat-avatar > img { display: block; width: 23px; height: 23px; object-fit: contain; }
.ws-chat-avatar-till > img { width: 26px; height: 26px; transform: translate(-1.1px, .2px); }
.ws-chat-avatar-photo > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.45); transform-origin: 50% 35%; }
.ws-chat-message-content { min-width: 0; }
.ws-chat-bubbles { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.ws-chat-author {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-height: 18px;
  margin-bottom: 4px;
  padding-left: var(--ws-chat-bubble-pad-x);
  color: #78756f;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.ws-chat-time { color: #a19c92; font-size: 11px; line-height: 16px; }
.ws-chat-bubble {
  width: fit-content;
  max-width: min(100%, 460px);
  padding: var(--ws-chat-bubble-pad-y) var(--ws-chat-bubble-pad-x);
  border-radius: var(--ws-chat-bubble-radius);
  color: var(--ink, #15110d);
  background: radial-gradient(ellipse 140% 170% at 16% 0%, #f6f5f2 0%, #f4f3ef 64%, #f1efea 100%);
  box-shadow: inset 0 0 0 .5px rgba(21, 17, 13, .07);
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ws-chat-bubble > p { margin: 0; }
.ws-chat-bubble > p + p { margin-top: 8px; }
.ws-chat-bubble-files .ws-chat-attachments { margin-top: 0; }
.ws-chat-message-own { grid-template-columns: minmax(0, 1fr) 32px; }
.ws-chat-message-own > .ws-chat-avatar { grid-column: 2; grid-row: 1; }
.ws-chat-message-own > .ws-chat-message-content { grid-column: 1; grid-row: 1; }
.ws-chat-message-own .ws-chat-author { justify-content: flex-end; padding-right: var(--ws-chat-bubble-pad-x); padding-left: 0; }
.ws-chat-message-own .ws-chat-bubbles { justify-items: end; }
.ws-chat-message-own .ws-chat-bubble { background: radial-gradient(ellipse 140% 170% at 16% 0%, #fec714 0%, #fdc200 64%, #f9bd00 100%); }
.ws-chat-artifact {
  position: relative;
  isolation: isolate;
  width: min(280px, 100%);
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  border: 0;
  border-radius: var(--ws-chat-bubble-radius);
  color: var(--ink, #15110d);
  background-color: #f9f8f5;
  background-image: linear-gradient(rgba(249, 248, 245, .6), rgba(249, 248, 245, .6)), radial-gradient(ellipse 156.3738% 106.9095% at 76.5306% 100%, #f9f8f5 0%, #fbecc5 35.577%, #fde194 71.154%, #b9cbca 85.577%, #97c0e4 92.788%, #74b5ff 100%);
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.ws-chat-artifact-preview {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 154px;
  padding: 12px;
  overflow: hidden;
}
.ws-chat-artifact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/grain/card-grain-0.png") 0 0 / 128px 128px repeat;
  opacity: .025;
  pointer-events: none;
}
.ws-chat-artifact::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgba(21, 17, 13, .1); pointer-events: none; }
.ws-chat-document {
  display: grid;
  align-content: start;
  gap: 5px;
  width: 108px;
  height: 132px;
  padding: 13px 11px;
  border-radius: 3px;
  color: #322d26;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(134, 119, 96, .25);
  font-size: 5px;
  line-height: 7px;
}
.ws-chat-document-label { color: #8a8273; font-size: 4px; line-height: 5px; font-weight: 500; letter-spacing: .6px; }
.ws-chat-document-title { max-width: 72px; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: -.2px; }
.ws-chat-document-section { display: grid; gap: 5px; font-size: 5px; line-height: 7px; font-weight: 500; }
.ws-chat-document-section-title { font-weight: 500; }
.ws-chat-document-lines { display: grid; gap: 3px; }
.ws-chat-document-lines > span { height: 2px; border-radius: 1px; background: #eae7df; }
.ws-chat-document-lines > span:last-child { width: 72%; }
.ws-chat-document-checklist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ws-chat-document-checklist > li { display: flex; align-items: center; gap: 4px; }
.ws-chat-document-check { display: grid; flex: none; place-items: center; width: 4px; height: 4px; border-radius: 1px; box-shadow: 0 0 0 .5px #bfb8aa; }
.ws-chat-document-check.is-done { color: #fff; background: #8c9380; box-shadow: none; }
.ws-chat-document-check.is-done::after { content: ""; width: 1px; height: 2px; border: solid currentColor; border-width: 0 .5px .5px 0; transform: translateY(-.3px) rotate(45deg); }
.ws-chat-document-page { justify-self: end; color: #a19c92; font-size: 4px; line-height: 5px; }
.ws-chat-artifact-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 16px; border-radius: var(--ws-chat-bubble-radius); background: #fff; box-shadow: 0 0 0 .5px rgba(20, 5, 5, .07); }
.ws-chat-artifact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #78756f;
  background: #fff;
  box-shadow: 0 0 0 .5px rgba(21, 17, 13, .10);
}
.ws-chat-artifact-icon > img { display: block; width: 18px; height: 18px; object-fit: contain; }
.ws-chat-artifact-copy { display: grid; gap: 0; min-width: 0; line-height: 18px; }
.ws-chat-artifact-copy > strong, .ws-chat-artifact-title { font-weight: 500; }
.ws-chat-artifact-copy > p { margin: 0; }
.ws-chat-artifact-copy > span, .ws-chat-artifact-meta { color: #78756f; font-size: 12px; line-height: 16px; }
.ws-chat-composer { width: min(620px, calc(100% - 80px)); min-width: 0; margin: 0 auto 24px; }
.ws-chat-mention { font-size: 18px !important; line-height: 20px; }

@media (max-width: 760px) {
  .ws-chat { clip-path: inset(0 round 16px); }
  .ws-chat-history { padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
  .ws-chat-composer { width: calc(100% - 40px); max-width: 620px; margin-bottom: 16px; }
}
@media (max-width: 380px) {
  .ws-chat-history { padding-right: 16px; padding-left: 16px; }
  .ws-chat-composer { width: calc(100% - 32px); }
}